Openlayers下载与加载geoserver的wms服务显示地图
場景
GeoServer簡介、下載、配置啟動、發布shapefile全流程(圖文實踐)：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/109636080
在上面介紹了geoserver的使用后，怎樣通過Openlayers在html中顯示地圖。
Openlayers
OpenLayers 是一個專為Web GIS 客戶端開發提供的JavaScript 類庫包，用于實現標準格式發布的地圖數據訪問。
OpenLayers是一個開源的項目，其設計之意是為互聯網客戶端提供強大的地圖展示功能，包括地圖數據顯示與相關操作，并具有靈活的擴展機制。
OpenLayers 可以用于開發各類桌面和移動端的WEGIS系統，包括地圖顯示和地圖編輯功能。其最終的開發目標是能夠在各種設備和瀏覽器中顯示和管理地圖數據。
OpenLayers是一個專為WcbGIS客戶端開發提供的JavaScript類庫包，用于實現地圖數據的網絡訪問。它訪問地理空間數據的方法都符合行業標準，支持各種公開的和私有的數據標
準和資源。OpenLayers采用純面向對象的JavaScript方式開發，同時借用了Prototype框架和Rico庫的一些組件。
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
Openlayers官網
?
點擊右上角的Code-Download進入下載頁面
https://openlayers.org/download/#
選擇dist版本進行下載
?
下載之后的內容中有相關的css文件和js文件
?
然后按照上面的博客啟動Geoserver并登陸
然后在Layer Preview中選擇一個自帶的示例的，這里以Spearfish roads為例，點擊其后面的Openlayers按鈕
?
然后會進入地圖的預覽頁面
?
接下來就是怎樣使用Openlayers在html中進行顯示這個地圖。
新建一個文件夾，文件夾下新建lib,lib下新建ol65目錄，并將上面下載的dist中的內容復制進來
然后再建立一個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中新增一個div并設置其樣式
<divid = "map"></div><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style>然后找到上面geoserver中預覽的頁面，右鍵選擇查看網頁源代碼
?
然后從網頁源代碼中抽離出用來顯示地圖的js代碼
?
然后再對其進行修改
??? <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其實就是預覽地址欄中的前面的部分
?
然后LAYERS是要和你geoserver中LayersPreview的Name屬性對應
?
完整的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>然后在瀏覽器中打開map.html，查看效果
?
總結
以上是生活随笔為你收集整理的Openlayers下载与加载geoserver的wms服务显示地图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MobileIMSDK连接后频繁掉线重连
- 下一篇： Maven项目在pom文件中引入lib下