CN106201514A - 一种基于OpenLayers的WebGIS开发框架的构建及使用方法 - Google Patents

Abstract

本发明公开了一种基于OpenLayers的WebGIS开发框架的构建及使用方法。首先获取用于WebGIS客户端的JavaScript类库包，从中提取类：地图初始化和地图操作，并对其进行继承开发，提供地图初始化接口、地图操作接口；同时对提取的类分别与Web服务器交互的过程进行封装，提供Web接口；对提取的类进行合并，并将图初始化接口、地图操作接口、Web接口整合成一个文件，作为开发框架的引入接口。基于对本发明的开发框架的各接口的调用实现开发GIS功能的方法。本发明能更好地满足开发需求，提高开发效率。

Description

一种基于OpenLayers的WebGIS开发框架的构建及使用方法

技术领域

本发明涉及一种基于OpenLayers(专为Web GIS客户端开发提供的JavaScript类库包)的WebGIS开发框架的构建方法。

背景技术

随着Internet技术的不断进步，GIS(Geographic Information System，地理信息系统)通过Web功能得到扩展，让GIS真正的服务于大众，而WebGIS(网络地理信息系统)作为Internet和GIS结合的产物，也促进了GIS的发展。

WebGIS不但具有大部分乃至全部GIS软件具有的功能，而且还具有利用Internet优势的特有功能，即用户不必在自己的本地计算机上安装GIS软件就可以在Internet上访问远程的GIS数据和应用程序，进行GIS分析，在Internet上提供交互的地图和数据。WebGIS通过互联网对地理空间数据进行发布和应用，以此来实现空间数据的共享，其特点是可采用多主机多数据库进行分布式部署，因此WebGIS具有良好的可扩展性和跨平台性。

然而目前，技术人员可以在现有的WebGIS开发框架里进行开发，但是，在开发过程中，可能由于对地图初始化，地图标记以及地图相关操作过程不熟练而导致开发效率降低，例如刚接触WebGIS的开发人员想要简单的在网页上呈现一个地图，首先要考虑选用哪种开发框架，然后必须下载并部署该框架，之后初始化地图在不同框架下有不同的操作步骤，若要显示鹰眼图比例尺导航栏，或要根据数据库中地理数据在地图上做标记，流程会更加复杂和麻烦。

发明内容

本发明的发明目的在于：针对上述存在的问题，提供一种基于OpenLayers的WebGIS开发框架的构建方法及其使用方法。

本发明的基于OpenLayers的WebGIS开发框架的构建方法，包括下列步骤：

获取用于WebGIS客户端的JavaScript类库包Openlayers；从Openlayers中提取地图初始化JavaScript类和地图操作JavaScript类，并对提取的JavaScript类进行继承开发，提供地图初始化接口、地图操作接口；其中，地图初始化接口用于嵌入不同平台上发布的地图服务到WebGIS客户端；地图操作接口用于对WebGIS客户端中的地图服务的地图操作，包括鹰眼图、比例尺、导航栏、地图标记、地图移动、地图事件，即地图操作接口包括鹰眼图接口、比例尺接口、导航栏接口、地图标记接口、地图移动接口、地图事件接口；

同时对图初始化JavaScript类、地图操作JavaScript类分别与Web服务器交互的过程进行封装，提供Web接口；

对图初始化JavaScript类和地图操作JavaScript类进行合并，并将图初始化接口、地图操作接口、Web接口整合成一个文件，所述文件作为WebGIS开发框架的引入接口。

对应上述构建方法所得的基于OpenLayers的WebGIS开发框架，本发明还公开了开发GIS功能的方法，包括下列步骤：

通过WebGIS开发框架的引入接口调用WebGIS开发框架中的地图初始化接口，完成地图初始化操作，展示出地图；

通过WebGIS开发框架的引入接口调用地图操作接口中的一种或多种作为地图辅助工具，并设置地图辅助工具的显示位置和显示方式；

通过WebGIS开发框架的引入接口调用Web接口和地图辅助工具中的地图标记接口，基于与Web服务器交互的方式动态完成地图展示。

综上所述，由于采用了上述技术方案，本发明的有益效果是：建立了一个基于OpenLayers的WebGIS的开发框架，其能地图初始化，鹰眼图，比例尺，导航栏整合到一个接口给用户，只需配置好相关必要参数即可完成地图初始化，同时也提供地图相关事件，结合查询Web服务器端的数据库做地图标记接口，这样更好地满足WebGIS基本应用程序的开发，提高开发效率。

附图说明

图1是本发明的基于OpenLayers的WebGIS开发框架的构建过程图；

图2是开发GIS功能的流程图；

图3是WebGIS开发框架与数据库服务器交互及在地图标记的流程图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面结合实施方式和附图，对本发明作进一步地详细描述。

如图1所示，本发明的基于OpenLayers的WebGIS开发框架构建方法包括以下几个步骤：

步骤1：从Openlayers官网上下载获取最新版本的Openlayers api压缩包(用于WebGIS客户端的JavaScript类库包)；

步骤2：将获取到的Openlayers api压缩包解压，提取地图初始化JavaScript(简称JS)类、地图操作JS类，其中地图操作JS类包括但不限于鹰眼图，比例尺，导航栏，地图标记，地图移动，地图事件；

步骤3：对提取的JS类进行继承开发，确定地图初始化以及对封装地图的相关地图操作，提供地图初始化接口和地图操作接口(包括鹰眼图操作接口、比例尺操作接口、导航栏操作接口、地图标记操作接口、地图移动操作接口、地图事件操作接口)，通过调用地图初始化接 口可以将GeoServer(利用GeoServer可以方便的发布地图数据)或其他平台提供的地图服务嵌入到Web应用中来(即嵌入不同平台上发布的地图服务到WebGIS客户端)，以此来创建地图应用；

同时，对提取的JS类中的XHR(XmlHttpRequest，扩展超文本传输请求)对象进行封装，提供Web接口。当地图显示页面全部加载完毕后，WebGIS客户端调用Web接口，通过XHR对象向Web服务器请求数据，Web服务器端接受数据并处理后，向WebGIS客户端反馈数据。XHR对象提供了对HTTP协议的完全的访问，包括做出POST和GET(http的两种请求)请求的能力。XHR可以同步或异步返回Web服务器的响应，调用封装的XHR对象接口与其他Web服务器进行交互用以获取地图相关数据进行地图的动态展示；上述地图初始化接口、地图操作接口、Web接口以接口函数的形式呈现；

步骤4：对提取的JS类(步骤3处理后的)进行合并，并将地图初始化接口、地图操作接口、Web接口整合成一个文件，所述文件作为WebGIS开发框架的引入接口。

如图2所示，本发明还提供了一种在上述WebGIS开发框架中开发GIS功能的方法，该方法包括以下几个步骤：

步骤1：通过WebGIS开发框架的引入接口，引入WebGIS框架。

要实现一个WebGIS应用，当然首先要做的一步是完成地图的展示，在这里通过调用WebGIS开发框架中的地图初始化接口，完成地图初始化操作，展示出地图。例如在html中新建一个<div>(div元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素)容器用来存放地图，赋予该div容器的id，调用地图初始化接口，并将该容器id与地图的图层类型，地图服务地址等作为参数传入调用的地图初始化接口完成地图初始化：

地图初始化接口中第一个参数表示承载地图的div容器的id，可以通过调整该div的位置大小以及风格来改变地图的显示位置风格等；其中第二个参数表示发布的地图图层类型，比如由GeoServer或者其他平台发布的地图服务；第三个参数为地图服务的发布地址，用以调用该地图服务，以上三个参数是初始化调用必须给出的；第四个参数表示该地图显示的初始默认层级。

步骤2：完成地图初始化操作后可以调用鹰眼图，比例尺，导航栏接口中的一种或多种作为地图辅助工具，地图辅助工具都已预先存储在WebGIS框架中，用户只需要通过传入参数便可调用这几个地图辅助工具，并可自定义地图辅助工具的显示位置，例如在地图初始化时仍保留鹰眼图、比例尺和航栏的显示设置参数，分别提供鹰眼图，比例尺，导航栏的显示，调用该初始化接口的编程人员可以选择给或不给出，若不给出这几个参数，则默认为不显示鹰眼图、比例尺及导航栏，若想对这几个控件进行显示，则需要设置对应的显示设置参数。

其中鹰眼图的显示设置参数为javascript中一个对象，包括position、rightbottom、width、height，其中position表示鹰眼图在地图容器div里边的显示位置，rightbottom代表右下角，框架共提供上，下，左，右，左上，右上，左下，右下8个方向供用户选择，而width和height分别代表鹰眼图的宽和高；

比例尺的显示设置参数包括position、scalebarUnit、scalebarStyle，其中position表示鹰眼图在地图容器div里边的显示位置，scalebarUnit表示比例尺的度量标准，该框架为用户提供metric和english两种，分别表示米制和英里制，scalebarStyle为比例尺的显示风格，同样的该框架提供两种类型供用户选择，他们是ruler和line，分别表示尺型和线性比例尺；

导航栏的显示设置参数包括设置参数包括滑块缩放，上下左右平移，回到最初层级等，用户只给出position参数来设置它的显示位置，同样的为用户提供如鹰眼图中的8个方向位置。

步骤3：调用Web接口和地图操作接口中的地图标记接口，基于与Web服务器的交互，动态完成地图展示，如图3所示，在使用本框架的编程人员自己编写的JS文件中通过调用封装XHR对象的Web接口发送Http GET或者POST请求与Web服务器上的GIS数据库进行交互，封装的整个流程以一个接口函数提供给编程人员：

其中Web接口的接口函数的第一个参数为发送给服务器请求的方式，值为‘POST’或者‘GET’，表示发送Http请求的方式是POST或者是GET；第二个参数为查询条件，表示该请求需要通过用户自定义应用查询数据库时的条件语句；第三个参数为请求的IP地址。

而且在Web服务器可以设置响应请求的表头，通过HTML5中的CORS(跨域资源共享，Cross-Origin Resource Sharing)实现跨域。通过用户自定义的查询语句完成与Web服务器上的GIS数据库的交互并得到地图相关数据，并利用该数据通过调用地图标记接口完成在地图上相应位置的标注，该地图标记功能以接口函数形式提供给编程人员：

WebgisFrame.addGLB(obj,showNameObj,showIcon,isShowLabel,isShowInfoSymbol,fontColor,fontSize,xoffset,yoffset)

其中第一个参数obj为地理信息参数，包含需标注目标的地理位置信息；第二个参数showNameObj为需标注目标的具体信息，如显示时需要附带的标签(标注区域相关的简短文字信息)，以特定图片进行标记时所要标记的图片路径，若要使用信息框显示键值对信息，还需要给出想要现实的键值对数据；第三个参数showIcon表示是否显示标记，使用布尔值，true或者false；第四个参数isShowLabel表示是否显示标签，使用布尔值，true或者false；第五个参数isShowInfoSymbol表示是否显示具体信息框，使用布尔值，true或者false；第六个参 数fontColor为显示的标签字体颜色，第七个参数fontSize表示显示标签字体大小；第八和第九个参数(xoffset、yoffse)分别表示标签相对于地图上对应坐标点的X,Y轴偏移量，即标签的显示位置。

以上所述，仅为本发明的具体实施方式，本说明书中所公开的任一特征，除非特别叙述，均可被其他等效或具有类似目的的替代特征加以替换；所公开的所有特征、或所有方法或过程中的步骤，除了互相排斥的特征和/或步骤以外，均可以任何方式组合。

Claims (3)

1.一种基于OpenLayers的WebGIS开发框架的构建方法，其特征在于，包括下列步骤：

获取用于WebGIS客户端的JavaScript类库包Openlayers；

从Openlayers中提取地图初始化JavaScript类和地图操作JavaScript类，并对提取的JavaScript类进行继承开发，提供地图初始化接口、地图操作接口；其中，地图初始化接口用于嵌入不同平台上发布的地图服务到WebGIS客户端；地图操作接口用于对WebGIS客户端中的地图服务的地图操作，包括鹰眼图、比例尺、导航栏、地图标记、地图移动、地图事件；

同时对图初始化JavaScript类、地图操作JavaScript类分别与Web服务器交互的过程进行封装，提供Web接口；

对图初始化JavaScript类和地图操作JavaScript类进行合并，并将图初始化接口、地图操作接口、Web接口整合成一个文件，所述文件作为WebGIS开发框架的引入接口。

2.如权利要求1所述的方法，其特征在于，对图初始化JavaScript类、地图操作JavaScript类分别与Web服务器交互的过程进行封装具体为：对图初始化JavaScript类、地图操作JavaScript类中的可扩展超文本传输请求XHR对象进行封装。

3.在基于权利要求1所述的OpenLayers的WebGIS开发框架中开发GIS功能的方法，其特征在于，包括下列步骤：

调用WebGIS开发框架中的地图初始化接口，完成地图初始化操作，展示出地图；

通过调用地图操作接口中的一种或多种作为地图辅助工具，并设置地图辅助工具的显示位置和显示方式；

调用Web接口和地图操作接口中的地图标记接口，基于与Web服务器交互的方式动态完成地图展示。