geoserver配合openlayers框架加载地图
Posted luffy5459
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了geoserver配合openlayers框架加载地图相关的知识，希望对你有一定的参考价值。
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,body{margin:0;padding:0;}
.map{
height:768px;
width:100%;
}
h2{background:#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相关依赖了。
以上是关于geoserver配合openlayers框架加载地图的主要内容，如果未能解决你的问题，请参考以下文章
openlayers 3加载GeoServer发布的wfs类型服务
使用 Openlayers 和 GEOServer 显示特征名称
PostGIS 结合Openlayers以及Geoserver实现最短路径分析
openlayers6结合geoserver实现地图矢量瓦片(附源码下载)