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/[email protected]/dist/leaflet.css"/>
<!-- js文件 -->
<script src="https://unpkg.com/[email protected]/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/130154128
wmsLayer.addTo(map);
// map.addLayer(wmsLayer);
/*---------------------核心代码，加载WMS地图,end-------------------------*/
</script>
</body>
</html>