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投影转换函数

支持功能

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



相关文章
|
定位技术
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
2789 0
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
1865 3
PM2 配置文件(ecosystem.config.js 字段详细介绍)
PM2 配置文件(ecosystem.config.js 字段详细介绍)
1566 0
|
JSON 数据可视化 定位技术
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
1555 0
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
|
数据可视化 定位技术
【threejs】可视化大屏酷炫3D地图附源码
【threejs】可视化大屏酷炫3D地图附源码
13388 131
【threejs】可视化大屏酷炫3D地图附源码
|
编解码 数据可视化 前端开发
如何使用 D3.js 创建一个交互式的地图可视化?
如何使用 D3.js 创建一个交互式的地图可视化?
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
28778 154
|
JavaScript 数据可视化 前端开发
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
705 1
|
前端开发 定位技术 API
Mapbox添加行政区矢量图层,Mapbox添加分级设色图层,Mapbox添加文本标记图层,Mapbox给行政区矢量数据添加名称,Mapbox自定义鼠标悬浮框,Mapbox添加天地图底图
Mapbox的中国分部好像在2021年左右就退出中国了,官方文档的汉化工作也戛然而止,相关的社区建设也相当欠缺,内容比较混乱,最离谱的是mapbox官方底图库中的中国地图基本都是错的,天地图引入又麻烦...... 恰好我最近有一个基础的mapbox应用需求,就做了一些整理和探索,分享给大家。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来
ThreeJs给物体添加贴图
这篇文章详细说明了在Three.js中如何给3D物体添加贴图,并展示了实现局部贴图的技术和方法。
966 1
ThreeJs给物体添加贴图

热门文章

最新文章