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)
        })
})          
相关推荐
Jinuss13 天前
源码分析之Leaflet核心模块core中的Util工具方法
前端·leaflet
小金子J1 个月前
实现 Leaflet 多类型点位标记与聚合功能的实战经验分享
前端开发·leaflet·地理信息系统(gis)·地图聚合·地图标记
diygwcom2 个月前
leaflet手绘地图实现原理-可视化工具设计手绘地图
leaflet·手绘地图·自定义地图瓦片
duansamve4 个月前
WebGIS地图框架有哪些?
javascript·gis·openlayers·cesium·mapbox·leaflet·webgis
羊子雄起5 个月前
leaflet矢量瓦片vetorgrid显示聚合和图标裁剪显示不全的问题
javascript·leaflet·vectorgrid·显示不全
ikgade6 个月前
Leaflet 接入天地图服务
javascript·html·leaflet·天地图
Q行天下6 个月前
leaflet加载GeoServer的WMS地图服务.md
wms·geoserver·leaflet
Modify_QmQ7 个月前
leaflet【十】实时增加轨迹点轨迹回放效果实现
vue3·leaflet·轨迹回放·实时增加轨迹
小纯洁w9 个月前
Uniapp 使用 Leaflet
uni-app·leaflet
Modify_QmQ9 个月前
Leaflet【六】绘制交互图形、测量、经纬度展示
gis·vue3·leaflet·地图交互·距离测量、面积测量