leaflet加载wms服务实现wms交互

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)
        })
})          
相关推荐
Modify_QmQ8 天前
leaflet【十】实时增加轨迹点轨迹回放效果实现
vue3·leaflet·轨迹回放·实时增加轨迹
小纯洁w2 个月前
Uniapp 使用 Leaflet
uni-app·leaflet
Modify_QmQ2 个月前
Leaflet【六】绘制交互图形、测量、经纬度展示
gis·vue3·leaflet·地图交互·距离测量、面积测量
随便起的名字也被占用3 个月前
leaflet,canvas渲染目标,可加载大批量数据
leaflet·leaflet加载海量点
Sail_Again5 个月前
leaflet知识点:地图窗格panes的应用
leaflet
曾经的你d7 个月前
【vue+leaflet】vue项目中使用leaflet绘制室内平面图、leaflet.pm在平面图中绘制点、线、面图层(一)
vue.js·leaflet·leaflet.pm
汤姆猫不是猫9 个月前
GIS入门,Leaflet介绍,Leaflet可以做什么,网页中如何使用Leaflet地图,vue中如何使用Leaflet地图
前端·javascript·vue.js·gis·leaflet
夜猫逐梦10 个月前
【leaflet】1. 初见
javascript·gis·leaflet
羊子雄起1 年前
使用Leaflet对WMS做空间几何范围查询
开发语言·前端·javascript·geoserver·gis·leaflet