ESMap构建电子地图

插件介绍
SDK文档地址

使用步骤：
1 引入ESMap SDK

<script src="lib/esmap.min.js" > </script >

2 创建地图容器 <div id="map-container"> </div>
3 拷贝地图数据和主题数据到项目中（可到文档demo中下载，实际项目需要购买定制模型文件）
4 配置初始化参数，并创建地图（具体参考文档）

var map = new esmap.ESMap({
    container:document.getElementById('map-container'), //地图显示容器
    token:"escope"  //打开地图对应的token
    mapDataSrc: "data/", //地图数据位置，与推荐目录相同可省略
    mapThemeSrc: "data/theme/", //地图主题位置，与推荐目录相同可省略 
});
map.openMapById(10005);

ESMap demo.png

弊端：基于html结构，不能以组件方式嵌入vue项目，需要用iframe引入

功能需求：2D平面配置点位，2.5D地图页面显示，选择配置的点位展示对应视角；
实现过程：
a页面

设置页面编辑及列表区域.png
显示2D平面图配置对应点位,设置viewMode: esmap.ESViewMode.MODE_2D, 显示2D图，右侧为对应列表及编辑区域，点击或移动地图区域获取对应区域的坐标、楼层及缩放级别，填写名称保存后生成列表。（位置和楼层变化时编辑区域内容相应变化）。
相关代码：
1 dom结构

<div class="listCon">
                    <div v-loading="ListLoad" element-loading-background="rgba(255, 255, 255, 0.1)"
                        element-loading-text="数据加载中......" class="listCon-content">
                        <template v-if="mapSetList.length>0">
                            <el-row v-for="item in mapSetList" :key="item.id">
                                <el-col :span="2">
                                    <span>
                                        <i class="el-icon-location-outline"></i>
                                    </span>
                                </el-col>
                                <el-col :span="18">
                                    <!-- <span>{{item.name}}</span> -->
                                    <el-button class="set-list-text" type="text" style="padding:0;margin: 0;"
                                        @click="viewChange(item)">
                                        {{item.name}}</el-button>
                                </el-col>
                                <!-- <el-col :span="4">
                                    <el-button type="text" icon="el-icon-edit-outline" @click="editItem(item)">
                                    </el-button>
                                </el-col> -->
                                <el-col :span="4">
                                    <el-button class="set-list-icon" type="text" icon="el-icon-delete"
                                        @click="deleteItem(item.id)">
                                    </el-button>
                                </el-col>
                            </el-row>
                        </template>
                        <h4 v-if="mapSetList.length==0&&!ListLoad">暂无数据</h4>
                    </div>
                </div>
                <div class="setCon">
                    <el-form label-width="80px" ref="form" :model="setForm">
                        <el-form-item label="中心名称" required>
                            <el-input v-model="setForm.name" placeholder="请输入名称" maxlength="10"></el-input>
                        </el-form-item>
                        <el-form-item label="缩放级别">
                            <el-input v-model="setForm.level" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="当前楼层">
                            <el-input v-model="setForm.layer" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="X轴坐标">
                            <el-input v-model="setForm.x" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="Y轴坐标">
                            <el-input v-model="setForm.y" readonly></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="saveSetForm" :disabled="btnDisabled">保存</el-button>
      </el-form-item>
  </el-form>
</div>

2 事件及方法部分

map.on('scaleLevelChanged', function (e) {
     self.setForm.level = e.level
});//缩放
map.on('mapClickNode', function (event) {
      self.setForm.x = event.hitCoord.x
      self.setForm.y = event.hitCoord.y
});//点击地图
map.on('visibleFloorNumsChanged', function (e) {
     self.setForm.layer = e[0];
});// 楼层改变
$('#map-container2').on('mousewheel DOMMouseScroll', function (event) { //on也可以 bind监听
     this.SetCenterMap();
});//鼠标事件
//////////////////方法////////////////////
SetCenterMap: function () {
   let self = this
   var MapXY = map.coordScreenToMap(centerX, centerY, 1);
   self.setForm.x = MapXY.x
   self.setForm.y = MapXY.y
}//设置中心点参数

b页面

显示页面.png

列表与设置页列表一致，新增默认视图，默认没有位置、缩放级别和楼层变化。点击列表任一项，地图对应视角切换。
相关代码
1 dom部分

<el-select v-model="currentView" value-key="id" @change="viewChange">
   <el-option v-for="item in mapSetList" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select>

2 相关事件

viewChange(item) {
        let self = this;
        if (self.showMap) {
          map.scaleLevelTo(item.level);
          map.focusFloorNum = item.layer;
          map.changeFocusFloor(item.layer);
          map.moveTo({
            x: item.x,
            y: item.y,
          });
        } else {
          self.$message('地图加载未完成，请稍等');
        }
      },

大部分设置可以参考文档，一些细节需要思考，多练多学。