leaflet 显示自己geoserver发布的中国地图

安装vscode

安装通义灵码

问题：用leaflet显示一个wms地图

修改下代码，结果如下：

例子代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Leaflet WMS Example</title><!-- 引入leaflet CSS --><link rel="stylesheet" href="leaflet/leaflet.css" integrity="" crossorigin=""/><!-- 引入leaflet JavaScript库 --><script src="leaflet/leaflet.js" integrity="" crossorigin=""></script><!-- 自定义marker图标，如果你需要的话 --><style>.custom-marker {background-image: url('@/assets/images/marker-icon.png');/* 设置其他样式 */}</style>
</head>
<body><div id="map" style="height: 600px; width: 100%;"></div><script>// 初始化地图var map = L.map('map').setView([51.505, -0.09], 13); // 示例坐标，可以根据实际需求更改//http://localhost:8080/geoserver/mychina/wms?service=WMS&version=1.1.0&request=GetMap&layers=mychina%3A2023cp936&bbox=73.50114210012788%2C3.837901789735838%2C135.08851148002088%2C53.56090105044319&width=768&height=620&srs=EPSG%3A4326&styles=&format=image%2Fpng// 添加WMS图层var wmsLayer = L.tileLayer.wms('http://localhost/geoserver/mychina/wms', {layers: 'mychina:2023cp936xian',format: 'image/png',transparent: true});// 将WMS图层添加到地图上wmsLayer.addTo(map);</script>
</body>
</html>

代码优化：

下载 leaflet 压缩包，并解压缩到 nginx html demo目录下面

Download - Leaflet - a JavaScript library for interactive maps