本文记录使用OpenLayers加载WMS数据,WMS数据为ArcGIS Server 和 GeoServer 发布的数据
1. 发布数据
1.1. ArcGIS Server 发布 WMS数据
关于如何安装ArcGIS Server 请自行百度,本文中ArcGIS Desktop和ArcGIS Server 都是ArcGIS 10.2.2
版本
发布过程请借鉴: https://zhuanlan.zhihu.com/p/101493415
1.2. GeoServer 发布 WMS数据
关于如何安装GeoServer 也请自行百度,本文中GeoServer使用的是GeoServer 2.15.0
版本
发布过程请借鉴: https://blog.csdn.net/sinat_28797501/article/details/69668701
2. OpenLayers 加载WMS
2.1. 加载ArcGIS WMS服务
OpenLayer版本为OpenLayer4.3.1
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="C:\openlayers\v4.3.1\css\ol.css" type="text/css">
<style>
html,body,#map{
width: 100%;
height: 600px;
border: 0ch;
background-color:#151515
}
</style>
<script src="C:\openlayers\v4.3.1\build\ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map;
function initArcGISServerMap() {
var format = 'image/png';
var projection = new ol.proj.Projection({
code: 'EPSG:4529',
units: 'm',
axisOrientation: 'neu',
global: false
});
var arcgiswmschina = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://192.9.10.250:6080/arcgis/services/行政区地类图斑/MapServer/WmsServer?',
params: {
'FORMAT': format,
'VERSION': '1.3.0',
STYLES: '',
LAYERS: '0,1',
}
})
});
map = new ol.Map({
target: 'map',
layers: [
arcgiswmschina,
],
view: new ol.View({
projection: projection
})
});
var bounds = [4.13984774067E7, 4120788.8176000006,
4.14474402153E7, 4160585.149700001];
map.getView().fit(bounds, map.getSize());
};
initArcGISServerMap();
</script>
</body>
</html>
- 信息获取方式
http://192.9.10.250:6080/arcgis/services/%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%9C%B0%E7%B1%BB%E5%9B%BE%E6%96%91/MapServer/WMSServer?service=wms&request=getcapabilities
2.2. 加载GeoServer WMS服务
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="C:\openlayers\v4.3.1\css\ol.css" type="text/css">
<style>
html,body,#map{
width: 100%;
height: 600px;
border: 0ch
}
</style>
<script src="C:\openlayers\v4.3.1\build\ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map;
function initGeoServerMap() {
var wmsSource = new ol.source.ImageWMS({
url: 'http://192.9.10.250:8086/geoserver/cite/wms',
params: {
'FORMAT': 'image/png',
'VERSION':'1.1.0',
LAYERS: 'cite:DLTB',
styles: '',
srs: 'EPSG:4529',
tiled: 'true',
}
});
var wmsLayer = new ol.layer.Image({
source: wmsSource
});
var projection = new ol.proj.Projection({
code: 'EPSG:4529',
units: 'm',
axisOrientation: 'neu',
global: false
});
var map = new ol.Map({
layers: [wmsLayer],
target: 'map',
view: new ol.View({
projection: projection
})
});
var bounds = [4.13984774067E7, 4120788.8176000006,
4.14474402153E7, 4160585.149700001];
map.getView().fit(bounds, map.getSize());
}
initGeoServerMap();
</script>
</body>
</html>
53E7, 4160585.149700001];
map.getView().fit(bounds, map.getSize());
}
initGeoServerMap();
</script>
</body>
</html>