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

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

article 2024/12/22 13:36:20

安装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