leaflet结合geoserver实现地图属性查询.zip_leaflet空间查询,leaflet空间查询资源-CSDN下载

共7个文件

js：5个

html：1个

css：1个

版权申诉

201 浏览量 2024-06-19 16:39:52 上传评论收藏 157KB ZIP 举报

在GIS（地理信息系统）领域，Leaflet和GeoServer是两个重要的工具。Leaflet是一个轻量级的JavaScript库，用于创建交互式地图应用，而GeoServer则是一个开源的服务器软件，用于发布和操作地理空间数据。本教程将详细介绍如何将两者结合，实现地图属性查询的功能。 1. **Leaflet基础知识** - Leaflet是Web GIS开发的首选库，它提供了丰富的地图操作功能，如缩放、平移、图层控制等。 - Leaflet的核心概念包括地图（Map）、图层（Layer）、控件（Control）等，这些元素共同构建了地图应用的基础框架。 2. **GeoServer简介** - GeoServer是一个基于Java的OGC（开放地理空间联盟）标准服务器，能够读取多种GIS数据格式，并通过WMS（Web Map Service）和WFS（Web Feature Service）等服务进行数据发布和查询。 - GeoServer支持的数据格式包括Shapefile、PostGIS数据库、GeoTIFF等。 3. **地图属性查询的原理** - 地图属性查询通常基于WMS和WFS服务。WMS用于获取地图图像，而WFS用于获取地理特征的属性信息。 - 用户点击地图上的某个点或区域时，Leaflet可以通过坐标反解找到对应的地理特征，然后向GeoServer发送WFS请求，获取该特征的属性信息。 4. **实现步骤** - **配置GeoServer**：首先需要在GeoServer中加载数据，设置工作空间、数据存储，并发布为WMS和WFS服务。 - **创建Leaflet地图**：在HTML文件中引入Leaflet库，初始化地图，设置中心点和缩放级别。 - **添加WMS图层**：使用L.tileLayer与GeoServer的WMS服务接口连接，将地图数据叠加到Leaflet地图上。 - **监听地图点击事件**：使用Leaflet的`map.on('click', function(event) {...})`监听地图点击事件，获取点击位置的坐标。 - **发送WFS请求**：根据点击的坐标，构造WFS GetFeature请求，向GeoServer查询相关属性信息。 - **解析并显示结果**：收到GeoServer的响应后，解析XML或GeoJSON数据，将属性信息展示给用户。 5. **示例代码** - 创建地图： ```javascript var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' }).addTo(map); ``` - 添加点击事件和WFS查询： ```javascript map.on('click', function(event) { var coord = event.latlng; var wfsUrl = 'http://your.geoserver.com/wfs?service=WFS&version=1.1.0&request=GetFeature&typeName=your_workspace:your_layer&outputFormat=json&CQL_Filter=INTERSECTS(geom,POLYGON((-0.09 ' + coord.lat + ', 51.505 ' + coord.lng + ', ' + coord.lng + ' ' + coord.lat + ', -0.09 ' + coord.lng + ', -0.09 ' + coord.lat + ')))'; fetch(wfsUrl) .then(response => response.json()) .then(data => displayResults(data)); }); function displayResults(data) { // 解析并显示结果 } ``` 6. **注意事项** - 考虑性能：过多的WFS请求可能对服务器造成压力，可以考虑使用缓存或分页策略。 - 安全性：确保WFS服务只返回必要的属性信息，避免敏感数据泄露。通过以上步骤和代码示例，你可以理解并实现Leaflet与GeoServer结合进行地图属性查询的功能。这个过程涉及到GIS服务的发布、地图交互以及地理信息的查询，是Web GIS开发中的基础操作。

资源推荐

资源详情

资源评论

收起资源包目录

leaflet结合geoserver实现地图属性查询.zip （7个子文件）

leaflet结合geoserver实现地图属性查询

lib

proj4-compressed.js 72KB

leaflet

leaflet-src.js 217KB

leaflet.css 13KB

leaflet.js 137KB

proj4leaflet.js 8KB

proj4.js 155KB

index.html 4KB

<!DOCTYPE html> <html> <head> <title>leaflet结合geoserver实现地图属性查询</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="lib/leaflet/leaflet.css"> <style> html, body, #map { height: 100%; padding: 0; margin: 0; } </style> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script src="lib/leaflet/leaflet.js"></script>  <script src="lib/proj4.js"></script> <script src="lib/proj4leaflet.js"></script> </head> <body> <div id="map"></div> <div style="position:absolute;top:50px;left:60px;z-index:999;"> <input type="text" id="textName" placeholder="黎贝岭安卓大厦" value="黎贝岭安卓大厦" > <button type="button" id="research_btn">搜索</button> </div> <script> //绘制geojson图层样式 var geoJsonStyle = { color: '#e6d933', weight: 3, opacity: 0.8, fillColor: '#e6d933', fillOpacity: 0.1 }; //绘制geojson图层高亮样式 var geoJsonHLightStyle = { color: '#33CCFF', weight: 3, opacity: 1, fillColor: '#33CCFF', fillOpacity: 0 }; var geoserverUrl = 'http://39.108.127.92:8080/geoserver/WebGIS'; var geojsonLayer = L.Proj.geoJson(null, { style: geoJsonStyle }); var map = L.map('map',{layers: [geojsonLayer]}); //L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map); L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}').addTo(map); //监听图层鼠标事件 geojsonLayer.on('mouseover', onMoveoverGeojsonLayer); geojsonLayer.on('mouseout', onMoveoutGeojsonLayer); map.setView(L.latLng(37.550339, 104.114129), 4); //设置缩放级别及中心点 $("#research_btn").click(function(){ var keyword = $("#textName").val(); queryByProperty(keyword,'estate_name','tb_real_estate',callbackLastQueryWFSService); }); /*属性查询图层 *@method queryByProperty *@param propertyValue 属性值 *@param propertyName 属性名称 *@param typeName 图层名称 *@return null */ function queryByProperty(propertyValue, propertyName, typeName, callback){ var filter = '<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">'; filter += '<PropertyIsLike wildCard="*" singleChar="#" escapeChar="!">'; filter += '<PropertyName>' + propertyName + '</PropertyName>'; filter += '<Literal>*'+propertyValue+'*</Literal>'; filter += '</PropertyIsLike>'; filter += '</Filter>'; var urlString = geoserverUrl + '/ows'; var param = { service: 'WFS', version: '1.0.0', request: 'GetFeature', typeName: typeName, outputFormat: 'application/json', filter: filter }; var geojsonUrl = urlString + L.Util.getParamString(param, urlString); $.ajax({ url: geojsonUrl, async: true, type:'GET', dataType: 'json', success(result) { callback(result); }, error(err) { console.log(err); } }) } /* * 图层属性查询回调函数 */ function callbackLastQueryWFSService(data){ console.log('data',data); if (data && data.features.length > 0) { loadGeojsonLayer(data); var bounds = geojsonLayer.getBounds(); map.fitBounds(bounds); } } /* * 绘制图形函数 */ function loadGeojsonLayer(geojson){ geojsonLayer.addData(geojson); } /* * 清空绘制图形函数 */ function clearGeojsonLayer(){ if (geojsonLayer) { geojsonLayer.clearLayers(); } } function onMoveoverGeojsonLayer(e){ //console.log('e',e); e.layer.setStyle(geoJsonHLightStyle); e.layer.bringToFront(); //e.layer.feature.properties e.layer.unbindPopup(); var elements = '房屋名称:'+e.layer.feature.properties.estate_name+'</br>房屋编号:'+e.layer.feature.properties.estate_num; e.layer.bindPopup(elements).openPopup(e.latlng); } function onMoveoutGeojsonLayer(e){ e.layer.setStyle(geoJsonStyle); e.layer.closePopup(); } </script> </body> </html>

评论收藏

内容反馈

版权申诉