Tips:可直接下载完整示例,相关文件已配置
vue-cli3没有static 文件夹,而使用 public 文件夹代替,详见如下:
把esmap-3.0.min.js文件、三维场景相应的三维场景文件、主题文件放在根目录的静态目录下;
同理无论是webpack、vue-cli亦或是vite脚手架生成的项目,将三维场景资源放入静态目录下即可。
Vue-cli2:<template>
<div id='map-container'></div>
</template>
<style>
html,
body,
#map-container {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
</style>
class MapApplication {
constructor() {
this.map = null;
}
/**
* 初始化三维场景
* @param {*} mapID
*/
initMap(mapID) {
this.map = new esmap.ESMap({
mode: esmap.MapMode.Building, // *配置三维场景模式*
container: document.getElementById('map-container'), // 三维场景初始化的容器
mapDataSrc: './static/esmap/mapData/', // 三维场景数据所在目录
// token应该填写在esmap官网创建该三维场景时所填写的token,每个三维场景ID对应一个唯一的token
token: 'escope'
});
this.map.openMapById(mapID);
//楼层控制控件配置参数
var ctlOpt = new esmap.ESControlOptions({
position: esmap.ESControlPositon.RIGHT_TOP,
});
let _this = this;
this.map.on('loadComplete', function () {
// 创建楼层控件
var floorControl = new esmap.ESScrollFloorsControl(_this.map, ctlOpt);
})
}
/**
* 销毁三维场景
*/
destroyMap() {
this.map.dumpScene();
this.map = null;
}
}
export default new MapApplication;
<template>
<div id='map-container'></div>
</template>
<script>
import MapApplication from '../MapApplication';
export default {
name: 'MapContainer',
data: () => ({
mapID: 'test666',
}),
mounted () {
// 初始化三维场景
MapApplication.initMap(this.mapID);
},
destroyed () {
// 销毁三维场景
MapApplication.destroyMap()
}
};
</script>
<style>
html,
body,
#map-container {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
</style>
<template>
<div id='map-container'></div>
</template>
<script>
import MapApplication from '../MapApplication';
import { onMounted,onUnmounted } from 'vue'
export default {
name: 'MapContainer',
setup() {
let mapID = 'test666'
onMounted(() => {
// 初始化地图
MapApplication.initMap(mapID)
})
onUnmounted(() => {
// 销毁三维场景
MapApplication.destroyMap()
})
return {}
}
};
</script>
<style>
html,
body,
#map-container {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
</style>
使用vue2的时候,不能将三维场景map对象绑定到vue组件的this上面。要不然vue会深度遍历map对象,严重影响性能。
验证是否造成了双向绑定:在控制台打印esmap.ESMap.instance ,拉到最下面,如果有一堆的getter和setter,就说明被双向绑定了。
不能将三维场景map对象绑定到vue组件的this上面
控制台报错" ReferenceError: esmap is not defined ",请确认SDK的引入路径是否出错。
需要查看是否正确引入SDK路径,可以打开F12开发者工具,选择 "network(网络)" 并搜索esmap-3.0-min.js等关键字。
若状态码返回200,则说明引入成功。
Tips:可直接下载完整示例,相关文件已配置
class ESMap extends React.Component{
componentDidMount(){
let map = new window.esmap.ESMap({
container: document.getElementById('map-container'), // 绑定dom
mapDataSrc: './data', // 地图数据位置
token:"escope, // 地图token
})
map.openMapById('test666'); //打开地图数据
map.showCompass = true; //显示指南针
}
render(){
return(<div id="map-container"></div>)
}
}
ReactDoM.render(
<React.strictMode>
<ESMap />
</React.StrictMode>,
document.getElementById('root')
);
前往体验 微信室内三维场景导航DEMO
调用ESMap室内外三维场景需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内外三维场景需要满足以下 2 个条件:
1. 小程序是企业主体,微信 web-view 组件不对个人类型的小程序开放。
2.您需要有一个自己的域名,在嵌入网页的时候需要在微信后台验证域名(只有自己域名下的网页才能被正确地显示哦,不能随便找一个公开链接)。
1、域名验证:
需要注意的是,这里的域名强制 https,需要配置好 https 证书,购买服务器的时候也要注意购买支持 https 的服务器。
首先我们在微信的后台找到开发 > 开发设置 > 业务域名模块,并填上你需要绑定的域名。
需要注意的是,这里的域名强制 https,需要配置好 https 证书,购买服务器的时候也要注意购买支持 https 的服务器。
接下来,我们需要下载一个微信的验证文件,放在你域名的根目录下,并且支持访问。
具体来说,如果网址是https://您的域名/,微信的验证文件是WATLNxupm4.txt,
您需要确保https://您的域名/WATLNxupm4.txt 可以公开访问。
确认无误之后,点击保存即可成功保存。
注:小程序所有用到的https请求都需要配置合法域名
2、嵌入带有室内三维场景的web-view组件
这个过程其实很简单,找到你微信小程序的.wxml文件,添加以下代码
<web-view src='https://您的域名/esmap.html'/>
其中 https://您的域名/esmap.html 是带有三维场景的 H5 页面
室内三维场景制作流程,您可以使用下面两种方式构建这个页面:
1) 从https://www.esmap.cn 官网中复制测试三维场景源码DEMO,在您自己的服务器进行免费部署。
2) 参考https://www.esmap.cn 室内外三维场景SDK开发说明,在您已有的 H5 页面上添加自己制作的室内外三维场景。
微信小程序的 web-view 只能是全屏的,并且会覆盖页面中的所有其他组件。
1) 如果想在网页中判断是否处于微信小程序中
var ua = window.navigator.userAgent.toLowerCase();
if (ua.indexOf('micromessenger') == -1) {// 说明不在微信中
// 走不在小程序的逻辑
} else {
wx.miniProgram.getEnv(function(res) {
if (res.miniprogram) {
// 走在小程序的逻辑
} else {
// 走不在小程序的逻辑
}
})
}
2) 如果网页想给小程序传递信息,可以通过 wx.miniProgram.postMessage 方法。
3) 小程序中可以通过 postMessage 方法监听网页传递回来的数据,但是该方法仅在特定时机(小程序后退、组件销毁、分享)触发,没法实时传递消息。
4) 网页跳转到小程序页面
wx.miniProgram.navigateTo({
url: '/pages/esmap/esmap?location=' + obj.location
});
前往体验 微信室内外三维场景导航DEMO
调用ESMap室内外三维场景需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内外三维场景需要满足以下 2 个条件:
1. 小程序是企业主体,支付宝 web-view 组件不对个人类型的小程序开放。
2. 您需要有一个自己的域名,在嵌入网页的时候需要在支付宝后台验证域名(只有自己域名下的网页才能被正确地显示哦,不能随便找一个公开链接)。
支付宝小程序管理中心 > 设置 > 开发设置 > H5域名配置 里设置(如下图)
1、域名验证:
由于支付宝平台的规定,web-view 指向的地址,必须是在支付宝小程序后台登记的域名,否则无法使用。
首先我们找到支付宝小程序管理中心 > 设置 > 开发设置 > H5域名配置,并填上你需要绑定的域名。
需要注意的是,这里的域名强制 https,需要配置好 https 证书,购买服务器的时候也要注意购买支持 https 的服务器。
接下来,我们需要下载一个支付宝的验证文件,放在你域名的根目录下,并且支持访问。
具体来说,如果网址是https://您的域名/,支付宝的验证文件是WATLNxupm4.txt,
您需要确保https://您的域名/WATLNxupm4.txt 可以公开访问。
确认无误之后,点击保存即可成功保存。
注:小程序所有用到的https请求都需要配置合法域名
2、嵌入带有室内三维场景的web-view组件
这个过程其实很简单,找到你支付宝小程序的.wxml文件,添加以下代码
<web-view src='https://您的域名/esmap.html'/>
其中 https://您的域名/esmap.html 是带有三维场景的 H5 页面
室内三维场景制作流程,您可以使用下面两种方式构建这个页面:
1) 从https://www.esmap.cn 官网中复制测试三维场景源码DEMO,在您自己的服务器进行免费部署。
2) 参考https://www.esmap.cn 室内三维场景SDK开发说明,在您已有的 H5 页面上添加自己制作的室内三维场景。
支付宝小程序的 web-view 只能是全屏的,并且会覆盖页面中的所有其他组件。
1) 支付宝小程序给网页传递信息方法
this.webViewContext = my.createWebViewContext('web-view-1');
this.webViewContext.postMessage({'sendToWebView': '1'});
2) 如果网页想给支付宝小程序传递信息,可以通过 my.postMessage({'sendToMiniProgram': '0'}); 方法。
虽然uni-app框架(采用vue底层)支持打包到不同平台,但是各平台例如微信小程序主界面并不是js代码编写;
这导致无法使用vue直接调用易景三维场景SDK,只能采用web-view组件套用H5网页来实现。
1、首先下载uni-app官网的HBuilder X开发工具,在该工具上创建好项目模板。
2、只需嵌入带有室内三维场景链接的web-view组件便可轻松实现,找到您需要放置的.vue文件,在web-view组件里添加您的项目链接即可:
3.在HBuilder X开发工具上运行您需要的应用平台,若是小程序端,便可以在对应开发工具上预览发布。
室内三维场景制作流程,您可以使用下面两种方式构建这个页面:
1) 从 https://www.esmap.cn 官网中下载测试三维场景源码DEMO,在您自己的服务器进行免费部署。
2) 参考 https://www.esmap.cn 室内三维场景SDK开发说明,在您已有的页面上添加自己制作的室内三维场景。
1、web-view组件会自动铺满整个页面,所以会覆盖页面中的所有其他组件。
2、在各小程序平台上,web-view组件加载的url需要在小程序开发工具后台配置域名白名单,包括内部 iframe 内嵌的其他url。
由于各平台例如微信小程序使用的是web-view组件加载,postMessage事件被禁用,但可以通过websocket方法实现;
如果是简单数据,例如字符串数据,可以选择路由传参的方式传递,web-view组件的网页会通过解析url的方式取出参数。
若传递的数据具有实时性或需要安全性,例如获取蓝牙定位数据,建议使用websocket的方法更为稳定;
以下是开启websocket的参考代码:
<template>
<view class='websockets'>
<web-view src='https://您的域名/(您的室内三维场景项目网页)'></web-view>
</view>
</template>
<script>
export default {
onLoad() {
// 进入这个页面的时候创建websocket连接[整个页面随时使用]
this.connectSocketInit();
},
data() {
return {
socketTask: null,
is_open_socket: false
}
},
// 关闭websocket[必须在实例销毁之前关闭,否则会是underfined错误]
beforeDestroy() {
this.closeSocket();
},
methods: {
// 进入这个页面的时候创建websocket连接
connectSocketInit() {
// 创建一个this.socketTask对象[发送、接收、关闭socket都由这个对象操作]
this.socketTask = uni.connectSocket({
// 必须确保你的服务器是成功的,小程序中必须是 wss:// 协议
url: 'wss:// www.example.com/socket',
success(data) {
console.log('websocket连接成功');
},
});
// 消息的发送和接收必须在正常连接打开中,才能发送或接收
this.socketTask.onOpen((res) => {
console.log('WebSocket连接正常打开中...!');
this.is_open_socket = true;
// 注:只有连接正常打开中 ,才能正常成功发送消息
this.socketTask.send({
data: 'uni-app发送一条消息',
async success() {
console.log('消息发送成功');
},
});
// 注:只有连接正常打开中 ,才能正常收到消息
this.socketTask.onMessage((res) => {
console.log('收到服务器内容:' + res.data);
});
})
// 这里仅是事件监听[如果socket关闭了会执行]
this.socketTask.onClose(() => {
console.log('已经被关闭了')
})
},
// 关闭websocket
closeSocket() {
this.socketTask.close({
success(res) {
this.is_open_socket = false;
console.log('关闭成功', res)
},
fail(err) {
console.log('关闭失败', err)
}
})
},
// 封装一个发送消息的函数
onRequest() {
if (this.is_open_socket) {
// 发送一次消息
this.socketTask.send({
data: '请求一次发送一次message',
async success() {
console.log('消息发送成功');
},
});
}
}
}
}
</script>
1、小程序必须为企业主体,web-view 组件不对个人类型的小程序开放。
2、您需要有一个自己的域名,在嵌入网页的时候需要在各小程序平台开发工具后台验证域名。
(只有自己域名下的网页才能被正确地显示哦,不能随便找一个公开链接)