CN113901164A - 一种基于GeoJSON的WebGIS渲染管理方法及系统 - Google Patents

一种基于GeoJSON的WebGIS渲染管理方法及系统 Download PDF

Info

Publication number
CN113901164A
CN113901164A CN202111225494.XA CN202111225494A CN113901164A CN 113901164 A CN113901164 A CN 113901164A CN 202111225494 A CN202111225494 A CN 202111225494A CN 113901164 A CN113901164 A CN 113901164A
Authority
CN
China
Prior art keywords
webgis
geojson
rendering
management
configuration data
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
CN202111225494.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.)
Individual
Original Assignee
Individual
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 Individual filed Critical Individual
Priority to CN202111225494.XA priority Critical patent/CN113901164A/zh
Publication of CN113901164A publication Critical patent/CN113901164A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/29—Geographical information databases
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Remote Sensing (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本发明公开一种基于GeoJSON的WebGIS渲染管理方法及系统，该方法分为可视化管理UI后端和WebGIS前端两个部分，后端包括要素组管理器、要素管理器、要素绑定器、渲染配置器，并通过建立可视化的管理UI对GeoJSON要素文件进行管理和配置，配置数据生成器根据配置的信息来生成返回前端的配置数据。WebGIS前端请求基于restful服务的后端接口并获取配置数据，WebGIS框架根据配置数据解析器的结果来生成和渲染WebGIS应用；该申请提出了一种新的WebGIS渲染管理方法，能够实现不改变源代码的情况下，在浏览器端通过可视化的UI来管理WebGIS应用的要素和更改WebGIS应用的渲染符号及方式。

Description

一种基于GeoJSON的WebGIS渲染管理方法及系统
技术领域
本发明涉及电子地图技术领域，尤其涉及一种基于GeoJSON的WebGIS渲染管理方法及系统。
背景技术
WebGIS的全称是网络地理信息系统，是一种将地理信息系统在网络上实现的方式，它利用了高速发展的网络技术，给地理信息系统带来了跨平台，跨时空，便携性等优点。
随着信息技术社会的发展、数字化城市的概念提出，WebGIS的应用越来越广泛，越来越多的场景需要用WebGIS来描述。对于一些轻量级的WebGIS应用来说，其中主要是由静态要素数据构成，如果需要变动要素或者更改要素的渲染方式，每次都需要重新编码或者是重新生成要素后再进行展示，导致效率很低，不能及时在Web端展示出来。
发明内容
本发明申请一种基于GeoJSON的WebGIS渲染管理方法及系统，结合主流的、轻量级的地理数据格式，本发明能够灵活的进行配置WebGIS应用的渲染及符号信息而不需要重新更改源码，实现了在浏览器端调整WebGIS渲染和管理静态要素的功能，给WebGIS的发展拓展了一种新的思路。
本发明旨在解决至少一个现有技术中存在的技术问题。为此，本发明申请一种基于GeoJSON的WebGIS渲染管理方法及系统，包括WebGIS前端和可视化管理UI后端；
所述的可视化管理UI后端：主要包括要素组管理器、要素管理器、要素绑定器、渲染配置器，通过建立可视化管理UI对GeoJSON要素文件进行管理和配置，配置数据生成器根据配置的信息来生成返回前端的配置数据；
所述的WebGIS前端：通过请求基于restful服务的后端接口来获取配置数据，WebGIS框架根据配置数据解析器的结果来生成和渲染WebGIS应用。
进一步地，所述的可视化管理UI后端的要素组管理器和要素管理器进一步包括：对要素组和要素配置进行增、删、改、查、显、隐操作。
进一步地，所述的可视化管理UI后端的要素绑定器进一步包括：将GeoJSON格式的地理要素文件或者URL地址和对应要素管理器中要素配置进行绑定。
进一步地，所述的可视化管理UI后端的渲染配置器进一步包括：对GeoJSON要素数据包括的点、线或面数据设定渲染方式、渲染符号、符号大小、符号颜色、符号类型、标注文字的一种或多种配置。
进一步地，所述的WebGIS前端进一步包括：配置数据解析器会解析出图层组（GroupLayer）、图层（GeoJSONLayer）、要素地址（URL）和各个要素的初始化参数（Property）信息。
具体地，所述的各个要素的初始化参数（Property）进一步包括：渲染配置参数（renderer）、弹出层配置参数（popup）、要素标注参数（labelingInfo）。
进一步地，所述的WebGIS前端生成和渲染WebGIS应用进一步包括：
步骤401：首先将遍历解析出的图层组（GroupLayer）数据来实例化GroupLayer，并通过Map的add方法添加进实例化的地图中；
步骤402：循环出该图层组下的GeoJSON图层（GeoJSONLayer），然后根据要素地址及初始化参数（Property）来实例化GeoJSONLayer，此时的GeoJSON要素已经设定渲染完毕，并通过上一步骤的实例化的GroupLayer的add方法将此GeoJSON图层添加进所属图层组；
步骤403：重复以上步骤直至完毕，然后生成WebGIS应用。
进一步地，所述的一种基于GeoJSON的WebGIS渲染管理方法及系统所使用的WebGIS地理数据格式除GeoJSON外进一步包括CSV，所述的WebGIS前端框架进一步包括ArcGIS JavaScript API、Openlayers、Leaflet、Cesium第三方地图框架API的一种或多种。
附图说明
为了更加清楚地说明本申请的技术方案以及进一步理解本申请，下面将对实施例或方法所使用的的附图作描述，图中的元素只是为了概括本申请实施例的原理部分，不一定完全还原绘制，显而易见地，对于本领域的专业技术人员来讲，可以根据这些实施例的附图来生成其他附图。
图1为本申请基于GeoJSON的WebGIS渲染管理方法及系统的架构图。
图2为本申请一种实施例的可视化管理UI后端的流程图。
图3为本申请一种实施例的WebGIS前端的流程图。
图4为本申请一种实施例的WebGIS应用成果图。
具体实施方式
为了对本申请所使用的的技术方案从原理进行详细、完整地阐述，下面将分别对实施例的附图进行剖析。
如图1所示，本实施例申请了一种基于GeoJSON的WebGIS渲染管理方法及系统，包括WebGIS前端和可视化管理UI后端；
所述的可视化管理UI后端：主要包括要素组管理器、要素管理器、要素绑定器、渲染配置器，通过建立可视化管理UI对GeoJSON要素文件进行管理和配置，配置数据生成器根据配置的信息来生成返回前端的配置数据；
所述的WebGIS前端：通过请求基于restful服务的后端接口来获取配置数据，WebGIS框架根据配置数据解析器的结果来生成和渲染WebGIS应用。
如图2所示，图2是本申请一种实施例的可视化管理UI后端的流程图，可视化执行步骤如下：
步骤201：首先通过要素组管理器GroupManager对想要创建的图层图进行管理，包括增加、删除、更新、查找、显示、隐藏图层组功能；
步骤202：通过要素管理器GeoJSONManager对要素组里面的已有要素进行增加、更新（编辑）操作，同时对增加的要素设定一些初始化参数：要素的几何类型、要素的弹出窗口、要素的标题、要素是否在图层组中显示、要素的显隐状态、要素的透明度、要素的字段、要素的标注信息等；
步骤203：通过要素绑定器GeoJSONBinder，上传对应的GeoJSON文件或者输入对应的网络地址（URL）对上一步骤编辑的要素进行绑定地址。同时要素绑定器根据会根据上传的GeoJSON文件的geometry字段解析出要素的几何类型（点、线、面）、以及渲染器要使用的符号信息。
步骤204：渲染配置器RendererManager中有多种渲染方式可以选择调整，包括但不限于：简单渲染、分级渲染、唯一值渲染；每种渲染方式下可以调整元素要渲染的符号信息，符号默认信息会通过步骤203进行解析，根据要素的geometry来对应，分别有MarkerSymbol，LineSymbol，FillSymbol，针对每种符号，设定要渲染要素符号的风格，大小，颜色，变量信息。
步骤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进行渲染管理。
如图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应用。
综上，本实施例完成了基于GeoJSON的WebGIS渲染管理方法及系统，当用户需要增加要素组或者是要素时，在可视化管理UI后端进行可视化配置，然后在WebGIS端重新请求配置数据即可实现更新；当用户需要重新调整某一要素的渲染信息，比如符号的颜色、类型、字体大小等时，只需要在可视化管理UI后端进行可视化配置，刷新浏览器即可实现，而不需要重新更改代码或者重新部署。本申请更好地满足了轻量级的WebGIS应用渲染变动的需要，大大提高了开发效率，具有减少开发成本、加快产品展示和增加产品复用性的特点。
尽管本实施例已经是本申请的最优实施例，但本应理解，本申请不受限于最优实施例的实施方式，除此之外，本领域的专业技术人员可以根据本实施例的原理，概念进而对这些实施例做出另外的调整和更改，所以，本申请的保护范围可以解释为包括最优实施例以及落入本申请范围的所有调整和更改的这些等效变化。

Claims (10)

1.一种基于GeoJSON的WebGIS渲染管理方法，其特征在于，包括可视化管理UI后端和WebGIS前端；
所述的可视化管理UI后端：主要包括要素组管理器、要素管理器、要素绑定器、渲染配置器，通过建立可视化管理UI对GeoJSON要素文件进行管理和配置，配置数据生成器根据配置的信息来生成返回前端的配置数据；
所述的WebGIS前端：通过请求基于restful服务的后端接口来获取配置数据， WebGIS框架根据配置数据解析器的结果来生成和渲染WebGIS应用。
2.根据权利要求1所述的一种基于GeoJSON的WebGIS渲染管理方法，其特征在于，所述的可视化管理UI后端的要素组管理器和要素管理器进一步包括：对要素组和要素配置进行增、删、改、查、显、隐操作。
3.根据权利要求1所述的一种基于GeoJSON的WebGIS渲染管理方法，其特征在于，所述的可视化管理UI后端的要素绑定器进一步包括：将GeoJSON格式的地理要素文件或者URL地址和对应要素管理器中要素配置进行绑定。
4.根据权利要求1所述的一种基于GeoJSON的WebGIS渲染管理方法，其特征在于，所述的可视化管理UI后端的渲染配置器进一步包括：对GeoJSON要素数据包括的点、线或面数据设定渲染方式、渲染符号、符号大小、符号颜色、符号类型、标注文字的一种或多种配置。
5.根据权利要求1所述的一种基于GeoJSON的WebGIS渲染管理方法，其特征在于，所述的WebGIS前端进一步包括：配置数据解析器会解析出图层组（GroupLayer）、图层（GeoJSONLayer）、要素地址（URL）和各个要素的初始化参数（Property）信息。
6.根据权利要求5所述的一种基于GeoJSON的WebGIS渲染管理方法，其特征在于，所述的各个要素的初始化参数（Property）进一步包括：渲染配置参数（renderer）、弹出层配置参数（popup）、要素标注参数（labelingInfo）。
7.根据权利要求1所述的一种基于GeoJSON的WebGIS渲染管理方法，其特征在于，所述的WebGIS前端生成和渲染WebGIS应用进一步包括：
步骤401：首先将遍历解析出的图层组（GroupLayer）数据来实例化GroupLayer，并通过Map的add方法添加进实例化的地图中；
步骤402：循环出该图层组下的GeoJSON图层（GeoJSONLayer），然后根据要素地址及初始化参数（Property）来实例化GeoJSONLayer，此时的GeoJSON要素已经设定渲染完毕，并通过上一步骤的实例化的GroupLayer的add方法将此GeoJSON图层添加进所属图层组；
步骤403：重复以上步骤直至完毕，然后生成WebGIS应用。
8.根据权利要求1所述的一种基于GeoJSON的WebGIS渲染管理方法，其特征在于，所述的一种基于GeoJSON的WebGIS渲染管理方法及系统所使用的WebGIS地理数据格式除GeoJSON外进一步包括CSV。
9.如权利要求1所述的一种基于GeoJSON的WebGIS渲染管理方法，其特征在于，所述的WebGIS前端框架进一步包括ArcGIS JavaScript API、Openlayers、Leaflet、Cesium第三方地图框架API的一种或多种。
10.一种系统，其特征在于，实现权利要求1-8中任一项的所述的一种基于GeoJSON的WebGIS渲染管理方法。
CN202111225494.XA 2021-10-21 2021-10-21 一种基于GeoJSON的WebGIS渲染管理方法及系统 Pending CN113901164A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111225494.XA CN113901164A (zh) 2021-10-21 2021-10-21 一种基于GeoJSON的WebGIS渲染管理方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111225494.XA CN113901164A (zh) 2021-10-21 2021-10-21 一种基于GeoJSON的WebGIS渲染管理方法及系统

Publications (1)

Publication Number Publication Date
CN113901164A true CN113901164A (zh) 2022-01-07

Family

ID=79193060

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111225494.XA Pending CN113901164A (zh) 2021-10-21 2021-10-21 一种基于GeoJSON的WebGIS渲染管理方法及系统

Country Status (1)

Country Link
CN (1) CN113901164A (zh)

Similar Documents

Publication Publication Date Title
CN110266971B (zh) 一种短视频制作方法和系统
CN105069118B (zh) 一种基于gis配置的应用场景管理方法及系统
US7469380B2 (en) Dynamic document and template previews
CA3152833C (en) Webpage editing method and device
CN110489116A (zh) 一种页面的渲染方法、装置及计算机存储介质
US20110167336A1 (en) Gesture-based web site design
CN111611518B (zh) 基于Html5的可视化展示页面自动发布方法及系统
CN107832108A (zh) 3D canvas网页元素的渲染方法、装置及电子设备
KR20060053993A (ko) 전자 문서 스타일 매트릭스
US7688317B2 (en) Texture mapping 2-D text properties to 3-D text
US20110167360A1 (en) Incoming web traffic conversion
CN105824517B (zh) 一种桌面的实现方法和装置
CN109614601A (zh) 基于web的表格处理方法、装置、设备及可读介质
CN102135873A (zh) 一种创建用户界面的方法和装置
CN111221596A (zh) 字体渲染方法、装置及计算机可读存储介质
CN106156306A (zh) 一种模板渲染方法和装置
CN106933887A (zh) 一种数据可视化方法及装置
CN111459501A (zh) 基于SVG的Web组态画面存储与展示系统和方法及介质
CN103034710B (zh) 用于浏览器的页面呈现方法和装置
CN107179920A (zh) 网络引擎启动方法及装置
CN111367514B (zh) 页面卡片的开发方法和装置、计算设备和存储介质
CN107621951B (zh) 一种视图层级优化的方法及装置
Isenberg Visual abstraction and stylisation of maps
CN104240273A (zh) 栅格图片的处理方法及装置
CN113761101A (zh) 一种矢量瓦片电子地图自定义配图系统及方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication