vue结合esmap进行室内3D地图绘制

vue cli3结合esmap进行室内3D地图开发

近日，项目需求中有需要进行室内3D地图的开发，虽然可以和百度高德地图合作，让百度高德制作3D地图，但是成本太高，在进行多方查找之后，找到了esmap这个绘制地图的框架，下面具体介绍怎么做

先整个官方文档地址

ESmap文档地址

一、下载官方的sdk包

除了sdk也可以先下一个官方示例包，相信看着示例更容易理解，虽然不是所有的都有用，先下下来总是没错的，写完把没用的删除了就是

二、注册账号，绘制地图

账号注册就不啰嗦了
注册之后，在控制台点击编辑地图

之后按提示编辑就完事了
编辑完成之后点击上图的下载地图，就可以把编辑好的地图文件下载下来

三、替换地图文件

操作顺序 data文件夹→MyRoom文件夹（不一定是这个名字）→替换.esmap文件格式文件 OK，就这样，地图就换成你所画的地图文件了，当然测试的话用官方的也无所谓。

四、说明一下每个文件夹中都是什么东西

那些外层的什么image，fonts什么的就不说了吧，就是图片和图标什么的，可有可无的东西，主要说一下data里面的东西
theme文件夹，主题文件

每个编号对应一个主题，确定用哪一个主题之后，可以跟其他的说拜拜
test666官方的示例文件夹，如果用了自己下的地图，也可以说拜拜
还有一个就是我提到的自己的地图文件夹了
注：根据下载的示例不同，文件夹内容可能不同，但是不要过于纠结，这个影响不大

五、怎么在vue中使用

1、在public中保存相应文件

路径什么的可以更改，主要是esmap-1.6.min.js文件

2、在index.html中引入

3、创建用来展示地图的vue文件

4、在mounted里面初始化地图

var that = this
    var container = null
    var isInNavi = false

    var esmapID = 'MyRoom' //存放地图数据的文件夹名（test666,MyRoom,10005）
    var container = document.getElementById('map-container')
    // console.log(window.esmap)
    that.map = new esmap.ESMap({
      container: container, //渲染dom
      mapDataSrc: './test/data', //地图数据位置（路径可以更改）
      mapThemeSrc: './test/data/theme', //主题数据位置
      themeID: 2005, //样式ID
      visibleFloors: 'all', //更多初始化参数配置请参考https://www.esmap.cn/escopemap/content/cn/develope/map-config.html
      token: '0203008',
      viewMode: esmap.ESViewMode.MODE_2D,
    })
    //打开地图数据
    that.map.openMapById(esmapID)
    that.map.showCompass = true //显示指南针
    that.map.showScaler = false //显示地图比例尺

其实直接这样已经可以直接渲染出地图界面了
之后就是各种地图方法，这个请参照官方文档
注：官方文档不是直接vue的，所以请先放mounted下面，观察效果后，根据实际情况提取出各种方法到methods中去
在声明变量的时候，如果要提取方法出去方便调用，可以在data中声明，用this.XXXX调用

这里我放其中一个方法的结合，其他的还请参照官方文档自行结合，或者留言说明想知道什么方法的

var that = this
    var container = null
    var isInNavi = false

    var esmapID = 'MyRoom'
    var container = document.getElementById('map-container')
    // console.log(window.esmap)
    that.map = new esmap.ESMap({
      container: container, //渲染dom
      mapDataSrc: './test/data', //地图数据位置
      mapThemeSrc: './test/data/theme', //主题数据位置
      themeID: 2005, //样式ID
      visibleFloors: 'all', //更多初始化参数配置请参考https://www.esmap.cn/escopemap/content/cn/develope/map-config.html
      token: '0203008',
      viewMode: esmap.ESViewMode.MODE_2D,
    })
    //打开地图数据
    that.map.openMapById(esmapID)
    that.map.showCompass = true //显示指南针
    that.map.showScaler = false //显示地图比例尺

    var ctlOpt = new esmap.ESControlOptions({
      position: 2,
      offset: {
        x: 10,
        y: 100,
      },
      imgURL: 'test/image/wedgets/',
    })
    that.map.on('loadComplete', function() {
      // that.map.setBackgroundColor('#FF0000') //修改背景颜色
      //创建楼层控件
      var floorControl = new esmap.ESScrollFloorsControl(that.map, ctlOpt)
      createNavi() //初始化导航
      if (that.$route.query.mapEndPointCode) {
        that.searchEndCon(that.$route.query.mapEndPointCode) //根据id查询地址
      }
      if (that.$route.query.mapStartPointCode) {
        that.searchStartCon(that.$route.query.mapStartPointCode) //根据id查询目的地地址
      }
      // })
    })

以上是mounted中方法

//通过id确认起始点
    searchStartCon(code) {
      let that = this
      var queryFloors = 'all' //全楼层检索。也可以传入某个楼层，或者一组楼层(数组)
      //根据id或者name精确查询。如查询ID为56的poi
      var queryParams = {
        ID: code,
      }
      that.clickCount = 1
      esmap.ESMapUtil.search(that.map, queryFloors, queryParams, function(e) {
        let vel = { ...e[0] }
        let maphitCood = { ...vel.mapCoord }
        maphitCood.z = vel.RoomHigh
        if (e.length > 0) {
          if (vel.nodeType == 4) { //点击非建筑
            that.h = 1
            that.show(vel.floor, maphitCood, vel.name) //调用方法画导航线
          }
          if (vel.nodeType == 5) { //点击建筑
            that.h = vel.RoomHigh
            that.show(vel.FloorNum, maphitCood, vel.name) //调用方法画导航线
          }

          // that.clickCount = 1
        } else {
          alert('无匹配信息')
        }
      })
    },

以上为methods中的方法

具体操作大体上就是如此，请根据自己的实际情况添加各种方法
常用方法大概就：放大缩小，楼层切换，地图选择，地图导航，地点搜索
这些官方都有详细介绍
在这次的分享中，主要体现esmap与vue进行结合的思路，了解思路后怎么写都行，请不要直接照搬，照搬并无多大提升

初次使用这个东西，也只研究了一两天，有不足之处还请不吝为笔者指出，感激不尽！！！