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

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

前言

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

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

注:要想使用地图功能,不一定非要用百度或者高德这样的地图厂商,也可以使用echarts或者thresJS等,反正只要能实现功能,怎么做都行。

这里今天主要用的是百度的地图。

先看一下类似的效果图,原效果图涉及公司机密就不给大家展示了,功能都差不多。

大体的功能就是根据缩放级别聚合数据,在级别一下,只展示数字和,在级别二下展示更具体的数字和,在级别三下展示具体的信息。

image.gif


前提工作

在使用百度地图之前,首先要去百度地图申请一个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 图层

下面来看一下具体的用法


具体用法

  1. 准备个容器
<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. 要提前准备好图标放到本地,防止没有图标而出不来效果


相关文章
|
26天前
|
传感器 监控 搜索推荐
智能服装:集成健康监测功能的纺织品——未来穿戴科技的新篇章
【10月更文挑战第7天】智能服装作为穿戴科技的重要分支,正以其独特的技术优势和广泛的应用前景,成为未来科技发展的亮点之一。它不仅改变了我们对服装的传统认知,更将健康监测、运动训练、医疗康复等功能融为一体,为我们的生活带来了更多的便利和可能。随着技术的不断进步和市场的日益成熟,我们有理由相信,智能服装将成为未来穿戴科技的新篇章,引领我们走向更加健康、智能、可持续的生活方式。
|
24天前
|
前端开发 JavaScript UED
探索Python Django中的WebSocket集成:为前后端分离应用添加实时通信功能
通过在Django项目中集成Channels和WebSocket,我们能够为前后端分离的应用添加实时通信功能,实现诸如在线聊天、实时数据更新等交互式场景。这不仅增强了应用的功能性,也提升了用户体验。随着实时Web应用的日益普及,掌握Django Channels和WebSocket的集成将为开发者开启新的可能性,推动Web应用的发展迈向更高层次的实时性和交互性。
52 1
|
9天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
15天前
|
JavaScript 前端开发 API
|
15天前
|
JavaScript API UED
vue.js怎么实现全屏显示功能
【10月更文挑战第7天】
8 1
|
22天前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
|
1月前
|
存储 前端开发 Java
Spring Boot 集成 MinIO 与 KKFile 实现文件预览功能
本文详细介绍如何在Spring Boot项目中集成MinIO对象存储系统与KKFileView文件预览工具,实现文件上传及在线预览功能。首先搭建MinIO服务器,并在Spring Boot中配置MinIO SDK进行文件管理;接着通过KKFileView提供文件预览服务,最终实现文档管理系统的高效文件处理能力。
160 11
|
2月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
47 3
|
2月前
|
机器学习/深度学习 人工智能 搜索推荐
如何让你的Uno Platform应用秒变AI大神?从零开始,轻松集成机器学习功能,让应用智能起来,用户惊呼太神奇!
【9月更文挑战第8天】随着技术的发展,人工智能与机器学习已融入日常生活,特别是在移动应用开发中。Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 开发跨平台应用(涵盖 Windows、macOS、iOS、Android 和 Web)。本文探讨如何在 Uno Platform 中集成机器学习功能,通过示例代码展示从模型选择、训练到应用集成的全过程,并介绍如何利用 Onnx Runtime 等库实现在 Uno 平台上的模型运行,最终提升应用智能化水平和用户体验。
47 1
|
4月前
|
监控 druid Java
spring boot 集成配置阿里 Druid监控配置
spring boot 集成配置阿里 Druid监控配置
255 6