leaflet 结合 geoserver 实现地图空间查询(附源码下载)
2023-09-11 14:19:51 时间
前言
leaflet 入门开发系列环境知识点了解:
- leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等
- leaflet 在线例子
- leaflet 插件,leaflet 的插件库,非常有用
内容概览
leaflet 结合 geoserver 实现地图空间查询
源代码 demo 下载
效果图如下:
本篇主要是 leaflet 通过调用 geoserver 发布的地图服务 WFS,来达到地图空间查询的目的。具体是构造rest服务 url 参数形式来请求 WFS 服务,获取到地图数据源,然后利用 leaflet 来叠加显示在地图上展示。
利用 leaflet 插件绘制图形工具draw的回调函数获取绘制图形,作为空间查询过滤条件,绘制工具的 github 地址:
https://github.com/geoman-io/leaflet-geoman
//绘制工具draw map.pm.addControls({ position: 'topleft', drawMarker:false, drawCircleMarker:false, drawCircle: false, drawPolyline:false, editMode:false, dragMode:false, cutPolygon:false, }); //绘制图形之前 map.on('pm:drawstart', ({ workingLayer }) => { clearGeojsonLayer(); }); map.on('pm:create', e => { //console.log(e); var polygon = null; if(e.layer && e.layer._latlngs && e.layer._latlngs.length>0){ //构造polygon polygon = ''; var data = e.layer._latlngs[0]; for(var i=0;i<data.length;i++){ var item = data[i]; polygon += item.lng + ',' + item.lat + ' ' ; } polygon += data[0].lng + ',' + data[0].lat; } console.log('polygon',polygon); if(polygon){ queryByPolygon(polygon,'bs_spot_t',callbackLastQueryWFSService); } });
- 地图空间查询函数
/*空间查询图层 *@method queryByPolygon *@param polygon 空间范围 *@param typeName 图层名称 *@return null */ function queryByPolygon(polygon, typeName, callback){ var filter = '<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">'; filter += '<Intersects>'; filter += '<PropertyName>geom</PropertyName>'; filter += '<gml:Polygon>'; filter += '<gml:outerBoundaryIs>'; filter += '<gml:LinearRing>'; filter += '<gml:coordinates>' + polygon + '</gml:coordinates>'; filter += '</gml:LinearRing>'; filter += '</gml:outerBoundaryIs>'; filter += '</gml:Polygon>'; filter += '</Intersects>'; filter += '</Filter>'; var urlString = geoserverUrl + '/ows'; var param = { service: 'WFS', version: '1.0.0', request: 'GetFeature', typeName: typeName, outputFormat: 'application/json', filter: filter }; ……
完整demo源码见小专栏文章尾部:GIS之家leaflet小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
相关文章
- ABP源码分析二十八:ABP.MemoryDB
- maven 下载源码downloadsources
- 【原创】Windows下使用 Eclipse 管理 RabbitMQ 源码之问题解决
- hbase源码系列(十三)缓存机制MemStore与Block Cache
- MFC Windows 程序设计[222]之对话框工具状态栏(附源码)
- ThreadX全家桶源码和文档下载,含GUI设计器,GUI,文件系统,网络协议栈,USB协议栈等(2020-05-26)
- Spring1:Spring简介、环境搭建、源码下载及导入MyEclipse
- SSO单点登录系列1:cas客户端源码分析cas-client-java-2.1.1.jar
- ZZNUOJ_C语言1135:算菜价(附完整源码)
- 【nodejs原理&源码赏析(7)】【译】Node.js中的事件循环,定时器和process.nextTick
- 【Linux 内核 内存管理】引导内存分配器 bootmem ② ( bootmem_data 结构体源码分析 | bootmem_data 与内存节点 pglist_data 的关联 )
- 【Android 安装包优化】WebP 应用 ( libwebp 源码下载 | Android.mk 和 Application.mk 构建脚本修改 | libwebp 函数库编译 )
- 雄踞AppStore榜首的游戏<别踩到白块儿>源码分析和下载(一)
- 基于Python的scrapy框架的广州天气爬虫源码下载
- JAVA虚拟机源码学习笔记之二
- 基于Socket通讯(C#)和WebSocket协议(net)编写的两种聊天功能(文末附源码下载地址)
- 动作识别0-06:mmaction2(SlowFast)-源码无死角解析(2)-训练架构总览-1
- 题目:javaWeb药房药品管理系统(附源码链接免费下载)
- AppArmor零知识学习三、源码介绍与下载
- platform_get_resource=NULL内核源码分析
- (2)Blender源码分析之OpenGL基本例子