当前位置：首页 > news >正文

leaflet加载GeoServer的WMS地图服务.md

news 来源：原创 2024/9/24 0:38:45

leaflet加载GeoServer的WMS地图服务，该示例涵盖了涵盖了 “WMS图层加载、WMS图层动态投影、图层index顺序调整、图层添加、高德地图、腾讯地图OpenStreet地图”，WMS图层加载看代码中标注的核心代码部分即可。
在这里插入图片描述

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>leaflet Demo 2</title><style>#map {height: 900px;}</style><!-- css文件 --><link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/><!-- js文件 --><script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
</head><body>
<div id="map"></div>
<script>/*涵盖了WMS图层动态投影、图层index顺序调整、图层添加、高德地图、腾讯地图OpenStreet地图*/var map = new L.Map('map', {//不写crs参数默认就是3857坐标了// crs: L.CRS.EPSG4326,center: new L.LatLng(39.86, 116.45),zoom: 4,maxZoom: 18,zoomControl: false});/*---------------------次要代码，增加背景地图，可删除,start-------------------------*/L.control.zoom({zoomInTitle: "放大", zoomOutTitle: "缩小"}).addTo(map)var baseLayers = {"高德影像": L.tileLayer('https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {maxZoom: 18}).addTo(map),"OSM": L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18}),"高德矢量": L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', {maxZoom: 18}),"腾讯地图": L.tileLayer('http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0', {maxZoom: 18}),};var layerControl = L.control.layers(baseLayers, {}, {position: 'topleft',collapsed: true}).addTo(map);/*---------------------次要代码，增加背景地图，可删除,end-------------------------*//*---------------------核心代码，加载WMS地图,start-------------------------*/// 加载WMS。地址中china表示工作区的名称。var wmsLayer = L.tileLayer.wms("http://localhost:8081/geoserver/china/wms?", {layers: '中国各省',// 要加载的图层名format: 'image/png',//返回的数据格式transparent: true,opacity: 0.6,//图层透明度设置，设为1时不透明。keepBuffer: 6,//平移地图时保留4行4列缓存不从div中卸载，以便平移过来后地图还在，默认值是2。zIndex: 10,//设置图层顺序的第一种方法//这里要设置WMS的坐标系哦，可动态投影成map里的crs坐标系crs: L.CRS.EPSG4326,//可省略该参数，一般取geoserver网格集里的坐标系。tileSize: 256,//默认就是256，可省略。maxNativeZoom: 15,//基于15级继续无极放大，该值一般等于maxZoom,无极放大的最大级数取决于map的maxZoom值。// styles: '',//geoserver里的图层样式，可省略该参数。// minZoom:0,// maxZoom:18,// bounds:[最小纬度,最小经度,最大纬度,最大经度],//超过该范围的地图就不请求了。// subdomains:多子域设置。后端部署多子域，摆脱大屏环境Chrome浏览器对并发请求的限制。});//设置图层顺序有3种方法：方法1直接在上面设置图层的zIndex属性，方法2如下，方法3见下面的注释。wmsLayer.setZIndex(10);//设置大一点的图层索引值，避免图层被其他图层遮盖。也可以通过pane方式调整索引https://blog.csdn.net/qq_37550440/article/details/130154128wmsLayer.addTo(map);// map.addLayer(wmsLayer);/*---------------------核心代码，加载WMS地图,end-------------------------*/
</script>
</body>
</html>