ESMap构建电子地图

插件介绍
SDK文档地址

使用步骤：
1 引入ESMap SDK

2 创建地图容器

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结构

                    

                        
                        
暂无数据
                    
                
                

                    
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            保存
      
  

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部分

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('地图加载未完成，请稍等');
        }
      },

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