openlayer点击WMS瓦片图层获取相应的feature要素信息

前言

地图是由很多个图层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);

小结

注意一下逻辑处理就行了