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
  }
}

参考

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

帝尊菜鸟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值