maptalks+threejs实现数字城市

最新推荐文章于 2024-05-24 10:12:40 发布
最新推荐文章于 2024-05-24 10:12:40 发布
阅读量2.8k 收藏 7
点赞数
分类专栏： web3d 文章标签： threejs maptalks 数字城市
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mansir123/article/details/115662987
版权

实现效果如图所示
在这里插入图片描述
在这里插入图片描述

实现方法：maptalks+threejs，采用maptalk的库， maptalk.threejs
实现内容：
（1）基于maptalk加载地图
（2）geojson数据解析，加载成为白模建筑
（3）geojson数据解析，加载为道路
（4）gltf格式3d加载
（5）obj、gltf格式物体鼠标点击交互
（6）gltf、obj物体材质切换

其中GLTF格式物体直接用obj方法的方式不可行，不响应的原因是内部object、group类型。需要将mesh类型的提出来。

涉及内容及技术可参考添加链接描述

思依_xuni
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Threejs生成地图板块和城市建筑白模
02-17
Threejs生成地图板块和城市建筑白模
maptalks+three实战项目 智慧城市项目
qq_39503511的博客
03-06 9370
maptalks+three 智慧城市项目概述搭建开发环境搭建maptalks+three场景创建灯光加载建筑模型加载流光道路加载水系加载大厦模型加载飞行线条创建圆锥体创建文本 概述 经过上一次使用three.js做了个demo，这次使用maptalks+three+vue来继续开发一个demo玩玩 先看视频效果： 搭建开发环境 使用的开发框架是vue-cli3.0, webgl使用three.js，地图使用maptalks，开发工具为vscode 搭建完成后的目录为 搭建maptalks+three场景
Three.js三维城市可视化geojson建筑，外部公共面分离
geobuilding的博客
04-11 1225
演示 https://www.bilibili.com/video/BV11i4y127Fx/ 有过mapbox或three.js 三维城市开发的同学可能会遇到这个问题 “外部公共面在渲染时出现闪烁”。如图黄色和白色之间存在闪烁。黄色和白色之间有穿透。 建筑物左侧面出现闪烁 建筑物在渲染时出现闪烁，这是什么造成的？先看这个L沙发型建筑物的轮廓分析图 如果geojson的结构是重合的，在用three.js或mapbox渲染时就会出现闪烁。如果分离后则正常。 geojson建筑物轮廓分...
three3D地图
最新发布
qq_59315646的博客
05-24 928
基于Vue实现Three.js+GeoJSON三维可视化炫酷地图（省市标签、地图流光、动态文字、高光定位、星空背景）
three.js/webgl 展示城市建筑
凡事有果必有因
04-26 5923
本文简述如何在three.js中展示已有的城市建筑面数据。 一、城市建筑面数据格式 这里的城市建筑面数据指的是底部为任意多边形，包含高度属性的面数据，这里我们使用的数据源为geojson格式的面数据。 二、构建几何要素的顶点信息 我们根据基础面数据和高度，构建底部面、侧面以及顶部面，并使用earcut将底面、侧面、顶面切成一个个绘制需要的三角形。 三、侧面贴纹理 为侧面指定纹理和纹理坐...
maptalks.three:要使用three.js进行渲染的maptalks图层
04-30
maptalks.three 要使用THREE.js渲染的maptalks图层 例子 。 安装 使用npm npm install maptalks.three ： npm install maptalks.three 。 从下载。 使用unpkg CDN： https://unpkg.com/maptalks.three/dist/maptalks.three.min.js ://unpkg.com/maptalks.three/dist/maptalks.three.min.js 从<= v0.5.x迁移到v0.6.0 重新实现了locateCamera，与地图的projMatrix和viewMatrix同步。 模型的z位置从v0.5.0开始反转。 因此，如果您使用v0.5.x渲染模型，则需要更新旋转。 对于3 <= 0.94，材料的侧面需要设置为THREE.BackSid
maptalks.three+threejs建筑物上下扫描效果
leo的博客
02-02 833
maptalks.three+threejs建筑物上下扫描效果
vue使用maptalks地图+three加载video视频、obj+mtl和gltf模型
QwQ621的博客
04-20 2821
vue使用maptalks+three加载video视频、obj+mtl和gltf模型
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
10-14
在本文中，我们将探讨如何利用maptalks、three.js、vue和webpack技术栈在二维地图上实现三维模型的展示和交互。首先，maptalks是一个强大的JavaScript库，用于创建交互式地图，而three.js是一个流行的JavaScript 3D...
maptalks-vue：基于maptalks，threejs 3d地图vue框架
04-02
**maptalks-vue：基于maptalks与threejs的3D地图Vue框架** `maptalks-vue` 是一个专为Vue.js开发者设计的框架，它整合了`maptalks`和`threejs`两个强大的库，为前端开发提供了一个高效、灵活的3D地图解决方案。`...
vue3 - 基于maptalks和threejs实现3D地图板块效果，郑州区域json文件
04-23
郑州区域json文件
聊聊如何使用three.js生成城市建筑群和地图板块
qq_44849312的博客
02-18 3966
three.js生成城市建筑群和地图板块
threejs开发可视化数字城市效果
weixin_41770018的博客
11-23 988
theme: condensed-night-purple 灵感图 现在随着城市的发展，越来越多的智慧摄像头，都被互联网公司布到城市的各个角落，举一个例子，一个大楼上上下下都被布置了智能摄像头，用于监控火势，人员进出，工装工牌佩戴等监控，这时候为了美化项目，大公司都会将城市的区域作为对象，进行3d可视化交互，接下来的内容，就是基于以上元素，开发的一款城市数据可视化的demo，包含楼宇特...
高德地图js结合threejs生成户室白膜效果
傲骨雄风的博客
04-01 1255
threejs 高德地图js
[three] | 基于 maptalks + three 大屏水墨风格场景
啊嘞嘞的博客
09-27 1822
使用maptalks.three 插件做的，目前内容比较简单，后面再加些场景进来 效果
[three] | 基于 maptalks + three 的三维城市示例
啊嘞嘞的博客
07-04 3456
前段时间抽空补了补webgl的知识,发现太难了还是准备从threeJs入门 网上看了一些案例和开源项目，自己也准备写一些学习的示例 基于地图发现maptalks有结合three的案例 地址 项目更新比较频繁，用的开发者也不多，试了下还是踩了不少坑 效果 网上找了一些比较炫 shader 等熟悉了准备后续加进来看看 ...
webgis开发实例_maptalk.three实例化尝试
weixin_39887846的博客
12-12 634
   最近公司项目开始做三维的项目，出于易用性考虑选用了maptalks和maptalks.three。    maptalks是一款国内开发者开发的开源webgis框架，maptalks.three是一个基于maptalks的三维插件，通过这个库魄爷我可以比较方便的使用three的方式来绘制想要的三维效果。开发过程中遇到不少问题，比较麻烦得是大量mesh绘制导致速度变慢和内存暴增，通常的解决问题...
使用dxf-parser解析dxf文件，并将其添加到maptalks.three中进行渲染
06-07
好的，我可以为您解答关于使用dxf-parser解析dxf文件，并将其添加到maptalks.three中进行渲染的问题。 首先，您需要安装dxf-parser和maptalks.three这两个库。可以使用以下命令进行安装： ``` npm install dxf-parser maptalks maptalks.three ``` 然后，您可以使用以下代码将dxf文件解析为maptalks.three支持的GeoJSON格式，并将其添加到maptalks.three中进行渲染： ```javascript import * as THREE from 'three'; import * as maptalks from 'maptalks'; import * as dxfParser from 'dxf-parser'; import * as maptalksThree from 'maptalks.three'; // 从dxf文件中解析出GeoJSON格式的数据 const dxfData = dxfParser.parseSync(dxfFileContent); const geoJSONData = maptalksThree.DXFUtil.toGeoJSON(dxfData); // 创建maptalks.three图层 const layer = new maptalksThree.ThreeLayer('three-layer'); map.addLayer(layer); // 将GeoJSON数据添加到图层中进行渲染 const mesh = new THREE.Mesh( maptalksThree.GeoJSON.toGeometry(geoJSONData), new THREE.MeshBasicMaterial({color: '#ff0000'}) ); layer.addMesh(mesh); ``` 注意，以上代码中的dxfFileContent变量应该是一个字符串，包含了dxf文件的内容。 希望这个回答能够帮到您！如果您有任何其他问题，请随时问我。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

思依_xuni

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

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

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

打赏作者

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

抵扣说明：

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

余额充值