系列連接： Java web與web gis學習筆記（一）——Tomcat環境搭建 Java web與web gis學習筆記（二）——百度地圖API調用 JavaWeb和WebGIS學習筆記（三）——GeoServer 發佈shp數據地圖 JavaWeb和WebGIS學習筆記（四）——使用uDig美化地圖，併疊加顯示多個圖層javascript
前言：在上一篇博客JavaWeb和WebGIS學習筆記（四）——使用uDig美化地圖，併疊加顯示多個圖層中，咱們使用Layer Preview功能，經過GeoServer自帶的OpenLayer預覽到了咱們發佈的地圖。預覽時的url一般是很長一串字符。css
這種方式雖然也可以進行訪問，但預覽的URL包含了大量請求參數，直接提供這樣一個URL連接既不方便訪問，也有礙觀瞻。所以，咱們何不本身使用OpenLayers在本身的網頁中顯示發佈的地圖呢。html
OpenLayers 是一個專爲Web GIS 客戶端開發提供的JavaScript 類庫包，用於實現標準格式發佈的地圖數據訪問。它 支持Open GIS 協會制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等網絡服務規範。能夠在瀏覽器中幫助開發者實現地圖瀏覽的基本效果，好比放大（Zoom In）、縮小（Zoom Out）、平移（Pan）等經常使用操做以外，還能夠進行選取面、選取線、要素選擇、圖層疊加等不一樣的操做，甚至能夠對已有的OpenLayers 操做和數據支持類型進行擴充，爲其賦予更多的功能。java
1、引入OpenLayers
OpenLayers的引入方法有三種。這裏是官網openlayers下載地址的介紹jquery
-
使用npm安裝OpenLayersgit
npm install ol
-
在網頁中引入在線地址github
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css">
-
將OpenLayers下載到本地，並引入web
<img src="https://s1.ax1x.com/2020/03/23/8TAFld.png" alt="2345截圖20200322134344" style="zoom:80%;" />npm
2、使用OpenLayers顯示地圖
關於OpenLayers的使用，官方文檔已經很詳盡了，也有不少具體的例子。api
能夠先參考這個openlayers quick start作一個簡單的入門。
具體使用到的內容能夠參考官方API文檔。
顯示地圖須要Layer Source WMS服務的URL，經過GeoServer中的Layer Preview可查看到預覽時的URL
http://localhost:8080/geoserver/xjs/wms?service=WMS&version=1.1.0&request=GetMap&layers=xjs%3ABoundaryChn2_4p&bbox=73.44696044921875%2C6.318641185760498%2C135.08583068847656%2C53.557926177978516&width=768&height=588&srs=EPSG%3A4326&format=application/openlayers
不難看出，WMS服務的URL是：
http://localhost:8080/geoserver/工做區名稱/wms
若是須要公網訪問，則對應URL就是：
http://ip:port/geoserver/工做區名稱/wms
其中ip是雲服務器的公網ip，port是開放的端口，工做區名稱即爲你的數據源所在工做區。
這裏給出顯示地圖的所有代碼：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
<link rel="stylesheet" href="oldist/openlayers/ol.css" type="text/css">
<style>
#map {
clear: both;
position: relative;
height: 800px;
width: 100%;
}
#loaction{
float:right;
}
</style>
<script type="text/javascript" src="oldist/openlayers/ol.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<title>olmap</title>
</head>
<body>
<div id = mapbox>
<h2 style="color:burlywood;text-align: center;">China Map</h2>
<div id="map" class="map"></div>
</div>
<div id="wrapper">
<div id="location"></div>
</div>
<script type="text/javascript">
var envstr = '';
var urlAdr = 'http://localhost:8080/geoserver/xjs/wms'; //根據本身的須要更改ip和port
var layerName = 'xjs:BoundaryChn2_4p,xjs:BoundaryChn2_4l,xjs:BoundaryChn1_4l'; //改變圖層名
var tiled;
var untiled;
$(function(){
//設置地圖範圍
var extent = [73.44696044921875,6.318641185760498,135.08583068847656,53.557926177978516];
var envstr = 'color'
//圖像圖層
untiled = new ol.layer.Image({
visible:true,
source: new ol.source.ImageWMS({
ratio: 1,
url: urlAdr,
params: {
"LAYERS": layerName,
'TILED': false,
},
serverType: 'geoserver'
})
});
//定義圖層數組
tiled = new ol.layer.Tile({
visible:false,
source: new ol.source.TileWMS({
url: urlAdr, //WMS服務URL
params: { //請求參數
'LAYERS': layerName,
'TILED': true,
},
serverType: 'geoserver'
})
});
var maplayers = [untiled,tiled];
//定義地圖對象
var map = new ol.Map({
layers: maplayers,
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
//center: [115, 39],
//zoom: 5
}),
controls: ol.control.defaults({
attributionOptions: {
collapsible: true
}
})
})
//自適應地圖view
map.getView().fit(extent, map.getSize());
//添加比例尺控件
map.addControl(new ol.control.ScaleLine());
//添加縮放滑動控件
map.addControl(new ol.control.ZoomSlider());
//添加全屏控件
map.addControl(new ol.control.FullScreen());
//添加鼠標定位控件
map.addControl(new ol.control.MousePosition({
undefinedHTML: 'outside',
projection: 'EPSG:4326',
target:$("#location")[0],
coordinateFormat: function(coordinate) {
return ol.coordinate.format(coordinate, '{x}, {y}', 4);
}
})
);
})
</script>
</body>
</html>
<img src="https://s1.ax1x.com/2020/03/23/8TAk6A.png" alt="Snipaste_2020-03-23_10-01-57" style="zoom:80%;" />