使用esri-loader在arcGIS地图标点

安装esri-loader

npm install --save esri-loader

默认使用的是4.17版本 https://developers.arcgis.com/javascript/latest/guide/esri-loader/

使用3.x版本

import { loadScript, loadCss, loadModules } from 'esri-loader'
mounted() {
    loadScript({ url: 'https://js.arcgis.com/3.28/' })
    loadCss('https://js.arcgis.com/3.28/esri/css/esri.css')
}

4.x版本实现根据经纬度在地图上标点

<div id="zhyMapId"></div>

<style lang="less" scoped>
@import url("https://js.arcgis.com/4.12/esri/css/main.css");
</style>

import * as esriLoader from "esri-loader";
export default {
  name: "",
  data() {
    return {
      coordinateLngLats: [],
      redMarkpic: require("../assets/image/redCoordinate.png"),
      markpic: require("../assets/image/coordinate.png")
    };
  },
  created() {
    // 这里模拟接口返回数据
    this.coordinateLngLats.push({coordinateLngLat: '116.197174,39.928944',zhy: 'abc'})
    this.createMap();
  },
  methods: {
		createMap: function() {
      let that = this;
      esriLoader
        .loadModules([
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/TileLayer",
          "esri/Graphic",
          "esri/widgets/Fullscreen",
          "esri/widgets/Zoom",
          "dojo/domReady!"
        ])
        .then(
          ([Map, MapView, TileLayer, Graphic, Fullscreen, Zoom]) => {
            var transportationLayer = new TileLayer({
              url:
              "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer",
              id: "streets"
            });
            const map = new Map({
              // 底图的图层
              layers: [transportationLayer]
            });
            const mapview = new MapView({
              map: map,
              container: "zhyMapId",
              zoom: 12,
              center: [116.19432, 39.911222]
            });
            //清空左上角组件
            mapview.ui.empty("top-left");
            mapview.ui.add(
              //在右上角添加全屏组件
              new Fullscreen({
                view: mapview
              }),
              "top-right"
            );
            //在右上角添加缩放组件
            mapview.ui.add(new Zoom({ view: mapview }), "top-right");
            //添加图片修饰点
            var lineSymbol = {
              type: "picture-marker",
              url: that.markpic,
              width: "32px",
              height: "32px"
            };
            var redLineSymbol = {
              type: "picture-marker",
              url: that.redMarkpic,
              width: "32px",
              height: "32px"
            }
            let zhy = [];
            that.coordinateLngLats.forEach(a => {
              let coordinateLngLat = a.coordinateLngLat;
              var point = {
                //创建点，并确定点的经度和纬度
                type: "point",
                x: coordinateLngLat.split(",")[0],
                y: coordinateLngLat.split(",")[1]
              };
              var template = {
                content:"<span>这里可以写弹出框的内容:"+a.zhy+"</span>"
              }
              // 这里模拟逻辑判断切换展示颜色
              var result = true;
              var polylineGraphic = new Graphic({
                //绘制点
                geometry: point,
                symbol: result ? redLineSymbol:lineSymbol,
                attributes: {},
                popupTemplate: template
              });
              zhy.push(polylineGraphic);
            });
            //将绘制的点加入地图图层
            mapview.graphics.addMany(zhy);
          },
          reason => {
            console.log(reason);
          }
        );
    }
  }
};