エフェクト画像
オンラインプレビュー上の画像と矛盾する場合は、Ctrl+を押すF5か、コメント領域にフィードバックを送信してください。
序文
マップ機能を実現するには、プロジェクトでArcGisを使用する必要があります。BaiduとGaodeが適用されない理由については、ArcGisの方がより正確な測位が可能になると言われています。初めてArcGISfor 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
}
}