Vue3实现代码
index.html需要引入three.js
<script src="https://cdn.jsdelivr.net/npm/three@0.142/build/three.js"></script>围栏组件
<template><div id="mapContainer" ref="mapContainer"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
const AMAP_KEY = ''
const mapContainer = ref(null)
onMounted(() => {AMapLoader.load({key: AMAP_KEY,version: '2.0',plugins: ['AMap.GeometryUtil', "AMap.Object3DLayer", "AMap.Object3D"]}).then((AMap) => {const map = new AMap.Map(mapContainer.value, {center: [116.397428, 39.90923],zooms: [2, 20],zoom: 14,viewMode: '3D',pitch: 50,})var THREE = window.THREE;var camera;var renderer;var scene;var customCoords = map.customCoords;console.log(THREE);const fenceCoords = [[116.397428, 39.90923],[116.407428, 39.90923],[116.407428, 39.91923],[116.397428, 39.91923]];var gllayer = new AMap.GLCustomLayer({zIndex: 10,init: (gl) => {camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,100,1 << 30);renderer = new THREE.WebGLRenderer({context: gl, // 地图的 gl 上下文antialias: true,});renderer.autoClear = false;scene = new THREE.Scene();var aLight = new THREE.AmbientLight(0xffffff, 0.5);var dLight = new THREE.DirectionalLight(0xffffff, 1);dLight.position.set(1000, -100, 900);scene.add(dLight);scene.add(aLight);},render: () => {renderer.resetState();customCoords.setCenter([116.52, 39.79]);var { near, far, fov, up, lookAt, position } =customCoords.getCameraParams();camera.near = near;camera.far = far;camera.fov = fov;camera.position.set(...position);camera.up.set(...up);camera.lookAt(...lookAt);camera.updateProjectionMatrix();renderer.render(scene, camera);renderer.resetState();},});map.add(gllayer);// 添加地图加载完成监听map.on('complete', function () {// 在此处初始化围栏const { planeMesh, lineMesh } = createFence();scene.add(planeMesh, lineMesh);const testCoord = map.customCoords.lngLatToCoord([116.397428, 39.90923]);console.log('验证坐标转换:', testCoord); // 应输出非零值});// 围栏创建方法function createFence() {const shape = new THREE.Shape();const linePoints = [];fenceCoords.forEach(([lng, lat], index) => {// 添加转换验证if (!map.customCoords) {console.error('CustomCoords未初始化');return;}let coords = map.customCoords.lngLatToCoord([lng, lat]);console.log(`坐标转换结果：${coords}`); // 添加调试日志let coord = {x: coords[0],y: coords[1],}if (index === 0) {shape.moveTo(coord.x, coord.y);linePoints.push(new THREE.Vector3(coord.x, coord.y, 50));} else {shape.lineTo(coord.x, coord.y);linePoints.push(new THREE.Vector3(coord.x, coord.y, 50));}});linePoints.push(linePoints[0].clone());return {planeMesh: createPlaneMesh(shape),lineMesh: createLineMesh(linePoints)};}// 创建渐变几何体function createPlaneMesh(shape) {// 创建侧面材质（红色渐变）const sideMaterial = new THREE.MeshBasicMaterial({map: createGradientTexture(), // 使用渐变纹理transparent: true, // 启用透明度以显示渐变效果side: THREE.DoubleSide, // 双面渲染，从内外都能看到材质opacity: 1, // 设置为1以确保渐变纹理完全可见depthWrite: false // 禁用深度写入，确保材质在内外都可见});// 创建几何体const extrudeSettings = {depth: 50,bevelEnabled: false};const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);// 为几何体的每个面设置不同的材质const materials = [null, // 顶部材质sideMaterial, // 底部材质sideMaterial, // 前侧面材质sideMaterial, // 后侧面材质sideMaterial, // 左侧面材质sideMaterial // 右侧面材质];// 创建网格对象const mesh = new THREE.Mesh(geometry, materials);// 创建组并添加网格const group = new THREE.Group();group.add(mesh);return group;}// 创建顶部线条function createLineMesh(points) {const geometry = new THREE.BufferGeometry().setFromPoints(points);const material = new THREE.LineBasicMaterial({color: 0xff0000,linewidth: 3});return new THREE.LineLoop(geometry, material);}// 创建渐变纹理function createGradientTexture() {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');canvas.width = 256;canvas.height = 256;const gradient = ctx.createLinearGradient(0, 0, 0, 256);gradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); // 顶部完全不透明红色gradient.addColorStop(1, 'rgba(255, 0, 0, 0)'); // 底部完全透明ctx.fillStyle = gradient;ctx.fillRect(0, 0, 256, 256);return new THREE.CanvasTexture(canvas);}// 动画function animate() {map.render();requestAnimationFrame(animate);}animate();function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}window.addEventListener('resize', onWindowResize);}).catch(e => {console.error('加载高德地图JS API失败: ', e)})
})
</script><style>
#mapContainer {width: 100%;height: 900px;
}
</style>