01
前言
最近领导不知道抽什么风，非要做大屏数据可视化功能，这个东西之前也没有接触过，也不知道该如何下手，这两天正好有点点闲时间，就赶紧研究一把，毕竟升级加薪还得指望着这东西呢
好，废话不多说了，下面咱们介绍一下怎么来集成大屏功能必备组件之地图功能的开发。
注：要想使用地图功能，不一定非要用百度或者高德这样的地图厂商，也可以使用echarts或者thresJS等，反正只要能实现功能，怎么做都行。
这里今天主要用的是百度的地图。
先看一下类似的效果图，原效果图涉及公司机密就不给大家展示了，功能都差不多。
大体的功能就是根据缩放级别聚合数据，在级别一下，只展示数字和，在级别二下展示更具体的数字和，在级别三下展示具体的信息。
02
前提工作
在使用百度地图之前，首先要去百度地图申请一个key，具体的申请过程挺简单，这里不多介绍，大家按官网的步骤一步步操作就好。
在申请完key之后，我们就可以把相关的依赖引入到我们的项目中了，打开百度地图的api：
https://lbsyun.baidu.com/solutions/mapvdata
代码语言：javascript复制// 第一步
<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 图层
下面来看一下具体的用法
03
具体用法
- 准备个容器
<template>
<div style="width:100%;height:100%;position: relative; padding: 6px;">
<div id="containerbmap" />
</div>
</template>2.准备数据
代码语言：javascript复制<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>做到这一步基本上就算完成了，接下来就是测试相关的功能，这里不多介绍了，功能我已经做完了，应该是没有问题的
04
注意点（坑）
大家在使用的时候一定要注意以下几个点：
1. 一定要提前申请好key，否则页面不会出现或者显示不正常
2. 在引入mapvgl的时候，尽量使用 cdn 的方式吧，如果使用 npm 的方式可能会出错，找不到依赖，（可能我还没有找到合适的方式，如果大家的知道的，请赐教）
3. 要提前准备好图标放到本地，防止没有图标而出不来效果
