领导都喜欢看--基于Vue的数据可视化之集成地图聚合功能

用户9078190

发布于 2022-10-28 19:00:41

1.5K0

发布于 2022-10-28 19:00:41

文章被收录于专栏：知码前端

前言

最近领导不知道抽什么风，非要做大屏数据可视化功能，这个东西之前也没有接触过，也不知道该如何下手，这两天正好有点点闲时间，就赶紧研究一把，毕竟升级加薪还得指望着这东西呢

好，废话不多说了，下面咱们介绍一下怎么来集成大屏功能必备组件之地图功能的开发。

注：要想使用地图功能，不一定非要用百度或者高德这样的地图厂商，也可以使用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>

做到这一步基本上就算完成了，接下来就是测试相关的功能，这里不多介绍了，功能我已经做完了，应该是没有问题的