vue-Amap怎么显示卫星图层

本文介绍下vue-amap的使用以及本人遇到的一些问题。

引入等准备工作请移步至以下文档，暂不做描述

vue-amap的中文文档

一、加载卫星图层

有三种方式，推荐第二种

1、使用addControl给地图添加一个图层切换控制

首先在 initAMapApiLoader里的plugin中要引入MapType插件

VueAMap.initAMapApiLoader({
  key: '自己的key',
  plugin: [
    "AMap.Autocomplete", // 输入提示插件
    "AMap.PlaceSearch", // POI搜索插件
    "AMap.Scale", // 右下角缩略图插件 比例尺
    "AMap.OverView", // 地图鹰眼插件
    "AMap.ToolBar", // 地图工具条
    "AMap.MapType", // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    "AMap.PolyEditor", // 编辑 折线多，边形
    "AMap.CircleEditor", // 圆形编辑器插件
    "AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置
    "AMap.ControlBar"
  ],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.15',
});

 然后再组件内添加一个addControl，此处的$$getInstance()是官方提供的一个根据ref来获取地图实例的方法

this.$refs.centerMap.$$getInstance().addControl(
        new AMap.MapType({
          defaultType: 1, //0代表默认，1代表卫星
          showTraffic: false, // 路网
          showRoad: true, // 路况
        })
      );

最后就是得使用css来将右上角的图层控制给隐藏掉，此处使用的是opacity而不是dispaly:none，是因为dispaly:none无法隐藏地图的logo和版本号

// 去掉高德地图logo、版本号、去掉地图的图层切换控制
.amap-logo,
.amap-copyright,
.amap-maptypecontrol {
  opacity: 0;
}

2、和第一种一样，也是添加图层切换控制，只不过是向el-amap组件内部传配置plugin来实现

plugin: [
        {
          pName: "MapType",
          defaultType: 1, //0代表默认，1代表卫星
          showTraffic: false, // 路网
          showRoad: true, // 路况
        },
      ],

3、使用TileLayer.Satellite方法

注意：这种写法虽然比上面的代码量少，但有个注意点，地图此时应该是有两个图层的，一个默认的还有一个是你手动加上去的卫星图层。实际上对显示没啥影响，但我个人觉得这样会不会拖慢了地图的渲染呢（个人看法）

const tileLayer = new AMap.TileLayer.Satellite({
        map: this.$refs.centerMap.$$getInstance(),
      });
      tileLayer.show();

二、AMap实例有时会无法获取