esri loader + arcgis api 实现小部件

template部分

<template>
      <el-row style="box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;">
        <el-button type="" icon="el-icon-plus" circle class="zoomin"></el-button>
        <el-button type="" icon="el-icon-minus" circle class="zoomout"></el-button>
        <el-button type="info" icon="el-icon-thumb" circle class="pan"></el-button>
        <el-button type="info" icon="el-icon-full-screen" circle class="fullmap"></el-button>
        <el-button type="" icon="el-icon-arrow-left" circle class="beforePic"></el-button>
        <el-button type="" icon="el-icon-arrow-right" circle class="afterPic"></el-button>
      </el-row>
</template>

js部分

import * as esriLoader from 'esri-loader'
// import $ from 'jquery'

export default {
  data() {
    return {
      xyText: '',
      extent_tag: [ ],
      value: '', // 选择的ID
      options_power: [{
        value: 'option-choose',
        label: '筛选'
      }, {
        value: 'option-clean',
        label: '清除'
      }, {
        value: 'option-visible',
        label: '显示'
      }, {
        value: 'setting-extent-xy',
        label: '设置坐标'
      }, {
        value: 'setting-extent',
        label: '设置范围'
      }],
      xy_zdy: {},
      extent_zdy: {},
      centerDialogVisible: false,
      centerDialogVisible_extent: false,
      checked: true
    }
  },
  // 我们需要在该组件装载之后做的事情都放在该方法里
  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 navToolbar = new Navigation(map)
          query('.zoomin').on('click', () => {
            navToolbar.activate(Navigation.ZOOM_IN)
          })
          query('.zoomout').on('click', () => {
            navToolbar.activate(Navigation.ZOOM_OUT)
          })
          query('.pan').on('click', () => {
            navToolbar.activate(Navigation.PAN)
          })
          query('.fullmap').on('click', () => {
            navToolbar.zoomToFullExtent()
          })
          query('.beforePic').on('click', () => {
            navToolbar.zoomToPrevExtent()
          })
          query('.afterPic').on('click', () => {
            navToolbar.zoomToNextExtent()
          })
  }
}

效果图