想用高德地图实现渐变色的边界效果,查看了很多资料,测试了很多方法,终于实现啦!记录一下~
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