文章/答案/技术大牛

发布

社区首页 >问答首页 >GeoJSON数据不会显示在带有图层管理插件的单张中

问GeoJSON数据不会显示在带有图层管理插件的单张中
EN

Stack Overflow用户

提问于 2019-02-13 21:05:06

回答 1查看 546关注 0票数 0

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

我没有编程经验，所以我使用了leafletjs开发人员网站上的手册，我在stackoverflow.com上找到了许多问题的答案。

在第一次尝试时，我使用了leaflet和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数据？也许我需要别的方法？我还没有找到这样一个问题的解决方案。也许这能帮到别人。

javascript

leaflet

geojson

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-02-14 03:43:10

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

在你的第二个不能工作的代码示例中，你缺少这个等待包装器。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54670911

复制

相似问题

问GeoJSON数据不会显示在带有图层管理插件的单张中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问GeoJSON数据不会显示在带有图层管理插件的单张中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问GeoJSON数据不会显示在带有图层管理插件的单张中
EN