uniapp导入高德地图三维模型实现webview和页面通讯

上图

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 这样写起来逻辑比较好理解一点轮子已经有了，剩下的自行构造

<!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, querylet 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, // 非必须，默认1height: data.option.height || 0, // 非必须，默认0scene: 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>

三维模型的数据模拟
nuve

data:{id: 2,//idurl: '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,// idname: '视图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
})

webview 全局变量

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

如有不懂，可私信

uniapp导入高德地图三维模型实现webview和页面通讯相关推荐

uniApp使用高德地图api
uniApp使用高德地图api 1,在自己项目中的/src/common/js中的weixin.js写入,没有就新建文件,(具体目录因自己项目而议) export const weixin = {/* ...
uni-app 接入高德地图案例
第一步:注册高德地图开发者账号地址:https://lbs.amap.com/ 第二步:创建自己的应用 (我这里是小程序的) 第三步:下载相关sdk文件,导入amap-wx.js到项目中第四步:创 ...
uniapp做高德地图
这是在uniapp中集成高德地图,需要城市名字确定地图城市, 使用精准定位并且设为地图中心,在初始化地图的时候先不设置center,在下面得到精准定位之后 onComplete的参数data中的lng ...
uniapp使用高德地图线路规划
地图终于实现了想要的功能准备高德地图提供了线路规划的接口,但是由于uniapp使用的是小程序的SDK,有些东西就会无法使用参考文档 SDK里面的东西都是小程序中的语法,比如wx.getLocat ...
uniapp使用高德地图定位（兼容app）
1.获取Key 查看官方文档需要:应用包名和SHA1(获取方法查看) 2.配置manifest.json 3.设置安全通讯域名登录微信公众平台,在 "设置"->& ...
uni-app接入高德地图SDK实现定位用户城市
参考文章:http://ask.dcloud.net.cn/article/35070 本文以高德微信小程序 SDK 为例,简述如何在 uni-app 中利用微信小程序第三方 SDK,实现 App 端 ...
leaflet |（1）在R语言中导入高德地图
本号计划出几篇推文介绍leaflet这个工具包,它的功能是创建交互式网络地图(Create Interactive Web Maps),并添加各类要素.参考资料见网址:https://rstudio. ...
RN导入高德地图定位的用法实例
转载自:[译]React Native开源高德地图定位组件(react-native-amap-location) -江清清的技术专栏 1.NPM install 1 npm install relo ...
uniapp使用高德地图微信小程序SDK生成地图轨迹
一文看懂微信小程序生成地图轨迹一.开发准备 1.下载微信小程序SDK 2.高德控制台申请相关平台key 二.html页面展示地图标签三.引入sdk及定义数据四.相关方法(静态生成两个点之间的轨迹 ...
Vue + 高德地图 + 三维模型
一:创建高德的kek和密钥(根据需求选择服务平台),我选择的是web端(JS API) 二:在vue中引入高德地图在public文件下找到index.html文件引入你的key值. 参考:https ...

uniapp导入高德地图三维模型实现webview和页面通讯

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

uniapp 和 webviewd 相互传值

传值逻辑

webview 全局变量

uniapp导入高德地图三维模型实现webview和页面通讯相关推荐

最新文章

热门文章