Openlayers下载与加载geoserver的wms服务显示地图
場(chǎng)景
GeoServer簡(jiǎn)介、下載、配置啟動(dòng)、發(fā)布shapefile全流程(圖文實(shí)踐)：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/109636080
在上面介紹了geoserver的使用后，怎樣通過(guò)Openlayers在html中顯示地圖。
Openlayers
OpenLayers 是一個(gè)專(zhuān)為Web GIS 客戶(hù)端開(kāi)發(fā)提供的JavaScript 類(lèi)庫(kù)包，用于實(shí)現(xiàn)標(biāo)準(zhǔn)格式發(fā)布的地圖數(shù)據(jù)訪問(wèn)。
OpenLayers是一個(gè)開(kāi)源的項(xiàng)目，其設(shè)計(jì)之意是為互聯(lián)網(wǎng)客戶(hù)端提供強(qiáng)大的地圖展示功能，包括地圖數(shù)據(jù)顯示與相關(guān)操作，并具有靈活的擴(kuò)展機(jī)制。
OpenLayers 可以用于開(kāi)發(fā)各類(lèi)桌面和移動(dòng)端的WEGIS系統(tǒng)，包括地圖顯示和地圖編輯功能。其最終的開(kāi)發(fā)目標(biāo)是能夠在各種設(shè)備和瀏覽器中顯示和管理地圖數(shù)據(jù)。
OpenLayers是一個(gè)專(zhuān)為WcbGIS客戶(hù)端開(kāi)發(fā)提供的JavaScript類(lèi)庫(kù)包，用于實(shí)現(xiàn)地圖數(shù)據(jù)的網(wǎng)絡(luò)訪問(wèn)。它訪問(wèn)地理空間數(shù)據(jù)的方法都符合行業(yè)標(biāo)準(zhǔn)，支持各種公開(kāi)的和私有的數(shù)據(jù)標(biāo)
準(zhǔn)和資源。OpenLayers采用純面向?qū)ο蟮腏avaScript方式開(kāi)發(fā)，同時(shí)借用了Prototype框架和Rico庫(kù)的一些組件。
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。
實(shí)現(xiàn)
Openlayers官網(wǎng)
?
點(diǎn)擊右上角的Code-Download進(jìn)入下載頁(yè)面
https://openlayers.org/download/#
選擇dist版本進(jìn)行下載
?
下載之后的內(nèi)容中有相關(guān)的css文件和js文件
?
然后按照上面的博客啟動(dòng)Geoserver并登陸
然后在Layer Preview中選擇一個(gè)自帶的示例的，這里以Spearfish roads為例，點(diǎn)擊其后面的Openlayers按鈕
?
然后會(huì)進(jìn)入地圖的預(yù)覽頁(yè)面
?
接下來(lái)就是怎樣使用Openlayers在html中進(jìn)行顯示這個(gè)地圖。
新建一個(gè)文件夾，文件夾下新建lib,lib下新建ol65目錄，并將上面下載的dist中的內(nèi)容復(fù)制進(jìn)來(lái)
然后再建立一個(gè)map.html文件
?
然后在map.html中引入上面lib目錄下的css和js文件
<link rel="stylesheet" href="lib/ol65/ol.css" type="text/css"> ?<script type="text/javascript" src="lib/ol65/ol.js"></script>然后在body中新增一個(gè)div并設(shè)置其樣式
<divid = "map"></div><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style>然后找到上面geoserver中預(yù)覽的頁(yè)面，右鍵選擇查看網(wǎng)頁(yè)源代碼
?
然后從網(wǎng)頁(yè)源代碼中抽離出用來(lái)顯示地圖的js代碼
?
然后再對(duì)其進(jìn)行修改
??? <script type="text/javascript">var untiled = new ol.layer.Image({source: new ol.source.ImageWMS({ratio: 1,url: 'http://localhost:8000/geoserver/sf/wms',params: {'FORMAT': "image/jpeg",'VERSION': '1.1.1',"STYLES": '',"LAYERS": 'sf:roads',"exceptions": 'application/vnd.ogc.se_inimage',}})});var projection = new ol.proj.Projection({code: 'EPSG:26713',units: 'm',global: false});var map = new ol.Map({controls: ol.control.defaults({attribution: false}).extend([]),target: 'map',layers: [untiled,],view: new ol.View({projection: projection,})});var bounds = [589434.8564686741, 4914006.337837095,609527.2102150217, 4928063.398014731];map.getView().fit(bounds, map.getSize());</script>注意上面的url其實(shí)就是預(yù)覽地址欄中的前面的部分
?
然后LAYERS是要和你geoserver中LayersPreview的Name屬性對(duì)應(yīng)
?
完整的map.html示例代碼、
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>OpenLayers example</title><link rel="stylesheet" href="lib/ol65/ol.css" type="text/css"><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style> </head><body><div id="map"></div><script type="text/javascript" src="lib/ol65/ol.js"></script><script type="text/javascript">var untiled = new ol.layer.Image({source: new ol.source.ImageWMS({ratio: 1,url: 'http://localhost:8000/geoserver/sf/wms',params: {'FORMAT': "image/jpeg",'VERSION': '1.1.1',"STYLES": '',"LAYERS": 'sf:roads',"exceptions": 'application/vnd.ogc.se_inimage',}})});var projection = new ol.proj.Projection({code: 'EPSG:26713',units: 'm',global: false});var map = new ol.Map({controls: ol.control.defaults({attribution: false}).extend([]),target: 'map',layers: [untiled,],view: new ol.View({projection: projection,})});var bounds = [589434.8564686741, 4914006.337837095,609527.2102150217, 4928063.398014731];map.getView().fit(bounds, map.getSize());</script> </body></html>然后在瀏覽器中打開(kāi)map.html，查看效果
?
總結(jié)
以上是生活随笔為你收集整理的Openlayers下载与加载geoserver的wms服务显示地图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： MobileIMSDK连接后频繁掉线重连
- 下一篇： Maven项目在pom文件中引入lib下