GeoJSON 数据不显示在带有图层管理插件的传单中

Question

我使用传单，在显示 GeoJSON 文件中的数据时遇到一些问题。

我没有编程经验，所以我使用了 leafletjs 开发者网站的手册，我在 whosebug.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 数据？也许我需要另一种方式？我还没有找到解决这样一个问题的方法。也许这会对其他人有所帮助...

Answer 1

在您的第一个工作代码示例中，您在尝试使用其数据构建 Leaflet 层之前正确地等待 AJAX 调用完成（使用 $.when(buildings,vesPs).done）。

在您的第二个无效代码示例中，您缺少这个等待包装器。

GeoJSON 数据不显示在带有图层管理插件的传单中

GeoJSON data is not displayed in leaflet with layer management plugins

javascript

geojson

leaflet