Ethan's Blog

记录和思考

GeoServer 基础教程(五):使用 GeoServer 和 OpenLayers 发布地图服务

在前面几节的关于 GeoServer 的基础教程中,我们介绍了如何使用 GeoServer 发布地图数据等基本的服务器端的操作,这一节我们继续学习如何使用 GeoServer 和 OpenLayers 的结合来发布地图服务。

OpenLayers(http://openlayers.org)是一个专为 Web GIS 客户端开发提供的 JavaScript 类库包,用于实现标准格式发布的地图数据访问。OpenLayers 支持的地图来源包括 Google Maps、Yahoo、 Map、微软 Virtual Earth 等,用户还可以用简单的图片地图作为背景图,与其他的图层在 OpenLayers 中进行叠加。除此之外,OpenLayers 实现访问地理空间数据的方法都符合行业标准。OpenLayers 支持 Open GIS 协会制定的 WMS(Web Mapping Service)和 WFS(Web Feature Service)等网络服务规范,可以通过远程服务的方式,将以 OGC 服务形式发布的地图数据加载到基于浏览器的 OpenLayers 客户端中进行显示。

使用开源的 GeoServer 和 OpenLayers 发布地图服务在 Web GIS 部署中比较常用。本文将结合 GeoServer 和 OpenLayers 发布一个地图服务示例。

大家可以下载我编写的示例程序文件作为学习参考。下载地址:http://pan.baidu.com/share/link?shareid=4130147131&uk=1746237888。下面是效果图:

GeoServer 基础教程(五):使用 GeoServer 和 OpenLayers 发布地图服务

发布地图数据

要提供 Web GIS 服务,首要的是提供所需的地图数据,我们首先根据 GeoServer 基础教程(三):部署发布 Shapefile 地图数据 一文所讲,部署好需要的地图数据。具体发布的地图数据大家可以使用文中提到的示例数据,也可以使用自己的地图数据。

我的示例数据使用的是同济大学校园地图,上文中的下载文件里并不包含地图数据,所以大家应该替换使用自己的地图数据。

编写网页 html 文件

网页的内容最终需要利用 html 展示出来,我们需要对 html 标记语言有基本的了解,如果需要对样式进行美化还需要 css 的相关知识,这里不再赘述,对次相关知识不熟悉的朋友,建议先阅读 w3school 提供的 html 基础教程css 基础教程

此处对应 index.html 和 style.css 文件。

引入使用 OpenLayers 控制发布地图数据

OpenLayers 实际上是一个专为 Web GIS 客户端开发提供的 JavaScript 类库包。如果需要真正用好这个工具,我们必须具备熟练的 JavaScript 相关知识。考虑到我们的应用比较简单,大家可以直接学习 OpenLayers 的用户文档(http://docs.openlayers.org)来熟悉 JavaScript 的语法知识等。

此处对应 config.js 文件。

继续美化或增强功能

至此,使用 GeoServer 和 OpenLayers 发布地图服务已经圆满完成了,不出意外的话,我们已经可以通过浏览器来访问刚刚发布的地图服务页面了。随着对 GeoServer 和 OpenLayers 的应用能力提升,大家可以根据自身需求,继续美化或者增强此地图服务的功能。

到这里,GeoServer 基础教程系列已经基本完成,愿大家有所得。关于 GeoServer 和 OpenLayers 的学习,大家有何疑问,欢迎与我交流。

相关文章: