转载：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标记语言有基本的了解，如果需要对样式进行美化还需要css的相关知识，这里不再赘述，对次相关知识不熟悉的朋友，建议先阅读w3school提供的html基础教程和css基础教程。
此处对应index.html和style.css文件。
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>