Three.js实现3D地图可视化-省份

简介: 本项目实现了地图数据的可视化展示,支持下钻、缩放、旋转等多种交互功能。地图通过 shape 数据描绘,使用 D3 进行坐标转换与渲染,数据可从地图 JSON 工具获取。支持二次开发与离线部署,提供完整源码,欢迎联系获取。

实现效果

河北1.jpg 河北2.jpg

数据来源

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

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

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

支持功能

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



相关文章
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
1135 3
ECharts 柱状图横轴(X轴)文字内容显示不全
ECharts 柱状图横轴(X轴)文字内容显示不全
1347 0
|
定位技术
Echarts使用geojson地理坐标地图地名label标签位置不居中调整的解决方案
Echarts使用geojson地理坐标地图地名label标签位置不居中调整的解决方案
613 0
|
定位技术
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
2097 0
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
|
JSON JavaScript 前端开发
超燃,拿来即用!Echarts动态排名柱状图(自适应电脑和手机端)说明文档
超燃,拿来即用!Echarts动态排名柱状图(自适应电脑和手机端)说明文档
626 0
|
JavaScript
VUE3(十)生命周期及钩子函数
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
6386 0
VUE3(十)生命周期及钩子函数
|
10月前
|
编解码 数据可视化 前端开发
如何使用 D3.js 创建一个交互式的地图可视化?
如何使用 D3.js 创建一个交互式的地图可视化?
|
数据可视化 定位技术
【threejs】可视化大屏酷炫3D地图附源码
【threejs】可视化大屏酷炫3D地图附源码
10243 130
【threejs】可视化大屏酷炫3D地图附源码
|
开发框架
threejs做特效:实现物体的发光效果-EffectComposer详解!
【8月更文挑战第7天】实现物体的发光效果-EffectComposer详解!
1887 6
threejs做特效:实现物体的发光效果-EffectComposer详解!

热门文章

最新文章