80.（leaflet篇）leaflet调用geoserver发布的postgis数据图层.zip

共13个文件

js：6个

png：5个

css：1个

版权申诉

leaflet

geoserver

postgis

postgres

5星 · 超过95%的资源 100 浏览量 2022-04-07 09:05:57 上传评论 1 收藏 204KB ZIP 举报

在本教程中，我们将深入探讨如何使用Leaflet.js库调用通过Geoserver发布的PostGIS数据库中的地理空间数据，创建地图图层。我们来理解每个组件的作用： 1. **Leaflet.js**: Leaflet是一个轻量级的JavaScript库，用于创建交互式地图。它易于学习，具有丰富的API和插件支持，适用于网页开发。 2. **Geoserver**: Geoserver是一个开源的GIS服务器，它可以发布、管理和操作地理空间数据。它支持多种数据源，包括PostGIS，且能通过WMS（Web Map Service）和WFS（Web Feature Service）等OGC标准进行数据服务。 3. **PostGIS**: PostGIS是PostgreSQL数据库的一个扩展，添加了对地理和矢量几何对象的支持。它使得在关系数据库中存储、处理和分析地理空间数据成为可能。 4. **PostgreSQL**: PostgreSQL是一个强大的开源关系型数据库系统，支持复杂的数据类型，包括地理空间数据。现在，让我们逐步了解如何将这些组件结合在一起： **步骤1：设置Geoserver** 你需要安装并配置Geoserver，确保它与PostgreSQL/PostGIS数据库连接。在Geoserver管理界面，创建一个新的数据存储，指向你的PostGIS数据库，并导入包含地理空间数据的表。 **步骤2：发布图层** 在Geoserver中，选择刚创建的数据存储，然后发布一个或多个图层。发布后，Geoserver会生成一个WMS URL，这个URL将用于从客户端（如Leaflet地图）请求地图图像。 **步骤3：创建Leaflet地图** 在HTML文件中引入Leaflet库，并设置一个div作为地图容器。初始化地图时，指定初始中心点和缩放级别。 ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> </head> <body> <div id="map" style="height: 600px; width: 100%;"></div> <script> var map = L.map('map').setView([latitude, longitude], zoom); </script> </body> </html> ``` **步骤4：添加图层** 使用WMS URL，通过`L.tileLayer`创建一个图层，并将其添加到地图上。 ```javascript var wmsLayer = L.tileLayer.wms('http://your.geoserver.url/wms', { layers: 'your_layer_name', format: 'image/png', transparent: true, version: '1.1.1', attribution: 'Your Attribution' }); wmsLayer.addTo(map); ``` 这里的`your_layer_name`应替换为在Geoserver中发布的图层名。 **步骤5：交互和定制** 根据需求，你可以添加更多的功能，如点击事件监听、图层控制、弹出窗口等。Leaflet提供了丰富的API和插件，可以根据需要进行扩展。通过上述步骤，你将能够成功地在Leaflet地图上展示由Geoserver发布的PostGIS数据。在实际应用中，可能还需要考虑性能优化、图层叠加、数据更新等问题。如果你遇到任何问题，可以参考提供的博客链接或直接向博主咨询。记住，持续学习和实践是掌握这些技术的关键。

资源推荐

资源详情

资源评论

收起资源包目录

80.（leaflet篇）leaflet调用geoserver发布的postgis数据图层.zip （13个子文件）

map

lib

proj4

proj4.js 72KB

proj4leaflet.js 7KB

proj4-compressed.js 72KB

axios.min.js 13KB

leaflet

images

marker-icon-2x.png 4KB

marker-icon.png 2KB

layers.png 1KB

layers-2x.png 3KB

marker-shadow.png 797B

leaflet.js 136KB

leaflet-src.js 388KB

leaflet.css 13KB

80.（leaflet篇）leaflet调用geoserver发布的postgis数据图层.html 3KB

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="referrer" content="no-referrer"/> <title>Historic Topographic Maps</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />  <link rel="stylesheet" href="lib/leaflet/leaflet.css" /> <style> body { margin:0; padding:0; } #map { position: absolute; top:0; bottom:0; right:0; left:0; } </style> <script src="lib/leaflet/leaflet-src.js"></script> <script src="lib/proj4/proj4.js"></script> <script src="lib/proj4/proj4leaflet.js"></script> <script src="lib/axios.min.js"></script> </head> <body> <input type="button" onclick='addWMSLayer441500();' value="叠加pid为441500数据图层" style='position:absolute;left:50px;top:50px;background: blue;color:white;z-index: 9999;font-size: 24px'/> <input type="button" onclick='addWMSLayer441581();' value="叠加pid为441581数据图层" style='position:absolute;left:50px;top:100px;background: blue;color:white;z-index: 9999;font-size: 24px'/> <input type="button" onclick='removeWMSLayer();' value="删除土地资源" style='position:absolute;left:50px;top:150px;background: blue;color:white;z-index: 9999;font-size: 24px'/> <div id="map"></div> <script> /** */ var map = L.map('map'); //高德、google图层，地图服务地址可替换成爬取离线部署的地图服务，如：http://106.53.28.207/baidu_sl/{z}/{x}/{y}.png //高德URL：http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z} //openstreetmap：https://tile.openstreetmap.org/{z}/{x}/{y}.png //以上地址如果不能访问到新版地图URL，可通过访问新版地图，通过F12-->network获取 new L.TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 20, minZoom: 1, attribution: 'ⓒ 2012 Daum' }).addTo(map); var center_point=[22.967244600986852,115.53634643554689]; map.setView(center_point, 10); map.on("click",function(e){ console.log(e.latlng); }) function addWMSLayer441500(){ addWMSLayer("441500"); } function addWMSLayer441581(){ addWMSLayer("441581"); } //叠加geoserver发布的图层 var tudiLayer=null; //过滤数据 function addWMSLayer(pid){ removeWMSLayer(); //var strTemp="x:"+x+";y:"+y+";level:"+level; var strTemp="pid:"+pid; console.log("叠加geoserver发布的图层1",); tudiLayer =L.tileLayer.wms("http://10.254.10.38:8078/geoserver/shanwei/wms", { layers: 'shanwei:findzzjgbypid', format: "image/png", transparent: true, maxZoom: 20, minZoom: 1, viewparams:strTemp }); tudiLayer.addTo(map); } function removeWMSLayer(){ if(tudiLayer!=null){ map.removeLayer(tudiLayer); tudiLayer=null; } } </script> </body> </html>

评论收藏

内容反馈

版权申诉