高德地图加渐变色3D线段

想用高德地图实现渐变色的边界效果，查看了很多资料，测试了很多方法，终于实现啦！记录一下~

1.按照高德官方示例创建地图

var map = new AMap.Map('container', {
    pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
    viewMode:'3D' // 地图模式
});

2.添加Object3DLayer和创建Mesh实例

let object3Dlayer= new AMap.Object3DLayer();
map.add(object3Dlayer);
const rectangle = new AMap.Object3D.Mesh()
const geometry = rectangle.geometry;//创建之后获取geometry

3.设置属性

//获取存储边界的数组长度乘以2；
const length = pathArr.length * 2;
//设置属性
for (let i = 0; i < pathArr.length; i += 1) {
    let xy = map.lngLatToGeodeticCoord(pathArr[i]);
    geometry.vertices.push(xy.x, xy.y, 0);
    geometry.vertices.push(xy.x, xy.y, -150);
    //设置颜色    
    geometry.vertexColors.push.apply(geometry.vertexColors, [0, .5, 1, 0.7]);
    geometry.vertexColors.push.apply(geometry.vertexColors, [0, .5, 1,0]);
    
    for (let j = 0; j < length; j += 1) {
	    const one= (j + 1) % length;
    	const three = (j + 2) % length;
        geometry.faces.push(one, j, three);
    }
}

4.将 Mesh实例添加到Object3DLayer中即可

 rectangle.transparent = true; // 如果使用了透明颜色，请设置true
 object3Dlayer.add(rectangle);

参考了以下文章：
https://blog.csdn.net/weixin_42183524/article/details/107247030