Vue + ArcGIS api 实时同步范围+坐标

修改中心坐标需要是地理坐标系

功能	ID	函数
同步范围	#extent-change	showExtent
同步坐标	‘#MouseMove’	showCoordinates

变量	含义
extent_tag	绑定范围的显示标签
xyText	绑定坐标的显示标签
extent_zdy	修改范围的值
xy_zdy	修改XY的值

  mounted() {
    esriLoader.setDefaultOptions({ version: '3.28' })
    this.createMap()
  },
  methods: {
    createMap: function() {
      esriLoader.loadModules(['esri/map',
        'esri/geometry/Extent',
        'esri/layers/ArcGISDynamicMapServiceLayer',
        'dojo/query',
        'esri/toolbars/navigation',
        'esri/geometry/Point',
        'dojo/domReady!'], { css: true })
        .then(([Map, Extent, ArcGISDynamicMapServiceLayer, query, Navigation, Point]) => {

          var tjUAVurl = 'http://localhost:6080/arcgis/rest/services/Eco/BJ_td_gd_nyd/MapServer'

          var map = new Map('map', {
            extent: new Extent({
              xmin: 114.4134760856628,
              ymin: 40.13100080490112,
              xmax: 118.36547288894677,
              ymax: 41.64383821487438,
              spatialReference: {
                wkid: 4326
              }
            }),
            logo: false
          })

          var tjUAVLayer = new ArcGISDynamicMapServiceLayer(tjUAVurl)
          map.addLayer(tjUAVLayer)

          // *************************************************************************************** //

          var that = this

          function showExtent() {
            // console.log(that.extent_tag)
            var extent = map.extent
            var s = []
            s[0] = 'XMin:' + extent.xmin
            s[1] = 'YMin:' + extent.ymin
            s[2] = 'XMax:' + extent.xmax
            s[3] = 'YMax:' + extent.ymax
            that.extent_tag = s
            that.extent_zdy = map.extent
          }

          function showCoordinates(event) {
            var mp = event.mapPoint
            that.xy_zdy = mp
            that.xyText = mp.x + ',' + mp.y
          }

          showExtent()

          map.on('extent-change', showExtent)
          map.on('MouseMove', showCoordinates)
        })
    }
  }