Custom widgets with Vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
  window.dojoConfig = {
    packages: [
      {
        name: "vue",
        location: "https://unpkg.com/vue/dist/",
        main: "vue"
      }
    ]
  };
</script>

<script src="https://js.arcgis.com/4.20/"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
const map = new Map({
  basemap: "hybrid",
  ground: "world-elevation"
});

const view = new SceneView({
  container: "viewDiv",
  map: map,
  camera: {
    position: [7.654, 45.919, 5184],
    tilt: 80
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Vue.component("camera-info", {
  props: ["camera"],
  template: [
    "<div>",
    "<h2>Camera Details</h2>",
    "<p><strong>Heading</strong>: {{ camera.heading.toFixed(3) }}</p>",
    "<p><strong>Tilt</strong>: {{ camera.tilt.toFixed(3) }}</p>",
    "<p><strong>Latitude</strong>: {{ camera.position.latitude.toFixed(3) }}</p>",
    "<p><strong>Longitude</strong>: {{ camera.position.longitude.toFixed(3) }}</p>",
    "<button v-on:click='reset'>Reset Camera</button>",
    "</div>"
  ].join(""),
  methods: {
    reset: function() {
      var camera = this.camera.clone();
      camera.set({
        position: [7.654, 45.919, 5184],
        tilt: 80
      });
      view.goTo(camera);
    }
  }
});

1
2
3
<div id="info" class="esri-widget">
  <camera-info v-bind:camera="camera"></camera-info>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
view.when(function() {
  const info = new Vue({
    el: "#info",
    data: {
      camera: view.camera
    }
  });
  view.ui.add(info.$el, "top-right");
  watchUtils.watch(view, "camera", function() {
    info.camera = view.camera;
  });
});