基于maptalks前端地图引擎获取wms地块基本信息

• 根据Leaflet的wms插件源码编写，用于maptalks获取wms图层基本信息。
• 工具代码

/** 获取wms地块基本信息 **/
export function getlayerInfo(containerPoint, wmsLayer,crs,callback) {
    function updateWmsParams(wmsLayer,crs) {
            var map = wmsLayer.map;
            var wmsParams = wmsLayer.wmsParams;
            var bounds = map.getExtent();
            var size = map.getSize();
            var wmsVersion = parseFloat(wmsParams.version);
            var crs = crs
            var projectionKey = wmsVersion >= 1.3 ? 'crs' : 'srs';
            var params = {
                    'width': size.width,
                    'height': size.height
            };
            params[projectionKey] = crs;
            params.bbox = (
                    wmsVersion >= 1.3 && crs === 'EPSG:4326' ? [bounds.ymin, bounds.xmin, bounds.ymax, bounds.xmax] : [
                            bounds.xmin, bounds.ymin, bounds.xmax, bounds.ymax
                    ]
            ).join(',');
            return params;
    }

    function getFeatureInfoParams(containerPoint, wmsLayer,) {
            // Hook to generate parameters for WMS service GetFeatureInfo request
            var wmsParams = wmsLayer.wmsParams;
            var infoParams = {
                    'request': 'GetFeatureInfo',
                    'query_layers': wmsLayer.options.layers,
                    'X': Math.round(containerPoint.x),
                    'Y': Math.round(containerPoint.y),
            };
            var param = updateWmsParams(wmsLayer,crs);
            return Object.assign({}, wmsParams, infoParams, param);
    }

    function getParamString(obj, existingUrl, uppercase) {
            var params = [];
            for (var i in obj) {
                    params.push(encodeURIComponent(uppercase ? i.toUpperCase() : i) + '=' + encodeURIComponent(obj[i]));
            }
            return ((!existingUrl || existingUrl.indexOf('?') === -1) ? '?' : '&') + params.join('&');
    }
    let params = getFeatureInfoParams(containerPoint, wmsLayer);
    let url = wmsLayer.options.urlTemplate + getParamString(params, wmsLayer.options.urlTemplate);
    axios.get(url, {
            timeout: 3000,
    }).then(function(response) {
            if(response.data){
                    callback.call(this,response.data);
            }else{
                    callback.call(this,null);
            }
    }).catch(function(error) {
            console.log(error)
    }).finally(() => {});
}

• 如何使用

//创建图层
this.massifLayer = new maptalks.WMSTileLayer('massif_markerlayer', {
    'urlTemplate': 'http://10.1.2.33:13000/bdmap-geoserver/cite/wms',
    'crs': 'EPSG:3857',
    'layers': 'cite:plot_border',
    'version': '1.1.1',
    'format': 'image/png',
    'transparent': true,
    'uppercase': true,
    'info_format': "application/json",
    'zIndex': 0,
    'cql_filter':filterText
});
//地图点击事件
this.mapView.on('click', function(e) {
    getlayerInfo(e.containerPoint,that.massifLayer,"EPSG:4326",function(data){
        if(data.features){
            if(that.highlightedLayer){
                    that.highlightedLayer.removeAll();
                    for(var i = 0;i<data.features.length;i++){
                            let feature = data.features[i]
                            var polygon = new BDLayers.Lib.Overlays.Polygon('wmsLigh'+i,{
                                    coordinates: feature.geometry.coordinates
                            });
                            that.highlightedLayer.addGeometry(polygon)	
                    }
            }
        }
    });
});