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加载钢铁侠模型(第二步)
1783 3
|
定位技术
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
2677 0
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
|
JSON 数据可视化 定位技术
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
1424 0
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
|
JSON JavaScript 数据可视化
D3 不到20行代码就能实现世界地图的绘制
每到农历年末,相信很多小伙伴和本作者一样,都忍不住会去看江苏卫视的一档脑力比拼节目《最强大脑》,尽管上一季最强大脑喷点确实很多,但依旧没有减弱"追剧"的热情。今年最强大脑(第5季)的赛制有很大的变化,挑战的人数从百人大战,到最强30脑,再到现从第三场的一对一PK,确实与以往有了很大的不同。此外,今年更加强调了选手在生活中的光环,例如本文要引用的一场比赛就是最近一期来自清华的孙勇与北京的陈泽坤的一场以地图投影为背景的比赛,孙勇就是顶着2016安徽省高考理科状元的光环来的。今年没了叨叨魏,节目的流程显得自然了很多。好了,不扯了,来、来、来来来!我们开始说本文要讲的主题--地图。
2092 0
D3 不到20行代码就能实现世界地图的绘制
|
数据可视化 定位技术
【threejs】可视化大屏酷炫3D地图附源码
【threejs】可视化大屏酷炫3D地图附源码
12919 131
【threejs】可视化大屏酷炫3D地图附源码
|
编解码 数据可视化 前端开发
如何使用 D3.js 创建一个交互式的地图可视化?
如何使用 D3.js 创建一个交互式的地图可视化?
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
27515 154
|
JavaScript 数据可视化 前端开发
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
648 1
|
atlas
Cesium导入geojson数据
这篇文章详细描述了如何在Cesium中导入GeoJSON数据来绘制地理矢量数据,并提供了实现的具体方法和示例代码。
1096 2
Cesium导入geojson数据
|
开发框架
threejs做特效:实现物体的发光效果-EffectComposer详解!
【8月更文挑战第7天】实现物体的发光效果-EffectComposer详解!
3061 6
threejs做特效:实现物体的发光效果-EffectComposer详解!