Vue + ArcGIS api 设置范围+坐标

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

功能	ID	函数
控制修改中心坐标的Dialog的显示	#setting-extent-xy	dialogSetXYVisible
实现修改中心坐标	‘#XYDialogOK’	btnSettingXY
控制修改范围的Dialog的显示	#setting-extent	dialogSetExtentVisible
实现修改范围	‘#extentDialogOK’	btnSettingExtent

变量	含义
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 dialogSetXYVisible() {
            that.centerDialogVisible = true
          }

          function btnSettingXY() {
            if (map.extent.spatialReference.wkid === 4326) {
              console.log(map.extent.spatialReference.wkid)
              var point = new Point(that.xy_zdy.x, that.xy_zdy.y)
              map.centerAt(point)
              that.opensuccess()
            } else {
              that.openWarning()
            }
          }
          function dialogSetExtentVisible() {
            that.centerDialogVisible_extent = true
          }

          function btnSettingExtent() {
            map.setExtent(that.extent_zdy)
            that.opensuccess()
          }

          // *************************************************************************************** //
          
          query('#setting-extent-xy').on('click', dialogSetXYVisible)
          query('#XYDialogOK').on('click', btnSettingXY)
          query('#setting-extent').on('click', dialogSetExtentVisible)
          query('#extentDialogOK').on('click', btnSettingExtent)
        })
    },

    opensuccess() {
      this.$message({
        message: 'success',
        type: 'success'
      })
    },
    openWarning() {
      this.$message({
        message: '非地理坐标系',
        type: 'warning'
      })
    }

  }