OpenLayers 跨域访问WMS服务并获取要素的属性
整体思路:
1.因为我们这个地图服务是在Geoserver发布,要先解决跨域的问题,GeoServer启动有两种方式,一种是war存放在tomcat里启动,还有一种就是自己启动,所以要根据具体方式百度;
2.首先定义一个map,数据源里crossOrigin: ‘anonymous’,跨域要加,通过监听一个单击事件getGetFeatureInfoUrl来获取到点击的WMS要素的url, 通过fetch发送请求得到数据最后展示在页面里;
3.最后再小小说明下，如果不是这个坐标系,其他坐标系的话需要进行转换
我一般借助的是proj4js 坐标系转换详情
上代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跨域WMS访问获取要素属性</title>
<link rel="stylesheet"
href="https://openlayers.org/en/v3.20.1/css/ol.css" target="_blank" rel="external nofollow" type="text/css">
<script
src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<script type="text/javascript"
src="https://cdn.bootcss.com/proj4js/2.5.0/proj4.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="info"> </div>
<script>
//地图格式 栅格
var format = 'image/png';
//xy最大最小
var bounds = [-124.73142200000001, 24.955967,
-66.969849, 49.371735];
//栅格地图源
var source = new ol.source.ImageWMS({
crossOrigin: 'anonymous',
ratio: 1,
url: 'http://localhost:8082/geoserver/topp/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
STYLES: '',
LAYERS: 'topp:states',
}
});
//栅格图层
var layers = [new ol.layer.Image({
source: source
})]
//投影
var projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'm',
axisOrientation: 'neu',
global: false
});
var view = new ol.View({
projection: projection
})
var map = new ol.Map({
layers: layers,
target: 'map',
view: view
});
map.getView().fit(bounds,map.getSize());
/**监听一个单击事件,
通过getGetFeatureInfoUrl来获取到点击的WMS要素的url,
通过fetch发送请求得到数据最后展示在页面里
*/
map.on('singleclick', function(evt) {
document.getElementById('info').innerHTML = '';
var viewResolution = (view.getResolution());
var url = source.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, 'EPSG:4326',
{'INFO_FORMAT': 'text/html'});
if (url) {
fetch(url)
.then(function (response) { return response.text(); })
.then(function (html) {
document.getElementById('info').innerHTML = html;
});
}
});
</script>
</body>
</html>
最后的结果就是点击某个要素会把要素里的属性全部展示出来
![软件测试——Web测试基础理论知识思维导图[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)