esri-loader加载 Arcgis 地图

html

<div id="mapDiv"></div>

加载地图

  import {
    loadModules
  } from "esri-loader";
   data() {
      return {
        // 地图类
        map: {},
        // 地图视图
        view: {},
        // esri返回值
        ArcGISApi: {},
        // esri组件
         modules: [
          "esri/config",
          "esri/Map",
          "esri/WebMap",
          "esri/widgets/Locate",
          "esri/widgets/Track",
          "esri/layers/TileLayer",
          "esri/views/MapView",
          "esri/widgets/Locate",
          "esri/widgets/Track",
          "esri/Graphic",
          "esri/widgets/Zoom",
          "esri/geometry/Polygon",
          "esri/geometry/SpatialReference",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer",
          "esri/layers/VectorTileLayer",
          "esri/PopupTemplate",
          "esri/widgets/Popup",
          "esri/widgets/Sketch",
          "esri/widgets/Legend",
          "esri/symbols/TextSymbol",
          "esri/symbols/Font",
          "dojo/domReady!",

        ],
        graphicsLayers: {
          testGraphicsLayer: null,
        },
      };
    },
     mounted() {
      loadModules(this.modules, {
        css: true
      }).then(this.initMap);
    },
    methods: {
     initMap(args) {
        for (let k in args) {
          let name = this.modules[k].split("/").pop();
          name = name.replace(name[0], name[0].toUpperCase());
          this.ArcGISApi[name] = args[k];
        }
        var TileLayer = new this.ArcGISApi.TileLayer({
          url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer",
          id: "streets",
        });
        this.map = new this.ArcGISApi.Map({
          // 底图的图层
          layers: [TileLayer],
        });
        this.view = new this.ArcGISApi.MapView({
          map: this.map,
          container: "mapDiv",
          zoom: 12,
          center: [116.19432, 39.911222],
        });
       }
   }

添加marker点及文字标注

 // marker样式
 let pictureMarkerSymbol = {
          type: 'picture-marker',
          url: require('@/assets/img/marker_1.png'),
          width: 8,
          height: 12,
          angle: 90
        }
  // 标注样式
 let textSymbol = {
          type: "text", // autocasts as new TextSymbol()
          color: "black",
          // haloColor: "black",
          // haloSize: "1px",
          text: "嫩江",
          xoffset: 16,
          yoffset: 6,
          font: { // autocasts as new Font()
            size: 10,
            family: "sans-serif",
            weight: "normal"
          }
        };
  const point = {
          //Create a point
          type: "point",
          longitude: 116.3,
          latitude: 39.9,
        };
 //绘画marker图形
const pointGraphic = new this.ArcGISApi.Graphic({
          geometry: point,
          symbol: pictureMarkerSymbol,
          attributes: {
            name: "测试",
            des: "这是一个marker点",
          },
        });
  //绘画标识图形
  const pointGraphicText = new this.ArcGISApi.Graphic({
          geometry: point,
          symbol: textSymbol,
        });
  // 创建图层
 let graphicsLayer = new this.ArcGISApi.GraphicsLayer({
          id: "001",
          title: "markerLayer",
          graphics: [pointGraphic]
        });
 //将图形添加到图层中
   // graphicsLayer.add(pointGraphicText);
   graphicsLayer.graphics.add(pointGraphicText);
 //将图层添加map中
   this.map.layers.add(graphicsLayer);

获得marker点点击事件

let that = this;
        this.view.on("click", function (event) {
          that.view.hitTest(event.screenPoint).then((responses) => {
            if (responses.results.length > 0) {
             // marker graphic的attributes 
              const data = responses.results[0].graphic.attributes;
              console.log("markerData", data);
            }
          });
        });

添加 删除图层

//使用数组在地图的构造函数中添加图层
let fl = new FeatureLayer(url);
let gl = new GraphicsLayer();
let map = new Map({
  layers: [fl, gl]
});

// 使用Add()添加图层
map.add(fl)

// 使用Add()添加图层
map.addMany([fl, gl]);

// 使用图层集合添加图层
map.layers.addMany([fl, gl]);

// 使用layers集合的push方法添加图层
map.layers.push(fl, gl);

// 删除某个图层
map.layers.remove(fl)

// 使用图层集合删除图层
map.layers.removeMany([fl, gl]);

测距

measurePolyline() {
      let _this = this;
      loadModules([
        "esri/Map",
        "esri/Color",
        "esri/symbols/SimpleLineSymbol",
        "esri/views/MapView",
        "esri/layers/TileLayer",
        "esri/views/draw/Draw",
        "esri/geometry/geometryEngine",
        "esri/geometry/Point",
        "esri/geometry/Polyline",
        "esri/geometry/Polygon",
        "esri/layers/GraphicsLayer",
        "esri/Graphic",
        "dojo/domReady!",
      ]).then(
        ([
          Map,
          Color,
          SimpleLineSymbol,
          MapView,
          TileLayer,
          Draw,
          GeometryEngine,
          Point,
          Polyline,
          Polygon,
          GraphicsLayer,
          Graphic,
        ]) => {
          let lineLayer = _this.map.findLayerById("lineLayer");

          if (!lineLayer) {
            lineLayer = new GraphicsLayer({
              id: "lineLayer",
            }); //绘制线图层
          }

          let draw = new Draw({
            //在view里创建draw
            view: _this.view,
          });
          let action = draw.create("polyline"); //创建画线实例
          _this.view.focus();
          action.on(
            [
              "vertex-add", // when a vertex is added  鼠标单击
              "vertex-remove", // when a vertex is removed 移除
              "cursor-update", // when the pointer moves 鼠标移动
              "draw-complete", // when the drawing is completed 鼠标双击
            ],
            function (evt) {
              createLine(evt.vertices);
            }
          );

          //画线和测距
          function createLine(vertices) {
            lineLayer.removeAll(); //清空上次绘制的线
            let symbol = {
              //点样式
              type: "simple-marker",
              color: [47, 79, 79],
              width: 0.5,
              size: 4,
              outline: {
                color: [0, 0, 0],
                width: 1,
              },
            };
            //将起点添加到地图
            let startGraphics = new Graphic({
              geometry: new Point({
                type: "point",
                x: vertices[0][0], //当底图是投影坐标系时用x,地理坐标系用longitude
                y: vertices[0][1], //当底图是投影坐标系时用y,地理坐标系用latitude
                spatialReference: _this.view.spatialReference, //和底图相同的坐标系
              }),
              symbol: symbol,
            });

            lineLayer.add(startGraphics);
            //将线添加到地图
            let lineGraphics = new Graphic({
              geometry: new Polyline({
                paths: vertices,
                spatialReference: _this.view.spatialReference,
              }),
              symbol: {
                //线样式
                type: "simple-line", // autocasts as new SimpleFillSymbol
                style: "dash",
                color: [176, 196, 222],
                width: 2,
              },
            });
            lineLayer.add(lineGraphics);

            //测距
            let linePath = []; //线段坐标集合
            let pointStart = []; //起点
            pointStart.push(vertices[0][0]);
            pointStart.push(vertices[0][1]);
            linePath.push(pointStart);

            for (let i = 1; i < vertices.length; i++) {
              //获得鼠标移动的坐标信息
              let point = {
                type: "point",
                x: vertices[i][0],
                y: vertices[i][1],
                spatialReference: _this.view.spatialReference,
              };
              //鼠标位置
              let mouseGraphics = new Graphic({
                geometry: point,
                symbol: symbol,
              });
              let xy = []; //鼠标当前经纬度
              xy.push(vertices[i][0]);
              xy.push(vertices[i][1]);
              linePath.push(xy);
              let line = new Polyline({
                //起点到当前鼠标的线段
                paths: linePath,
                spatialReference: _this.view.spatialReference,
              });
              let length = GeometryEngine.geodesicLength(
                line,
                "meters"
              ).toFixed(2); //测距
              let lengthText = lengthFormat(length); //单位转换
              let textSymbol = {
                //距离标注
                type: "text",
                color: "white",
                haloColor: "black",
                haloSize: "2px",
                text: lengthText,
                xoffset: "50px",
                yoffset: "-5px",
                font: {
                  size: 12,
                  family: "sans-serif",
                  weight: "bold",
                },
              };
              let textGraphics = new Graphic({
                //标注位置为鼠标位置
                geometry: point,
                symbol: textSymbol,
              });
              //将标注和鼠标位置添加到地图
              lineLayer.addMany([textGraphics, mouseGraphics]);

              _this.map.layers.add(lineLayer);
            }
          }

          //长度单位转换
          function lengthFormat(length) {
            let lengthText;
            if (length < 2000) {
              return (lengthText = length + "米");
            } else {
              length = (length / 1000).toFixed(2);
              return (lengthText = length + "千米");
            }
          }
        }
      );
    },
//优化
measurePolyline() {
      let _this = this;
      loadModules([
        "esri/views/2d/draw/Draw",
        "esri/geometry/geometryEngine",
        "esri/geometry/Point",
        "esri/geometry/Polyline",
        "esri/layers/GraphicsLayer",
        "esri/Graphic",
        "dojo/domReady!",
      ]).then(
        ([Draw, GeometryEngine, Point, Polyline, GraphicsLayer, Graphic]) => {
          let lineLayer = _this.map.findLayerById("lineLayer");
          if (!lineLayer) {
            lineLayer = new GraphicsLayer({
              id: "lineLayer",
            }); //绘制线图层
          }
          _this.map.layers.add(lineLayer);
          let draw = new Draw({
            //在view里创建draw
            view: _this.view,
          });
          let action = draw.create("polyline"); //创建画线实例
          _this.view.focus();
          action.on(
            [
              "vertex-add",
              "vertex-remove",
              "cursor-update",
              "redo",
              "undo",
              "draw-complete",
            ],
            createPolyline
          );

          function createPolyline(event) {
            var vertices = event.vertices;
            var symbol = {
              type: "simple-marker",
              color: [255, 255, 255],
              size: 4,
              outline: {
                color: [255, 0, 0],
                width: 1.5, // points
              },
            };

            lineLayer.removeAll();
            var graphics = new Graphic({
              geometry: new Polyline({
                paths: vertices,
                spatialReference: _this.view.spatialReference,
              }),

              symbol: {
                type: "simple-line", // autocasts as new SimpleFillSymbol
                color: [255, 116, 3],
                width: 2,
                cap: "round",
                join: "round",
              },
            });

            lineLayer.add(graphics);

            var firstTextSymbol = {
              type: "text",
              color: "blue",
              haloColor: "black",
              haloSize: "10px",
              text: "0.00千米",
              xoffset: "10px",
              yoffset: "10px",
              font: {
                size: 12,
                family: "sans-serif",
                weight: "bold",
              },
            };

            var firstPoint = {
              type: "point",
              x: vertices[0][0],
              y: vertices[0][1],
              spatialReference: _this.view.spatialReference, //和底图相同的坐标系
            };
            var firstTextGraphics = new Graphic({
              geometry: firstPoint,
              symbol: firstTextSymbol,
            });
            var firstGraphics = new Graphic({
              geometry: firstPoint,
              symbol: symbol,
            });

            lineLayer.addMany([firstTextGraphics, firstGraphics]);

            let linePath = []; //线段坐标集合
            let pointStart = []; //起点
            pointStart.push(vertices[0][0]);
            pointStart.push(vertices[0][1]);
            linePath.push(pointStart);

            for (let i = 1; i < vertices.length; i++) {
              var point = {
                type: "point",
                x: vertices[i][0],
                y: vertices[i][1],
                spatialReference: _this.view.spatialReference, //和底图相同的坐标系
              };

              let xy = []; //鼠标当前经纬度
              xy.push(vertices[i][0]);
              xy.push(vertices[i][1]);
              linePath.push(xy);

              var line = new Polyline({
                hasZ: false,
                hasM: true,
                paths: linePath,
                spatialReference: _this.view.spatialReference,
              });

              let length = GeometryEngine.geodesicLength(line, "meters");
              let lengthText = lengthFormat(length); //单位转换
              var textSymbol = {
                type: "text",
                color: "blue",
                haloColor: "black",
                haloSize: "5px",
                text: lengthText,
                xoffset: "20px",
                yoffset: "20px",
                font: {
                  size: 12,
                  family: "sans-serif",
                  weight: "bold",
                },
              };

              var textGraphics = new Graphic({
                geometry: point,
                symbol: textSymbol,
              });

              var Graphics = new Graphic({
                geometry: point,
                symbol: symbol,
              });
              //将标注和鼠标位置添加到地图
              lineLayer.addMany([textGraphics, Graphics]);
            }

            //长度单位转换
            function lengthFormat(length) {
              let lengthText;
              if (length < 2000) {
                length = length.toFixed(2);
                return (lengthText = length + "米");
              } else {
                length = (length / 1000).toFixed(2);
                return (lengthText = length + "千米");
              }
            }
          }
        }
      );
    },

测面

measurePolygon() {
      let _this = this;
      loadModules([
        "esri/Map",
        "esri/Color",
        "esri/symbols/SimpleLineSymbol",
        "esri/views/MapView",
        "esri/layers/TileLayer",
        "esri/views/draw/Draw",
        "esri/geometry/geometryEngine",
        "esri/geometry/Point",
        "esri/geometry/Polyline",
        "esri/geometry/Polygon",
        "esri/layers/GraphicsLayer",
        "esri/Graphic",
        "dojo/domReady!",
      ]).then(
        ([
          Map,
          Color,
          SimpleLineSymbol,
          MapView,
          TileLayer,
          Draw,
          GeometryEngine,
          Point,
          Polyline,
          Polygon,
          GraphicsLayer,
          Graphic,
        ]) => {
          let polygonLayer = _this.map.findLayerById("polygonLayer"); //绘制面图层
          if (!polygonLayer) {
            polygonLayer = new GraphicsLayer({
              id: "polygonLayer",
            }); //绘制线图层
          }

          //画面按钮事件
          let draw = new Draw({
            //在view里创建draw
            view: _this.view,
          });
          let action = draw.create("polygon"); //创建画线实例
          _this.view.focus();
          action.on(
            [
              "vertex-add", // when a vertex is added  鼠标单击
              "vertex-remove", // when a vertex is removed 移除
              "cursor-update", // when the pointer moves 鼠标移动
              "draw-complete", // when the drawing is completed 鼠标双击
            ],
            function (evt) {
              createPolygon(evt.vertices);
            }
          );
          // };

          //画面和测量面积
          function createPolygon(vertices) {
            polygonLayer.removeAll();
            let symbol = {
              //点样式
              type: "simple-marker",
              color: [47, 79, 79],
              width: 0.5,
              size: 4,
              outline: {
                color: [0, 0, 0],
                width: 1,
              },
            };
            let fillSymbol = {
              //面样式
              type: "simple-fill", // autocasts as new SimpleFillSymbol()
              color: [3, 255, 240, 0.1],
              outline: {
                // autocasts as new SimpleLineSymbol()
                color: [255, 116, 3],
                width: 2,
              },
            };

            let polygon = new Polygon({
              rings: vertices,
              spatialReference: _this.view.spatialReference,
            });

            let polygonGraphics = new Graphic({
              geometry: polygon,
              symbol: fillSymbol,
            });
            polygonLayer.add(polygonGraphics);
            let area = GeometryEngine.geodesicArea(polygon, "square-meters");
            let areaText = areaFormat(area);
            let center = polygon.centroid;
            let pointCenter = {
              type: "point",
              longitude: center.longitude,
              latitude: center.latitude,
            };
            let textSymbol = {
              //面积标注
              type: "text",
              color: "white",
              haloColor: "black",
              haloSize: "2px",
              text: areaText,
              //xoffset: '50px',
              //yoffset: '-5px',
              font: {
                size: 12,
                family: "sans-serif",
                weight: "bold",
              },
            };
            let textGraphics = new Graphic({
              //标注为面中心位置
              geometry: pointCenter,
              symbol: textSymbol,
            });
            polygonLayer.add(textGraphics);

            for (let i = 0; i < vertices.length; i++) {
              let point = {
                type: "point",
                x: vertices[i][0],
                y: vertices[i][1],
                spatialReference: _this.view.spatialReference,
              };

              let pointGraphics = new Graphic({
                geometry: point,
                symbol: symbol,
              });
              polygonLayer.add(pointGraphics);
            }
            _this.map.layers.add(polygonLayer);
          }

          //面积单位转换
          function areaFormat(area) {
            let areaText;
            if (area < 2000) {
              area = area.toFixed(2);
              return (areaText = area + "平方米");
            } else {
              area = (area / 10000).toFixed(2);
              return (areaText = area + "平方千米");
            }
          }
        }
      );
    },

放大 缩小

  zoomOut() {
      this.view.zoom++;
    },

    zoomIn() {
      this.view.zoom--;
    },

禁止拖拽

// 初始化属性
data() {
    return {
	    dragFlag: true,
	    }
    }

// 监听拖拽
  this.view.on("drag", function (event) {
     if (!that.dragFlag) {
       event.stopPropagation();
     }
   });

复位

// 2D视图添加
  extent: new this.ArcGISApi.Extent({
          xmin: 140.3,
          xmax: 110.47,
          ymin: 60.32,
          ymax: 28.14,
          spatialReference: new this.ArcGISApi.SpatialReference({ wkid: 4326 }),
        }),
 //完整
 this.view = new this.ArcGISApi.MapView({
        map: this.map,
        container: "mapDiv",
        zoom: 12,
        extent: new this.ArcGISApi.Extent({
          xmin: 140.3,
          xmax: 110.47,
          ymin: 60.32,
          ymax: 28.14,
          spatialReference: new this.ArcGISApi.SpatialReference({ wkid: 4326 }),
        }),
        center: [116.19432, 39.911222],
      });
// 复位
resetSite() {
      let _this = this;
      loadModules([
        "esri/geometry/Extent",
        "esri/geometry/SpatialReference",
        "dojo/domReady!",
      ]).then(([Extent, SpatialReference]) => {
        var ext = new Extent({
          xmin: 140.3,
          xmax: 110.47,
          ymin: 60.32,
          ymax: 28.14,
          spatialReference: new SpatialReference({ wkid: 4326 }),
        });
        _this.view.extent = ext;
      });
    },