openlayers+wms 的简单过滤

wms请求的时候的是支持过滤条件的，比如通过 属性

也支持空间过滤等 CQL / ECQL过滤器语言 具体的请自行查询

主要有个坑要注意下，当查询条件有中文的时候，需要对其转义为 Unicode 编码

const Unicode = {
      stringify: function (str: string) {
        const res = [];
        const len = str.length;

        for (let i = 0; i < len; ++i) {
          res[i] = ('00' + str.charCodeAt(i).toString(16)).slice(-4);
        }

        return str ? '\\u' + res.join('\\u') : '';
      },

      parse: function (str) {
        str = str.replace(/\\/g, '%');
        return unescape(str);
      }
    };

在openlayers里可以这样用

const filterParams = {
      'FILTER': null,
      'CQL_FILTER': null,
      'FEATUREID': null
    };
    if (filterType === 'cql') {
      filterParams['CQL_FILTER'] = pre(param);
    }
    if (filterType === 'ogc') {
      filterParams['FILTER'] = '';
    }
    if (filterType === 'fid') {
      filterParams['FEATUREID'] = '';
    }
    Layer.getSource().updateParams(filterParams);

举个例子，这里实现了属性查询，并且对查询了wkt 范围内intersects的图形

function pre(paramvalue: {}): string {
      let result = '';
      for (const key in paramvalue) {
        if (paramvalue.hasOwnProperty(key) && key !== 'wkt') {
          // if (paramvalue[key]) {
          result += `${key} like '%${Unicode.stringify(paramvalue[key])}%' and `;
          // }
        }
      }
      result = result.slice(0, result.length - 4);
      if (paramvalue.hasOwnProperty('wkt') && paramvalue['wkt'].length > 0) {
        result = result + `and intersects(geom,${paramvalue['wkt']})`;
      }
      return result;
    }

注意上面一段代码中的 geom 是指的服务数据中表示空间位置的字段，具体名称要问发布服务的人

下面附一些参考网址

https://www.giserdqy.com/gis/opengis/geoserver/17139/geoserver-%E5%B1%9E%E6%80%A7%E6%9F%A5%E8%AF%A2%E5%92%8C%E7%A9%BA%E9%97%B4%E6%9F%A5%E8%AF%A2%E6%94%AF%E6%8C%81-cql-ecql%E8%BF%87%E6%BB%A4%E5%99%A8%E8%AF%AD%E8%A8%80/

https://docs.geoserver.org/2.12.2/user/services/wms/vendor.html#wms-vendor-parameters

有疑问欢迎加群讨论 768901972