ThreeJS加载公路GeoJson数据实现流光效果

已于 2023-03-31 11:43:05 修改
阅读量823 收藏
点赞数 2
分类专栏： 数字孪生之WEB三维可视化技术ThreeJS 文章标签： webgl 能源 3d 前端 Powered by 金山文档
于 2023-02-24 17:30:29 首次发布
本文为博主牟云飞原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/myfmyfmyfmyf/article/details/129174208
版权
了解本专栏 订阅专栏 解锁全文
牟云飞
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
ThreeJS加载geojson数据实现3D地图
牟云飞的博客
02-22 1612
geojson内的坐标使用的是wgs-84坐标系，也就是我们说的GPS坐标，所以地图撒点需要先转gps坐标系，然后通过d3的方法将gps坐标系转摩托尔坐标，之后就可以直接在threejs地图上使用。
【THREE.JS学习（3）】使用THREEJS加载GeoJSON地图数据
yuelizhe4774的博客
02-23 4489
Three.js中的坐标系是以单位为米（m）的坐标系，而在地理数据中，如Geojson使用的是经纬度作为坐标系，所以在使用、加载的过程中需要对数据进行坐标转换，才能够正确的显示地理数据。和mapbox、cesium之类的webgis加载数据不同（原理差不多），不能直接加载json数据，然后直接显示，需要我们对Json数据进行解析，然后按照一定的方式来生成图像。其中，{OrbitControls}为控制器，加载后可以通过鼠标来移动加载数据的方向、放缩等。接着，对加载的文件进行处理。STEP 3：开始渲染。
Three.js+GeoJSON实现三维地图显示
热门推荐
damadashen的博客
08-07 1万+
Three+GeoJSON实现对地理坐标转换并生成中国三维地图。
ThreeJS-geoJson-开发记录
yichen454的博客
01-01 2419
使用墨卡托投影将geoJson经纬度数据转为平面坐标数据，进而使用threejs ExtrudeGeometry生成所示地图三维模型 主要技术点 三维渲染 threejs 数据转换 d3-geo 变换代码 const projection = geoMercator().center([104.0, 37.5]).scale(36).translate([0, 0]); center: 中心经纬度 scale: 转换后坐标缩放系数 translate：转换后平移量 功能点 简单光效 自主材质调节（演
ceisum 加载geojson,使用 Cesium 动态加载 GeoJSON 数据
weixin_36059283的博客
03-18 733
前言需求是这样的，我需要在地图中显示 08 年到现在的地震情况，地震都是发生在具体的时间点的，那么问题就来了，如何实现地震情况按照时间动态渲染而不是一次全部加载出来。一、 方案分析这里面牵扯到两个问题：第一个是如何加载 GeoJSON 格式的数据，其实也就是矢量数据，因为矢量数据之间是可以任意转换的；第二个是如何让加载的数据根据自身的时间显示。所以就有两种解决问题的思路了：第一种，一次加载 Geo...
cesium加载geojson数据实现鼠标悬停变色高亮效果
hmrui的博客
03-08 2996
cesium实现geojson数据鼠标悬停高亮效果 项目所需，要在cesium上加载geojson数据后实现hover效果，但没找到cesium原生实现的方法，遂用笨办法去模拟一下效果，若大神们有其他方法万望指出。 hover效果可理解为判断鼠标是否移动到目标区域内（不考虑鼠标正好在区域边的情况，目标区域可以看作多边形），若在区域内则区域变色高亮。所以模拟实现的方法可以划归为判断点是否在多边形内部，并进行相应的高亮效果。 具体实现 判断点是否在多边形内部的方法可通过射线法实现，也可利用turf.js中的bo
使用three.js + geojson 完成广西地图的绘制（上篇）
w__qwwq的博客
09-06 2899
three.js+geojson 绘制广西地图
ArcGIS API for JS 加载GeoJSON数据
liyan_gis的专栏
02-05 6097
ArcGIS API for JS 没有预制的GeoJSON图层（leaflet和openlayers都可以直接加载Geojson格式的图层了），需要加载矢量图层的时候，需要自定义的方式加载，从网上搜索 了一些解决方法，总结出一些经验，如果没有复杂图形，如，多点，复杂多边形的情况下，可以自定义读取Geojson数据，逐个创建相应的点、线、面要素，然后创建Graphic，在添加到GraphicsLa
cesium加载geojson数据实现线面加载
猪猪侠的博客
06-15 741
加载geojson面数据u
Three.js渲染GeoJSON.zip
07-13
Three.js渲染GeoJSON
基于Three.JS+GeoJSON数据绘制的3D城市（太原）模型.zip
12-10
基于Three.JS+GeoJSON数据绘制的3D城市（太原）模型.zip基于Three.JS+GeoJSON数据绘制的3D城市（太原）模型.zip基于Three.JS+GeoJSON数据绘制的3D城市（太原）模型.zip基于Three.JS+GeoJSON数据绘制的3D城市（太原）...
threejs 中国地图轮廓动画geojson 版本
04-08
threejs 中国地图轮廓动画geojson 版本
three-geojson-geometry:ThreeJS几何体可在球体上绘制GeoJSON对象
04-27
ThreeJS GeoJSON几何 ThreeJS几何类，用于在球体上抚摸GeoJSON对象。 快速开始 import { GeoJsonGeometry } from 'three-geojson-geometry'; 或者 const { GeoJsonGeometry } = require('three-geojson-geometry');...
vue集成openlayers加载geojson并实现点击弹窗教程
01-22
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程，供大家参考，具体内容如下 第一步：安装vue-cli cnpm install -g @vue/cli 第二步：新建一个项目 1.新建项目 （vue-openlayers为项目名）,并...
ThreeJS入门篇（4）-场景Scene，三维空间
牟云飞的博客
05-11 2384
场景(Scene)，是Web3D中的一个情景，在情景中允许放置多个对象、多个灯光、多个照相机、多个渲染器以及多个控制器。换句话说，Scene就是我们的一个3D页面，我们看到的所有东西都需要加载到Scene中。Scene提供了五个属性autoUpdate、background、environment、fog、overrideMaterial，这其中我只使用了两个，也只介绍两个： background：情景背景图，背景图支持普通的2D图片做为背景，也支持使用天空之盒做三维立体视角； fog：雾化效果，支持场
Threejs封装电流效果
牟云飞的博客
10-11 2155
封装 //样条线,根据规划的路径显示电流 云 const curve_catmullRom3 = new THREE.CatmullRomCurve3( [ new THREE.Vector3( 500, 500, 0 ), new THREE.Vector3(900, 600, 0 ), new THREE.Vector3(450, 200, 0 ), new THREE.Vect...
ThreeJS入门篇（1）开场扯淡
牟云飞的博客
01-13 1729
工业和信息化部主管、中国信息通信研究院主办的专业学术期刊《信息通信技术与政策》，2020年第3期设置“数字孪生城市”专题，以“数字孪生城市”为主题，展示数字孪生城市关键技术、数字孪生城市研究成果以及数字孪生城市发展趋势。 2020年2月28日，工信部发布《建材工业智能制造数字转型三年行动计划（2020-2022年）》，在新一代信息通信技术创新场景方向中指出大数据、云平台、5G通信、人工智能、BIM、数字孪生六个方向。 2020年4月10日，为深入实施数字经济战略，加快数字产业化和产业数字化，培育新经济发
ThreeJS入门篇11—移动3D 控帧
牟云飞的博客
01-22 909
渲染Render更像打印机，将我们前面“拍摄”的图像呈现在浏览器中，根据图像的拍摄方式不同，基于B/S的ThreeJS能够将不同的画面到PC/移动等设备，通过控制每秒帧的数量fbs保持流程的画面感，渲染器根据渲染的物体有不同的类型，多个类型可以组合使用： WebGLRenderer：按照webGL的规范进行渲染显示场景，这种渲染方式最常用 CSS3DRenderer：通过CSS3转换属性将分层的3D应用到DOM元素中，这种渲染方式不支持材质和几何体，只适合普通的DOM元素 CSS2DRender...
three.js加载geojson矢量平面数据实现建筑物拉高成白膜
最新发布
06-11
好的，针对您的问题，我可以为您提供以下的解答： 首先，您可以使用 Three.js 中的 `THREE.GeoJsonLoader` 加载您的 `geojson` 数据，并将其转换成 `THREE.Geometry` 对象。然后，您可以将这个 `Geometry` 对象传递给 `THREE.ExtrudeGeometry` 函数来实现建筑物的拉高。 接下来，您可以将 `ExtrudeGeometry` 对象传递给 `THREE.MeshBasicMaterial`，并设置其 `transparent` 属性为 `true`，以及 `opacity` 属性为 `0`，从而创建一个白色的膜。最后，您可以将这个白色的膜与您的建筑物 `Mesh` 对象一起添加到场景中，以实现建筑物的拉高成白膜的效果。 下面是一个简单的代码示例，演示了如何加载 `geojson` 数据并将其转换成 `ExtrudeGeometry` 对象，并将其与一个白色的膜一起添加到场景中： ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 加载 geojson 数据 var loader = new THREE.GeoJsonLoader(); loader.load('data.geojson', function (geometry) { // 创建建筑物 Mesh 对象 var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var building = new THREE.Mesh(geometry, material); // 将建筑物拉高成白膜 var extrudeSettings = {amount: 50, bevelEnabled: false}; var extrudeGeometry = new THREE.ExtrudeGeometry(geometry, extrudeSettings); var whiteMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, transparent: true, opacity: 0}); var whiteMesh = new THREE.Mesh(extrudeGeometry, whiteMaterial); // 将建筑物 Mesh 对象和白色膜 Mesh 对象一起添加到场景中 scene.add(building); scene.add(whiteMesh); }); // 渲染场景 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 希望这个解答能够对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

牟云飞

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

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

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

打赏作者

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

抵扣说明：

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

余额充值