OpenLayers访问WMS服务并获取要素的属性
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" 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>
最后的结果就是点击某个要素会把要素里的属性全部展示出来
