高德地图实现来回切换卫星图

余人于RenYu

已于 2023-07-03 11:16:10 修改

阅读量2.2k

点赞数 2

分类专栏： vue 高德地图文章标签： vue.js 前端 javascript

于 2023-06-27 17:37:07 首次发布

本文链接：https://blog.csdn.net/Y_Cfeng/article/details/131421285

版权

vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

高德地图

2 篇文章 0 订阅

订阅专栏

高德地图默认初始化地图展示标准3d地图（这里添加蒙层）

    initMap () {
      this.mapObj = new AMap.Map('mapContainer', {
        features: ['bg', 'road', 'point', 'building'],
        showLabel: true,
        rotateEnable: false,
        pitchEnable: false,
        zoom: 17,
        pitch: 65,
        rotation: 45,
        viewMode: '3D', // 开启3D视图,默认为关闭
        zooms: [2, 20],
        center: [120.582112, 29.997117],
        // mapStyle: 'amap://styles/grey',
      });
    },

![在这里插入图片描述](https://img-blog.csdnimg.cn/67d0c6467bfe428285104a335ca4b749.png

希望通过点击切换卫星地图展示—点击事件

    changeMapStyle() {
      if (this.styleType === 'default') {
        this.initLoadMap();
      } else {
        this.layers.hide();
        this.styleType = 'default';
      }
      this.mapObj.remove(this.markerList);
      this.setMarker();
    },

在这里插入图片描述
关键代码 — 思路：通过卫星图层的展示隐藏功能实现

    initLoadMap() {
      this.styleType = 'Satellite';
      // 切换地图样式
      this.layers = new AMap.TileLayer.Satellite({ map: this.mapObj });
      this.layers && this.layers.show();
    },