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

最新推荐文章于 2023-05-13 10:48:49 发布

Little fool 〆

最新推荐文章于 2023-05-13 10:48:49 发布

阅读量8.7k

点赞数 2

文章标签： javascript node.js

本文链接：https://blog.csdn.net/qq_43747351/article/details/118494771

版权

最近使用大疆智图生成了三维模型，想在高德三维地图上显示出来。最先尝试了.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, // 非必须，默认1
						height: -10, // 非必须，默认0
						scene: 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去掉即可，效果如下图所示：在这里插入图片描述

Little fool 〆

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
7
评论
在高德地图上显示大疆智图导出的三维模型（.obj转.gltf）

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

扫一扫