vue 高德地图 3D 自定义地图展示

一、vue如何引入高德地图

npm install vue-amap --save

// main.js文件中
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '**这里用您申请的key**',
  // 插件库
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  uiVersion: '1.0.11', // ui库版本，不配置不加载,
  v: '1.4.4'
});

二、展示3d地图

amap-3D-效果图

// 拷贝即可使用
<template>
  <div class="contains">
    <h3 class="title">{{ msg }}</h3>
    <div id="amapall" class="all-amap"></div>
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
  data() {
    return {
      msg: "vue-amap 3D 展示",
      map: {},
    };
  },
  mounted() {
    this.initAmap();
  },
  methods: {
    initAmap() {
      lazyAMapApiLoaderInstance.load().then(() => {
        this.map = new AMap.Map("amapall", {
          center: new AMap.LngLat(121.59996, 31.197646),
          pitch: 50, // 地图俯仰角度，有效范围 0 度- 83 度
          zoom: 20,
          rotation: -15,
          viewMode: "3D", //开启3D视图,默认为关闭
          buildingAnimation: true, //楼块出现是否带动画
          expandZoomRange: true,
          zooms: [3, 20],
          features: ["bg", "road", "building","point"],// 这里指想展示什么数据就设置，目前只支持这四种，下图给出了对应字段的意思
        });
      });
    },
  },
};
</script>

<style scoped>
.contains {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: aqua;
  flex-direction: column;
}
.all-amap {
  top: 70px;
  position: absolute;
  width: 100%;
  bottom: 0;
}
</style>

features

三、自定义地图的样式

// 核心代码
var map = new AMap.Map('containerID',{
    mapStyle: 'amap://styles/XX', // 设置地图的显示样式 ，"XX" 可以是自定义的地图ID也可以是官方的样式。
});

1.使用官方提供的地图样式

// 例如我想显示上图右上角中的"幻影黑(dark)" 样式。代码👇
var map = new AMap.Map('containerID',{
    // mapStyle: 'amap://styles/XX',
    mapStyle: 'amap://styles/dark', // 只需要将‘XX’换成对应的样式名称即可
});

2.使用自己的自定义地图

2-1、如何制作地图

1.进入自定义地图模板
2.选择一款你想修改的地图如下图

3.点击跳转页面后你会发现如下页面的几个醒目的字

意思是说您申请的key值必须是"Web端（JS API）"否则不会生效 如下图所示选择的服务平台

4.修改地图的样式

比如修改陆地的颜色 👇

其他色值的修改方式也一样

5.发布地图自定义样式（如果不发布是用不了的）

发布完成后返回

6.使用自定义样式

1.点击使用与分享

2.复制样式Id

// 代码 👇
var map = new AMap.Map('containerID',{
    // mapStyle: 'amap://styles/XX',
    mapStyle: 'amap://styles/e5bfa8612b85f1be', // 只需要将‘XX’换成6中的样式id即可，这里的id我删除了部分字段所以用不了，需要您自己申请。
});

三、自定义信息弹窗

官网讲解