上圖第一步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;	}}

在webview頁面 加入了大家比較熟悉vue 這樣寫起來邏輯比較好理解一點 輪子已經有了，剩下的自行構造

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})

paramsdescmask需要限制區域的點的經緯度map全域性地圖變數object3DlayerGltfGltf 3D 模型變數