leaflet加载wms服务实现wms交互

ops/2024/10/18 12:30:08/

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

  1. 加载wms服务
  2. 给地图添加监听点击事件
  3. 构造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)})
})          

http://www.ppmy.cn/ops/27382.html

相关文章

洛谷 P5854:【模板】笛卡尔树

【题目来源】https://www.luogu.com.cn/problem/P5854【题目描述】 给定一个 1∼n 的排列 p,构建其笛卡尔树。 即构建一棵二叉树,满足: 1.每个节点的编号满足二叉搜索树的性质。← 优先级 pri 满足二叉搜索树(BST)的性…

nginx connect 异常

1.nginx反向代理 # 测试server {listen 80;server_name local.dongpeng.com;location / {# proxy_pass http://192.168.10.131:9394;proxy_pass http://127.0.0.1:9394;}} 2.出现异常 2024/05/01 17:53:41 [error] 6#6: *1 connect() failed (111: Connection refused…

openGauss学习笔记-272 openGauss性能调优-实际调优案例01-调整查询重写GUC参数rewrite_rule

文章目录 openGauss学习笔记-272 openGauss性能调优-实际调优案例01-调整查询重写GUC参数rewrite_rule272.1 目标列子查询提升参数intargetlist272.2 提升无agg的子查询uniquecheck openGauss学习笔记-272 openGauss性能调优-实际调优案例01-调整查询重写GUC参数rewrite_rule …

【PG-2】PostgreSQL存储管理器

2. PostgreSQL存储管理器 src/backend/storage (base) torrestorresの机革:~/codes/postgresql-16.2/src/backend/storage$ ls Makefile buffer file freespace ipc large_object lmgr meson.build objfiles.txt page smgr sync存储管理器—smgr 通用存储管理器 …

Ubuntu 根目录扩容

环境 物理机:MacBook Air M2 Sonoma 14.4.1 虚拟机:VMware Fusion Player 13.5.0 镜像:Jammy Desktop ARM64 步骤 删除所有快照,关闭镜像,在 vm 上找到该镜像的硬盘设置,进行扩容; 开启镜像&am…

【Qt之·路径获取】

系列文章目录 文章目录 前言一、使用相对路径1.1 相对路径1.2 绝对路径1.3 QDir类1.4 QFileDialog对话框 二、示例2.1 示例一 总结 前言 在进行Qt开发时,经常需要获取文件的路径,如图片、音频、配置文件等。路径的获取可以通过直接指定绝对路径或者使用相…

RuoYi-Vue-Plus (SPEL 表达式)

RuoYi-Vue-Plus 中SPEL使用 DataScopeType 枚举类中: /*** 部门数据权限*/DEPT("3", " #{#deptName} #{#user.deptId} ", " 1 0 "), PlusDataPermissionHandler 拦截器中定义了解析器: buildDataFilter 方法中根据注解的…

TCP/IP和HTTP协议

TCP/IP OSI 七层模型在提出时的出发点是基于标准化的考虑,而没有考虑到具体的市场需求,使得该模型结构复杂,部分功能冗余,因而完全实现 OSI 参考模型的系统不多。而 TCP/IP 参考模型直接面向市场需求,实现起来也比较…