基于Leaflet Legend的图例数据筛选实践-以某市教培时空分布为例

本文主要是介绍基于Leaflet Legend的图例数据筛选实践-以某市教培时空分布为例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

前言

一、关于Leaflet.Legend组件

1、Legend组件的主要参数

2、相关参数

二、Legend图例可视化控制

1、违规教培信息的管理

2、违规培训信息时空可视化及图例渲染控制 

 3、成果展示

三、总结


前言

        在很多的地理时空分析系统中,我们经常会遇到一些需求。比如在地图中,我们会结合内容的分类来进行图例的展示,而图例不仅承担着区分的作用,同时还可能承担着展示不同数据的重要作用。比如在Echarts这类的图形报表效果展示中,我们在图表上要展示相应的数据,在图形的左边还展示了一些图例,通过这些图例,我们可以选择进行数据的展示与隐藏。通过使用鼠标的点击来进行不同状态的切换。当然,在Echarts当中,已经有现成的解决方案,我们可以直接使用组件提供的功能即可。

        与这种图表的应用很相似,在地理信息系统建设过程当中,也会有许多的图表和图例生成。以我们常见的Leaflet渲染框架为例,它的图例控件需要自己去定义。 我们在之前的博文中,也介绍了一款基于Leaflet的Leaflet Legend的图例组件。但是没有讲解如何在这款图例生成软件中来进行图例的切换和数据的隐藏与控制。

        本文即在这样的背景下诞生。本文以Leaflet Legend为例,结合之前采集的某市校外违规培训的时空数据,首先讲解如何进行数据的空间可视化,然后讲解Leaflet.Legend这款组件的具体应用,最后将数据和组件进行融合,讲解如何实现在图例上进行切换实现空间数据的切换与隐藏。如果您对基于图例的时空可视化渲染有兴趣,不妨来本文看看。

一、关于Leaflet.Legend组件

        在正式介绍本文的主要内容之前,请允许在这里花一点时间将Leaflet.Legend这个组件来简单进行介绍,对这个组件熟悉的朋友就当做加深了解。如果对Legend图例组件不是很熟悉的朋友刚好可以利用这个机会来深入认识一下。本节从两个方面来进行介绍,第一个方面是关于Legend这个组件的主要参数;另一个方面则简要介绍Legend的主要方法和实现。

1、Legend组件的主要参数

        Leaflet.Legend 是一个 Leaflet 插件, 用于显示图例符号和切换相应的叠加层的显示。对Legend的源码感兴趣的同学可以在Github或者Git上找到它的源代码,Leaflet.Legend。

        大家可以把源代码clone下来,插件比较小,很简单。里面的代码相信大家都能很轻松的看懂。 同时这款插件采用的开源协议是MIT的,因此您可以免费的放心使用。

2、相关参数

        为了更详细的介绍和展示这款组件的功能,下面对Legend组件的相关参数来进行简单介绍,方便大家在使用时对它的属性有一个比较全面的了解。

选项类型默认值描述
positionString'topleft'图例控件位置。
titleString'Legend'图例控件的标题。
opacityNumber1.0图例面板的透明度。
legendsLegendSymbol[][]LegendSymbol 图例符号数组。
symbolWidthNumber24图例符号的宽度,以像素为单位。
symbolHeightNumber24图例符号的高度,以像素为单位。
columnNumber1图例符号排列的列数。
collapsedBooleanfalse图例面板是否默认展开。

        关于上面的属性定义,大家也可以在clone下来的原始代码中找到,在src/leaflet.legend.js这个文件当中的第199行,代码如下所示:

L.Control.Legend = L.Control.extend({options: {position: "topleft",title: "Legend",legends: [],symbolWidth: 24,symbolHeight: 24,opacity: 1.0,column: 1,collapsed: false,},xxx
}

        既然是图例,肯定最重要还得是图例组件的属性介绍,也就是上面的表格中的LegendSymbol,我们来看下LegendSymbol的具体属性:

选项类型默认值描述
labelStringundefined图例符号的文本标签。
typeStringundefined图例符号的类型. 可以是 'image','circle','rectangle','polygon' 或 'polyline'。
urlStringundefined图里图片的 URL,仅用于 type 为 'image' 时。
radiusNumberundefined圆形图例的半径,以像素为单位,仅用于 type 为 'circle' 时。
sidesNumberundefined正多边形的边数,仅用于 type 为 'polygon' 时。
layersLayer|Layer[]undefined图例符号关联的叠加层. 关联叠加层后可通过点击图例来切换相应叠加层的可见性。
inactiveBooleanundefined图例符号是否为非激活的, 非激活的图例会减淡显示。
strokeBooleantrue是否绘制边框。
colorString'#3388ff'边框颜色。
weightNumber3边框宽度。
opacityNumber1.0边框透明度。
lineCapString'round'指定如何绘制每一条线段末端的属性。有 3 个可能的值,分别是:'butt','round' 或 ’square‘。
lineJoinString'round'用来设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。
dashArrayStringnull控制用来描边的点划线的图案范式。
dashOffsetStringnulldash模式到路径开始的距离。
fillBooleandepends是否用颜色填充。
fillColorString*填充色,默认与边框颜色相同
fillOpacityNumber0.2填充透明度。
fillRuleString'evenodd'填充规则。

        这里,有一个参数非常重要,就是Layers这个参数,这个参数就是实现我们今天核心主题的钥匙。要想实现图例的切换,就是依靠上面的Layers这个图层参数。同时注意查看这个Layers这个属性,它的值可以是一个对象也可以是一个数组,比如多个点对象集合。通过Leaflet.Legend.js源码可以看到一些它的初始化状态和属性信息:

 _style() {var ctx = (this._ctx = this._canvas.getContext("2d"));if (this._legend.fill || this._legend.fillColor) {ctx.globalAlpha = this._legend.fillOpacity || 1;ctx.fillStyle = this._legend.fillColor || this._legend.color;ctx.fill(this._legend.fillRule || "evenodd");}if (this._legend.stroke || this._legend.color) {if (this._legend.dashArray) {ctx.setLineDash(this._legend.dashArray || []);}ctx.globalAlpha = this._legend.opacity || 1.0;ctx.lineWidth = this._legend.weight || 2;ctx.strokeStyle = this._legend.color || "#3388ff";ctx.lineCap = this._legend.lineCap || "round";ctx.lineJoin = this._legend.lineJoin || "round";ctx.stroke();}}

        在介绍了上面的API信息之后,我们来看一下具体如何实现基于Legend的图例可视化开关。

二、Legend图例可视化控制

        本节将重点介绍在Legend中如何进行图例的切换与数据绑定,在图例生成和绑定过程中可能会遇到一些问题,也会介绍如何介绍这些问题,最终实现可以点击图例来进行相应数据的显示与隐藏。由于会涉及之前的违规教培信息的可视化展示,因此如果对违规教培的数据和采集不熟悉的,可以翻阅博主早些时候的一些博客。里面有相关信息的叙述,闲言少语,我们直接加进入正题。

1、违规教培信息的管理

        作为数据可视化的核心,违规教培信息的管理尤其重要。违规教培信息在这里包含两个方面的信息,第一个方面是基本信息,比如机构的信息、机构的地址、违规培训的类型、发布的日期、信息的来源等,另一方面就是空间信息,比如这个机构信息是在长沙而不是上海。这属于空间坐标位置信息。同样是重要的,因此我们可以进行统一的登记管理。这里仅展示管理的功能界面,大多数的功能界面都是增删改查,因此没有过多的叙述。

        上图仅展示了违规教培信息的列表信息,系统支持新增单条信息,也支持编辑单条培训信息,可以进行新处罚机构的信息录入,也可以进行信息的调整。 

2、违规培训信息时空可视化及图例渲染控制 

        在上面的违规培训信息管理中,我们已经实现了基本信息的管理,本小节中将进行赋予了经纬度信息的违规培训机构信息时空可视化展示。同时基于Legend的图例控制器来进行不同违规类型的切换与隐藏展示。当然,如果不想在图例上进行数据的安全过滤,也可以考虑做到全局的数据过滤中,直接在sql中加入where条件即可。

        要想实现基于Legend的图例数据切换,结合在最前面介绍的API接口,我们来梳理一下如何进行实现(至于其他的比如底图的加载与初始化,由于在之前的博客中已经讲解了很多,这里不再进行赘述)。第一步、根据之前的基本数据,违规培训的类型可以分为:隐形变异学科培训、无证非学科类培训、有证机构违规办学这三种,因此我们需要在地图上初始化这三类图例。同时,为了能将图例和数据进行一一对应,我们定义三个数组,在请求后台的数据时,根据不同的数据类型来进行赋值,最后将图例添加到地图组件中,就圆满的完成了图例的可视化。

        首先我们定义三个空的数组,用来接收三类违规培训的类型,代码如下:

var training1 = new Array();//隐形变异学科培训
var training2 = new Array();//无证非学科类培训
var training3 = new Array();//有证机构违规办学

        然后,获取所有的违规培训信息,根据三类违规培训类型,对上面的三个数组进行赋值。

function showViolationTraining(){$.ajax({  type:"get",  url:prefix + "/globallist",  dataType:"json",  cache:false,processData:false,success:function(result){if(result.code == web_status.SUCCESS){var strokeStyleSet = "#c50808";var lat,lng,cityInfo;for(var i=0;i < result.data.length;i++){var dataInfo = result.data[i];if(dataInfo.geomJson != null){var geomObj = JSON.parse(dataInfo.geomJson);var radiusSize = 6;switch(dataInfo.type) {case '无证非学科类培训':  strokeStyleSet = "#168d40";break;case '有证机构违规办学':  strokeStyleSet = "#2196f3";break;default:strokeStyleSet = "#c50808";}var content = "<strong>机构名称:</strong>"+dataInfo.name + "<br/><strong>地址:</strong>"+dataInfo.address;content += "<br/><strong>发布时间:</strong>"+dataInfo.publishDate + "<br/><strong>类型:</strong>"+dataInfo.type;var latlng = new L.latLng(geomObj.coordinates[1], geomObj.coordinates[0]);let marker = L.circleMarker(latlng, {radius: radiusSize,color: strokeStyleSet,//这里设置的是circleMarker的颜色属性labelStyle: {offsetX: 0, //横坐标偏移(像素)offsetY: 30, //纵坐标偏移(像素)text: dataInfo.name,rotation: 0,zIndex: radiusSize,minZoom : 2,fillStyle: strokeStyleSet}}).addTo(showLayerGroup);switch(dataInfo.type) {case '无证非学科类培训':  training2.push(marker);break;case '有证机构违规办学':  training3.push(marker);break;default:training1.push(marker);}marker.bindPopup(content); }}mymap.addLayer(showLayerGroup);}},error:function(){$.modal.alertWarning("获取信息失败");}});}

        最后,将图例和数据进行绑定,关键代码如下:

function initLegend(){const legend = L.control.Legend({position: "bottomright",collapsed: false,symbolWidth: 35,opacity: 1,title:"图例",column: 1,legends: [ {label: "\xa0\xa0 隐形变异学科培训",//一定要注意这里的转义字符type: "rectangle",color: "#c50808",fillColor: "#c50808",weight: 2,layers: training1,inactive: false}, {label: "\xa0\xa0 无证非学科类培训",type: "rectangle",color: "#168d40",fillColor: "#168d40",weight: 2,layers: training2,inactive: false}, {label: "\xa0\xa0 有证机构违规办学",type: "rectangle",color: "#2196f3",fillColor: "#2196f3",weight: 2,layers: training3,inactive: false}]}).addTo(mymap);}

        在上面的代码中,在设置图例的时候,legends对象数组中的每个一个layers将不同的违规培训类型进行绑定,从而实现点击图例,切换不同的违规培训数据。在本例中,请求后台的所有违规培训信息列表接口返回的数据如下:

        单个培训单位信息内容如下:

address: "湘江新区奥克斯中央公馆9栋308房"
geom: "0101000020E6100000A2B437F8C23C5C40FB3A70CE883A3C40"
geomJson: "{\"type\":\"Point\",\"coordinates\":[112.9494,28.22865]}"
id: "1827241962588106753"
lat: "28.22865"
lon: "112.9494"
name: "唐*"
params: {}
publishDate: "2024-08-07"
remark: ""
source: "长沙晚报"
type: "隐形变异学科培训"

 3、成果展示

        下面将重点对图例切换的时空可视化结果进行展示。主题功能分左边和右边两块,左边展示违规培训信息列表,右边展示地图信息。左边的违规培训机构信息展示,支持按照机构名称进行模糊搜索,而右边的地图默认显示整个长沙市的违规教育培训信息。

        图例窗口默认展示在界面右下角,在地图主界面默认将所有类型的培训机构信息展示齐全。

点击图例中的隐形变异学科培训”,将隐藏所有的隐形变异学科培训培训机构。效果如下所示:

        同样的操作,可以一次进行剩下的“无证非学科类培训”和“有证机构违规办学”这两种培训的切换和隐藏。

         当某一类型的违规培训机构被取消选中后,其颜色会变灰。跟Echarts的效果几乎是一模一样的。这样就满足了我们的实际需求。

三、总结

        以上就是本文的主要内容,本文以Leaflet Legend为例,结合之前采集的某市校外违规培训的时空数据,首先讲解如何进行数据的空间可视化,然后讲解Leaflet.Legend这款组件的具体应用,最后将数据和组件进行融合,讲解如何实现在图例上进行切换实现空间数据的切换与隐藏。如果您对基于图例的时空可视化渲染有兴趣,不妨来本文看看。行文仓促,定有许多不足之处,在此恳请各位专家博主和读者不吝赐教,在评论区留下宝贵的意见,不胜感激。

这篇关于基于Leaflet Legend的图例数据筛选实践-以某市教培时空分布为例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1120286

相关文章

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后,随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步,我们目前的解决方案是建立数据中间表。把需要检索的业务数据,统一放到一张M

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

异构存储(冷热数据分离)

异构存储主要解决不同的数据,存储在不同类型的硬盘中,达到最佳性能的问题。 异构存储Shell操作 (1)查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies (2)为指定路径(数据存储目录)设置指定的存储策略 hdfs storagepolicies -setStoragePo

Hadoop集群数据均衡之磁盘间数据均衡

生产环境,由于硬盘空间不足,往往需要增加一块硬盘。刚加载的硬盘没有数据时,可以执行磁盘数据均衡命令。(Hadoop3.x新特性) plan后面带的节点的名字必须是已经存在的,并且是需要均衡的节点。 如果节点不存在,会报如下错误: 如果节点只有一个硬盘的话,不会创建均衡计划: (1)生成均衡计划 hdfs diskbalancer -plan hadoop102 (2)执行均衡计划 hd

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

烟火目标检测数据集 7800张 烟火检测 带标注 voc yolo

一个包含7800张带标注图像的数据集,专门用于烟火目标检测,是一个非常有价值的资源,尤其对于那些致力于公共安全、事件管理和烟花表演监控等领域的人士而言。下面是对此数据集的一个详细介绍: 数据集名称:烟火目标检测数据集 数据集规模: 图片数量:7800张类别:主要包含烟火类目标,可能还包括其他相关类别,如烟火发射装置、背景等。格式:图像文件通常为JPEG或PNG格式;标注文件可能为X

pandas数据过滤

Pandas 数据过滤方法 Pandas 提供了多种方法来过滤数据,可以根据不同的条件进行筛选。以下是一些常见的 Pandas 数据过滤方法,结合实例进行讲解,希望能帮你快速理解。 1. 基于条件筛选行 可以使用布尔索引来根据条件过滤行。 import pandas as pd# 创建示例数据data = {'Name': ['Alice', 'Bob', 'Charlie', 'Dav

系统架构师考试学习笔记第三篇——架构设计高级知识(20)通信系统架构设计理论与实践

本章知识考点:         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识