openlayers点击wms服务获取当前点击图层的图层名

83 阅读 0 评论 55 点赞

我是靠谱客的博主舒心裙子，最近开发中收集的这篇文章主要介绍openlayers点击wms服务获取当前点击图层的图层名，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需求：

openlayers加载geoserver发布的三个wms图层，然后分别给三个图层添加注记弹框。

在网上搜了一天多一直没有找到openlayers怎么可以获取当前点击的图层名，今天终于在简书上看到一个评论里有人也在问同样的问题，惊于世界之小啊！于是我去人家主页一找，果然找到了解决方法。

刚开始做完之后发现一个bug，就是有的图层即使没有显示在地图上，点击的时候仍然会获取到这个图层的信息，原来是因为我把LAYERS写死了，所以不管图层有没有加载出来，它的source都在。所以最好把LAYERS动态加载，通过获取当前选中的多选框的值来加载LAYERS，（比如有10个多选框，每1个多选框控制1个图层，有3个选中的时候说明地图上加了3个图层，拿到这3个图层名）然后循环LAYERS即可。

这种方法的前提是服务里加了图层名，否则输出data里没有任何关于图层名的信息


var mapview = new ol.View({
center: [116.046881,38.883558],
projection: 'EPSG:4326',
zoom: 11,
maxZoom: 15,
minZoom: 5
})
var geoServer = true
if (geoServer) {
// 如果是 GeoServer 发布的 wms 服务做点击事件
// 多个图层的名称，此处为示例，实际开发中这个LAYERS最好是动态追加的
var LAYERS ='xxx,xxx,xxx'
var viewResolution = mapview.getResolution()
var testSource = new ol.source.TileWMS({
url: wmsIp()+'/geoserver/xxx/wms',
params: { 'LAYERS': LAYERS, 'singleTile': true }
});
var url = testSource.getGetFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:4326', { INFO_FORMAT: 'application/json' })
//判断是否有要素，一般wms返回的是false没有要素，所以wms的功能代码在else里
if (map.hasFeatureAtPixel(e.pixel)) {
if (url) {
fetch(url)
.then(response => {
return response.json()
})
.then(data => {
// console.log(data)
})
}
} else {
if (url) {
fetch(url)
.then(response => {
return response.json()
})
.then(data => {
// data.features.length == 0是我用的天地图，他的features里啥也没有，所以做个判断
if(data.features.length != 0){
//这里的data.features[0].id输出的是你当前点击的区域的id，格式为road1.1 road1.2 road1.3等等
//所以要分隔一下只拿前面的对应图层名。这里的图层名字不是前端加载wms定义的图层变量名。
// 反正要找到geoserver里边的图层属性，可以把多个wms区别开来，才可以单独为他们加气泡弹框
var layer_name = data.features[0].id.split(".")[0]
if(layer_name == "xxx"){
}else if(layer_name == "xxx"){
}else if(layer_name == "xxx"){
}
}
})
}
}
}