效果图
在线预览 如果跟上图不一致请按 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
}
}