CN105677863A - 一种基于百度地图的水流态势显示方法 - Google Patents

Abstract

本发明公开了一种基于百度地图的水流态势显示方法。本发明首先在***后端管理平台使用Web浏览器来进行访问；并设置“城市切换”按钮，以快速地更换当前地图视图所对应的城市信息；其次设定两种显示水流态势范围的方式；然后通过缩放地图的方式，显示当前级别下，某块聚合区域内水流态势记录的条数；最后.页面上显示当前区域内近期所有水流态势记录的具体态势信息以及汇总信息；对于水流态势值达到或超过预设置的危险等级，表格中用红色标注，地图上用不同的颜色标注。本发明能获取实时水流态势信息表中给定范围、给定时间内的水流态势信息，依据态势等级值，使用对应颜色的圆形标注物直观地显示在网页上。

Description

一种基于百度地图的水流态势显示方法

技术领域

本发明属于地理学和水文学领域，尤其涉及一种基于百度地图的水流态势显示方法。

背景技术

随着城市建设速度加快和建设规模不断增加，城市暴雨洪涝灾害日益频繁，造成惨重的人员和经济损失，城市内涝的形成与城市排水***的排水状况息息相关，因此加强排水管网的的建设变得尤为重要。

城市排水管网***是重要的城市基础设施，其作用是及时收集与输送城市污水和城市将于、融雪产生的径流，它具有保护环境和城市减免的双重功能。随着我国城市化进程加快，城市排水管网***建设也得到了快速发展，随之产生的海量复杂的管网数据信息需要整理，以往楼后的人工管理方法已经不能适应当前排水管网信息管理的需要。随着计算机技术、网络技术和通信技术的飞速发展，给城市华排水管网信息化、现代化管理带来了新的机遇。

近年来，各种监测技术在城市排水管网***中大量使用，为解决排水管网***的溢流问题提供了信息化手段。但是，通常仅限于少量点的监测，有限的监测数据不能很好地获知***的运行状况，并为排水管网整体***的运行优化与控制提供决策信息。造成了目前排水***“只监不控”和只能事后处理的被动局面。

作为排水***的基础，水流信息的收集与管理，大都由政府机构使用专业数据采集设备、常年固定放置在某一点，鉴于人力和物力等方面因素的制约，采集到的数据不全面、不及时。

随着网络技术与社会的发展，移动智能设备越来越普及，人均一部智能手机已成为现实。借助计算机相关技术，让更多的人参与到水流信息采集中，增强人民主人翁意识，提高信息采集地全面性与及时性。本发明基于百度地图的相关技术，把采集的水流数据加以关联和处理，以获取水流状态信息，并将其直观地显示在地图上，为***指挥决策人员提供简洁的决策参考。

发明内容

本发明方法的目的是针对现有的相关水流显示方法存在信息不全面、不直观等不足，提供一种基于百度地图的水流态势显示方法，将获取的水流状态信息直观地显示在百度地图上，为水流指挥决策人员提供简洁的决策参考。

本发明方法具体是：

步骤(1).***后端管理平台使用Web浏览器来进行访问；

步骤(2).设置“城市切换”按钮，以快速地更换当前地图视图所对应的城市信息；

步骤(3).在步骤(2)城市范围内，设定两种显示水流态势范围的方式，即“获取当前范围内态势信息”和“自定义可视范围”，并以地图与表格两种方式，显示指定范围内的水流态势信息；

步骤(4).在步骤(3)指定范围内，通过缩放地图的方式，显示当前级别下，某块聚合区域内水流态势记录的条数；水流记录条数用标注物标识，并显示地图最大比例尺下的具体水流态势信息；

步骤(5).页面上显示当前区域内近期所有水流态势记录的具体态势信息以及汇总信息；对于水流态势值达到或超过预设置的危险等级，表格中用红色标注，地图上用不同的颜色标注。

进一步的，步骤(1)在浏览器中输入url地址后，默认显示以北京为中心的地图页面。

进一步的，步骤(2)所述的城市切换，使用的是百度地图所提供的城市商圈及行政区CityList开源库。在页面中，为CityList对象实例添加城市点击事件与城市更换事件，即实现城市的切换。

进一步的，步骤(3)对于水流态示范围，可以选择当前可视范围，也可自定义圆形范围。选择当前可视范围时，借助百度地图JavaScriptAPI直接获取。选择圆形范围时，输入圆心坐标、圆半径信息。确定显示范围后，向***服务器请求对应的水流态势信息。

进一步的，步骤(4)在地图的缩放等级为最大时，显示具体某个点的水流态势具体信息，不同水流态势等级，采用不同颜色的自定义图标显示，鼠标点击该图标，可以显示该点对应的水流态势信息。在将地图的缩放级别减小时，显示当前视图范围内，某些聚合区域内包含的水流态势记录条数，并附着在标注物上，一并显示在地图上。此部分是基于百度地图所提供的点聚合MarkerClusterer开源库，以及自定义覆盖物TextIconOverlay开源库，自定义更改进行实现。

进一步的，步骤(5)所述的显示当前区域内所有水流态势记录的具体态势信息、汇总信息以及将水流态势值达到或超过预设置的危险等级用颜色标注。

使用的具体方法是，在Web浏览器端，根据服务器端返回的水流数据，使用JSON将其解析为一个个具体的水流态势信息，在表格、地图上进行显示。

在表格中，显示每条具体水流态势信息以及汇总信息，对于水流态势值超过预设置的危险等级时，态势等级信息列的背景颜色设置为红色；

在地图上，每条水流态势信息对应一个实例，对于每一个实例的标识，根据水流信息的态势等级，分别用不同颜色自定义标识。然后将每个实例，通过百度地图的addOverlay()方法，将其添加到地图上。

最后，将所有的水流态势信息的实例组成标注数组，通过使用百度地图所提供的开源MarkerClusterer库，将所有的标注进行点聚合。

本发明方法的有益效果：能获取实时水流态势信息表中给定范围、给定时间内的水流态势信息，依据态势等级值，使用对应颜色的圆形标注物直观地显示在网页上，为***指挥决策人员直观的显示当前视图下详细的水流态势信息。

附图说明

图1为本发明提出的基于百度地图的水流态势显示方法流程图。

具体实施方式

以下结合附图对本发明作进一步说明

如图1所示，本发明方法具体实施步骤是：

（1）指挥决策人员进入***后端管理平台进行区域水流态势的查看，浏览器中输入url地址后，显示以北京为中心，缩放级别为最大的地图与表格中的水流状态信息。

（2）点击“城市切换”按钮则可以选择要查看的城市，若不切换，则显示的依然为北京的水流态势信息。城市切换，使用的是百度地图所提供的城市商圈及行政区CityList开源库。在页面中，为CityList对象实例添加城市点击事件与城市更换事件，即实现城市的切换。

（3）点击“当前可视范围”或者“自定义可视范围”选择显示范围；选择当前可视范围时，借助百度地图JavaScriptAPI直接获取。选择圆形范围时，输入圆心经纬度坐标以及半径，获取指定圆形范围内的水流态势信息。

Web浏览器端，获取当前视图区域内的经纬度范围，代码如下所示。

varbs=map.getBounds();//当前地图可视范围

varbssw=bs.getSouthWest();//西南角处的点

varbsne=bs.getNorthEast();//东北角处的点

varboundP=bssw.lng+","+bssw.lat+","+bsne.lng+","+bsne.lat;//显示范围的左上角与右下角经纬度值。

对于圆形范围的圆心可以通过鼠标在地图上点击事件获取，圆的半径通过手工输入。具体的代码如下所。

map.addEventListener("click",function(e){

varpointInfo=e.point.lng+","+e.point.lat;

window.document.getElementById("circlePoint").value=pointInfo;});

varcirclePoint=

window.document.getElementById("circlePoint").value;

//获取页面中输入的圆半径

varcircleRad=

window.document.getElementById("circleRad").value;

（4）指定范围内，缩放地图，查看当前级别下，某块聚合区域内水流态势记录的条数；在地图的缩放等级为最大时，显示具体某个点的水流态势具体信息，不同水流态势等级，采用不同颜色的自定义图标显示，鼠标点击该图标，显示该点对应的水流态势信息。在将地图的缩放级别减小时，显示当前视图范围内，某些聚合区域内包含的水流态势记录条数，并附着在标注物上，一并显示在地图上。此部分是基于百度地图所提供的点聚合MarkerClusterer开源库，以及自定义覆盖物TextIconOverlay开源库，自定义更改进行实现。

（5）根据步骤（4）和步骤（5）在地图上显示水流势态信息以标注物形式显示指定范围所有水流态势记录条数。具体方法是，通过获取实时水流态势信息表中给定范围、给定时间内的水流态势信息，以经纬度坐标为关联，在地图上添加对应的地图标注物，并将水流态势显示与百度地图服务器交互，以获取地图的底层数据、切换城市、添加或删除标注，依据态势等级值，使用对应颜色的圆形标注物直观地显示在网页上。

（6）显示地图最大比例尺下，近期的水流态势信息，并以不同的颜色的标注物标识不同的等级，当鼠标点击该标注物，显示该点当前的水流态势登记信息。

在Web浏览器端，根据服务器端返回的水流数据，使用JSON将其解析为一个个具体的水流态势信息，在表格、地图上进行显示。

在表格中，显示每条具体水流态势信息以及汇总信息，对于水流态势值超过预设置的危险等级时，态势等级信息列的背景颜色设置为红色；

在地图上，每条水流态势信息对应一个实例，对于每一个实例的标识，根据水流信息的态势等级，分别用不同颜色自定义标识。然后将每个实例，通过百度地图的addOverlay()方法，将其添加到地图上。

最后，将所有的水流态势信息的实例组成标注数组，通过使用百度地图所提供的开源MarkerClusterer库，将所有的标注进行点聚合。

（7）客户端浏览器在获取到***服务器返回的水流态势信息时，会在页面左边的表格中显示当前态势记录信息，同时显示每一种态势级别下对应的态势记录的条数以及所有态势记录的总条数，对于态势值超过预设值的态势值，表格中该条记录的态势所在列的背景颜色会设置为红色。

Claims (6)

1.一种基于百度地图的水流态势显示方法，其特征在于该方法的具体步骤是：

步骤(1).***后端管理平台使用Web浏览器来进行访问；

步骤(2).设置“城市切换”按钮，以快速地更换当前地图视图所对应的城市信息；

步骤(3).在步骤(2)城市范围内，设定两种显示水流态势范围的方式，即“获取当前范围内态势信息”和“自定义可视范围”，并以地图与表格两种方式，显示指定范围内的水流态势信息；

步骤(4).在步骤(3)指定范围内，通过缩放地图的方式，显示当前级别下，某块聚合区域内水流态势记录的条数；其中水流记录条数用标注物标识，并显示地图最大比例尺下的具体水流态势信息；

步骤(5).页面上显示当前区域内近期所有水流态势记录的具体态势信息以及汇总信息；对于水流态势值达到或超过预设置的危险等级，表格中用红色标注，地图上用不同的颜色标注。

2.根据权利要求1所述的一种基于百度地图的水流态势显示方法，其特征在于：步骤(1)在浏览器中输入url地址后，默认显示以北京为中心的地图页面。

3.根据权利要求1所述的一种基于百度地图的水流态势显示方法，其特征在于：步骤(2)所述的城市切换，使用的是百度地图所提供的城市商圈及行政区CityList开源库；在页面中，为CityList对象实例添加城市点击事件与城市更换事件，即实现城市的切换。

4.根据权利要求1所述的一种基于百度地图的水流态势显示方法，其特征在于：步骤(3)对于水流态示范围，可以选择当前可视范围，也可自定义圆形范围；选择当前可视范围时，借助百度地图JavaScriptAPI直接获取；选择圆形范围时，输入圆心坐标、圆半径信息；确定显示范围后，向***服务器请求对应的水流态势信息。

5.根据权利要求1所述的一种基于百度地图的水流态势显示方法，其特征在于：步骤(4)在地图的缩放等级为最大时，显示具体某个点的水流态势具体信息，不同水流态势等级，采用不同颜色的自定义图标显示，鼠标点击该图标，可以显示该点对应的水流态势信息；在将地图的缩放级别减小时，显示当前视图范围内，某些聚合区域内包含的水流态势记录条数，并附着在标注物上，一并显示在地图上；此部分是基于百度地图所提供的点聚合MarkerClusterer开源库，以及自定义覆盖物TextIconOverlay开源库，自定义更改进行实现。

6.根据权利要求1所述的一种基于百度地图的水流态势显示方法，其特征在于：步骤(5)所述的显示当前区域内所有水流态势记录的具体态势信息、汇总信息以及将水流态势值达到或超过预设置的危险等级用颜色标注，具体是：

在Web浏览器端，根据服务器端返回的水流数据，使用JSON将其解析为一个个具体的水流态势信息，在表格、地图上进行显示；

在表格中，显示每条具体水流态势信息以及汇总信息，对于水流态势值超过预设置的危险等级时，态势等级信息列的背景颜色设置为红色；

在地图上，每条水流态势信息对应一个实例，对于每一个实例的标识，根据水流信息的态势等级，分别用不同颜色自定义标识；然后将每个实例，通过百度地图的addOverlay()方法，将其添加到地图上；

最后，将所有的水流态势信息的实例组成标注数组，通过使用百度地图所提供的开源MarkerClusterer库，将所有的标注进行点聚合。