leaflet加载wms服务实现wms交互

哪有人敲代码不戴头盔的2024-05-03 22:43

leaflet地图与wms服务的交互，点击wms服务获取地理区域信息以及后续操作

加载wms服务

给地图添加监听点击事件

构造GetFeatureInfo发送请求，需要包含WMS服务的URL、请求的类型（GetFeatureInfo）、返回信息的格式（通常是application/json或者text/html），以及用户点击的具体位置

javascript 复制代码

//map:地图容器
L.tileLayer.wms('wms服务url', {
                  layers: 'layer图层',
                  format: 'image/png',
                  transparent: true,
                })
                .setZIndex(9999)
                .addTo(map)
var that=this
map.on('click', function(e) {
   		let latlng = e.latlng   //经纬度
        let containerPoint = e.containerPoint  //point
        let layer = 'layer图层'
        let bbox = map.getBounds().toBBoxString() //map容器bbox
        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: '图层服务名',//图层服务名
				query_layers: '图层服务名', //图层服务名
				info_format: 'application/json' ,
				x:containerPoint.x,
				y:containerPoint.y,
		 };
		 //在这块请求geoservice接口可能会出现跨域问题需要解决
		 getAction('你的geoservice-url', params).then((res)=>{
		 //点击高亮显示
          let layer = L.geoJSON(res.features[0], {
            style: function (feature) {
            return { weight: 3, color: '#00FF7F', fillOpacity: 0.6 }
          },
          }).addTo(that.areaLayer)
        })
})