时间:2019年11月11日 21:38:55
利用GeoServer发布图层并用OpenLayers展示
文章分为两部分,第一部分为采用GeoServer发布图层,第二部分为采用OpenLayers展示
GeoServer发布图层
第一步、首先在本机电脑安装好GeoServer,然后登陆到界面如下图所示,找到工作区,然后添加新的工作区
第二步、新建工作区并提交,如下图所示
第三步、找到数据存储,然后选择shp文件作为数据源发布,如下图所示
第四不、新建矢量数据源,依次填入以下信息并保存
第五步、保存后,新建图层,点击发布,发布之后进入编辑图层,如下图所示(主要选择4326中的WGS84坐标系,然后依次计边界坐标)
第六步、保存之后,打开左边的Layer Preview如下,点击OpenLayers KML即可查看发布的图层,如下图所示
到此已经将shp发布到GerServer上,并展示
OpenLayers展示地图
在OpenLayers中展示主要是采用Js编写,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./ol.css" type="text/css">
<script src="./ol.js"></script>
<script
src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">
</script>
<style>
.map {
height: 980px;
width: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/TestGerServer/wms', // 这个地址是在geoserver里面进行图层预览的地址是一致
params: {
'LAYERS': 'TestGerServer:BL', // 这里的名字需要与空间定义的一样
'TILED': true
},
serverType: 'geoserver',
transition: 0
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([116,40]), // 中心坐标
zoom: 8
})
});
</script>
</body>
</html>
上述代码主要解释如下
1、url地址:为上述GerServer中第六步发布图层时的地址,其和代码一致的部分即可
2、LAYERS:为上述GerServer中第六步发布图层时Layer Preview中的Name属性值
在本地编辑好Js,后保存为html文件,打开如下图所示
至此,采用OpenLayers打开GerServer发布的图层结束
这是本人在工作中的一点小总结,希望能给大家带来一点帮助,谢谢观看!!!