Данные GeoJSON не отображаются в листовке с плагинами управления слоями - PullRequest
Новая
       5

Данные GeoJSON не отображаются в листовке с плагинами управления слоями

0 голосов
/ 13 февраля 2019

Я пользуюсь листовкой и у меня возникают проблемы с отображением данных из файлов GeoJSON.

У меня нет опыта программирования, поэтому я использовал руководства с сайта разработчика leafletjs и нашел ответы на многие вопросы здесь, наstackoverflow.com.

При первых попытках я использовал библиотеки листовок и jquery.Все работало, код выглядел так: 

<html>

<head>
    <meta charset="utf-8" />
    <title>A simple map</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="http://127.0.0.1:9009/leaflet.css" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script src="http://127.0.0.1:9009/jquery.min.js"></script>
    <script src="http://127.0.0.1:9009/leaflet.js"></script>
    <script>

        var buildings = $.ajax({
            url: "http://127.0.0.1:9009/json/build1.geojson",
            dataType: "json",
            success: console.log("JSON file build1.geojson successfully loaded."),
            error: function(xhr) {
                alert(xhr.statusText)
            }
        });

        var vesPs = $.ajax({
            url: "http://127.0.0.1:9009/json/substVes1.geojson",
            dataType: "json",
            success: console.log("JSON file substVes1.geojson successfully loaded."),
            error: function(xhr) {
                alert(xhr.statusText)
            }
        });

        $.when(buildings,vesPs).done(function() {

            var REM = L.icon({
                iconUrl: 'http://127.0.0.1:9009/icons/REM.svg',
                iconSize: [32, 32],
                iconAnchor: [16, 16],
                popupAnchor: [0, -12]
            });
            var VEM = L.icon({
                iconUrl: 'http://127.0.0.1:9009/icons/VEM.svg',
                iconSize: [32, 32],
                iconAnchor: [16, 16],
                popupAnchor: [0, -12]
            });
            var Other = L.icon({
                iconUrl: 'http://127.0.0.1:9009/icons/Other.svg',
                iconSize: [32, 32],
                iconAnchor: [16, 16],
                popupAnchor: [0, -12]
            });

            var PS150_35_10 = L.icon({
                iconUrl: 'http://127.0.0.1:9009/icons/PS/PS150_35_10.svg',
                iconSize: [32, 32],
                iconAnchor: [16, 16],
                popupAnchor: [0, -16]
            });

            var buildings1 = L.layerGroup();
            var vesPs1 = L.layerGroup();

            var basemap1 = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
                subdomains: 'abcd',
                maxZoom: 19
            });

            var contMap1 = L.tileLayer.wms('http://localhost:8080/geoserver/Test002/ows?', {
                layers: 'Test002:DP_all',
                format: 'image/png',
                transparent: true
            });

            var map = L.map('map', {
                center: [48.32, 35.02],
                zoomSnap: 0.1,
                zoom: 8.5,
                layers: [basemap1, vesPs1]
            });

            var buildingsStyle

            function buildStyle(feature, layer) {
                layer.bindPopup(feature.properties.Sh_Name);
            };
            function vesPsStyle(feature, layer) {
                layer.bindPopup(feature.properties.Name);
            };

            L.geoJson(buildings.responseJSON, {
                style: buildingsStyle,
                onEachFeature: buildStyle,
                pointToLayer: function(feature, latlng) {
                    switch (feature.properties.Build_type) {
                        case "REM":
                            return L.marker(latlng, {icon: REM});
                        case "VEM":
                            return L.marker(latlng, {icon: VEM});
                        case "Other":
                            return L.marker(latlng, {icon: Other});
                        default:
                            return L.circleMarker(latlng, {color: "#000"});
                    }
                }
            }).addTo(buildings1);

            L.geoJson(vesPs.responseJSON, {
                style: buildingsStyle,
                onEachFeature: buildStyle,
                pointToLayer: function(feature, latlng) {
                    switch (feature.properties.Voltage) {
                        case "150/35/10кВ":
                            return L.marker(latlng, {icon: PS150_35_10});
                        default:
                            return L.circleMarker(latlng, {color: "#000"});
                    }
                }
            }).addTo(vesPs1);

            var baseLayers = {
                "Базовая карта": basemap1,
                "Контурная карта": contMap1
            };

            var overlays = {
                "Здания и сооружения": buildings1,
                "Подстанции ВЭС": vesPs1
            };

            L.control.layers(baseLayers, overlays).addTo(map);

        });
    </script>
</body>

</html>

Но потом я решил использовать плагины для группировки слоев.Я пытался использовать это: https://github.com/ismyrnow/leaflet-groupedlayercontrol и https://github.com/stefanocudini/leaflet-panel-layers

Когда я допускал ошибки в коде и что-то не работало, мне помогала консоль в браузере, что указывало на ошибки.

Теперь в консоли нет ошибок, но данные GeoJSON не отображаются на карте.Где я ошибся?

Вот один пример: 

<html>
<head>
    <title>My test Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://127.0.0.1:9009/newtest11/leaflet.css" />
    <link rel="stylesheet" href="http://127.0.0.1:9009/newtest11/leaflet-panel-layers.css" />

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>

</head>

<body>
<div id="map"></div>
<script src="http://127.0.0.1:9009/newtest11/leaflet.js"></script>
<script src="http://127.0.0.1:9009/newtest11/leaflet-panel-layers.js"></script>
<script src="http://127.0.0.1:9009/newtest11/jquery.min.js"></script>
<script>
    var map = L.map('map', {
        zoom: 8.5,
        zoomsnap: 0.1,
        center: L.latLng([48.32, 35.02]),
        attributionControl: false,
        maxBounds: L.latLngBounds([[49.37,32.64],[47.47,37.16]]).pad(0.5)
    }),

    osmLayer = new L.TileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png');

    map.addLayer(osmLayer);

    var baseLayers = [
        {
            name: "Open Street Map",
            layer: osmLayer
        },
        {
            name: "Контурная карта",
            layer: L.tileLayer.wms('http://localhost:8080/geoserver/Test002/ows?', {
                    layers: 'Test002:DP_all',
                    format: 'image/png',
                    transparent: true
            })
        }
    ];

    var buildings = $.ajax({
            url: "http://127.0.0.1:9009/json/build1.geojson",
            dataType: "json",
            success: console.log("JSON file build1.geojson successfully loaded."),
            error: function(xhr) {
                alert(xhr.statusText)
            }
    });

    var REM = L.icon({
        iconUrl: 'http://127.0.0.1:9009/icons/REM.svg',
        iconSize: [32, 32],
        iconAnchor: [16, 16],
        popupAnchor: [0, -12]
    });
    var VEM = L.icon({
        iconUrl: 'http://127.0.0.1:9009/icons/VEM.svg',
        iconSize: [32, 32],
        iconAnchor: [16, 16],
        popupAnchor: [0, -12]
    });
    var Other = L.icon({
        iconUrl: 'http://127.0.0.1:9009/icons/Other.svg',
        iconSize: [32, 32],
        iconAnchor: [16, 16],
        popupAnchor: [0, -12]
    });

    var buildings1 = new L.LayerGroup();
    var buildingsStyle;

    function buildStyle(feature, layer) {
        layer.bindPopup(feature.properties.Sh_Name);
    };

    var geojsonlayer = new L.geoJson(buildings.responseJSON, {
        style: buildingsStyle,
        onEachFeature: buildStyle,
        pointToLayer: function(feature, latlng) {
            switch (feature.properties.Build_type) {
                case "REM":
                    return L.marker(latlng, {icon: REM});
                case "VEM":
                    return L.marker(latlng, {icon: VEM});
                case "Other":
                    return L.marker(latlng, {icon: Other});
                default:
                    return L.circleMarker(latlng, {color: "#000"});
            }
        }
    });

    var overLayers = [
        {
            group: "GeoJSON Layers",
            layers: [
                {
                    active: true,
                    name: "Drinking Water",
                    layer: geojsonlayer
                },
            ]
        }
    ];

    var panelLayers = new L.Control.PanelLayers(baseLayers, overLayers, {
    //compact: true,
    //collapsed: true,
    collapsibleGroups: true
    });

    map.addControl(panelLayers);

</script>

</body>
</html>

При использовании другого плагина ситуация такая же - флажок присутствует, работает, нетошибки в консоли, но данные не видны.

В примерах я видел, что отображаются данные GeoJSON.Возможно, проблема в том, как мне работать с данными GeoJSON?Может мне нужен другой способ?Я не нашел решения как раз такого вопроса.Может быть, это поможет кому-то еще ...

1 Ответ

0 голосов
/ 13 февраля 2019

В вашем первом примере рабочего кода вы правильно ждете завершения вызова AJAX (с $.when(buildings,vesPs).done), прежде чем пытаться использовать его данные для построения слоев Leaflet.

Во втором примере не рабочего кода,вам не хватает этой ожидающей оболочки.

...