在高德地图上显示大疆智图导出的三维模型（.obj转.gltf）

最近使用大疆智图生成了三维模型，想在高德三维地图上显示出来。最先尝试了.b3dm格式的，发现高德api加载一直不显示。后面决定试试.gltf，但是大疆智图没有这种格式，所以我把大疆智图.obj格式转换成.gltf，让人伤心的是转换之后并不能直接显示出来。中间有许多坑如该文章描述https://blog.csdn.net/LiAngels/article/details/114083044

文件目录结构如下，引入模型文件时不要忘了图片

gltf3D.html代码块

<!DOCTYPE HTML>
<html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><link rel="stylesheet" href="//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/><title>glTF 模型</title><style>html,body,#container {margin: 0;padding: 0;width: 100%;height: 100%;}.cc {position: absolute;color: #000000;bottom: 10px;left: 10px;}</style><script>delete window.AMap;</script></head><body><div id="container"></div><!-- <div class="cc">shanghai city 3D models by Michael Zhang /<a target='_blank' href="https://creativecommons.org/licenses/by/2.0/">CC BY </a></div> --><script src="//webapi.amap.com/maps?v=1.4.5&key=你的key&plugin=Map3D"></script><script src="//a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script><script>mapInit()function mapInit() {console.log("运行1")// 创建地图实例var map = new AMap.Map("container", {viewMode: '3D',pitch: 30,rotation: 25,zoom: 16,center: [121.499809, 31.236666],// center: [114.32989, 30.577555],// mapStyle: 'amap://styles/macaron',showIndoorMap: false});// 创建Object3DLayer图层var object3Dlayer = new AMap.Object3DLayer();map.add(object3Dlayer);var druckMeshes, cityMeshes;map.plugin(["AMap.GltfLoader"], function() {console.log("运行2")// var urlCity = 'https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf';// var urlCity = 'http://47.99.115.190:8080/model/texture.gltf';var urlCity = './texture.gltf';// var urlDuck = 'https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf';var paramCity = {position: new AMap.LngLat(121.499809, 31.236666), // 必须scale: 8, // 非必须，默认1height: -10, // 非必须，默认0scene: 0, // 非必须，默认0};// var paramDuck = {//     position: new AMap.LngLat(114.32989,30.577555), // 必须//     scale: 800, // 非必须，默认1//     height: -100,  // 非必须，默认0//     scene: 0, // 非必须，默认0// };var gltfObj = new AMap.GltfLoader();gltfObj.load(urlCity, function(gltfCity) {cityMeshes = gltfCity;gltfCity.setOption(paramCity);gltfCity.rotateX(0);gltfCity.rotateZ(0);object3Dlayer.add(gltfCity);console.log("运行3");});// gltfObj.load(urlDuck, function (gltfDuck) {//     druckMeshes = gltfDuck;//     gltfDuck.setOption(paramDuck);//     gltfDuck.rotateX(90);//     gltfDuck.rotateZ(-20);//     object3Dlayer.add(gltfDuck);// });});// 给gltf模型绑定事件map.on('click', function(ev) {var pixel = ev.pixel;var px = new AMap.Pixel(pixel.x, pixel.y);var obj = map.getObject3DByContainerPos(px, [object3Dlayer], false) || {};if (obj && obj.object) {var meshId = obj.object.id;// if(druckMeshes && druckMeshes.layerMesh){//     for(var i = 0; i < druckMeshes.layerMesh.length; i++) {//         if(meshId === druckMeshes.layerMesh[i].id){//             return log.info("您点击了小黄鸭模型！");//         }//     }// }if (cityMeshes && cityMeshes.layerMesh) {for (var i = 0; i < cityMeshes.layerMesh.length; i++) {if (meshId === cityMeshes.layerMesh[i].id) {return log.info("您点击了陆家嘴模型！");}}}}});}</script></body>
</html>

这里高德地图key可能需要注意一下，不同的key提供的服务可能不同
结果出现如下错误，报错问题就是http请求变成https请求，网上搜了许多都说什么在头部去掉某一行什么的，然并没有什么用。

https://www.cnblogs.com/yougewe/p/7440008.html这篇文章说的很明白，其中的4. 推荐方法，不指定具体协议，使用资源协议自适配，比如，当前为https页面，那么就是https资源，如果是http页面，那么就是http资源。具体操作就是将请求链接中的https去掉即可，效果如下图所示：

在高德地图上显示大疆智图导出的三维模型（.obj转.gltf）相关推荐

【大疆智图】| 重建三维模型
(以厦门理工学院南门三维模型为例) 1.新建任务进入[大疆智图]软件,新建任务-三维模型. 填写任务名称. 2.导入图片右边任务栏导入图片. 可以单张图片,也可以导入图片文件夹. 这里需要导入航线 ...
2000坐标系高程与85高程转换_科普 | 如何在大疆智图中设置坐标系
点击上方蓝字关注我们在大疆智图"输出坐标系设置"中可设置坐标系,例如选择WGS 84/ UTM zone 49N或CGCS2000(2000国家大地坐标系)/Gauss-Kr ...
实测大疆智图与ContextCapture Center 集群效率和模型效果对比
在"实景三维中国建设"的战略背景下"倾斜摄影三维模型"将是测绘行业未来最大的风口.为了获取高精度的实景三维模型,往往需要获取大量的航摄数据.面对海量的数据,建模 ...
【实验记录】--大疆智图的辐射定标
50%和75%两块漫反射标准板进行辐射校正时的使用说明 1.标准板虽然是漫反射体,在野外测量时,尽可能使用0°观测,也就是观测方向垂直于白线板(法线),入射到白板上的光的入射角(白板法线交角)保持在1 ...
基于大疆智图和云端地球，发布OSGB格式三维航拍模型
一三维模型生成 1.利用大疆精灵4进行航拍 2.利用大疆智图进行三维建模,在1处选择拷贝的航拍文件夹,2处勾选三维模型. 在高级设置里面选择模型格式,这里我们选择最普遍的格式之一,OSGB格式. 结 ...
大疆智图、CC生产了多份数据，如何合并为一份在图新地球进行加载
0问题来源: 无人机对某一地方分区域进行数据采集,通过大疆智图或Context Capture进行倾斜模型构建,会形成多个倾斜模型数据文件.如果数据量很大,一个一个加载会很麻烦.因此,我们需要将多个倾 ...
课程预告|房地一体化倾斜摄影测绘——大疆智图建模流程方法精讲
2019年3月28日,DJI大疆创新推出了大疆智能无人机航测软件.该软件提供了自主航线规划.飞机航拍等功能,并能将无人机航测采集的数据转为数字化二维正射影像与三维模型.帮助大家提升内外业工作效率,大疆 ...
大疆智图“入驻”泰州输电中心助力智能化运检，同步升级行业应用售后服务...
大疆为电网智能运检保驾护航. 作为国网率先建成的首个地市级输电智能运检中心,泰州智能运检中心(以下简称"运检中心")构成了以无人机为主.人工协同为辅的巡检体系.物联网及多源感知体系 ...
【大疆智图软件使用】| 需要使用显卡4G及以上的NVIDIA显卡
一.绑定问题激活绑定的时候,提示如下: 解决方法: 这里,我粗暴解决了.一直点击确定-绑定-确定...,直到右边激活的许可证那里显示为:可绑定设备:0/1.就完成了绑定. 二.重建问题在我导入图片 ...

在高德地图上显示大疆智图导出的三维模型（.obj转.gltf）

在高德地图上显示大疆智图导出的三维模型（.obj转.gltf）相关推荐

最新文章

热门文章