WFS图层取消选中

关于wfs图层选中怎么取消

昨天在处理wfs图层取消选中的时候遇到了点问题，现在我就把遇到的问题分享出来，希望对大家也有用处。
需求描述：勾选左侧图例右侧展示图层，取消选中右侧取消
技术实现：选中闲置地块全部勾选或取消，选择子项对应子项选中或者取消勾选

场景一

之前实现方式是闲置地块下面没有对应的子项，现在增加子项下面的代码无法取消闲置地块。

const wfsLayer = map.getLayers().array_.find((layer) =>  layer.getSource() instanceof ol.source.Vector &&  layer.getSource().getFormat() instanceof ol.format.GeoJSON; );
map.removeLayer(wfsLayer );
highlightSource.clear();

上面的原因是之前的图层名称是闲置地块，现在是加载闲置地块子项的图层名称，这种无法匹配对应的图层名称，下面是对应优化方法

map.getLayers().array_.forEach((layer) => {
	let flag =
		layer.getSource() instanceof ol.source.Vector &&
        layer.getSource().getFormat() instanceof ol.format.GeoJSON;
        if (flag) { // 只所以判断这个是把每一个已勾选的图层罗列出来，然后取消对应图层
        	map.removeLayer(layer);
            highlightSource.clear();
        }
   });

场景二

取消勾选子项遇到的问题如下：

const wfsLayer = map.getLayers().array_.find((layer) =>  layer.getSource() instanceof ol.source.Vector &&  layer.getSource().getFormat() instanceof ol.format.GeoJSON; );
map.removeLayer(wfsLayer ); // 这个时候wfsLayer图层为undefined
highlightSource.clear();

上面的问题：因为 map.getLayers() 返回的是一个 Collection 实例，而不是一个普通的数组，因此它没有 find 方法，这个也是我在网上找到的原因，解决方案是：为了正确地查找图层，您可以使用 forEach 方法来迭代图层集合，并使用回调函数来检查每个图层是否符合您的条件

步骤一把图层加到实例上

var tiled = new ol.layer.Vector({
  source: wfsSource,
  visible: true,
  style: createStyleFunction(),
});
tiled.set('name', layers); // 上面是把图层名称加到实例

步骤二通过get方法查找对应图层名称

var wfsLayer = null;
  map.getLayers().array_.find((layer) => {
    console.log(layer.get('name')); // 这个图层名称是你地图上面所有的wfs图层
    if (layer instanceof ol.layer.Vector && layer.get('name') === layerName) {
      wfsLayer = layer;
    }
  });
  // 如果上面条件判断成功说明这个图层就是我们要找的实例
  if (wfsLayer) {
    map.removeLayer(wfsLayer);
    highlightSource.clear();
  }

上面是我在项目遇到的问题，如果有不对的地方还请各位指正，希望上面的解决方法能对您的项目有所帮助