WebMap.vue

Arcgis Vue.js example

<template>
  <div></div>
</template>

<script>
/**
 * Docs that help here;
 * 
 * https://developers.arcgis.com/javascript/latest/api-reference/esri-views-draw-Draw.html
 * https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
 * https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Polygon.html
 * 
 */
import { loadModules } from "esri-loader";

export default {
  name: "web-map",
  props: ["transportLayer", "graphicsLayer", "reDraw"],
  data() {
    return {
      EsriMap: null,
      Draw: null,
      Graphic: null
    };
  },
  watch: {
    transportLayer(newVal) {
      this.toggleTransport();
      return newVal;
    },
    graphicsLayer(newVal) {
      this.toggleGraphics();
      return newVal;
    },
    reDraw(newVal) {
      this.draw();
      return newVal;
    }
  },
  methods: {
    toggleTransport() {
      if (this.transportLayer) {
        this.Esri.map.layers.add(this.Esri.layers[0]);
      } else {
        this.Esri.map.layers.remove(this.Esri.layers[0]);
      }
    },
    toggleGraphics() {
      console.log('toggle gl')
      if (this.graphicsLayer) {
        this.Esri.map.layers.add(this.Esri.layers[1]);
      } else {
        this.Esri.map.layers.remove(this.Esri.layers[1]);
      }
    },
    draw() {
      const Draw = this.Draw;
      const Graphic = this.Grapic;
      const geometryEngine = this.geometryEngine;

      let view = this.view;
      view.graphics.removeAll();
      // creates and returns an instance of PolyLineDrawAction
      
      let draw = new Draw({
        view: view
      });
      const action = draw.create("polygon");
      // focus the view to activate keyboard shortcuts for sketching
      view.focus();
      // listen polylineDrawAction events to give immediate visual feedback
      // to users as the line is being drawn on the view.
      action.on(
        [
          "vertex-add",
          "vertex-remove",
          "cursor-update",
          "redo",
          "undo",
          "draw-complete"
        ],
        updateVertices
      );

      // Checks if the last vertex is making the line intersect itself.
      function updateVertices(event) {
        // create a polyline from returned vertices
        if (event.vertices.length > 1) {
          const result = createGraphic(event);          
        }
      }

      // create a new graphic presenting the polyline that is being drawn on the view
      function createGraphic(event) {
        const vertices = event.vertices;
        
        view.graphics.removeAll();

        // a graphic representing the polyline that is being drawn
        const graphic = new Graphic({
          geometry: {
            type: "polygon",
            rings: vertices,
            spatialReference: view.spatialReference
          },
          symbol: {
            type: "simple-fill",
            color: [227, 139, 79, 0.8],  // orange, opacity 80%
            outline: {
              color: [4, 90, 141],
              width: 1
            }
          }
        });

        view.graphics.add(graphic);
      }

    }
  },
  mounted() {
    // lazy load the required ArcGIS API for JavaScript modules and CSS
    loadModules([
      "esri/Map", 
      "esri/views/MapView", 
      "esri/layers/TileLayer", 
      "esri/Graphic", 
      "esri/layers/GraphicsLayer", 
      "esri/geometry/Polygon",
      "esri/views/draw/Draw",
      "esri/geometry/geometryEngine"], {
      css: true
    }).then(([ArcGISMap, MapView, TileLayer, Graphic, GraphicsLayer, Polygon, Draw, geometryEngine]) => {
      
      const map = new ArcGISMap({
        basemap: "topo-vector"
      });

      this.Draw = Draw;
      this.Grapic = Graphic;
      this.geometryEngine = geometryEngine;

      const graphicsLayer = new GraphicsLayer();
      const transportationLayer = new TileLayer({
        url:
          "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
        id: "streets",
        opacity: 0.7
      });
      
      function endPolygonHandler(evt) {
        evt.stopPropagation(); // prevent zooming of map.
        console.log('double click')
      }

      function myClickHandler(evt) {
        console.log('click');
      }

      this.Esri = {
        map: map,
        view: MapView,
        // tl: TileLayer
        layers: [transportationLayer, graphicsLayer]
      };

      this.view = new MapView({
        container: this.$el,
        map: map,
        center: [6.09444, 52.5125],
        zoom: 12
      });

      this.view.on("click", myClickHandler);
      // this.view.on("double-click", endPolygonHandler);
      

      
    });
  },
  beforeDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.container = null;
    }
  }
};
</script>

<style scoped>
div {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>