前言
地图是由很多个图层layer叠加在一起组成的(图层分为矢量图层vector, 瓦片图层 Tile,等),layer上面又会有很多数据源source(数据源也分为矢量源和珊格瓦片源,必须与图层相对应), 数据源上是相应的feature要素。
一般来说通过给地图组册点击事件,然后再通过forFeatureAtPixel就能获得相应的feature要素信息,但是这种方法仅适用于图层为矢量图层ol.layer.vector
。
当图层为瓦片图层时就需要用其他方法获取feature信息了。
处理流程
注意:我的ol版本为v5.3.3, 可以用瓦片源的getGetFeatureInfoUrl
这个api,但是在后续v6的版本中这个api更改为了getFeatureInfoUrl
这里用的图层是geoserver发布的WMS服务为例
map.on('singleclick', e => {
var viewResolution = map.getView().getResolution(); // 地图窗口分辨率
// 获取到点击位置的wmslayer图层
const l = map.forEachLayerAtPixel(e.pixel, l => {
const flag = l.get('tileName') === 'wmslayer'; //这里我已经给wms图层设置了tileName属性
if (flag) {
return l;
}
});
// 点击空白位置或者其他图层则清空 高亮图层
if (!l) {
highLightLayer.getSource().clear();
return;
}
// 获取图层上的数据源并调用源上面的方法 传入 坐标点 分辨率 投影 参数option
let url = l.getSource().getGetFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:4326', {
INFO_FORMAT: 'application/json',
});
if (url) {
fetch(url)
.then(function (res) {
return res.json();
})
.then(data => {
// data为geoJSON格式的数据 可以调用new GeoJSON().redFeatures(data)生成feature要素
highLightLayer.getSource().clear();
highLightLayer.getSource().addFeatures(new GeoJSON().readFeatures(data));
});
}
});
完整代码
import { Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
import { Style, Fill, Stroke } from 'ol/style';
const getStyle = () => {
return new Style({
fill: new Fill({
color: '#FFF',
}),
stroke: new Stroke({
width: 10,
color: 'red',
}),
});
};
const source = new VectorSource();
const highLightLayer = new VectorLayer({
source: source,
zIndex: 100,
style: getStyle(),
});
map.on('singleclick', e => {
var viewResolution = map.getView().getResolution(); // 地图窗口分辨率
// 获取到点击位置的wmslayer图层
const l = map.forEachLayerAtPixel(e.pixel, l => {
const flag = l.get('tileName') === 'wmslayer';
if (flag) {
return l;
}
});
// 点击空白位置或者其他图层则清空
if (!l) {
highLightLayer.getSource().clear();
return;
}
// 获取图层上的数据源并调用源上面的方法 传入 坐标点 分辨率 投影 参数option
let url = l.getSource().getGetFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:4326', {
INFO_FORMAT: 'application/json',
});
if (url) {
fetch(url)
.then(function (res) {
return res.json();
})
.then(data => {
// data为geoJSON格式的数据 可以调用new GeoJSON().redFeatures(data)生成feature要素
highLightLayer.getSource().clear();
highLightLayer.getSource().addFeatures(new GeoJSON().readFeatures(data));
});
}
});
map.addLayer(highLightLayer);
小结
注意一下逻辑处理就行了