您现在的位置: 首页 > 室内三维可视化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/ 文件夹下。

易景空间三维场景vue版

第二步:在 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版三维场景示例

大功告成！

example

注意：

使用vue的时候，不能将三维场景map对象绑定到vue组件的this上面。要不然vue会深度遍历map对象，严重影响性能。

验证是否造成了双向绑定：在控制台打印esmap.ESMap.instance ，拉到最下面，如果有一堆的getter和setter，就说明被双向绑定了。

不能将三维场景map对象绑定到vue组件的this上面