高德地图JS API，数据可视化，地图3D效果

shsyzhzhgn

已于 2023-08-13 15:45:23 修改

阅读量927

点赞数

分类专栏：高德地图JS 文章标签： javascript 前端数据可视化 vue.js

于 2023-08-13 15:37:57 首次发布

本文链接：https://blog.csdn.net/shsyzhzhgn/article/details/132260010

版权

高德地图JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

地图侧边高度，3D效果如下：

Vue3代码：

<template>
  <div id="amapcontainer"></div>
</template>

//<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";
import { onMounted } from "vue";
window._AMapSecurityConfig = {
  securityJsCode: "申请的安全密钥", 
};
var map = shallowRef(null);
var mapZoom = ref(4.6);
var initAMap = () => {
  var opts = {
    subdistrict: 0,
    extensions: "all",
    level: "city",
  };
  AMapLoader.load({
    key: "MyKey", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.Marker",
      "AMap.DistrictSearch",
      "AMap.Object3DLayer",
      "AMap.Object3D",
      "AMap.Icon",
      "AMap.MassMarks",
      // "AMap.createDefaultLayer",
    ], // 需要使用的的插件列表
  })
    .then((AMap) => {
      console.log(mapZoom.value);
      var district = new AMap.DistrictSearch(opts);

      district.search("中华人民共和国", function (status, result) {
        var bounds = result.districtList[0].boundaries;
        var mask = [];
        for (var i = 0; i < bounds.length; i += 1) {
          mask.push([bounds[i]]);
        }
        map = new AMap.Map("amapcontainer", {
          mask: mask,
          center: [102.602725, 34.076636],
          disableSocket: true,
          viewMode: "3D",
          showLabel: false,
          labelzIndex: 130,
          pitch: 30,
          zoom: mapZoom.value,
          zoomEnable: false, // 地图是否可缩放，默认值为true
          dragEnable: false, // 地图是否可通过鼠标拖拽平移，默认为true
          doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
          mapStyle: "amap://styles/55f37ba6680ac192dd377715cfeeeb1f",
        });
        //添加高度面
        var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
        map.add(object3Dlayer);
        var height = -1300000;
        var color = "#0088ffcc"; //rgba
        var wall = new AMap.Object3D.Wall({
          path: bounds,
          height: height,
          color: color,
        });
        wall.transparent = true;
        object3Dlayer.add(wall);
        //添加国家边界描边
        for (var i = 0; i < bounds.length; i += 1) {
          new AMap.Polyline({
            path: bounds[i],
            strokeColor: "#8EECFF",
            strokeWeight: 4,
            map: map,
          });
        }

      });
    })
    .catch((e) => {
      console.log(e);
    });
};
onMounted(() => {
  initAMap();
});
//</script>

注意版本，2.0没有Object3DLayer插件