酷炫的3D交互地图

115 阅读1分钟

简单实现 Three.js 实现 酷炫3D 地图

2371754916711_.pic.jpg

2381754916727_.pic.jpg

A: 参考 Threejs中文网 文档介绍 npm 中 Three的下载路径

Threejs中文网具体地址

npm 中 Three的下载路径

B: 参考 数据源下载

地图的是通过这个 shape 描绘成形状展示的,数据可以通过 datav.aliyun 地图json小工具 获取到

image.png

数据拿到之后,就是展示的问题,直接展示是不行的,需要通过 d3 对数据处理,才能按照正确的地图样子展示

javascript
 体验AI代码助手
 代码解读
复制代码
import * as d3 from "d3";  //莫开托坐标 矫正地图坐标
//center 的位置可以自己定
const handleProj = d3.geoMercator().center([109, 34.5]).scale(1000).translate([0, 0]) // d3投影转换函数

C: 当前支持的功能 下钻 旋转 缩放 飞线 标记 自定义样式

喜欢的小伙伴 私信 开箱即用