79.（leaflet篇）leaflet使用CQL过滤Geoserver发布的图层.rar

共13个文件

js：6个

png：5个

css：1个

版权申诉

leaflet

geoserver

5星 · 超过95%的资源 18 浏览量 2022-03-31 09:27:24 上传评论收藏 194KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

79.（leaflet篇）leaflet使用CQL过滤Geoserver发布的图层.rar （13个子文件）

map

79.（leaflet篇）leaflet使用CQL过滤Geoserver发布的图层.html 3KB

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

<!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='addWMSLayer();' value="叠加土地资源" style='position:absolute;left:50px;top:50px;background: blue;color:white;z-index: 9999;font-size: 24px'/> <input type="button" onclick='removeWMSLayer();' value="删除土地资源" style='position:absolute;left:50px;top:100px;background: blue;color:white;z-index: 9999;font-size: 24px'/> <input type="button" onclick='addWMSLayerFilter();' value="叠加土地资源（过滤type='construction' or type='residential'）" 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.5823974609375,114.06692504882812]; map.setView(center_point, 11); map.on("click",function(e){ console.log(e.latlng); }) //叠加geoserver发布的图层 var tudiLayer=null; //过滤数据 function addWMSLayerFilter(){ removeWMSLayer(); console.log("叠加geoserver发布的图层1",); tudiLayer =L.tileLayer.wms("http://10.254.10.38:8078/geoserver/shanwei/wms", { layers: 'shanwei:ground', format: "image/png", transparent: true, maxZoom: 20, minZoom: 11, cql_filter:"type='construction' or type='residential'" }); tudiLayer.addTo(map); } //叠加全部数据 function addWMSLayer(){ removeWMSLayer(); console.log("叠加geoserver发布的图层1",); tudiLayer =L.tileLayer.wms("http://10.254.10.38:8078/geoserver/shanwei/wms", { layers: 'shanwei:ground', format: "image/png", transparent: true, maxZoom: 20, minZoom: 11, }); tudiLayer.addTo(map); } function removeWMSLayer(){ if(tudiLayer!=null){ map.removeLayer(tudiLayer); tudiLayer=null; } } </script> </body> </html>

评论收藏

内容反馈

版权申诉