時間：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發佈的圖層結束
這是本人在工作中的一點小總結，希望能給大家帶來一點幫助，謝謝觀看！！！