转载:https://ethanblog.com/tech/publish-wms-with-geoserver-and-openlayers.html
在前面几节的关于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。下面是效果图:
发布地图数据
要提供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基础教程系列已经基本完成,愿大家有所得。
<div class="person-messagebox">
<div class="left-message"><a href="https://blog.csdn.net/muzhaomingplay">
<img src="https://profile.csdnimg.cn/C/6/3/3_muzhaomingplay" class="avatar_pic" username="muzhaomingplay">
</a></div>
<div class="middle-message">
<div class="title"><span class="tit "><a href="https://blog.csdn.net/muzhaomingplay" data-report-click="{"mod":"popu_379","ab":"new"}" target="_blank">One程序猿</a></span>
<!-- 等级,level -->
<img class="identity-icon" src="https://csdnimg.cn/identity/blog2.png"> </div>
<div class="text"><span>原创文章 0</span><span>获赞 5</span><span>访问量 3万+</span></div>
</div>
<div class="right-message">
<a class="btn btn-sm attented bt-button personal-watch" data-report-click="{"mod":"popu_379","ab":"new","extend1":"个人信息已关注"}">已关注</a>
<a href="https://im.csdn.net/im/main.html?userName=muzhaomingplay" target="_blank" class="btn btn-sm bt-button personal-letter">私信
</a>
</div>
</div>
</div>