关于Vue项目中MineMap的使用

现在前面，因为MineMap相对小众，关于相关的资料不多，在此做个笔记

目录

第一步：引入MineMap的API插件，如下图所示

第二步：全局声明minemap

第三步：准备好渲染的容器

---

第一步：引入MineMap的API插件，如下图所示

<link rel="stylesheet" href="https://minedata.cn/minemapapi/v2.1.0/minemap.css">
<script src="https://minedata.cn/minemapapi/v2.1.0/minemap.js"></script>

第二步：全局声明minemap

因为项目原因，直接把minemap挂载到全局，方便使用

<script>
    /**
     * 全局参数设置
     */
    minemap.domainUrl = 'https://minedata.cn';
    minemap.dataDomainUrl = 'https://minedata.cn';
    minemap.serverDomainUrl = 'https://minedata.cn';
    minemap.spriteUrl = 'https://minedata.cn/minemapapi/v2.1.0/sprite/sprite';
    minemap.serviceUrl = 'https://mineservice.minedata.cn/service/';

    minemap.key = '16be596e00c44c86bb1569cb53424dc9';
    minemap.solution = 12877;
</script>

到此准备工作已经做好了，接下来敲黑板划重点，开始真正的使用了~

第三步：准备好渲染的容器

其中，容器id就是初始化new mineMap的container，bjMap是声明在data中的空对象而已，里面各类的属性大概就见名知义了，放个官网链接，大家可以参考MineData

// 初始化地图实例
initMap() {
  const minemap = minemap || window.minemap; // 划重点
  const self = this;
  self.bjMap = new minemap.Map({
    container: 'bjmap',
    style: 'https://mineservice.minedata.cn/service/solu/style/id/12620', /*底图样式*/
    zoom: 9, //初始化地图层级
    center: [116.397428, 39.91983], //初始化地图中心点,
    pitch: 300, /*地图俯仰角度*/
    maxZoom: 17, /*地图最大缩放等级*/
    minZoom: 3,  /*地图最小缩放等级*/
    projection: 'MERCATOR'
  });
},

着重记录下style属性，可以理解为地图的皮肤，后面的数字就代表不同主题的皮肤，在这弱弱吐槽下，api太不直观了，目前样式只有如下几类，大家可以根据情况修改下style主题数字试一下底图的样式。