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

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

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

【技术保护点】
1.一种环保监测地图点位标识的动态生成方法，其特征在于，该方法基于GIS引擎结合HTML 5Canvas技术，包括下列步骤：/n步骤1：根据环境监控点位类别，设计多种矢量图标，每类监控点位对应一种图标，分别获取其顶点像素坐标数据；/n步骤2：将监控指数划分为不同等级，确定每个等级对应的颜色，得到颜色数组colors[color

【技术特征摘要】
1.一种环保监测地图点位标识的动态生成方法，其特征在于，该方法基于GIS引擎结合HTML5Canvas技术，包括下列步骤：
步骤1：根据环境监控点位类别，设计多种矢量图标，每类监控点位对应一种图标，分别获取其顶点像素坐标数据；
步骤2：将监控指数划分为不同等级，确定每个等级对应的颜色，得到颜色数组colors[color1,color2,color3,color4,color5]；
步骤3：创建HTML5Canvas图层，同时设置图层宽度和高度，图层宽度和高度为地图的宽度和高度；
步骤4：浏览器请求获取监控点位数据；
步骤5：遍历监控点位数据，根据监控点位的类型及监测指数等级，将符号渲染到地图中，达到监控点位符号化展示的目的。


2.根据权利要求1所述的一种环保监测地图点位标识的动态生成方法，其特征在于，步骤5具体实现步骤如下：
5.1)根据监控点位的类型，确定所对应的图标类型，并获取图标顶点像素坐标pixelArray；根据监控点位的监控指数等级，从颜色数组colors中，获取符号颜色colorn；
5.2)利用transferCoordinate方法将地理坐标转换为Canvas图层的屏幕坐标pixelCoord；



5.3)以屏幕坐标pixelCoord为中心点，将图标顶点像素坐标pixelArray转换为Canvas图层的屏幕坐标mapPixelArray，利用HTML5Canvas的bezierCurveTo(模拟曲线)、lineTo(画直线)方法绘制图标轮廓，利用HTML5Canvas的fill方法设置填充颜色为colorn；
5.4)以屏幕坐标p...

【专利技术属性】
技术研发人员：薛守宁，林琦，张号，刘旭，
申请(专利权)人：河北志晟信息技术股份有限公司，
类型：发明
国别省市：河北;13