在高德地图中进行边界墙图层开发(一)

如何使用three在高德地图的指定的行政区域边界建立一道支持渐变和动画的酷炫边界墙。

在高德地图中进行边界墙图层开发(一)
3D模型在线预览提供多种低代码平台3D模型在线预览解决方案,实现了将多种3D模型格式无缝集成到低代码业务表单中。这意味着用户可以在不离开低代码平台的情况下,直接查看和操作3D模型,极大地提升了数据可视化的效果和用户交互体验。

下图为现有的API 高德地图1.4 new AMap.Object3D.Wall能提供的效果。

实现思路

还是要使用可以支持three.js的GLCustomLayer,更加自由灵活地做出可视化效果。实现步骤如下:

1.获取区域边界的多边形的所有端点坐标,以所有端点坐标(x,y,z)和端点正上方距离为h的点(x,y,h)为端点建立垂直墙体A。

2.给垂直墙A赋予一层材质MTA,这层材质是静态的图片。

3.拷贝垂直墙体A,在相同的位置添加一层垂直墙体B,并给B赋予一层材质MTB,MTB在垂直方面的展示策略为不断重复;为了方便查看,这里用红色材质区分一下。

4.在浏览器逐帧切换时,改变MTB的垂直偏移,使其产生平滑的上下偏移效果。

代码实现

获取区域边界的多边形的所有端点坐标,以所有端点坐标(x,y,z)和端点正上方距离为h的点(x,y,h)为端点建立垂直墙体A。

这里可能有必要多解释一下创建方法,创建墙体使用的类是BufferGeometry,需要我们自己声明这个几何体的面是由哪些顶点按照什么顺序构成的。

众所周知在webGL里构成几何体的最小面单位是三角形,因此需要把组成每个三角形的所有顶点按顺序排列成一个数组,下面以一个简单的墙体为例。

如图所示,以0-1-2 和 1-2-3为顺序创建两个三角形,那么在设置几何体的position属性时应该提供这样一个数据 ,并且告诉面构造方法,每取其中3个值为一个顶点坐标。

除了声明构成面的所有端点,还需要告诉构造方法,应该按照哪些顺序给面铺设材质,因此还需要生成一个UV面数组声明面和点的映射关系。还是个单个简单墙体为例,以整个平面左下角为原点(0,0),建立起一个坐标。

UV数组中端点的排列顺序与上文顶点数据排序一致即可,不同的是这里由2个值构成一个点。

在高德地图中进行边界墙图层开发 - 索引

在高德地图中进行边界墙图层开发(一)

在高德地图中进行边界墙图层开发(二)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号