Three.js之GeoJson 3D地图数据可视化飞行线实战

最新推荐文章于 2024-09-29 11:26:11 发布
最新推荐文章于 2024-09-29 11:26:11 发布
阅读量1.2w 收藏 15
点赞数 3
本文为博主原创文章，未经作者允许禁止任何形式的转载。
本文链接：https://blog.csdn.net/lin5165352/article/details/91349444
版权

Three.js之GeoJson 3D地图数据可视化飞行线实战

GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
下面是一个geojson的格式。其中主要的信息是经纬度的集合。我们需要把经纬度转换成平面坐标，然后绘制出来就可以了。
在这里插入图片描述
下面是一个效果图。
教程在馒头大佬的视频里面：threejs(webgl)之geojson数据转3D地图大数据可视化飞行线实战，大家有兴趣可以去看看。https://ke.qq.com/course/393957?saleToken=1559015&from=pclink

在这里插入图片描述

呵呵csdn。迟早你们会把自己玩死的。

X01动力装甲
关注
ThreeJS加载geojson数据实现3D地图
牟云飞的博客
02-22 1965
geojson内的坐标使用的是wgs-84坐标系，也就是我们说的GPS坐标，所以地图撒点需要先转gps坐标系，然后通过d3的方法将gps坐标系转摩托尔坐标，之后就可以直接在threejs地图上使用。
基于threejs开发的3D地球大屏可视化，支持2D地图模式，飞线，涟漪，配置简单易上手
qq81650984的博客
08-10 2764
基于threejs开发的地球大屏可视化纯js组件,适用所有前端js项目
加载geojson面数据_three.js结合geoJson绘制中国地图
weixin_39650139的博客
12-31 2622
我们看最终实现的效果中国地图3Dindex​aflies.github.io1、准备工作 对threejs有基本的了解 了解geojson2、撸代码 我们使用面向对象的方式写代码，先定义一个ChinaMap类,最后new一个实例出来，调用init方法。threejs的三要素Scene,Renderer,Camera就不多重复了，中间的控制使用OrbitControls，光照使用...
使用three-geo构建地理三维地形
gitblog_00907的博客
08-09 620
使用three-geo构建地理三维地形 three-geo3D geographic visualization library项目地址:https://gitcode.com/gh_mirrors/th/three-geo 1. 项目介绍 three-geo 是一个基于Three.js库的开源项目，用于实现Tile-based（瓦片式）的地理世界地图可视化。它可以创建3D地形表面，使用卫星图像...
【THREE.JS学习（3）】使用THREEJS加载GeoJSON地图数据
yuelizhe4774的博客
02-23 5179
Three.js中的坐标系是以单位为米（m）的坐标系，而在地理数据中，如Geojson使用的是经纬度作为坐标系，所以在使用、加载的过程中需要对数据进行坐标转换，才能够正确的显示地理数据。和mapbox、cesium之类的webgis加载数据不同（原理差不多），不能直接加载json数据，然后直接显示，需要我们对Json数据进行解析，然后按照一定的方式来生成图像。其中，{OrbitControls}为控制器，加载后可以通过鼠标来移动加载数据的方向、放缩等。接着，对加载的文件进行处理。STEP 3：开始渲染。
Three.js+GeoJSON实现三维地图显示
热门推荐
damadashen的博客
08-07 1万+
Three+GeoJSON实现对地理坐标转换并生成中国三维地图。
Threejs GeoJSON离线3D地图
06-13
Threejs GeoJSON离线3D地图
加载geojson面数据_three.js加载geojson
weixin_34025386的博客
01-15 2053
three.js可以加载geojson来绘制面，再根据绘制的面拉伸成体。效果图：预览地址：vue3+TS​123.56.85.24vue3项目中集成three.js可以看这篇文章:清风皓月：three.js实践指南​zhuanlan.zhihu.com一.Geojson是什么？GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法(JavaScript Objec...
Three.js渲染GeoJSON.zip
07-13
本项目“Three.js渲染GeoJSON”聚焦于如何使用Three.js将地理数据（GeoJSON格式）转化为3D可视化。 GeoJSON是一种开放的数据格式，用于存储地理空间数据，如点、线和多边形。这种轻量级的JSON格式在Web地图服务中...
地图Web3D可视化-WebGL、Three.js
05-09
课程分享——地图Web3D可视化-WebGL、Three.js，附源码 课程概述 - 本课程讲解如何在web上实现地图3D可视化 - 学习本课程有前端基础即可，如果了解three.js更好 适用人群 有前端基础，想基于Web实现地图数据的3D...
【数字孪生平台】使用 Three.js 以 3D 形式可视化日本新宿站地图
03-29 1628
在本文中，我们将使用日本新宿站的室内地图数据，并使用 Three.js 将其进行 3D 可视化。更多精彩内容尽在。
threegeo是一个基于threejs的地理可视化库
08-10
three-geo 是一个基于 three.js 的地理可视化库。 使用three-geo，我们可以通过简单地指定地球上任何地方的GPS坐标，轻松地近实时地建立卫星纹理的3D地形模型。 地形的几何形状基于Mapbox Maps API提供的RGB编码DEM（数字高程模型）。
threejs之3D飞行线
08-19
基于threejs实现的地球酷炫3D飞行轨迹线，可以快速集成自己项目中，实现漂亮动画。
Three.js项目实战之数据可视化
最新发布
天涯学馆
09-29 148
我们使用D3.js计算数据的最大值和比例尺，然后根据比例尺为每个数据点创建一个柱状图。上面加载了一个GeoJSON文件，将其转换为Three.js的几何形状，并使用基本材质创建了一个3D网格。在Three.js中实现数据可视化，可以将二维数据转化为三维图形，以便更好地理解和探索数据。在Three.js中实现更复杂的数据可视化，可以结合其他数据处理库，如D3.js，以及自定义的几何形状和颜色映射。当鼠标悬停在柱状图上时，显示该柱子对应的数据值。我们可以根据数据值映射到不同的颜色，以增强数据表达的直观性。
three.js+shader 制作粒子飞线，小蝌蚪那种。
刘烨华的博客
08-17 5897
学习three.js四个月了，最近终于利用shader粒子做出了我心心念念的蝌蚪状飞线，这个网上也是查不到什么资料的，2Dcanvas的可以查得到，3D的都藏着掖着很难找的到相关案例，最近我通过腾讯一个小姐姐发布几个three.js 案例受到了一点启发，终于花了一个晚上做了出来，也是第一次在three.js中使用shader。 下面是效果图： 先说说思路，第一步是制作一个蝌蚪状的粒子束，其...
THREE.JS 绘制飞线 攻击线 迁移线 拓扑图动画线条等
stonerao
10-22 4956
THREE.JS 绘制飞线 在THREE中如何绘制飞线；使用的是Points+Shader封装的一个飞线方法；可以用于攻击线路，指向效果等；显卡GT730 6000根飞线 帧数在30FPS，可以调节线条的长度 和 间隔 ，增加流畅度 飞线Demo git托管比较卡 代码地址 使用飞线 let _Fly = new initFly({ texture: "./xxx.png"//飞线贴图 ...
Three.js - 在地图上绘制飞线（二十一）
小小的前端
04-27 4873
简介 在可视化开发中飞线图应该是很常见的一种。为了灵活的使用three.js，本节我们在3D地图上绘制一个简单的飞线图。 绘制 在上一节已经绘制好了一个中国地图，我们直接在此基础上开发。 起始点添加动画 在飞线图的起始点都会有醒目的标识。这里实现一个扩散光圈效果。 起始点会有很多，我们要创建一个公用方法。 先在起始点坐标，绘制一个平面圆和一个平面圆环。在渲染函数中对平面圆环放大和透明。 // 圆环网格对象组 const circleYs = [] /** * 目标位置 * *
web端的shader Threejs飞线
角角兔的博客
11-19 4489
目标 之前想用粒子来实现一下飞线的效果，看到很多大佬的代码发现使用粒子会是一个不错的选择，因为粒子的渲染比较省性能，之前看到有人使用圆形的粒子 后来发现其实普通的正方形的粒子就可以 ...
three3D地图
qq_59315646的博客
05-24 2859
基于Vue实现Three.js+GeoJSON三维可视化炫酷地图（省市标签、地图流光、动态文字、高光定位、星空背景）
three.js 通过geojson数据和灰度图生成3d地形图地图代码
06-02
下面是一个基于Three.js的通过GeoJSON数据和灰度图生成3D地形图地图的代码示例： ```javascript // 创建场景、相机和渲染器 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 50, 100); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 加载GeoJSON数据 var loader = new THREE.FileLoader(); loader.load('map.geojson', function(data) { var geojson = JSON.parse(data); // 创建平面面板 var width = 100; // 面板宽度 var height = 100; // 面板高度 var size = 256; // 面板像素数 var geometry = new THREE.PlaneGeometry(width, height, size - 1, size - 1); // 设置顶点高度 var grayData = new Uint8Array(size * size); var maxHeight = 10; // 最大高度值 for (var i = 0; i < size; i++) { for (var j = 0; j < size; j++) { var index = i * size + j; var coord = getCoord(j / size, i / size, geojson); var heightValue = coord ? coord.elevation : 0; geometry.vertices[index].z = heightValue; // 设置顶点的高度（z轴方向） grayData[index] = heightValue / maxHeight * 255; // 将高度值转换为0~255之间的像素值 } } // 创建灰度图像 var grayTexture = new THREE.DataTexture(grayData, size, size, THREE.LuminanceFormat); grayTexture.needsUpdate = true; // 创建材质和网格 var material = new THREE.MeshBasicMaterial({ map: grayTexture }); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); // 添加光源 var ambientLight = new THREE.AmbientLight(0x404040, 1); scene.add(ambientLight); var directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); // 渲染场景 function render() { requestAnimationFrame(render); renderer.render(scene, camera); } render(); }); // 根据经纬度获取elevation值 function getCoord(lon, lat, geojson) { for (var i = 0; i < geojson.features.length; i++) { var feature = geojson.features[i]; if (feature.geometry.type == 'Polygon') { if (insidePolygon([lon, lat], feature.geometry.coordinates[0])) { return { elevation: feature.properties.elevation }; } } else if (feature.geometry.type == 'MultiPolygon') { for (var j = 0; j < feature.geometry.coordinates.length; j++) { if (insidePolygon([lon, lat], feature.geometry.coordinates[j][0])) { return { elevation: feature.properties.elevation }; } } } } return null; } // 判断一个点是否在多边形内部 function insidePolygon(point, polygon) { var x = point[0], y = point[1]; var inside = false; for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { var xi = polygon[i][0], yi = polygon[i][1]; var xj = polygon[j][0], yj = polygon[j][1]; var intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if (intersect) inside = !inside; } return inside; } ``` 在这个代码示例中，首先加载了一个GeoJSON数据文件`map.geojson`，可以根据实际情况修改文件名和路径。然后创建了一个100x100的平面面板，像素数为256x256，顶点高度根据GeoJSON数据中的经纬度坐标和elevation值设置。最终创建了一个基于灰度图像的3D地形网格，添加了环境光和定向光源，通过渲染器将场景渲染到屏幕上。 在设置顶点高度时，使用了`getCoord`函数来根据经纬度坐标获取elevation值，这个函数通过遍历GeoJSON数据中的所有Polygon和MultiPolygon，判断一个点是否在多边形内部，从而获取对应的elevation值。需要注意的是，这里使用了一个insidePolygon函数来判断一个点是否在多边形内部，这个函数可以通过射线法或者Winding Number算法来实现，这里使用的是射线法实现。 需要注意的是，在使用灰度图像作为材质贴图时，需要将高度值转换为0~255之间的像素值，并创建一个DataTexture对象来表示灰度图像。这里使用THREE.LuminanceFormat表示灰度图像的像素格式。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

X01动力装甲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值