WMS查询 via fetch API

请求WMS图片

/**
 * 请求WMS图片
 * @param {string} url 
 * @param {WMS_QUERY} query 
 * @typedef {Object} WMS_QUERY
 * @property {string} LAYERS 图层名，可设置多个，用 "," 隔开
 * @property {string} SRS 坐标系
 * @property {number} WIDTH 图片宽度
 * @property {number} HEIGHT 图片高度
 * @property {string} BBOX 边界，如: 546618.6589188746,3374265.5182118746,547991.593451125,3375638.452744125
 * @returns 
 */
async function getWMSImage(url, query) {
    const DEFAULT = {
        VERSION: '1.1.1',
        FORMAT: 'image/png',
        TRANSPARENT: true,
    };
    var resp = await fetch(`${url}?` + new URLSearchParams({
        SERVICE: 'WMS',
        REQUEST: 'GetMap',
        ...DEFAULT,
        ...query,
    }));
    var blob = await resp.blob();
    var objectURL = URL.createObjectURL(blob);
    var image = new Image();
    image.src = objectURL;
    return new Promise((resolve, reject) => {
        image.addEventListener('load', function ({ target: image }) {
            resolve(image);
            URL.revokeObjectURL(image.src);
        });
    });
}

see

查询字符串：
https://stackoverflow.com/questions/35038857/setting-query-string-using-fetch-get-request

GeoServer WMS过滤

WMS 规范只允许有限的数据过滤。GeoServer 增强了 WMS 过滤功能以匹配 WFS 提供的功能。该filter参数可以指定 OGC XML 过滤器的列表。该列表括在括号中：( )。在 GET 请求中使用时，XML 标记括号必须是 URL 编码的。

getWMSImage(WMS_SERVICE_URL, {
        LAYERS: WMS_LAYER_NAME,
        SRS: SRS,
        WIDTH: width,
        HEIGHT: width,
        BBOX: bbox.join(','),
        FILTER: `<Filter xmlns="http://www.opengis.net/ogc"><And><BBOX><PropertyName>geom</PropertyName><Envelope xmlns="http://www.opengis.net/gml" srsName="EPSG:4549"><lowerCorner>546754.6609554517 3374368.1461884514</lowerCorner><upperCorner>547842.5342045482 3375456.0194375482</upperCorner></Envelope></BBOX><Contains><PropertyName>geom</PropertyName><Point xmlns="http://www.opengis.net/gml" srsName="EPSG:4549"><pos srsDimension="2">547302.724726 3374829.869844</pos></Point></Contains></And></Filter>`
    }).then(image => {
        bt_Util.SetGlobalOrthoTexture1(x1, y2, x2, y1, width, width, image);
        setAlpha(ALPHA);
    }).finally(err => {
        // pending = false;
    });

see

https://docs.geoserver.org/stable/en/user/services/wms/vendor.html#filter

编码Filter

    var featureRequest = new WFS().writeGetFeature({
        // srsName: SRS,
        featureTypes: [`${WMS_LAYER_NAME}`],
        // outputFormat: 'text/xml; subtype=gml/3.1.1',
        // outputFormat: 'application/json',
        // filter: Filter.contains('geom', new Point([x, y]), SRS), // For PostGIS, it's "geom", not "geometry"
        filter: Filter.contains('geom', new Point([0,0]), SRS), // For PostGIS, it's "geom", not "geometry"
        // maxFeatures: 10,
    });

    var fr = new XMLSerializer().serializeToString(featureRequest);
    console.log('WFS查询请求');
    console.log(fr);
    var xml = new DOMParser().parseFromString(fr, 'text/xml');
    var filter = xml.getElementsByTagName('Filter')[0];
    var str_filter = filter?.outerHTML;

END