关键词：
geoserver地图服务器如果搭建成功，那么会有很多图层示例。这些图层可以用作练手示例。在实际工作中，可能需要我们自己设计地图，自己发布，然后使用。
这里以上一篇最后发布的中国地图为例，采用openlayers框架加载地图。
这里需要我们下载openlayers框架，这个是一个js地图引擎框架，可以很方便的与geoserver提供的地图服务配合使用，而且geoserver中本身也是支持openlayers格式。
下载后的文件，我们要使用到的是一个是ol.css样式，再一个就是ol.js文件。
我们可以在图层预览菜单中看到，我们所要使用的地图：
我们点击表格后面的OpenLayers连接，会弹出一个新的tab标签页，里面显示的地址如下：
http://localhost:8080/geoserver/chinamap/wms?
service=WMS&version=1.1.0&request=GetMap&layers=chinamap%3Achina&bbox=73.49896240234375%2C3
.833843469619751%2C135.08738708496094%2C53.55849838256836&width=768&height=620&srs=EPSG%3A4
326&styles=&format=application/openlayers这个地址中的信息，我们在做地图的时候要使用到。url参数中有一个bbox是表示边界的，参数经过转码了，所以看得不是很清楚，具体应该是：
bbox= 73.49896240234375,
3.833843469619751,
135.08738708496094,
53.55849838256836
这几个值，正好是地图左下角，右上角的经纬度坐标。
show me the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>openlayers</title>
<link rel="stylesheet" href="v6.7.0/css/ol.css" type="text/css" />
<style>
html,bodymargin:0;padding:0;
.map
height:768px;
width:100%;
h2background:#ddd;margin:0;
</style>
<script type="text/javascript" src="v6.7.0/build/ol.js"></script>
</head>
<body>
<h2>chinamap</h2>
<div id="map" class="map"></div>
<script>
window.onload = function()
var layer = [
new ol.layer.Tile(
extent:[
73.49896240234375,
3.833843469619751,
135.08738708496094,
53.55849838256836
],
source: new ol.source.TileWMS(
url:'http://localhost:8080/geoserver/chinamap/wms',
params:
LAYERS:'chinamap:china',
TILED:true
,
serverType:'geoserver',
transition: 0
)
)
]
var map = new ol.Map(
layers:layer,
target:'map',
view : new ol.View(
projection:'EPSG:4326',
center:[115,39],
zoom:4
)
)
</script>
</body>
</html>这里是单页面应用，直接开启一个http server就可以访问。
看效果： 
这个是一个简单的openlayers框架应用，如今在项目中，一般是结合其他框架比如vue，可以直接npm install ol就可以安装openlayers相关依赖了。
使用openlayers3在线加载天地图及geoserver发布的地图(代码片段)
使用openlayers3来加载天地图卫星图和标注图层，GeoServer发布地图，一并用openlayers测试加载出来，顺便实现了7种地图控件。下面直接贴代码：<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8">&l... 查看详情
openlayers3加载geoserver发布的wfs类型服务(代码片段)
转：https://blog.csdn.net/u013323965/article/details/52449502问题产生： openlayer3加载WFS存在跨域问题，需要用jsonp解决，而jsonp需要用script加载，但加载有误，如图所示，读取cite:bou2_4p图层的GeoJSON载入地址是这样的http://localhost:8... 查看详情
使用 Openlayers 和 GEOServer 显示特征名称
】使用Openlayers和GEOServer显示特征名称【英文标题】：DisplayingfeaturenameusingOpenlayersandGEOServer【发布时间】：2012-07-2718:04:03【问题描述】：我试图在加载时在地图中显示要素名称（例如：建筑物的名称）。我们如何使用GeoServer在OpenL... 查看详情
openlayer3+postgis+geoserver搭建简单gis服务框架问题探究
传统GIS开发中，我们一般会采用ArcGIS或者SuperMap作为GIS平台来进行开发，简单的分析查询会采用官方api或者leaflet，esri-leaflet等进行开发，复杂的查询分析统计功能会利用Geoprocessor(简称GP)来进行操作，采用这种商业平台好处显而... 查看详情
openlayers怎么加载shapefile
参考技术A参考：WebGIS(PostgreSQL+GeoServer+OpenLayers)之三OpenLayers客户端数据显示(转)GIS开发记录(六)：OpenLayers显示Google离线mapOpenlayers使用WFS添加到数据库一个点！ 查看详情
GeoServer 和 OpenLayers 在显示大量点时有啥限制？
】GeoServer和OpenLayers在显示大量点时有啥限制？【英文标题】：WhatarethelimitationsofGeoServerandOpenLayerswhenshowingalargenumberofpoints?GeoServer和OpenLayers在显示大量点时有什么限制？【发布时间】：2010-01-2110:00:42【问题描述】：我们正在尝试... 查看详情
openlayers6结合geoserver实现地图矢量瓦片(附源码下载)(代码片段)
内容概览1.基于openlayers6结合geoserver实现地图矢量瓦片2.源代码demo下载效果图如下：实现思路：利用Geoserver发布矢量切片服务，然后openlayers调用矢量瓦片服务渲染加载，geoserver发布矢量服务步骤自行百度搜索相关教程，网上很多... 查看详情
Openlayers 和 geoserver - 没有这样的属性：bbox
】Openlayers和geoserver-没有这样的属性：bbox【英文标题】：Openlayersandgeoserver-Nosuchproperty:bbox【发布时间】：2020-05-1722:17:14【问题描述】：我是Openlayers的新手，我正在尝试使用geoserver从postgres数据库中编辑和保存多边形；我基于这个... 查看详情
从 Openlayers 标记阵列创建 Geoserver 图层
】从Openlayers标记阵列创建Geoserver图层【英文标题】：CreateGeoserverLayerfromOpenlayersMarker-Array【发布时间】：2014-10-3012:01:37【问题描述】：我目前正在使用js-array来显示来自openlayers中MSSQLDB的大量标记。但是性能太差了，我需要一个新... 查看详情
Geoserver 2.10 Openlayers 3 TextSymbolizer 标签未显示
】Geoserver2.10Openlayers3TextSymbolizer标签未显示【英文标题】：Geoserver2.10Openlayers3TextSymbolizerlabelnotshowingup【发布时间】：2017-02-0220:26:03【问题描述】：我是geoserver和sld的新手。我的OSM基础层之上有2层。一个用于创建热图，一个仅用... 查看详情
如何使用 OpenLayers 和 Geoserver 使用 TileWMS 进行统计
】如何使用OpenLayers和Geoserver使用TileWMS进行统计【英文标题】：HowtodostatisticswithTileWMSusingOpenLayersandGeoserver【发布时间】：2020-02-1017:42:03【问题描述】：我正在使用OpenLayers/Geoserver开发一个真实状态的软件，到目前为止我所做的是... 查看详情
为啥 OpenLayers-3 加载太多地图？
...载地图，当它加载时它几乎翻了一番。第一张地图是来自geoserver管理页面的预览，第二张是它在网页上拉起时的加载方式。【问题讨论】：我不明白你的问题是什么。您是否正在考 查看详情
使用 Openlayers 3 加载 GML 层
...矢量图层，但它们并没有显示在地图上。我尝试使用来自Geoserver的GML文件（对源代码稍作修改），openlayers3似乎没有问题消化它。是我遗漏了什么，还是GML 查看详情
使用 Openlayers/Geoserver 从我的 WFS 源更改 srsName
】使用Openlayers/Geoserver从我的WFS源更改srsName【英文标题】：changesrsNamefrommyWFSSourcewithOpenlayers/Geoserver【发布时间】：2020-02-1317:25:10【问题描述】：我目前正在将WFS与Openlayers一起使用，但图层的位置错误，如果我是对的，问题来自s... 查看详情
OpenLayers 将动态复选框创建绑定到 GeoServer LayerGroup
】OpenLayers将动态复选框创建绑定到GeoServerLayerGroup【英文标题】：OpenLayersBindDynamicCheckboxCreationtoGeoServerLayerGroup【发布时间】：2020-02-1311:22:31【问题描述】：早上好，好的，所以...我一直在使用Geoserver、JQuery和OpenLayers并取得了一... 查看详情
OpenLayers 3 和 Geoserver：单击标记时创建弹出窗口
】OpenLayers3和Geoserver：单击标记时创建弹出窗口【英文标题】：OpenLayers3andGeoserver:Createpopuponmarkerclick【发布时间】：2018-06-0213:34:21【问题描述】：我有一个OpenLayers3地图，其中包含来自我的Geoserver的WMS图层。我正在尝试使用来自WF... 查看详情
回头看一看我的2017年
...以来，自己的亲身经历以及感想！我的工作方面openlayers+geoserver2017年的前大半年，前后我一共参与公司的两个GIS项目，负责的是webgis这方面的功能模块，webgis技术采用的是openlayers+geoserver这套开源gis框架；经过这两个项目的磨练... 查看详情
Geoserver 和 Openlayers - 在 WFS-T 中显示详细的消息错误
】Geoserver和Openlayers-在WFS-T中显示详细的消息错误【英文标题】：GeoserverandOpenlayers-ShowdetailedmessageerrorinWFS-T【发布时间】：2020-05-1803:42:47【问题描述】：我已关注thisexample，使用geoserver在openlayers地图中保存/编辑元素geoserver层通过p... 查看详情