- 啟動GeoServer服務，登錄Admin Page。
- 在新建項目中引入openlayers包。
- 新建靜態頁面，在頁面中鏈入樣式，圖中標簽copy於上圖源碼，可修改
tip【HTML <link> 標簽 ：鏈接一個外部樣式表】
- 添加map,並設置好相應投影（projection）、范圍（bounds,extent）等
- 成功將地圖圖層加載在頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>map demo</title>
<link rel="stylesheet" href="lib/ol4.6.4/css/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 src="lib/ol4.6.4/build/ol.js"></script>
<script>
var format= 'image/png';
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8086/geoserver/sf/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
STYLES: '',
LAYERS: 'sf:roads'
}
})
});
var format= 'image/png';var projection = new ol.proj.Projection({
code: 'EPSG:26713',
units: 'm',
axisOrientation: 'neu',
global: false
});
var bounds = [589434.8564686741, 4914006.337837095,
609527.2102150217, 4928063.398014731];
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}).extend([]),
target: 'map',
layers: [
untiled
],
view: new ol.View({
projection: projection
})
});
map.getView().fit(bounds, map.getSize());
</script>
</body>
</html>
