领导都喜欢看--基于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月前
|
人工智能 数据处理 C#
AI Dev Gallery:微软开源 Windows AI 模型本地运行工具包和示例库,助理开发者快速集成 AI 功能
微软推出的AI Dev Gallery,为Windows开发者提供开源AI工具包和示例库,支持本地运行AI模型,提升开发效率。
91 13
|
2月前
|
人工智能 自然语言处理 搜索推荐
Open Notebook:开源 AI 笔记工具,支持多种文件格式,自动转播客和生成总结,集成搜索引擎等功能
Open Notebook 是一款开源的 AI 笔记工具,支持多格式笔记管理,并能自动将笔记转换为博客或播客,适用于学术研究、教育、企业知识管理等多个场景。
207 0
Open Notebook:开源 AI 笔记工具,支持多种文件格式,自动转播客和生成总结,集成搜索引擎等功能
|
2月前
|
安全 定位技术 API
婚恋交友系统匹配功能 婚恋相亲软件实现定位 语音社交app红娘系统集成高德地图SDK
在婚恋交友系统中集成高德地图,可实现用户定位、导航及基于地理位置的匹配推荐等功能。具体步骤如下: 1. **注册账号**:访问高德开放平台,注册并创建应用。 2. **获取API Key**:记录API Key以备开发使用。 3. **集成SDK**:根据开发平台下载并集成高德地图SDK。 4. **配置功能**:实现定位、导航及基于位置的匹配推荐。 5. **注意事项**:保护用户隐私,确保API Key安全,定期更新地图数据,添加错误处理机制。 6. **测试优化**:完成集成后进行全面测试,并根据反馈优化功能。 通过以上步骤,提升用户体验,提供更便捷的服务。
|
3月前
|
缓存 资源调度 JavaScript
Vue集成Excalidraw实现在线画板功能
Excalidraw是一款开源在线绘图工具,适用于白板、思维导图、原型设计等场景。支持手绘风格、多种图形元素、导出功能及多人协作,深受开发者喜爱。本文档介绍了如何在Vue项目中集成Excalidraw,包括安装依赖、配置文件修改、页面添加等步骤,帮助开发者快速上手。
312 0
Vue集成Excalidraw实现在线画板功能
|
3月前
|
传感器 前端开发 Android开发
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求。本文深入探讨了插件开发的基本概念、流程、集成方法、常见类型及开发实例,如相机插件的开发步骤,同时强调了版本兼容性、性能优化等注意事项,并展望了插件开发的未来趋势。
74 2
|
3月前
|
SQL 开发框架 .NET
突破T-SQL限制:利用CLR集成扩展RDS SQL Server的功能边界
CLR集成为SQL Server提供了强大的扩展能力,突破了T-SQL的限制,极大地拓展了SQL 的应用场景,如:复杂字符串处理、高性能计算、图像处理、机器学习集成、自定义加密解密等,使开发人员能够利用 .NET Framework的丰富功能来处理复杂的数据库任务。
|
3月前
|
消息中间件 监控 Java
您是否已集成 Spring Boot 与 ActiveMQ?
您是否已集成 Spring Boot 与 ActiveMQ?
79 0
|
4月前
|
Java Maven Docker
gitlab-ci 集成 k3s 部署spring boot 应用
gitlab-ci 集成 k3s 部署spring boot 应用
|
7月前
|
监控 druid Java
spring boot 集成配置阿里 Druid监控配置
spring boot 集成配置阿里 Druid监控配置
351 6
|
7月前
|
Java 关系型数据库 MySQL
如何实现Springboot+camunda+mysql的集成
【7月更文挑战第2天】集成Spring Boot、Camunda和MySQL的简要步骤: 1. 初始化Spring Boot项目,添加Camunda和MySQL驱动依赖。 2. 配置`application.properties`,包括数据库URL、用户名和密码。 3. 设置Camunda引擎属性,指定数据源。 4. 引入流程定义文件(如`.bpmn`)。 5. 创建服务处理流程操作,创建控制器接收请求。 6. Camunda自动在数据库创建表结构。 7. 启动应用,测试流程启动,如通过服务和控制器开始流程实例。 示例代码包括服务类启动流程实例及控制器接口。实际集成需按业务需求调整。
513 4

热门文章

最新文章