Как отобразить векторные точки из Geoserver на карте Leaflet - PullRequest
Новая
       42

Как отобразить векторные точки из Geoserver на карте Leaflet

0 голосов
/ 10 ноября 2019

Я хочу создать интерактивную карту. У меня есть тестовая база данных в PostgresSQL, которая связана с Geoserver. Теперь я могу отображать свои точки, используя WMS, но этот путь медленный, потому что мой тестовый набор содержит только 30 векторных точек, и они буферизируются на каждом уровне масштабирования. Я планирую иметь несколько тысяч понтов, поэтому мне нужен лучший способ.

Я пытался использовать 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>
...