基于Three.js实现的3D地图点位分布情况

应用使用three.js实现点位在3D地图上的立体分布情况。以台北设计公司点位分布为例，实现公司点位分布，根据公司所在楼层高度显示，按照公司类型采用不用颜色渲染展示。可以根据类型过滤显示和鼠标移入查看公司属性信息。

一、效果展示

二、核心实现

1、地形图切片加载原理；

2、经纬度坐标、Web墨卡托、切片顶点坐标之间的转换；

3、空间数据经纬度和webgl空间坐标之间的转换。

三、实现步骤

数据准备

地形图：地形图栅格切片处理

设计公司位置信息：空间数据geojson文件存储

开发应用

1、应用采用nuxt3搭建，为什么呢？没有为什么，就是最近再用它做项目，对此应用影响不大；（由于是小型应用，对应用框架没有过多配置）

2、引入three.js、camera-controls核心依赖；

3、创建webgl场景;

4、使用地形图切片原理请求切片作为纹理加载到场景中，其中需要做一系列坐标转换，经纬度转Web墨卡托、Web墨卡托转像素坐标；

5、读取设计公司空间点位，将经纬度坐标转换成webgl空间坐标，通过楼层渲染点高度，公司类型设置不同材质颜色，渲染在场景中；

6、增加场景旋转、过滤、鼠标移入点位显示属性操作，至此完成应用展示。

四、其他说明

欢迎交流，欢迎star，有问题提交Issue。