高德地图加载3dtiles

最新推荐文章于 2025-04-22 15:45:45 发布
最新推荐文章于 2025-04-22 15:45:45 发布
阅读量1.5k 收藏
点赞数 3
文章标签： 数据可视化 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010974711/article/details/133942776
版权

简介

@vuemap/layer-3dtiles是高德地图JSAPI2.0的开源扩展插件，该插件可用于加载3DTile数据，插件依赖@vuemap/three-layer。

插件文档地址

配套高德vue组件库 @vuemap/vue-amap

示例地址

codepen示例

制作背景

目前高德地图对于3dtiles这部分数据加载一直较为欠缺，当前官方插件功能不够强大，更新速度较慢，也欠缺文档。

使用方法

插件支持CDN加载和npm加载两种方式，使用CDN加载时会将Layer3DTiles类加载到AMap命名空间下，使用npm加载时则可以直接从插件里import相应的类来处理，具体使用方式可以查看文档。

插件优势

插件基于开源插件`3d-tiles-renderer`扩展实现，只要`3d-tiles-renderer`支持的格式都支持，当前支持常用的box和region两种，同时提供常用的模型的放大缩小、点击事件等能力。

模型导出时注意事项

  • 当使用shp文件生成3dtiles时，参考坐标系需要根据shp文件的坐标系来设定，正常shp文件使用EPSG:4326坐标系，也就是WGS84
  • 使用倾斜摄影生成3dtiles时，需要在导出时将原点设置为0 0 0

最后再标注一下项目地址： github链接

vue-amap
关注
在高德地图上加载3DTilesLayer图层模型/天地瓦片
Mr. Zhang Xiaojian's Blog
01-06 1289
提供的一个类，专门用于加载和渲染符合3D Tiles规范的数据。3D Tiles是一种开放标准，旨在高效地传输和渲染大规模三维地理空间数据集。提供的一个类，它允许你将Three.js场景作为一个图层添加到高德地图中。这个类封装了Three.js的核心功能，并与高德地图API进行了集成，使得我们可以轻松地在地图上展示3D内容。是Three.js中的一个类，用于为场景提供均匀的光照效果。同时，还可以添加其他类型的图层，比如瓦片图层，来丰富地图的内容。最后，我们需要初始化高德地图，并在地图加载完成后调用。
高德地图加载三维模型vue（.obj转.gltf）
qq_45331969的博客
12-05 2022
这里首先要将我们的.obj文件转换为.gltf文件。
自己写的 three.js 导入模型 高德三维导入模型
05-02
自己写的 three.js 导入模型，包含相机的旋转 高德三维导入模型，用的是myeclipse工程，大家一起学习学习
高德地图开发官方3D视图demo
12-12
高德地图开发官方3D视图demo
万字长文保存收藏！用高德地图搭建数字农场可视化大屏！
最新发布
weixin_67361678的博客
04-22 1111
本文的内容比较有综合性，基本上用到了之前在技术社区分享的大部分经验，不仅包括高德开放平台的技术，也集成了具体业务分析、GIS数据生成、3D模型制作等内容。
vue3使用高德地图实现3d地图
weixin_71893790的博客
11-20 2308
vue3实现高德地图
Cesium地图上加载3DTiles模型
yangkunming12138的博客
10-12 2107
在Github上下载Building Tools插件，通过编辑-偏好设置-插件-安装，导入压缩包使用，这个可以自己创建小房子，文件-导出为obj格式。其中的options是一个配置文件，关于这个模型在地图上的位置等信息。完成后右侧会提示没有配置地图的相关信息，点击这个提示去配置。会生成两个文件.b3dm和目标json文件。add本地.obj，选择文件上传。选择底图类型，三维还是水平。
园区3D模型obj格式,附加高德3d地图demo
11-06
一个园区的obj模型,并附有部分纹理. 同时还有高德地图加载3dobj模型实例
基于高德地图 JS API2.0 加载GLTF3D模型的demo（配合three.js）.zip
05-18
基于高德地图 JS API2.0 加载GLTF3D模型的demo（配合three.js）.zip
【高德地图】Android搭建3D高德地图详细教
D_AKJS
02-22 5615
高德地图是一款由中国高德软件开发的地图应用程序，提供了包括地图、导航、公交、步行、骑行、出行、地理编码、逆地理编码、地图搜索、路径规划、天气预报、地图 SDK 等多种功能。其中，Android地图SDK是一套地图开发调用接口，开发者可以轻松地在自己的Android应用中加入地图相关的功能，包括：地图显示（含室内、室外地图）、与地图交互、在地图上绘制、兴趣点搜索、地理编码、离线地图等功能。高德地图开放平台：https://lbs.amap.com/
地图导航 Cesium+Vue2+高德地图
SEEKERJY的博客
08-28 1176
cesium + 高德地图 实现路径规划及获取鼠标当前经纬度
amap-data-tile:高德地图海量数据展示优化
05-10
高德地图海量数据展示优化 假设开发中，遇到这样一个需求：“接口返回一片地区内所有的小区的电子围栏，将小区绘制到高德地图上”。很容易写出下面这样的代码： const map = new Amap.Map(); for (const item of data) { const polygon = new AMap.Polygon(item); map.add(polygon); } 效果大致可能就是这样，在实际运行中，很有可能会非常卡顿，因为绘制耗了大量时间，如果在地图上还有事件交互，也可能会非常卡顿。实际业务根本无法使用，这时候就要找办法性能优化，翻阅高德地图的文档示例，可能会发现有“集群”、“海量点”渲染优化等示例，但是实际上在项目中可能还是没法使用（比如这个需求是绘制小区）。 从数据出发 从接口层面来看，很有可能是后端吐出大规模地理信息数据，前端拿到数据后根据产品需求进行渲染，本
objLoad三维模型加载
11-25
加载.obj的三维模型到程序中，希望大家能有用
在高德地图上显示大疆智图导出的三维模型（.obj转.gltf）
qq_43747351的博客
07-05 9680
最近使用大疆智图生成了三维模型，想在高德三维地图上显示出来。最先尝试了.b3dm格式的，发现高德api加载一直不显示。后面决定试试.gltf，但是大疆智图没有这种格式，所以我把大疆智图.obj格式转换成.gltf，让人伤心的是转换之后并不能直接显示出来。中间有许多坑如该文章描述https://blog.youkuaiyun.com/LiAngels/article/details/114083044， `在这里插 glTF 模型 入代码片` 文件目录结构如下，引入模型文件时不要忘了图片
Android - 简单的显示高德SDK中的3D地图
qq_40982229的博客
09-27 2031
标题
在 vue3 中使用高德地图
热门推荐
weixin_64684095的博客
04-23 1万+
自定义 Marker 内容可以是字符串拼接的 DOM 元素。可以根据 class 名去定义样式。//点标记显示内容`;如果不想使用 JS API 的结果面板，panel 可以缺省或者赋值 false，然后在 search()的回调中处理自己的逻辑，自定义搜索教程前往 输入提示与 POI 搜索。//在回调函数中使用插件功能placeSearch.search("北京大学", function (status, result) {//查询成功时，result 即对应匹配的 POI 信息})
在 Vue2 中引入高德地图和三维模型
XiheMa的博客
05-02 7148
在 Vue2 中引入高德地图和三维模型 概述 最近在做一个前端项目，需要在地图上引入一个三维模型，前端使用 Vue2，好在现在都有功能丰富的地图 API 供开发者调用（腾讯地图、百度地图、高德地图等等），在此项目中我们采用高德开放平台提供的 API，但是在引入三维模型遇到了各种问题，在这里把引入三维模型所遇到的问题和实现流程做个汇总。
高德开放平台3d线模型加载卡顿_高德地图又出逆天黑科技！全国各大城市模型直接获取...
weixin_36487107的博客
01-22 1545
本文转自：公众号“设计气象台” 作者：爱敷面膜的台小妹高德地图可以做区位分析，想必你应该都知道了。（▲ 高德地图“原配”色系）但是最近发现，高德地图又新出了个逆天的功能——一键生成城市3D模型！你可能已经忘了高德地图的各种神技能。没事~咱们都看一下！多种地图样式，轻松打造区位分析当你打开高德地图的时候，它已经自动帮你做好各种配色模板，直接选用就能做出酷炫效果。当然，它的水体、道路、陆地、绿化、建筑...
cesium 3dtiles 加载本地数据_Cesium的扩展工具包-EarthSDK使用指南1
weixin_39859128的博客
11-28 981
前言Cesium作为三维GIS和BIM应用的主力引擎，目前已经受到越来越多的开发者的青睐。这两年笔者也一直做Cesium相关的开发工作，真切地感受到Cesium的强大，其丰富的API、丰富的示例为开发三维GIS/BIM应用提供了极大的便利。为了进一步丰富Cesium的开发生态，我们把之前在Cesium基础上开发的功能，以及大量的改良功能，封装成若干个独立的js包。这样也避免开发者重复造轮子。对于大...
如何安装node，怎么避免报错npm运行报错无法加载文件 D:\node\npm.ps1，因为在此系统上禁止运行脚本。
03-23
### 如何正确安装 Node.js 并解决 npm 运行时因 PowerShell 脚本被禁用而导致的错误 #### 正确安装 Node.js 的方法 为了确保 Node.js 及其包管理工具 npm 的正常工作，以下是关于安装和配置的关键步骤说明： 1. **下载并安装 Node.js** 需要从官方站点获取最新版本的 Node.js 安装程序，并按照提示完成安装过程。这一步会自动设置环境变量 PATH 来指向 Node.js 和 npm 执行文件的位置。 2. **验证安装是否成功** 使用以下命令可以确认 Node.js 和 npm 是否已正确安装： ```bash node -v && npm -v ``` 3. **自定义全局模块存储路径** 如果希望更改默认的 npm 全局模块存放位置，则可以通过如下方式实现。假设目标路径为 `D:\program\node\node_global`，则需执行以下命令来更新 npm 的前缀配置[^1]: ```bash npm config set prefix "D:\program\node\node_global" ``` 4. **创建必要的缓存目录结构** 在指定的目标节点主目录下手动新建两个子文件夹——`node_global` 用于保存全局模块，而另一个名为 `node_cache` 则用来作为缓存空间[^3]。 #### 处理由于 PowerShell 脚本策略引发的问题 当尝试通过 npm 命令启动某些依赖于 Windows 上运行脚本的任务（比如构建项目）时，可能会遇到权限不足的情况。这是因为系统的安全机制阻止了未经签名的脚本被执行。对此有几种解决方案可供选择： 1. **调整当前用户的执行策略级别** 若要允许本地编写的未签署脚本得以顺利执行而不影响其他方面安全性的话，可以在打开一个新的管理员模式下的 PowerShell 终端里键入下面这条指令以改变该设定值[^2]: ```powershell Set-ExecutionPolicy RemoteSigned -Scope CurrentUser ``` 2. **临时绕过限制运行特定脚本** 对单次操作而言也可以考虑采用这种方式，在调用相关脚本之前加上 `-ExecutionPolicy Bypass` 参数即可忽略常规约束条件。例如对于某个具体的 .ps1 文件来说形式上应该是这样的样子： ```powershell powershell.exe -ExecutionPolicy Bypass -File script.ps1 ``` 以上措施能够有效缓解由 PowerShell 默认的安全防护所引起的阻碍现象，从而保障基于 JavaScript 构建流程的成功实施。 ```python print("Node.js and NPM setup completed successfully.") ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值