uniapp导入高德地图三维模型实现webview和页面通讯_uni-app高德地图立体的线路

作者：神奇cpp | 2024-07-16 08:42:03

踩

uni-app高德地图立体的线路

上图在这里插入图片描述

uniapp 加入三维视图的解决方案：

nuve+webview 展示+交互【推荐】
vue+webview 展示+交互（只能webview内部实现数据交互，在vue上添加控件会被覆盖，需要用到第三种方式实现外部加控件）
vue+webview+subnvue 展示+交互

uniapp 和 webviewd 相互传值

evalJs+webview 【推荐】
url+webview (url:xxxxx?data=xxx)

文章参考-Simple nvue向网页传参，网页向nvue传参
 文章参考-uniapp与webview之间的相互传值url传参]

方式	对比	注意事项
evalJs+webview	传参灵活，地图值渲染一次，体验感好	只有在webview加载完成后，传参才有效，注意处理
url+webview	传参需要处理，地图会在每一次改动后重新加载，体验感查，性能也不太好	参数处理需要使用encodeURIComponent()、decodeURIComponent() 方式数据丢失

传值逻辑

在nuve 端

视图
<web-view @pagestart="onPageStart" @pagefinish="onPageFinish" @error="onError" class="web-view" :style="`height:${height}px;`"
		 :src="url" ref="webview" @onPostMessage="handlePostMessage"></web-view>
传值
this.$refs.webview.evalJs(`jsfunction(${JSON.stringify(obj)})`);



接收值的部分
handlePostMessage(data) {
	// 获取网页的参数
	console.log("得到参数", data.detail.data[0]);
	let message = data.detail.data[0]
	switch (message.action) {
		case 'loading':
			if (message.data.show) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
			} else {
				uni.hideLoading()
			}
			break;
		default:
			break;
	}
}


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

在webview页面加入了大家比较熟悉vue 这样写起来逻辑比较好理解一点轮子已经有了，剩下的自行构造

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
		<title>xxxx</title>
		<script src="https://webapi.amap.com/maps?v=1.4.15&key=your apikey"></script>
		<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
		<script crossorigin="anonymous" integrity="sha512-Dg4/NsM35WYe4Vpj/ZzxsN7K4ifsi6ecw9+VB5rmCntqoQjEu4dQxL6/qQVebHalidCqWiVkWVK59QtJCCjBDQ=="
		 src="https://lib.baomitu.com/es6-shim/0.35.6/es6-shim.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js"></script>
		<style>
			html,
		    body,
		    #container {
		      width: 100%;
		      height: 100%;
			  margin:0 !important;
		    }
		  </style>
	</head>
	<body>
		<div id="container"></div>

		<!-- uni 的 SDK -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		<script>
			// 划线
			const mask = [
				[xxxx, xxx],
				[xxx, xxxx],
				[xxxx, xxxx],
				[xxxx, xxxx]
			]
			// 定义全局变量
			let map, query
			let object3DlayerGltf = new AMap.Object3DLayer();
			document.addEventListener('UniAppJSBridgeReady', function() {
				uni.webView.getEnv(function(res) {
					console.log('当前环境：' + JSON.stringify(res));
				});

			});
			let object3DlayerPopup = new AMap.Object3DLayer({
				zIndex: 110,
				opacity: 1
			});
			let object3DlayerRadar = new AMap.Object3DLayer();
			let vm = new Vue({
				el: "#app",
				data() {
					return {
						data: {
							acton: "",
							type: "",
							option: {
								url: 'http://192.168.1.102:8081/02.gltf',
								scale: 0.01,
								height: 0,
								rotateX: 90,
								rotateZ: 0,
								Lng: null,
								Lat: null,
							}
						},
						center: [xxx, xxxx],//更换为自己需要的中心点
						gltfArray: [],					
					}
				},
				created() {
					this.initMap()
				},
				mounted() {
				/./ 实时接收webview传过来的值
					window.jsfunction = (data) => {
						this.postMessage({
							data: data 
						})
						this.actionEvent(data)
					}
				},
				methods: {
				// 向nvue 传值
					postMessage(value) {
						uni.postMessage({
							data: value,
						});
					},
					// 初始化 地图
					initMap() {
						// 创建地图
						map = new AMap.Map('container', {
							viewMode: '3D',
							mask: mask,
							showBuildingBlock: false,
							center: this.center,
							pitchEnable: true,
							pitch: 90,
							zoom: 17,
							// zooms: [17, 20],
							showLabel: false, //不显示地图文字标记
							mapStyle: "amap://styles/dark",
							layers: [
								new AMap.TileLayer.RoadNet({
									rejectMapMask: true
								}),
								new AMap.TileLayer.Satellite(),
							]
						});
						this.InitMasker()
						map.add(object3DlayerGltf);
						map.add(object3DlayerPopup);
						map.add(object3DlayerRadar);
						// this.addWall()
						// this.initMapImg()
					},
					// 添加三维模型
					addModel(data) {
						map.plugin(["AMap.GltfLoader"], () => {
							let rotateX = Number(data.option.rotateX || 90)
							let rotateZ = Number(data.option.rotateZ || 0)
							let Lat = data.option.Lat ? data.option.Lat : this.center[0]
							let Lng = data.option.Lng ? data.option.Lng : this.center[1]
							var paramCity = {
								position: new AMap.LngLat(Number(Lng), Number(Lat)), // 必须
								scale: data.option.scale || 1, // 非必须，默认1
								height: data.option.height || 0, // 非必须，默认0
								scene: data.option.scene || 0, // 非必须，默认0
							};
							var gltfObj = new AMap.GltfLoader();
							// 触发动画
							this.postMessage({
								action: 'loading',
								data: {
									show: true
								}
							})
							gltfObj.load(data.option.url, (gltfBuilding) => {
								cityMeshes = gltfBuilding;
								gltfBuilding.setOption(paramCity);
								gltfBuilding.rotateX(rotateX);
								gltfBuilding.rotateZ(rotateZ);
								object3DlayerGltf.add(gltfBuilding);
								// 将添加的内容push 到数组中
								this.gltfArray.push({
									gltfBuilding,
									data
								})
								this.postMessage({
									action: 'loading',
									data: {
										show: false
									}
								})
								// this.setFitView()
							});
						});
					},
				}
			})
					
			
		</sript>
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

三维模型的数据模拟
nuve

data:{
	id: 2,//id
	url: 'http://192.168.1.102:8080/02.gltf',//glft的网络路径
	scale: 0.01,//缩放
	height: 0,//距离比表面的高度
	rotateX: 90,//x周旋转值
	rotateZ: 80,// y周旋转值
	Lng: xxxx,// 经度
	Lat: xxxx,//纬度
	name: '校园',//模型的名称
	cover: '../../static/image/logo_1.png', // 模型的照片
	views:[ //用于切换视图
		{
			id: 1,// id
			name: '视图1',// 视图名称
			cover: '../../static/image/logo_1.png',//视图对应的照片
			rotation: 90,// 已Z为对称轴的旋转度
			zoomLevel: 18,//空间的缩放度
			Lng: 106.62606,//经度
			Lat: 26.402135,//纬度
			pitch: 90,//视图 0 俯视图 90正视 
		}
	]
}

传值案例
this.sendMessage2Webview({
				action: "add",
				type: "model",
				option: data
})
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

webview 全局变量

params	desc
mask	需要限制区域的点的经纬度
map	全局地图变量
object3DlayerGltf	Gltf 3D 模型变量

如有不懂，可私信

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/833197?site