CDN
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v3.20.1/build/ol.js" type="text/javascript"></script>
1. 点击Logo -》版本号 -》查看自己的wms地址
2. 设置范围
将图中的范围以此填写到
var extent = [924029.4389153644, 3148870.100464709, 975418.6183263285, 3193088.3305712156];
3. 设置sourse
source: new ol.source.TileWMS({
url: 'http://localhost:8089/geoserver/webgis_test/wms',
params: {
'LAYERS': 'webgis_test:beijing',
'TILED': false
},
serverType: 'geoserver'
})
url为刚才找到的wms地址‘LAYERS’的值为图层名称
4. 定义地图对象
var map = new ol.Map({
layers: tiled,
target: 'map',
view: new ol.View({
projection: 'EPSG:3857',
zoom: 4
}),
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
})
修改projection: 'EPSG:3857',中的3857为图层的坐标代码
完整代码
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v3.20.1/build/ol.js" type="text/javascript"></script>
<title></title>
</head>
<body onload="init()">
<h2>WMS</h2>
<div id="map" style="height: 900px; width: 100%;"></div>
<script type="text/javascript">
//基于openlayers3
function init() {
//WMS的边界范围
var extent = [924029.4389153644, 3148870.100464709, 975418.6183263285, 3193088.3305712156];
var tiled = [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://localhost:8089/geoserver/webgis_test/wms',
params: {
'LAYERS': 'webgis_test:beijing',
'TILED': false
},
serverType: 'geoserver'
})
})
];
//定义地图对象
var map = new ol.Map({
layers: tiled,
target: 'map',
view: new ol.View({
projection: 'EPSG:3857',
zoom: 4
}),
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
})
});
map.getView().fit(extent, map.getSize());
}
</script>
</body>
</html>
结果
