leaflet加载wms服务实现wms交互

本文主要是介绍leaflet加载wms服务实现wms交互，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

//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  //pointlet layer = 'layer图层'let bbox = map.getBounds().toBBoxString() //map容器bboxlet 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)})
})