如何在 Leaflet map 上显示来自 Geoserver 的矢量点

Question

我想创建交互式 map。 我在 PostgresSQL 中有与 Geoserver 连接的测试数据库。 现在我可以使用 WMS 显示我的点，但这种方式很慢，因为我的测试集只包含 30 个矢量点，并且每个缩放级别都有缓冲。 我计划有几千个ponts，所以我需要更好的方法。

我尝试使用 WFS 并加载 GeoJSON 数据，但它不起作用 - 我尝试了一些我发现的方法。

稍后我想显示基于日期的点。

我使用 pgAdmin 4 和 Geoserver 2.15.1。

我使用 WMS 的代码（有效）：

<!DOCTYPE html>
<html>
<head>

    <title> Mapa pielgrzymek - TEST </title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-timedimension@1.1.0/dist/leaflet.timedimension.control.min.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/iso8601-js-period@0.2.1/iso8601.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/leaflet-timedimension@1.1.0/dist/leaflet.timedimension.min.js"></script>

</head>
<body>

<div id="mapid" style="width: 1200px; height: 700px;"></div>
<script>

    var map = L.map('mapid', {
    timeDimension: true,
    timeDimensionOptions: {
        timeInterval: "1979-06-02/1979-06-11",
        period: "PT1H",
        loadingTimeout: 0,
        currentTime: new Date("1979-06-02").getTime()
    },
    timeDimensionControl: true,
    timeDimensionControlOptions: {
        loopButton: true,
        maxSpeed: 20,
        speedStep: 1,
        autoPlay: true,
        playerOptions: {
          transitionTime: 10,
          loop: true,
          startOver: true
        }
    },
    }).setView([51.89815737376817, 18.984375], 6);

    L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
        //subdomains: 'abcd',
    }).addTo(map);

    var travels = L.tileLayer.wms("http://localhost:8080/geoserver/pilgrimages/wms?", {
        layers: 'pilgrimages:travels',
        format: 'image/png',
        transparent: true, 
    });

    var travelstime = L.timeDimension.layer.wms(travels).addTo(map);


</script>

</body>
</html>