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

作者：笔触狂放9 | 2024-03-11 19:53:16

踩

高德地图api加载三维模型

最近使用大疆智图生成了三维模型，想在高德三维地图上显示出来。最先尝试了.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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

这里高德地图key可能需要注意一下，不同的key提供的服务可能不同
结果出现如下错误，报错问题就是http请求变成https请求，网上搜了许多都说什么在头部去掉某一行什么的，然并没有什么用。
在这里插入图片描述
https://www.cnblogs.com/yougewe/p/7440008.html这篇文章说的很明白，其中的4. 推荐方法，不指定具体协议，使用资源协议自适配，比如，当前为https页面，那么就是https资源，如果是http页面，那么就是http资源。具体操作就是将请求链接中的https去掉即可，效果如下图所示：在这里插入图片描述

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/220486