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)
        })
})          
相关推荐
kongxx2 个月前
在Angular中使用Leaflet构建地图应用
leaflet
Jinuss2 个月前
源码分析之Leaflet中Marker
前端·leaflet
Jinuss2 个月前
源码分析之Leaflet中的LayerGroup
前端·leaflet
Jinuss3 个月前
源码分析之Leaflet中control模块Zoom类实现原理
前端·leaflet
Jinuss3 个月前
源码分析之Leaflet图层控制控件Control.Layers实现原理
源码·leaflet
Jinuss3 个月前
源码分析之Leaflet核心模块core中的Util工具方法
前端·leaflet
小金子J4 个月前
实现 Leaflet 多类型点位标记与聚合功能的实战经验分享
前端开发·leaflet·地理信息系统(gis)·地图聚合·地图标记
diygwcom5 个月前
leaflet手绘地图实现原理-可视化工具设计手绘地图
leaflet·手绘地图·自定义地图瓦片
duansamve7 个月前
WebGIS地图框架有哪些?
javascript·gis·openlayers·cesium·mapbox·leaflet·webgis
羊子雄起8 个月前
leaflet矢量瓦片vetorgrid显示聚合和图标裁剪显示不全的问题
javascript·leaflet·vectorgrid·显示不全