leaflet 使用GetFeatureInfo与WMS交互

在使用Leaflet进行地图开发时，GetFeatureInfo请求是一种常用于与WMS（Web Map Service）服务交互的手段，用以获取地图上特定点的详细信息。Leaflet本身是一个轻量级的开源JavaScript库，用于移动友好的交互式地图，它没有直接提供GetFeatureInfo的API，但可以通过调用WMS服务来实现这一功能

1.实现步骤

1. 设置WMS图层： 首先，确保你的地图中已经添加了WMS图层。WMS服务允许用户请求一个具体的地理区域的地图，并且可以指定返回图片的大小、格式等。

2. 监听点击事件： 在Leaflet中，你可以为地图添加一个点击事件监听器。当用户点击地图时，可以获取到点击位置的经纬度信息。

3. 构造GetFeatureInfo请求： 使用点击事件获取的经纬度信息，构造一个GetFeatureInfo的URL请求。这个请求需要包含WMS服务的URL、请求的类型（GetFeatureInfo）、返回信息的格式（通常是application/json或者text/html），以及用户点击的具体位置。

4. 发送请求并处理响应： 发送构造好的请求到服务器，然后处理返回的数据。如果请求成功，你将获取到点击位置的详细信息，这些信息可以用于显示一个弹窗、更新页面元素等

2.示例代码

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer.wms("http://your-wms-service-url", {
    layers: 'your-layer-name',
    format: 'image/png',
    transparent: true,
    version: '1.3.0'
}).addTo(map);

map.on('click', function(e) {
    var url = getFeatureInfoUrl(map, e.latlng);
    axios.get(url).then(res=>{
		console.log('getFeatureInfoUrl====>',res);
		let data = res.data.features
		if(data.length !==1) return						                
        console.log('properties====>',res.data.features,data[0].properties);
		let pollution = data[0].properties
    })
});
function() getFeatureInfoUrl(map, latlng) {
					    // 根据你的WMS服务和参数修改以下URL构造过程
					    var point = map.latLngToContainerPoint(latlng, map.getZoom())
					        let size = map.getSize()
					        let params = {
					            request: 'GetFeatureInfo',
					            service: 'WMS',
					            srs: 'EPSG:4326',
					            styles: '',
					            transparent: true,
					            version: '1.1.1', //这里是对应你的服务版本每个服务都会不同
					            format: 'image/png',
					            bbox: map.getBounds().toBBoxString(),
								height: size.y,
								width: size.x,
					            layers: 'JLPGIS:ykyt-wry',//图层服务名
					            query_layers: 'JLPGIS:ykyt-wry', //图层服务名
					            info_format: 'application/json' 
					        };
							params[map.getCenter().lat < 0 ? 'i' : 'x'] = point.x;
							params[map.getCenter().lng < 0 ? 'j' : 'y'] = point.y;
						console.log('params====>',params);
						let url = "http://your-wms-service-url" + L.Util.getParamString(params, this.mapUrl, true);
						console.log('url====>',url);
						return url
					},

3.扩大GetFeatureInfo的bbox

在使用WMS服务的GetFeatureInfo请求时，通常是针对用户点击地图的一个特定点来获取信息。然而，在某些情况下，你可能希望扩大这个查询范围，即增加bbox（边界框）的大小，以便捕获用户点击附近的更多特征信息。这可以通过调整bbox参数来实现，bbox参数定义了地图视图的地理坐标范围。

扩大bbox的方法

1. 计算新的bbox：

   在用户点击地图时，你可以根据点击的经纬度点，向四周扩展出一个更大的矩形区域。这意味着你需要计算出新的边界框（bbox），它比原来的点击点所在的bbox要大。

2. 修改GetFeatureInfo请求中的bbox参数：

   使用计算出的新的bbox值替换GetFeatureInfo请求中原来的bbox参数。这样，请求就会基于一个更大的区域来获取信息。

示例：扩大bbox

假设用户点击的点为(x, y)，你想将查询范围扩大到该点周围的10个单位。首先，计算新的bbox：

// 假设点击点的经纬度为 (lon, lat)
var lon = clickLongitude;
var lat = clickLatitude;

// 定义扩大的范围（示例中以度为单位）
var delta = 0.01; // 根据实际需要调整这个值

// 计算新的 bbox
var newBbox = [
    lon - delta, // 左
    lat - delta, // 下
    lon + delta, // 右
    lat + delta  // 上
].join(',');
//然后，使用这个新的bbox值构造GetFeatureInfo请求。

4.APP上使用注意点

可能在pc端能正常拾取对象，在app上就无法正常拾取到实体，需修改x y 的值即可

params[this.map.getCenter().lat < 0 ? 'i' : 'x'] = event.containerPoint.x
params[this.map.getCenter().lng < 0 ? 'j' : 'y'] = event.containerPoint.y