现在前面,因为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主题数字试一下底图的样式。