一种基于GeoJSON的WebGIS渲染管理方法及系统与流程

一种基于geojson的webgis渲染管理方法及系统
技术领域
1.本发明涉及电子地图技术领域，尤其涉及一种基于geojson的webgis渲染管理方法及系统。


背景技术：

2.webgis的全称是网络地理信息系统，是一种将地理信息系统在网络上实现的方式，它利用了高速发展的网络技术，给地理信息系统带来了跨平台，跨时空，便携性等优点。
3.随着信息技术社会的发展、数字化城市的概念提出，webgis的应用越来越广泛，越来越多的场景需要用webgis来描述。对于一些轻量级的webgis应用来说，其中主要是由静态要素数据构成，如果需要变动要素或者更改要素的渲染方式，每次都需要重新编码或者是重新生成要素后再进行展示，导致效率很低，不能及时在web端展示出来。


技术实现要素：

4.本发明申请一种基于geojson的webgis渲染管理方法及系统，结合主流的、轻量级的地理数据格式，本发明能够灵活的进行配置webgis应用的渲染及符号信息而不需要重新更改源码，实现了在浏览器端调整webgis渲染和管理静态要素的功能，给webgis的发展拓展了一种新的思路。
5.本发明旨在解决至少一个现有技术中存在的技术问题。为此，本发明申请一种基于geojson的webgis渲染管理方法及系统，包括webgis前端和可视化管理ui后端；所述的可视化管理ui后端：主要包括要素组管理器、要素管理器、要素绑定器、渲染配置器，通过建立可视化管理ui对geojson要素文件进行管理和配置，配置数据生成器根据配置的信息来生成返回前端的配置数据； 所述的webgis前端：通过请求基于restful服务的后端接口来获取配置数据， webgis框架根据配置数据解析器的结果来生成和渲染webgis应用。
6.进一步地，所述的可视化管理ui后端的要素组管理器和要素管理器进一步包括：对要素组和要素配置进行增、删、改、查、显、隐操作。
7.进一步地，所述的可视化管理ui后端的要素绑定器进一步包括：将geojson格式的地理要素文件或者url地址和对应要素管理器中要素配置进行绑定。
8.进一步地，所述的可视化管理ui后端的渲染配置器进一步包括：对geojson要素数据包括的点、线或面数据设定渲染方式、渲染符号、符号大小、符号颜色、符号类型、标注文字的一种或多种配置。
9.进一步地，所述的webgis前端进一步包括：配置数据解析器会解析出图层组（grouplayer）、图层（geojsonlayer）、要素地址（url）和各个要素的初始化参数（property）信息。
10.具体地，所述的各个要素的初始化参数（property）进一步包括：渲染配置参数（renderer）、弹出层配置参数（popup）、要素标注参数（labelinginfo）。
11.进一步地，所述的webgis前端生成和渲染webgis应用进一步包括：步骤401：首先将遍历解析出的图层组（grouplayer）数据来实例化grouplayer，并通过map的add方法添加进实例化的地图中；步骤402：循环出该图层组下的geojson图层（geojsonlayer），然后根据要素地址及初始化参数（property）来实例化geojsonlayer，此时的geojson要素已经设定渲染完毕，并通过上一步骤的实例化的grouplayer的add方法将此geojson图层添加进所属图层组；步骤403：重复以上步骤直至完毕，然后生成webgis应用。
12.进一步地，所述的一种基于geojson的webgis渲染管理方法及系统所使用的webgis地理数据格式除geojson外进一步包括csv，所述的webgis前端框架进一步包括arcgis javascript api、openlayers、leaflet、cesium第三方地图框架api的一种或多种。
附图说明
13.为了更加清楚地说明本技术的技术方案以及进一步理解本技术，下面将对实施例或方法所使用的的附图作描述，图中的元素只是为了概括本技术实施例的原理部分，不一定完全还原绘制，显而易见地，对于本领域的专业技术人员来讲，可以根据这些实施例的附图来生成其他附图。
14.图1为本技术基于geojson的webgis渲染管理方法及系统的架构图。
15.图2为本技术一种实施例的可视化管理ui后端的流程图。
16.图3为本技术一种实施例的webgis前端的流程图。
17.图4为本技术一种实施例的webgis应用成果图。
具体实施方式
18.为了对本技术所使用的的技术方案从原理进行详细、完整地阐述，下面将分别对实施例的附图进行剖析。
19.如图1所示，本实施例申请了一种基于geojson的webgis渲染管理方法及系统，包括webgis前端和可视化管理ui后端；所述的可视化管理ui后端：主要包括要素组管理器、要素管理器、要素绑定器、渲染配置器，通过建立可视化管理ui对geojson要素文件进行管理和配置，配置数据生成器根据配置的信息来生成返回前端的配置数据；所述的webgis前端：通过请求基于restful服务的后端接口来获取配置数据， webgis框架根据配置数据解析器的结果来生成和渲染webgis应用。
20.如图2所示，图2是本技术一种实施例的可视化管理ui后端的流程图，可视化执行步骤如下：步骤201：首先通过要素组管理器groupmanager对想要创建的图层图进行管理，包括增加、删除、更新、查找、显示、隐藏图层组功能；步骤202：通过要素管理器geojsonmanager对要素组里面的已有要素进行增加、更新（编辑）操作，同时对增加的要素设定一些初始化参数：要素的几何类型、要素的弹出窗口、要素的标题、要素是否在图层组中显示、要素的显隐状态、要素的透明度、要素的字段、要素的标注信息等；
步骤203：通过要素绑定器geojsonbinder，上传对应的geojson文件或者输入对应的网络地址（url）对上一步骤编辑的要素进行绑定地址。同时要素绑定器根据会根据上传的geojson文件的geometry字段解析出要素的几何类型（点、线、面）、以及渲染器要使用的符号信息。
21.步骤204：渲染配置器renderermanager中有多种渲染方式可以选择调整，包括但不限于：简单渲染、分级渲染、唯一值渲染；每种渲染方式下可以调整元素要渲染的符号信息，符号默认信息会通过步骤203进行解析，根据要素的geometry来对应，分别有markersymbol，linesymbol，fillsymbol，针对每种符号，设定要渲染要素符号的风格，大小，颜色，变量信息。
22.步骤205：将以上步骤操作的配置数据信息进行保存（json格式），并进行配置校验，通过restful接口输出；校验通过后的配置数据信息的json格式示例如下：[{"groupid": "001","groupcode":"hp202001","grouplabel": "河道组","groupshow": true,geojsonset:[{
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"title": "规划河道",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"url": "public/jsons/规划河道.geojson",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"popupenabled": false,
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"popuptemplate": {},
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"renderer": {
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"type": "simple",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"symbol": {
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"type": "simple-line",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"style": "solid",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"size": 5,
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"width": 4,
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"color": "rgba(255, 255, 255, 1)",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"outline": {
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"width": 1,
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"color": "#43d0d6"
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
}
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
},
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"opacity": 1,
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"visible": true,},
…
]},
…
]；配置数据信息是一个数组，包括所有的要素组信息，每个要素组中又包括了当前要素组下的所有要素，每个要素都有自己的配置渲染信息，这样就实现了通过建立可视化的后端ui进行渲染管理。
[0023]
如图3所示，本技术的webgis前端获取渲染过程如下：步骤301： 访问浏览器或者是进行刷新当前webgis应用；步骤302：webgis端通过访问后端restful的接口来获取配置数据信息;步骤303：webgis框架初始化，渲染生成必备的底图、组件（底图画廊组件、导航缩放组件、工具条组件、图例图层组件以及预先定义的组件），如果此时配置数据为空，那么则直接生成最简webgis应用;步骤304：如果配置数据不为空，配置数据解析器将会解析步骤302获取到的配置数据。分别解析成要素组数据和要素组下的要素数据，具体的函数如下：
ꢀꢀꢀꢀꢀꢀ
configdata.map(groupdata =》 {
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ…ꢀꢀꢀꢀꢀꢀꢀꢀ
groupdata.geojsonset.map(geojson =》 {
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ…ꢀꢀꢀꢀꢀꢀꢀꢀ
});
ꢀꢀꢀꢀꢀꢀ
})；步骤305：根据步骤304解析出的要素组数据实例化为图层组并加载渲染，具体的函数为：
ꢀꢀꢀꢀꢀꢀꢀꢀ
const grouplayer = new grouplayer({
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
title: groupdata.grouplabel,
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
visible: groupdata. groupshow
ꢀꢀꢀꢀꢀꢀꢀꢀ
});步骤306：根据步骤304解析出的要素组下的要素数据实例化为图层并添加进步骤305下实例化的图层组中加载渲染，具体的函数为：grouplayer.add(new geojsonlayer(geojson));步骤307：遍历所有的图层组，并通过add方法添加进实例化的地图map中，即可将所有的要素图层添加进webgis中并渲染完毕，具体的函数为：map.add(grouplayer);步骤308：通过步骤307后就完成了根据配置数据渲染输出html生成webgis应用。
[0024]
综上，本实施例完成了基于geojson的webgis渲染管理方法及系统，当用户需要增加要素组或者是要素时，在可视化管理ui后端进行可视化配置，然后在webgis端重新请求配置数据即可实现更新；当用户需要重新调整某一要素的渲染信息，比如符号的颜色、类型、字体大小等时，只需要在可视化管理ui后端进行可视化配置，刷新浏览器即可实现，而不需要重新更改代码或者重新部署。本技术更好地满足了轻量级的webgis应用渲染变动的
需要，大大提高了开发效率，具有减少开发成本、加快产品展示和增加产品复用性的特点。
[0025]
尽管本实施例已经是本技术的最优实施例，但本应理解，本技术不受限于最优实施例的实施方式，除此之外，本领域的专业技术人员可以根据本实施例的原理，概念进而对这些实施例做出另外的调整和更改，所以，本技术的保护范围可以解释为包括最优实施例以及落入本技术范围的所有调整和更改的这些等效变化。