Three.js 实现 酷炫3D 地图-省份

217 阅读1分钟

实现效果

WechatIMG325_副本.jpg

WechatIMG324_副本.jpg

数据来源

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

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

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

支持功能

下钻 缩放 旋转 标记 飞线 自定义数据 二次开发 离线部署

源码获取

喜欢的小伙伴 私信我 获取