当前位置: 首页 > news >正文

基于MapVGL的地理信息三维度数据增长可视化

写在前面


  • 工作中接触,简单整理
  • 博文内容为 基于MapVGL的地理信息维度数据增长可视化 Demo
  • 理解不足小伙伴帮忙指正

对每个人而言,真正的职责只有一个:找到自我。然后在心中坚守其一生,全心全意,永不停息。所有其它的路都是不完整的,是人的逃避方式,是对大众理想的懦弱回归,是随波逐流,是对内心的恐惧 ——赫尔曼·黑塞《德米安》


基于MapVGL的地理信息维度数据增长可视化

MapVGL,是一款基于WebGL的地理信息可视化库,可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。

MapVGL通过地理信息数据生成可视化图层,然后将这些图层添加在地图上层进行管理。在这个过程中,它使用了WebGL技术在canvas中绘制图形,从而有效地提高了页面性能。此外,MapVGL还提供了大量的模型,包括点图层、线图层、聚合类图层等,每种模型都提供了示例,可以直接运行查看效果。

需要注意的是,地理信息数据格式是规定好的,必须具有geometry字段来定义坐标信息,同时可通过properties字段添加附件信息。而geometry字段数据格式使用的是GeoJSON的规范。

官方Demo: https://mapv.baidu.com/gl/examples/

官网文档:https://mapv.baidu.com/gl/docs/index.html

下面我们看一个通过 MapVGL 来实现的数据可视化的Demo,某公司全国网点建设历年增长可视化

Demo 地址:https://github.com/LIRUILONGS/MapVGL_Demo

效果图

在这里插入图片描述

实现相对简单,渲染地图,然后添加图层,通过 setInterval 方法对图层进行重复渲染,填充数据为当前数据和增量数据

渲染地图

使用百度地图的WebGL版本(BMapGL)来初始化一个地图实例

 var map = new BMapGL.Map('map_container', {restrictCenter: false,style: { styleJson: options.style || darkStyle }});

使用mapvgl来创建一个视图(View)对象,该对象与先前创建的地图(map)相关联。

 var view = new mapvgl.View({map: map});           

准备图层数据

  // ,绘制带波纹扩散的圆图层数据 var data = cities.map((city, index) => {var cityCenter = mapv.utilCityCenter.getCenterByCityName(city);return {geometry: {type: 'Point',coordinates: [cityCenter.lng, cityCenter.lat]},color: colors[2],// 圆的半径size: 5};});// 波纹动画图层数据 let datas = cities.map((city, index) => {let cityCenter = mapv.utilCityCenter.getCenterByCityName(city);return {geometry: {type: 'Point',coordinates: [cityCenter.lng, cityCenter.lat]},};});............................// 柱状体图层数据// 飞线绘制

周期绘制

        let i = 1setInterval(() => {var waveLayer = new mapvgl.CircleLayer({type: 'wave',radius: r => 3 * r,duration: 1 / 3,trail: 3});view.addLayer(waveLayer);waveLayer.setData(data.slice(0, i));var rippleLayer = new mapvgl.RippleLayer({size: 500000,unit: 'm',color: '#0ff',enablePicked: true,onClick: (e) => { // 点击事件console.log(e);},});view.addLayer(rippleLayer);rippleLayer.setData(datas.slice(0, i));.................i = i + 1;if (i == cities.length + 2) {i = 1view.removeAllLayers()}},3000)

博文部分内容参考

© 文中涉及参考链接内容版权归原作者所有,如有侵权请告知,这是一个开源项目,如果你认可它,不要吝啬星星哦 😃


github 地址:https://github.com/huiyan-fe/mapv

官方Demo: https://mapv.baidu.com/gl/examples/

官网文档:https://mapv.baidu.com/gl/docs/index.html


© 2018-2023 liruilonger@gmail.com, All rights reserved. 保持署名-非商用-相同方式共享(CC BY-NC-SA 4.0)

相关文章:

基于MapVGL的地理信息三维度数据增长可视化

写在前面 工作中接触,简单整理博文内容为 基于MapVGL的地理信息维度数据增长可视化 Demo理解不足小伙伴帮忙指正 对每个人而言,真正的职责只有一个:找到自我。然后在心中坚守其一生,全心全意,永不停息。所有其它的路都…...

天锐绿盾|防泄密系统|计算机文件数据\资料安全管理软件

“天锐绿盾”似乎是一款专注于防泄密和计算机文件数据/资料安全管理的软件。在信息安全日益受到重视的今天,这样的软件对于保护企业的核心数据资产和防止敏感信息泄露至关重要。 通用地址:www.drhchina.com 防泄密系统的主要功能通常包括: 文…...

leetcode刷题(罗马数字转数字)

1.题目描述 2.解题思路 这时候已经给出了字母对应的数字,我们只需要声明一个字典,将罗马数字和数字之间的对应关系声明即可。其中可能涉及到会出现两个连续的罗马字母代表一个数字,这时候我们需要判断遍历的字符和将要遍历的下一个字符是否存…...

什么是NAT网关?联通云NAT网关有什么优势

在当今云计算时代,网络安全和连接性是企业发展的关键因素之一。NAT网关(Network Address Translation Gateway)是一种网络设备,它可以在私有网络和公共网络之间进行地址转换,从而使得内部网络中的设备能够与外部网络进…...

CVE-2023-41892 漏洞复现

CVE-2023-41892 开题,是一个RCE Thanks for installing Craft CMS! You’re looking at the index.twig template file located in your templates/ folder. Once you’re ready to start building out your site’s front end, you can replace this with someth…...

【每日一题】06 排序链表

问题描述 给你链表的头结点 head ,请将其按 升序 排列并返回 排序后的链表 。 求解 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* sortList(struct ListNode* head) {struct…...

【精品】关于枚举的高级用法

枚举父接口 public interface BaseEnum {Integer getCode();String getLabel();/*** 根据值获取枚举** param code* param clazz* return*/static <E extends Enum<E> & BaseEnum> E getEnumByCode(Integer code, Class<E> clazz) {Objects.requireNonN…...

Vue2学习第一天

Vue2 学习第一天 1. 什么是 vue? Vue 是一套用于构建用户界面的渐进式框架。 2. vue 历史 vue 是在 2013 年创建的&#xff0c;vue3 是 2020 出现的&#xff0c;现在主要是用 vue2&#xff0c;创新公司用的是 vue3 vue 的作者是尤雨溪&#xff0c;vue 的搜索热度比 react…...

HAL STM32通过multi_button库处理按键事件

HAL STM32通过multi_button库处理按键事件 &#x1f4cd;作者&#xff1a;0x1abin的multi_button库:https://github.com/0x1abin/MultiButton &#x1f4d8;MultiButton简介 MultiButton 是一个小巧简单易用的事件驱动型按键驱动模块&#xff0c;可无限量扩展按键&#xff0c;…...

随机过程及应用学习笔记(一)概率论(概要)

概率是随机的基础&#xff0c;在【概率论&#xff08;概要&#xff09;】这个部分中仅记录学习随机过程及应用的基本定义和结果。 前言 首先&#xff0c;概率论研究的基础是概率空间。概率空间由一个样本空间和一个概率测度组成&#xff0c;样本空间包含了所有可能的结果&…...

洛谷_P1059 [NOIP2006 普及组] 明明的随机数_python写法

这道题的关键在于去重和排序&#xff0c;去重可以联想到集合&#xff0c;那排序直接使用sort方法。 n int(input()) data set(map(int,input().split( ))) data list(data) data.sort() print(len(data)) for i in data:print(i,end )...

爆火的人工智能开源open-interpreter源码解析

今天这篇文章带大家一起来阅读下github上爆火的开源项目 open-interpreter的源代码&#xff0c;相当于是一个可以本地部署的openai code-interpreter。 今天这期我们透过现象看本质&#xff0c;一起来剖析下他的源码。 体验open-interpreter的视频地址 open-interpreter&…...

POM设计模式思路,详解POM:概述与介绍,POM思路梳理+代码示例(全)

概述 在UI自动化测试中&#xff0c;POM模式是一种设计思路&#xff0c;它的核心思想是方法的封装。它将方法类和页面元素进行分离&#xff0c;增强了代码的可维护性。值得注意的是&#xff0c;这种分层的设计模式&#xff0c;最好也是从线性代码开始&#xff0c;逐步将代码进行…...

1、学习 Eureka 注册中心

学习 Eureka 注册中心 一、创建 Eureka 微服务0、SpringBoot 和 SpringCloud 版本1、引入 Eureka 服务端依赖2、启动类加 EnableEurekaServer 注解3、配置 yaml 文件&#xff0c;把 Eureka 服务注册到 Eureka 注册中心4、访问 Eureka 服务端&#xff0c;查看注册中心的服务列表…...

何为分账系统?

1、分账系统产生的背景 在数字化浪潮下第三方支付价值凸显&#xff0c;大大提升资金流与信息流流转效率&#xff0c;成为构建产业数字化重要枢纽。近年来&#xff0c;基于云计算、大数据、人工智能、物联网等技术积累&#xff0c;以第三方支付为切点的金融科技创新爆发着强大的…...

机器学习10-特征缩放

特征缩放的目的是确保不同特征的数值范围相近&#xff0c;使得模型在训练过程中更加稳定&#xff0c;加速模型收敛&#xff0c;提高模型性能。具体而言&#xff0c;零均值和单位方差的目标有以下几点好处&#xff1a; 1. 均值为零&#xff08;Zero Mean&#xff09;&#xff1a…...

Java基于微信小程序的医院挂号小程序,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…...

HarmonyOS一杯冰美式的时间 -- 验证码框

一、前言 像是短密码、验证码都有可能需要一个输入框&#xff0c;像是如下&#xff1a; 恰好在写HarmonyOS的时候也需要写一个验证码输入框&#xff0c;但是在实现的时候碰了几次灰&#xff0c;觉得有必要分享下&#xff0c;故有了此篇文章。 如果您有任何疑问、对文章写的不…...

GitLab配置SSHKey

段落一&#xff1a;什么是SSH密钥 SSH&#xff08;Secure Shell&#xff09;是一种网络协议&#xff0c;用于安全地远程登录和执行命令。SSH密钥是一种用于身份验证的加密文件&#xff0c;它允许您在与远程服务器通信时&#xff0c;无需输入密码即可进行认证。在GitLab中配置S…...

通过QT制作一个模仿微信主界面的界面(不要求实现具体通信功能)

main.cpp #include "widget.h" #include "second.h"#include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();//实例化第二个界面Second s;QObject::connect(&w, &Widget::my_jump, &…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...