前言
最近领导不知道抽什么风，非要做大屏数据可视化功能，这个东西之前也没有接触过，也不知道该如何下手，这两天正好有点点闲时间，就赶紧研究一把，毕竟升级加薪还得指望着这东西呢
好，废话不多说了，下面咱们介绍一下怎么来集成大屏功能必备组件之地图功能的开发。
注：要想使用地图功能，不一定非要用百度或者高德这样的地图厂商，也可以使用echarts或者thresJS等，反正只要能实现功能，怎么做都行。
这里今天主要用的是百度的地图。
先看一下类似的效果图，原效果图涉及公司机密就不给大家展示了，功能都差不多。
大体的功能就是根据缩放级别聚合数据，在级别一下，只展示数字和，在级别二下展示更具体的数字和，在级别三下展示具体的信息。
前提工作
在使用百度地图之前，首先要去百度地图申请一个key，具体的申请过程挺简单，这里不多介绍，大家按官网的步骤一步步操作就好。
在申请完key之后，我们就可以把相关的依赖引入到我们的项目中了，打开百度地图的api：
https://lbsyun.baidu.com/solutions/mapvdata
// 第一步 <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥"></script> //第二步 <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script> （如果没有使用相关的功能，可以不用引入此包） <script src="//mapv.baidu.com/build/mapv.min.js"></script>
再准备好几张图标，就可以了
如果想要实现效果上的功能，就得使用 mapvgl中的：
点聚合图层 ClusterLayer 图层
下面来看一下具体的用法
具体用法
- 准备个容器
<template> <div style="width:100%;height:100%;position: relative; padding: 6px;"> <div id="containerbmap" /> </div> </template>
2.准备数据
<script> // 这里引入图标 import mapMarker from '@/assets/img/map_marker.png' export default { mounted() { this.getData() }, methods: { back() { const params = ['山东省', provinceCode] PubSub.publish(cityditu, params) }, getData() { const params = { cityCode: this.cityCode } // 当日交易总额 getDataList(params).then(res => { if (res) { if (res.data !== null) { var datas = res.data this.initcityMap(this.cityName, datas) } } }) }, initcityMap(cityName, sattionDatas) { // console.log('执行地图code') var map = new BMapGL.Map('containerbmap')// 创建Map实例 map.centerAndZoom(cityName, 15)// 城市名称为中心 // 设置地图样式，暗黑主题 map.setMapStyleV2({ styleId: '06fc3eff66323gfsd3f51c56d826382d1ff17d0' }) map.enableScrollWheelZoom(true)// 启用滚轮放大缩小 map.title = 'xxxx分布图' var data = [] var randomCount = sattionDatas.length // 构造数据 while (randomCount--) { // var cityCenter = mapv.utilCityCenter.getCenterByCityName('济南') const item = sattionDatas[randomCount] data.push({ geometry: { type: 'Point', coordinates: [item.longitude, item.latitude] }, properties: { icon: mapMarker, width: 20, height: 30 } }) } var view = new mapvgl.View({ map: map }) var clusterLayer = new mapvgl.ClusterLayer({ minSize: 30, // 聚合点显示的最小直径 maxSize: 50, // 聚合点显示的最大直径 clusterRadius: 150, // 聚合范围半径 gradient: { 0: '#10f0fd', 0.5: '#F8A411', 1.0: '#fb7282' }, // 聚合点颜色梯度 maxZoom: 15, // 聚合的最大级别，当地图放大级别高于此值将不再聚合 minZoom: 5, // 聚合的最小级别，当地图放大级别低于此值将不再聚合 // 是否显示文字 showText: true, // 开始聚合的最少点数，点数多于此值才会被聚合 minPoints: 2, // 设置文字样式 textOptions: { fontSize: 12, color: 'white', // 格式化数字显示 format: function (count) { return count >= 10000 ? Math.round(count / 1000) + 'k' : count >= 1000 ? Math.round(count / 100) / 10 + 'k' : count } }, enablePicked: true, onClick(e) { if (e.dataItem) { // 可通过dataItem下面的children属性拿到被聚合的所有点 console.log(e.dataItem) } } }) view.addLayer(clusterLayer) clusterLayer.setData(data) } } } </script>
做到这一步基本上就算完成了，接下来就是测试相关的功能，这里不多介绍了，功能我已经做完了，应该是没有问题的
注意点（坑）
大家在使用的时候一定要注意以下几个点：
1. 一定要提前申请好key，否则页面不会出现或者显示不正常
2. 在引入mapvgl的时候，尽量使用 cdn 的方式吧，如果使用 npm 的方式可能会出错，找不到依赖，（可能我还没有找到合适的方式，如果大家的知道的，请赐教）
3. 要提前准备好图标放到本地，防止没有图标而出不来效果
