高德地图使用mesh画渐变区域边界(vue3)

效果图：

 

mesh是Object3D的属性，高德JS 2.0版本不支持object3D和Object3DLayer，必须使用之前的版本，否则会报错：

TypeError: AMap.Object3DLayer is not a constructor

 

用npm install @amapap-jsapi-loader安装高德包

代码：

<template class="mask-box">

  <div id="container"></div>

  <div v-if="showMask" class="maskStyle">{{ contenttitle }}</div>

</template>

 

<script setup>

import { onMounted, onUnmounted, ref } from "vue";

import AMapLoader from "@amapap-jsapi-loader";

 

let map = null;

const showMask = ref(false);

const contenttitle = ref('');

const pathArr = [

  [

    [104.572581, 30.341419],

    [104.568646, 30.347817],

    [104.570277, 30.349928],

    [104.570944, 30.348649],

    [104.571612, 30.34948],

    [104.573836, 30.348393],

    [104.573094, 30.346153],

    [104.574532, 30.342029],

    [104.572581, 30.341419],

  ],

];

 

onMounted(() => {

  window._AMapSecurityConfig = {

    securityJsCode: "",//安全密钥

  };

 

  AMapLoader.load({

    key: "",

    version: "1.4.15",//不能是2.0版本

    plugins: ["AMap.Object3DLayer"],

  })

    .then((AMap) => {

      map = new AMap.Map("container", {

        viewMode: "3D",

        zoom: 15,

        center: [104.572872, 30.34266],

        pitch: 50,

      });

 

      // 添加渐变墙

      addGradientWall(AMap, pathArr);

    })

    .catch((e) => {

      console.log(e);

    });

});

 

onUnmounted(() => {

  map?.destroy();

});

 

// 添加渐变墙

function addGradientWall(AMap, data) {

  const object3DLayer = new AMap.Object3DLayer(); // 创建 3D 图层

  map.add(object3DLayer);

 

  const mesh = new AMap.Object3D.Mesh(); // 创建 Mesh 对象

  const geometry = mesh.geometry;

 

  const baseHeight = 0; // 墙的底部高度

  const wallHeight = 500; // 墙的高度

 

  data[0].forEach((point, index) => {

    const [lng, lat] = point;

    const bottom = map.lngLatToGeodeticCoord([lng, lat]); // 转换为地理坐标

    const top = [bottom.x, bottom.y, wallHeight]; // 顶部点

 

    // 添加底部点

    geometry.vertices.push(bottom.x, bottom.y, baseHeight);

    // 添加顶部点

    geometry.vertices.push(top[0], top[1], top[2]);

 

    // 添加颜色（渐变效果）

    const colorBottom = [0, 0, 1, 0]; 

    const colorTop = [0, 0, 1, 1];

    geometry.vertexColors.push(...colorBottom, ...colorTop);

 

    // 添加三角形索引

    if (index > 0) {

      const offset = index * 2;

      geometry.faces.push(

        offset - 2, offset - 1, offset, // 第一个三角形

        offset - 1, offset + 1, offset // 第二个三角形

      );

    }

  });

  mesh.backOrFront = "both"; // 渲染正面和背面

  mesh.transparent = true; // 设置透明

  object3DLayer.add(mesh); // 将 Mesh 添加到 3D 图层

  console.log("渐变墙添加成功");

}

</script>

 

<style scoped>

#container {

  width: 100%;

  height: 800px;

}

 

.mask-box {

  position: relative;

}

 

.maskStyle {

  position: absolute;

  top: 20px;

  right: 20px;

  background: #fff;

  width: 200px;

  height: 300px;

  border: 1px solid rgba(195, 195, 195, 0.5);

}

<style>