vue arcgis 图片切片底图 当前定位

vue实现arcgis在网上的资料比较少，在此整理并分享一下代码，希望新手可以很好的入门。
实现的内容：1 通过mapserver获取图片切片展示底图 2 利用高德获取当前浏览器（PC端）显示当前定位

步骤

1.安装vue的arcgis插件 esri-loader

npm install esri-loader

2、引入esri loader

import { loadModules, loadCss } from "esri-loader";

3、初始化地图

利用网上的图片切片接口 "map.geoq.cn/ArcGIS/rest…"
具体项目可以根据后端返回的图片切片接口替换
注意：load的模块顺序要与使用的类名顺序一致

  mounted() {
       loadModules([
      "esri/views/MapView",
      "esri/Map",
      "esri/layers/TileLayer",
      "esri/layers/GraphicsLayer",
      "esri/widgets/Fullscreen",
      "esri/widgets/Zoom",
      "esri/widgets/ScaleBar",
      "esri/widgets/Home",
      "dojo/domReady!",
    ])
      .then(
        ([
          MapView,
          Map,
          TileLayer,
          GraphicsLayer,
          Fullscreen,
          Zoom,
          ScaleBar,
          Home,
        ]) => {
          const tilelayer = new TileLayer({
            url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer",
          });
          this.map = new Map({});
          this.map.add(tilelayer);
          this.graphicsLayer = new GraphicsLayer();
          this.map.add(this.graphicsLayer);
          this.view = new MapView({
            map: this.map,
            container: "viewDiv",
            zoom: 10,
            center: [120.619585, 31.299379],
            qualityProfile: "high",
          });
          //---组件配置
          this.view.ui.empty("top-left"); //清除左上角缩放组件
          // 1、比例尺添加
          this.view.ui.add(
            new ScaleBar({
              view: this.view,
              unit: "metric", // The scale bar displays both metric and non-metric units.
            }),
            {
              position: "bottom-left",
            }
          );
          // 2、home键
          this.view.ui.add(
            new Home({
              view: this.view,
              container: "home",
            }),
            "top-right"
          );
          // 3、全屏键
          this.view.ui.add(
            new Fullscreen({
              view: this.view,
            }),
            "top-right"
          );
          // 4、缩放键
          this.view.ui.add(new Zoom({ view: this.view }), "top-right");
        }
      )
      .catch((err) => {
        console.error(err);
      });
  }

初始化后 页面如下，当前center坐标设置的是苏州市

4、获取当前定位并打点

找了很久没有arcgisg根据当前浏览器或者ip的信息获取当前定位的方法，因为借用了第三方高德地图的api来实现。 index.html引用高德js代码
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=自己的key"></script>

methods:{
  async getLocation() {
      this.locationPoint = await getLocationFunction()
  },
  getLocationFunction() {
  return new Promise((resolve, reject) => {
    window.AMap.plugin('AMap.Geolocation', () => {
      var geolocation = new window.AMap.Geolocation({
        enableHighAccuracy: true, //高精度定位
        timeout: 1000, //超时时间 
      })

      geolocation.getCurrentPosition(
        (status, result) => {
          if (result && result.position) {
            resolve(result.position)
          }
        },
        () => reject()
      )
    })
  })
}
}

5、添加location 点坐标

   setLocationPoint() {
      loadModules([
        "esri/geometry/Point",
        "esri/Graphic",
        "dojo/domReady!",
      ]).then(([Point, Graphic]) => {
        //--坐标点
        const symbol = {
          type: "picture-marker",
          url: require("@/assets/images/point.png"), //自定义图片
          width: "20px",
          height: "25px",
        };
        var point = new Point({
          type: "point",
          longitude: this.locationPoint[0],
          latitude: this.locationPoint[1],
        });
        const pointGraphic = new Graphic({
          geometry: point,
          symbol,
        });
        this.graphicsLayer.add(pointGraphic);
        //更新中心点
        this.view.center = this.locationPoint;
      });
    },

最终显示结果