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，详见如下

第一步: 配置文件目录,把esmap-1.6.min.js文件、室内三维地图相应的室内三维地图文件、主题文件放在根目录的静态目录下。

Vue-cli2:

Vue-cli3:

第二步: 加载sdk,在 index.html 文件下引入esmap sdk

Vue-cli2:

Vue-cli3:

第三步: 创建一个单独的室内三维地图容器组件 这里命名为 MapContainer.vue ，并创建一个id为map-container的容器

    <template>
      <div id='map-container'></div>  
  </template>

  <style>
  html,
  body,
  #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; // 获取vue实例

    this.map = new esmap.ESMap({
      container: document.getElementById('map-container'), // 室内三维地图初始化的容器
      mapDataSrc: './static/esmap/mapData/', // 室内三维地图数据所在目录
      mapThemeSrc: './static/esmap/theme/', // 室内三维地图主题所在目录
      themeID: 1004, // 请确保theme主题目录下存在该主题的数据包
      // token应该填写在esmap官网创建该室内三维地图时所填写的token，每个室内三维地图ID对应一个唯一的token
      token: 'escope'
    });
    this.map.openMapById(this.vm.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;

第五步: 初始化室内三维地图 在MapContainer.vue内，使用import方式导入 MapApplication实例，组件mounted时初始化室内三维地图

    <script>

import MapApplication from '../MapApplication';

export default {
  name: 'MapContainer',
  data: () => ({
    mapID: 'test666',
  }),
  mounted() {
    // 初始化室内三维地图
    MapApplication.initMap(this);

  },
  destroyed() {
    // 销毁室内三维地图
    MapApplication.destroyMap()
  }
};
</script>

大功告成

完成vue搭建室内三维地图

注意：

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

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

不能将室内三维地图map对象绑定到vue组件的this上面


vue错误图片