CN112783385A - 一种环保监测地图点位标识的动态生成方法 - Google Patents

一种环保监测地图点位标识的动态生成方法 Download PDF

Info

Publication number
CN112783385A
CN112783385A CN202110003799.XA CN202110003799A CN112783385A CN 112783385 A CN112783385 A CN 112783385A CN 202110003799 A CN202110003799 A CN 202110003799A CN 112783385 A CN112783385 A CN 112783385A
Authority
CN
China
Prior art keywords
monitoring
color
point location
map
icon
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110003799.XA
Other languages
English (en)
Inventor
薛守宁
林琦
张号
刘旭
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hebei Zhisheng Information Technology Co ltd
Original Assignee
Hebei Zhisheng Information Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Hebei Zhisheng Information Technology Co ltd filed Critical Hebei Zhisheng Information Technology Co ltd
Priority to CN202110003799.XA priority Critical patent/CN112783385A/zh
Publication of CN112783385A publication Critical patent/CN112783385A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G01—MEASURING; TESTING
    • G01N—INVESTIGATING OR ANALYSING MATERIALS BY DETERMINING THEIR CHEMICAL OR PHYSICAL PROPERTIES
    • G01N33/00—Investigating or analysing materials by specific methods not covered by groups G01N1/00 - G01N31/00
    • G01N33/0004—Gaseous mixtures, e.g. polluted air
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/20—Drawing from basic elements, e.g. lines or circles
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/40—Filling a planar surface by adding surface attributes, e.g. colour or texture

Landscapes

  • Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • Chemical & Material Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • General Engineering & Computer Science (AREA)
  • Life Sciences & Earth Sciences (AREA)
  • Human Computer Interaction (AREA)
  • Combustion & Propulsion (AREA)
  • Food Science & Technology (AREA)
  • Medicinal Chemistry (AREA)
  • Analytical Chemistry (AREA)
  • Biochemistry (AREA)
  • General Health & Medical Sciences (AREA)
  • Immunology (AREA)
  • Pathology (AREA)
  • Instructional Devices (AREA)

Abstract

本发明提供一种环保监测地图点位标识的动态生成方法，该方法基于GIS引擎结合HTML 5 Canvas技术，包括下列步骤：步骤1、根据环境监控点位类别，设计多种矢量图标，每类监控点位对应一种图标，分别获取其顶点像素坐标数据；步骤2：将监控指数划分为不同等级，确定每个等级对应的颜色，得到颜色数组；步骤3：创建HTML 5 Canvas图层；步骤4：浏览器请求获取监控点位数据；步骤5：遍历监控点位数据，根据监控点位的类型及监测指数等级，将符号渲染到地图中，达到符号化展示的目的。本发明只需设计少量基础图标，工作量较小；可以动态绘制环境监控点，提高图标绘制效率，占用较少浏览器内存，最终提高系统的稳定性、可用性。

Description

一种环保监测地图点位标识的动态生成方法
技术领域
本发明涉及GIS在线监测领域，具体地说是一种环保监测地图点位标识的动态生成方法。
背景技术
基于地图的环境监控点位(空气质量监测设备)的展示成为了环保监测可视化系统中重要的组成部分。现有技术主要通过div(HTML的dom元素)方式进行地图符号化来展示环境监控点位：
通过div、img(作为背景图片)、p(填充数值)等元素组合，形成点位图标和数值的组合dom元素，通过css(Cascading Style Sheets，即层叠样式表，是一种用来表现HTML文件样式的计算机语言)调整组合dom元素的位置，即可将环境监控点显示在地图上。
但是这种方式存在以下问题：
首先，环境监控点位多种多样，常见的有国控点、省控点、市控点、乡镇空气监测站、工地扬尘监测点、企业污染源监测点、TVOC监测点、秸秆焚烧监测点等8种环境监控点位，因此地图符号化需要40种符号图标(8种符号图标，每种指数又可以分为优、良、中等、重度、严重等五个等级，5种颜色)，这就导致图标设计工作量大，绘制进度慢等问题。
其次，监控点位较少时，该方法基本能满足需求，但随着监控点位数目的增加，成千上万的dom要素加载到浏览器，会占用大量的服务器和浏览器内存，达到一定的量就会造成卡屏或崩溃的现象。
因此，现有技术下，急需一种能够方便、规范的地图点位图标的动态生成方法。
发明内容
本发明的技术任务是解决现有技术的不足，提供一种环保监测地图点位标识的动态生成方法。
本发明解决其技术问题所采用的技术方案是：
一种环保监测地图点位标识的动态生成方法，该方法基于GIS引擎结合HTML5Canvas技术，包括下列步骤：
步骤1：根据环境监控点位类别，设计多种矢量图标，每类监控点位对应一种图标，分别获取其顶点像素坐标数据；
步骤2：将监控指数划分为不同等级，确定每个等级对应的颜色，得到颜色数组colors[color1,color2,color3,color4,color5]；
步骤3：创建HTML 5Canvas图层，同时设置图层宽度和高度，图层宽度和高度为地图的宽度和高度；
步骤4：浏览器请求获取监控点位数据；
步骤5：遍历监控点位数据，根据监控点位的类型及监测指数等级，将符号渲染到地图中，达到监控点位符号化展示的目的。
进一步地，步骤5具体实现步骤如下：
5.1)根据监控点位的类型，确定所对应的图标类型，并获取图标顶点像素坐标pixelArray；根据监控点位的监控指数等级，从颜色数组colors中，获取符号颜色colorn；
5.2)利用transferCoordinate方法将地理坐标转换为Canvas图层的屏幕坐标pixelCoord；
Figure BDA0002882336800000021
5.3)以屏幕坐标pixelCoord为中心点，将图标顶点像素坐标pixelArray转换为Canvas图层的屏幕坐标mapPixelArray，利用HTML 5Canvas的bezierCurveTo(模拟曲线)、lineTo(画直线)方法绘制图标轮廓，利用HTML 5Canvas的fill方法设置填充颜色为colorn；
5.4)以屏幕坐标pixelCoord为中心点，利用HTML 5Canvas的fillText绘制指数值并设置颜色为colortext。
进一步地，还包括步骤6、当地图显示层级变化时，即地图放大或缩小时，只需重复执行步骤5即可。
进一步地，步骤1中包括8种矢量图标，其顶点像素坐标数据式：
[{“type”:”type”,“pixelArray”:[x0,y0],[x2,y2],…,[xn,yn]]}，其中type代表：国控点、省控点、市控点、乡镇空气监测站、工地扬尘监测点、企业污染源监测点、TVOC监测点、秸秆焚烧监测点。
进一步地，步骤2：参照环境空气质量标准GB 3095—2012进行等级划分，将监控指数划分为优、良、中等、重度、严重五个等级，确定每个等级对应的颜色，得到颜色数组colors[color1,color2,color3,color4,color5]。
进一步地，步骤3：使用document.createElement('canvas')方法创建HTML5Canvas图层。
进一步地，步骤4中，浏览器通过HTTP POST方式，请求服务器rest接口服务，获取监控点位数据，包括经度、维度、名称、类型、监测指数等级。
本发明的一种环保监测地图点位标识的动态生成方法，与现有技术相比所产生的有益效果是：
1、基于html5 canvas技术，实现环保监控点位在浏览器端的地图符号化，只需设计少量基础图标，工作量较小；
2、该方法发挥html5 canvas高性能特性，解决基于地图的环境监控点(空气质量监测设备)的展示自动化程度低及耗费内存的问题。
3、将本发明运用在环保监测可视化系统中，可以动态绘制环境监控点，提高图标绘制效率，占用较少浏览器内存，最终提高环保监测可视化系统稳定性、可用性。
具体实施方式
本发明的一种环保监测地图点位标识的动态生成方法，该方法基于GIS引擎结合HTML 5Canvas技术，包括下列步骤：
步骤1：根据环境监控点位类别，设计多种矢量图标，每类监控点位对应一种图标，分别获取其顶点像素坐标数据；每种矢量图标轮廓不一样，该图只是举例说明，可以找UI设计人员重新设计，
Figure BDA0002882336800000041
图中设计了8种矢量图标，其顶点像素坐标数据式：[{“type”:”type”,“pixelArray”:[x0,y0],[x2,y2],…,[xn,yn]]}，其中type代表：国控点、省控点、市控点、乡镇空气监测站、工地扬尘监测点、企业污染源监测点、TVOC监测点、秸秆焚烧监测点。
步骤2：参照环境空气质量标准GB 3095—2012进行等级划分，将监控指数划分为优、良、中等、重度、严重五个等级，确定每个等级对应的颜色，得到颜色数组colors[color1,color2,color3,color4,color5]。
步骤3：使用document.createElement('canvas')方法创建HTML 5Canvas图层，同时设置图层宽度和高度，图层宽度和高度为地图的宽度和高度；
步骤4：浏览器通过HTTP POST方式，请求服务器rest接口服务，获取监控点位数据，包括经度、维度、名称、类型、监测指数等级。
步骤5：遍历监控点位数据，根据监控点位的类型及监测指数等级，将符号渲染到地图中，达到监控点位符号化展示的目的。其具体实现步骤如下：
5.1)根据监控点位的类型，确定所对应的图标类型，并获取图标顶点像素坐标pixelArray；根据监控点位的监控指数等级，从颜色数组colors中，获取符号颜色colorn；
5.2)利用transferCoordinate方法将地理坐标转换为Canvas图层的屏幕坐标pixelCoord；
Figure BDA0002882336800000051
5.3)以屏幕坐标pixelCoord为中心点，将图标顶点像素坐标pixelArray转换为Canvas图层的屏幕坐标mapPixelArray，利用HTML 5Canvas的bezierCurveTo(模拟曲线)、lineTo(画直线)方法绘制图标轮廓，利用HTML 5Canvas的fill方法设置填充颜色为colorn；
5.4)以屏幕坐标pixelCoord为中心点，利用HTML 5Canvas的fillText绘制指数值并设置颜色为colorn。
在上述步骤基础上，还包括步骤6、当地图显示层级变化时，即地图放大或缩小时，只需重复执行步骤5即可。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其同等技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (7)

1.一种环保监测地图点位标识的动态生成方法，其特征在于，该方法基于GIS引擎结合HTML 5Canvas技术，包括下列步骤：
步骤1：根据环境监控点位类别，设计多种矢量图标，每类监控点位对应一种图标，分别获取其顶点像素坐标数据；
步骤2：将监控指数划分为不同等级，确定每个等级对应的颜色，得到颜色数组colors[color1,color2,color3,color4,color5]；
步骤3：创建HTML 5Canvas图层，同时设置图层宽度和高度，图层宽度和高度为地图的宽度和高度；
步骤4：浏览器请求获取监控点位数据；
步骤5：遍历监控点位数据，根据监控点位的类型及监测指数等级，将符号渲染到地图中，达到监控点位符号化展示的目的。
2.根据权利要求1所述的一种环保监测地图点位标识的动态生成方法，其特征在于，步骤5具体实现步骤如下：
5.1)根据监控点位的类型，确定所对应的图标类型，并获取图标顶点像素坐标pixelArray；根据监控点位的监控指数等级，从颜色数组colors中，获取符号颜色colorn；
5.2)利用transferCoordinate方法将地理坐标转换为Canvas图层的屏幕坐标pixelCoord；
Figure FDA0002882336790000011
5.3)以屏幕坐标pixelCoord为中心点，将图标顶点像素坐标pixelArray转换为Canvas图层的屏幕坐标mapPixelArray，利用HTML 5Canvas的bezierCurveTo(模拟曲线)、lineTo(画直线)方法绘制图标轮廓，利用HTML 5Canvas的fill方法设置填充颜色为colorn；
5.4)以屏幕坐标pixelCoord为中心点，利用HTML 5Canvas的fillText绘制指数值并设置颜色为colortext。
3.根据权利要求1或2所述的一种环保监测地图点位标识的动态生成方法，其特征在于，还包括步骤6、当地图显示层级变化时，即地图放大或缩小时，只需重复执行步骤5即可。
4.根据权利要求1或2所述的一种环保监测地图点位标识的动态生成方法，其特征在于，步骤1中包括8种矢量图标，其顶点像素坐标数据式：[{“type”:”type”,“pixelArray”:[x0,y0],[x2,y2],…,[xn,yn]]}，其中type代表：国控点、省控点、市控点、乡镇空气监测站、工地扬尘监测点、企业污染源监测点、TVOC监测点、秸秆焚烧监测点。
5.根据权利要求1或2所述的一种环保监测地图点位标识的动态生成方法，其特征在于，步骤2：参照环境空气质量标准GB 3095—2012进行等级划分，将监控指数划分为优、良、中等、重度、严重五个等级，确定每个等级对应的颜色，得到颜色数组colors[color1,color2,color3,color4,color5]。
6.根据权利要求1或2所述的一种环保监测地图点位标识的动态生成方法，其特征在于，步骤3：使用document.createElement('canvas')方法创建HTML 5Canvas图层。
7.根据权利要求1或2所述的一种环保监测地图点位标识的动态生成方法，其特征在于，步骤4中，浏览器通过HTTP POST方式，请求服务器rest接口服务，获取监控点位数据，包括经度、维度、名称、类型、监测指数等级。
CN202110003799.XA 2021-01-04 2021-01-04 一种环保监测地图点位标识的动态生成方法 Pending CN112783385A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110003799.XA CN112783385A (zh) 2021-01-04 2021-01-04 一种环保监测地图点位标识的动态生成方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110003799.XA CN112783385A (zh) 2021-01-04 2021-01-04 一种环保监测地图点位标识的动态生成方法

Publications (1)

Publication Number Publication Date
CN112783385A true CN112783385A (zh) 2021-05-11

Family

ID=75753718

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110003799.XA Pending CN112783385A (zh) 2021-01-04 2021-01-04 一种环保监测地图点位标识的动态生成方法

Country Status (1)

Country Link
CN (1) CN112783385A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114612586A (zh) * 2022-05-10 2022-06-10 杭州比智科技有限公司 一种基于数据可视化场景下的颜色分等级渲染方法及系统

Citations (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101887592A (zh) * 2010-07-30 2010-11-17 中国测绘科学研究院 一种矢量图形地图符号的绘制方法
CN102096707A (zh) * 2011-01-11 2011-06-15 上海海洋大学 一种基于WebGIS的高程地理数据查询系统及方法
CN102651141A (zh) * 2012-03-30 2012-08-29 北京师范大学 一种大场景中矢量地图与高分辨率数字高程模型自动叠加渲染的方法
CN103390369A (zh) * 2013-01-24 2013-11-13 中国科学院遥感应用研究所 一种地图渲染方法及系统
CN103472502A (zh) * 2013-09-18 2013-12-25 中山大学 动态展示区域空气质量和气象场的方法
CN103514366A (zh) * 2013-09-13 2014-01-15 中南大学 一种城市空气质量浓度监测缺失数据的修复方法
CN104408564A (zh) * 2014-11-28 2015-03-11 北京宇图天下软件有限公司 一种数字水资源系统
CN104468169A (zh) * 2013-09-23 2015-03-25 中兴通讯股份有限公司 基于站点状态的运维监控方法、装置、设备及系统
CN104778369A (zh) * 2015-04-20 2015-07-15 河海大学 一种基于地面沉降监测的决策与预警方法及其系统
CN105139749A (zh) * 2015-08-31 2015-12-09 爱国者电子科技有限公司 一种在网络地图上显示空气质量信息的优化方法
CN106815958A (zh) * 2017-02-24 2017-06-09 上海华崟信息技术有限公司 报警系统、报警分析/显示装置，报警分析/显示方法
CN107038236A (zh) * 2017-04-19 2017-08-11 合肥学院 一种空气质量数据可视化系统
CN107391743A (zh) * 2017-08-10 2017-11-24 南京邮电大学 一种基于动态地图符号的移动gis可视化方法
CN109946418A (zh) * 2017-12-21 2019-06-28 北京航天泰坦科技股份有限公司 一种空气质量监测与评价方法及系统
CN111157688A (zh) * 2020-03-06 2020-05-15 北京市环境保护监测中心 评价污染源对空气质量监测站影响的方法和装置
CN112100306A (zh) * 2020-09-17 2020-12-18 中科三清科技有限公司 空气质量落区预报图绘制方法、装置及存储介质

Patent Citations (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101887592A (zh) * 2010-07-30 2010-11-17 中国测绘科学研究院 一种矢量图形地图符号的绘制方法
CN102096707A (zh) * 2011-01-11 2011-06-15 上海海洋大学 一种基于WebGIS的高程地理数据查询系统及方法
CN102651141A (zh) * 2012-03-30 2012-08-29 北京师范大学 一种大场景中矢量地图与高分辨率数字高程模型自动叠加渲染的方法
CN103390369A (zh) * 2013-01-24 2013-11-13 中国科学院遥感应用研究所 一种地图渲染方法及系统
CN103514366A (zh) * 2013-09-13 2014-01-15 中南大学 一种城市空气质量浓度监测缺失数据的修复方法
CN103472502A (zh) * 2013-09-18 2013-12-25 中山大学 动态展示区域空气质量和气象场的方法
CN104468169A (zh) * 2013-09-23 2015-03-25 中兴通讯股份有限公司 基于站点状态的运维监控方法、装置、设备及系统
CN104408564A (zh) * 2014-11-28 2015-03-11 北京宇图天下软件有限公司 一种数字水资源系统
CN104778369A (zh) * 2015-04-20 2015-07-15 河海大学 一种基于地面沉降监测的决策与预警方法及其系统
CN105139749A (zh) * 2015-08-31 2015-12-09 爱国者电子科技有限公司 一种在网络地图上显示空气质量信息的优化方法
CN106815958A (zh) * 2017-02-24 2017-06-09 上海华崟信息技术有限公司 报警系统、报警分析/显示装置，报警分析/显示方法
CN107038236A (zh) * 2017-04-19 2017-08-11 合肥学院 一种空气质量数据可视化系统
CN107391743A (zh) * 2017-08-10 2017-11-24 南京邮电大学 一种基于动态地图符号的移动gis可视化方法
CN109946418A (zh) * 2017-12-21 2019-06-28 北京航天泰坦科技股份有限公司 一种空气质量监测与评价方法及系统
CN111157688A (zh) * 2020-03-06 2020-05-15 北京市环境保护监测中心 评价污染源对空气质量监测站影响的方法和装置
CN112100306A (zh) * 2020-09-17 2020-12-18 中科三清科技有限公司 空气质量落区预报图绘制方法、装置及存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
胡玲: "基于HTML5和GIService的WebGIS系统开发", 《中国优秀硕士学位论文全文数据库 基础科学辑》 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114612586A (zh) * 2022-05-10 2022-06-10 杭州比智科技有限公司 一种基于数据可视化场景下的颜色分等级渲染方法及系统

Similar Documents

Publication Publication Date Title
AU2019204746B2 (en) Managing map elements using aggregate feature identifiers
AU2017251816B2 (en) Rendering map images using modifications of non-raster map data
CN104933057A (zh) 一种地图服务提供方法及装置
US9396508B2 (en) Use of map data difference tiles to iteratively provide map data to a client device
CN105516311A (zh) 一种电子地图全景图获取方法及系统
CN107451150B (zh) 地理数据呈现方法及装置
CN112131332B (zh) 信息点的更新方法、装置、电子设备和计算机存储介质
CN107992589B (zh) 一种svg地图数据的加载方法、装置及系统
CN105808217A (zh) 一种基于xml的流程图绘制方法及系统
CN103530356A (zh) 电子地图服务平台以及电子地图数据联动展现的方法
US10067950B1 (en) Systems and methods for efficiently organizing map styling information
CN118069767A (zh) 一种矢量数据动态可视化方法及系统
CN112783385A (zh) 一种环保监测地图点位标识的动态生成方法
CN108182269B (zh) 一种选择性背景敲除的注记符号化方法
CN110569292A (zh) 基于电子地图的数据标注方法及系统
CN101359341B (zh) 一种基于矢量数据信息量的尺度设置方法
JP6174939B2 (ja) 地図注記処理装置、地図注記処理方法および地図情報提供装置
CN112445951A (zh) 快速灵活切换的兼容多种地图的海洋数据可视化方法
JP2010191889A (ja) 地図データ編集装置及び地図データ編集装置用サーバ
CN103399953A (zh) 一种在线显示海量数据的方法及系统
CN103294722A (zh) 一种信息处理方法及系统
Ying et al. Selective progressive transmission of vector data
CN118733154A (zh) 基于拖拉拽定制数据大屏的方法、系统和存储介质
CN116431725A (zh) 一种基于geotools动态智能出图的方法、系统及设备
CN115062564A (zh) 基于云平台的地表二维水动力模拟实现方法、装置及设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20210511