您现在的位置: 首页 > 室内三维可视化SDK开发 > 开发指南
vue加载esmap室内场景 使用 vue 开发室内场景与传统开发,有些许不同 下载vue-cli2/vue-cli3版三维场景示例 SDK目前不支持用require js引用,只能使用<script src="lib/esmap-1.6.min.js"></script >引用
Tips:使用 vue -V查看你的vue-cli版本
Tips:请一定要先下载例子来测试三维场景,此开发说明不包含配置package.json里面的配置,请检查
Vue-cli3加载三维场景 vue-cli3没有 static 文件夹,而使用 public 文件夹代替。 其余操作步骤同vue-cli2,详见如下
Vue-cli2加载三维场景步骤
第一步:把esmap-1.6.min.js文件、三维场景相应的图标、三维场景文件、主题文件放在根目录 /static 文件夹下。
三维场景和样式全部不能放置到dist/static/esmap/打包后的文件夹下,要放到根目录/static/esmap/ 文件夹下。
第二步:在 index.html 文件下引入esmap sdk
<body>
<div id="app"> </div>
<script src="./static/esmap/esmap-1.6.min.js"> </script>
<!-- built files will be auto injected -->
</body>
第三步:创建一个单独的三维场景容器组件 这里命名为 MapContainer.vue ,并创建一个id为map-container的容器
<template>
<div id="content">
<div id="map-container"></div>
</div>
</template>
<style>
html,
body,
#content,
#map-container {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
</style>
第四步:创建三维场景初始化class 为方便管理map对象,在src目录创建一个 MapApplication.js 文件,定义 MapApplication类 并导出实例,如下所示:
class MapApplication {
constructor() {
this.vm = null
this.map = null;
}
/**
* 初始化三维场景
* @param {*} vm
*/
initMap(vm) {
this.vm = vm;
this.map = new esmap.ESMap({
container: document.getElementById("map-container"), //三维场景初始化的容器
mapDataSrc: "./static/esmap/mapData/", //三维场景数据所在目录
mapThemeSrc: "./static/esmap/theme/", //三维场景主题所在目录
themeID: 1004, //请确保主题目录下存在该主题的数据包
// token应该填写在esmap官网创建该三维场景时所填写的token,每个三维场景ID对应一个唯一的token
token: 'escope'
});
this.map.openMapById(this.vm.mapID);
var ctlOpt = new esmap.ESControlOptions({
position: esmap.ESControlPositon.RIGHT_TOP,
//注意:imgURL参数是static目录下图片的路径
imgURL: "./static/esmap/img/"
});
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;
第五步:初始化三维场景 在MapContainer.vue内,使用import方式导入 MapApplication实例,组件mounted时初始化三维场景
三维场景初始化后,map对象将赋值给MapApplication实例,在需要map对象的地方通过import MapApplication实例获取map对象。
<script>
import MapApplication from '../MapApplication';
export default {
name: "MapContainer",
data: () => ({
mapID: 'test666',
}),
mounted() {
// 初始化三维场景
MapApplication.initMap(this);
},
destroyed() {
// 销毁三维场景
MapApplication.destroyMap()
}
};
</script>
完整项目请前往 下载vue-cli2/vue-cli3版三维场景示例
大功告成!
注意:
使用vue的时候,不能将三维场景map对象绑定到vue组件的this上面。要不然vue会深度遍历map对象,严重影响性能。
验证是否造成了双向绑定:在控制台打印esmap.ESMap.instance ,拉到最下面,如果有一堆的getter和setter,就说明被双向绑定了。