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

共13个文件

js：6个

png：5个

css：1个

版权申诉

leaflet

geoserver

postgis

postgres

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

资源推荐

资源详情

资源评论

收起资源包目录

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>

评论收藏

内容反馈

版权申诉