超图SuperMap+openlayer+Vue3实现图层根据属性进行条件过滤

```javascript
<script lang="ts" setup>
//FilterQuery.vue
import { useMapStore } from '@/store/mapStore';
import Expand from './Expand.vue'
import { ImageSuperMapRest, LayerInfoService, SetLayersInfoParameters } from '@supermapgis/iclient-ol';
import { computed, ref } from 'vue';
import { filterConfig } from '../filterConfig'
import { getVisibleImageLayers } from '@/views/map/service/QueryService';

const search = async () => {
  // 获取所有可见的 ImageLayer 图层
  const layers = getVisibleImageLayers();

if (layers.length === 0) {
    console.log('没有可操作的图层');
    return;
  }

const where = generateWhereString();
  if (!where) {
    console.log('查询条件为空');
    return;
  }

for (const layer of layers) {
    const url = layer.get('source')?._url;
    if (!url) continue;

try {
      // 获取当前图层的信息
      const layerService = new LayerInfoService(url);
      const layersInfoRes = await layerService.getLayersInfo();

// 设置过滤条件
      layersInfoRes.result.subLayers.layers[0].displayFilter = where;

const p = new SetLayersInfoParameters({
        layersInfo: layersInfoRes.result,
      });

// 更新图层信息
      new LayerInfoService(url).setLayersInfo(p, (re => {
        console.log(`[setLayersInfo] for ${layer.get('title')}`, re.result);
        if (re.result.succeed) {
          layer.set('source', new ImageSuperMapRest({
            url: url,
            layersID: re.result.newResourceID,
          }));
        }
      }));
    } catch (error) {
      console.error(`Error applying filter to layer ${layer.get('title')}:`, error);
    }
  }
};

const reset = async () => {
  // 获取所有可见的 ImageLayer 图层
  const layers = getVisibleImageLayers();

if (layers.length === 0) {
    console.log('没有可操作的图层');
    return;
  }

for (const layer of layers) {
    const url = layer.get('source')?._url;
    if (!url) continue;

try {
      // 获取当前图层的信息
      const layerService = new LayerInfoService(url);
      const layersInfoRes = await layerService.getLayersInfo();

// 清空过滤条件
      delete layersInfoRes.result.subLayers.layers[0].displayFilter;

const p = new SetLayersInfoParameters({
        layersInfo: layersInfoRes.result,
      });

// 更新图层信息
      new LayerInfoService(url).setLayersInfo(p, (re => {
        console.log(`[resetLayersInfo] for ${layer.get('title')}`, re.result);
        if (re.result.succeed) {
          layer.set('source', new ImageSuperMapRest({
            url: url,
            layersID: re.result.newResourceID,
          }));
        }
      }));
    } catch (error) {
      console.error(`Error resetting filter for layer ${layer.get('title')}:`, error);
    }
  }
  // 清空查询条件
  selectedWhere.value = [];
};
</script>

```

supermap js sdk 的图层服务过滤实现方式与Arcgis js sdk 实现的方式不太一样。Arcgis js sdk在图层上具有`definitionExpression`属性，可以通过直接设置sql来达到根据属性过滤的目的。而supermap由于前端并不是自己原生开发的，是第三方的。例如我用的是openlayer作为前端，所以supermap没法向arcgis一样快速的设置图层筛选。

supermap iserver发布的图层服务中有一个字段是displayFilter，这个属性可以设置一个sql条件，服务会根据这个条件在目标服务的基础上创建一个临时图层。我使用layerService.getLayersInfo()方法获取到目标图层的所有配置，在这个配置的基础上修改了displayFilter属性的值达到了过滤图层的效果。new LayerInfoService(url).setLayersInfo()会返回iserver图层创建的临时图层的id，拿到ID后把原有图层的source部分更新，用原来的图层url+新返回的临时图层id即可在地图上展示出来本次过滤后的图层。
在创建图层时有一个layersID字段，实际意思是临时图层id，是可选的，当留空的时候就是直接加载目标图层，如果设置了layersID字段，那么服务会改为加载这个图层服务的临时图层。
同理如果要清除过滤的效果只需要删除追加的layersID字段就可以了。

坑1:需要注意的是getLayersInfo有一个近似的API叫getLayerInfo。他们的用途是不一样的，但是文档中没有说明，经过测试getLayerInfo实际为获取sublayer（子图层）的信息。而layers则是图层服务。
坑2:setLayersInfo方法具体把数据设置到哪一个服务和图层上靠的是url+layerName定位的（竟然不是用id就感觉好不靠谱，例如Arcgis server服务每个图层都有一个独立的itemId+子图层layerId），name这里指的是图层服务的name，如果你看了图层服务的json配置你会发现还有一层sublayer，并且如果你是在iserver的网页上获取的layerName的话，是不准确的。这一点在文档中没有说明容易造成混淆，会导致一直屡屡请求失败却找不到问题。
在设置请求参数的name的时候不要在iserver中手动复制，在网页中显示的名称不准确。需要调用`await layerService.getLayersInfo()`方法通过sdk来获取图层的属性。如果是用图层标题那么就是`layersInfoRes.result.name`，如果是用子图层那么就需要继续往下找`layersInfoRes.result.subLayers.layers[0].name`。