领导都喜欢看--基于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. 要提前准备好图标放到本地,防止没有图标而出不来效果


相关文章
|
1月前
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
53 8
|
1月前
|
人工智能 数据处理 C#
AI Dev Gallery:微软开源 Windows AI 模型本地运行工具包和示例库,助理开发者快速集成 AI 功能
微软推出的AI Dev Gallery,为Windows开发者提供开源AI工具包和示例库,支持本地运行AI模型,提升开发效率。
96 13
|
2月前
|
人工智能 自然语言处理 搜索推荐
Open Notebook:开源 AI 笔记工具,支持多种文件格式,自动转播客和生成总结,集成搜索引擎等功能
Open Notebook 是一款开源的 AI 笔记工具,支持多格式笔记管理,并能自动将笔记转换为博客或播客,适用于学术研究、教育、企业知识管理等多个场景。
210 0
Open Notebook:开源 AI 笔记工具,支持多种文件格式,自动转播客和生成总结,集成搜索引擎等功能
|
3月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
106 17
|
3月前
|
缓存 资源调度 JavaScript
Vue集成Excalidraw实现在线画板功能
Excalidraw是一款开源在线绘图工具,适用于白板、思维导图、原型设计等场景。支持手绘风格、多种图形元素、导出功能及多人协作,深受开发者喜爱。本文档介绍了如何在Vue项目中集成Excalidraw,包括安装依赖、配置文件修改、页面添加等步骤,帮助开发者快速上手。
315 0
Vue集成Excalidraw实现在线画板功能
|
3月前
|
传感器 前端开发 Android开发
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求。本文深入探讨了插件开发的基本概念、流程、集成方法、常见类型及开发实例,如相机插件的开发步骤,同时强调了版本兼容性、性能优化等注意事项,并展望了插件开发的未来趋势。
75 2
|
3月前
|
SQL 开发框架 .NET
突破T-SQL限制:利用CLR集成扩展RDS SQL Server的功能边界
CLR集成为SQL Server提供了强大的扩展能力,突破了T-SQL的限制,极大地拓展了SQL 的应用场景,如:复杂字符串处理、高性能计算、图像处理、机器学习集成、自定义加密解密等,使开发人员能够利用 .NET Framework的丰富功能来处理复杂的数据库任务。
|
3月前
|
JSON Java API
springboot集成ElasticSearch使用completion实现补全功能
springboot集成ElasticSearch使用completion实现补全功能
72 1
|
4月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
112 1
|
4月前
|
JavaScript 前端开发 API

热门文章

最新文章