ArcGis for javascript 切换底图、添加自定义部件！！！

效果图

在线预览 如果跟上图不一致请按 Ctrl + F5，或在评论区反馈。

前言

项目中需要使用 ArcGis 来实现地图功能，至于为什么不适用百度、高德，是因为据说 ArcGis 定位会准一点。初次接触 Arcgis for javascript，踩坑之路很舒服，写下来记录下，也希望能够帮到需要的人。

js

基础的入门代码大家可以直接粘贴 ArcGis for javascript 绘制线！！！ 中的例子，这里不做赘述。

import { loadModules } from 'esri-loader'

export default {
  name: 'ArcGisSwitchMap',
  data () {
    return {
      view: null,
      // 默认底图
      defaultBaseMap: 'osm'
    }
  },
  mounted () {
    loadModules(['esri/Map', 'esri/views/MapView'], { css: true })
      .then(([ArcGISMap, MapView]) => {
        // 配置地图的底图
        const map = new ArcGISMap({
          basemap: this.defaultBaseMap
        })
        // 地图视图对象
        this.view = new MapView({
          // 容器
          container: document.getElementById('map'),
          // 中心点
          center: [117.129359, 31.839979],
          map: map,
          // 缩放
          zoom: 14
        })

        // 将自定义的tool添加到视图中
        this.view.ui.add(this.switchMapBtn(map), 'top-left')
      })
  },
  methods: {
    // 地图切换按钮
    switchMapBtn (map) {
      const btn = document.createElement('img')
      btn.src = require('@/assets/img/switch-map.jpg')
      btn.style.width = '32px'
      btn.style.height = '32px'
      btn.style.cursor = 'pointer'
      btn.onclick = () => {
        this.defaultBaseMap = map.basemap = this.defaultBaseMap === 'osm' ? 'satellite' : 'osm'
      }
      return btn
    }
  },
  beforeDestroy () {
    this.view = null
  }
}

参考

• basemap 基本用法
• 将一个或多个HTML组件或小部件添加到UI