Question

我正在练习Leaflet创建地图。

为了找到一组特征的最小值，我希望用函数＆＃34; eachLayer＆＃34;浏览组图层的层。然后使用＆＃34; onEachFeature＆＃34;。

功能浏览功能

我认为我的变量范围有问题。

我的代码是：

<!DOCTYPE html>
<html>
<head>

    <title>Layers Control Tutorial - Leaflet</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.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
    <style>
    html, body {    height: 100%;margin: 0; }
    #map {  width:  100%;   height: 100%;}
    </style>

    <!-- jQuery - indispensable pour utiliser les fichiers geojson -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <!-- Fichier(s) contenant les couches -->
<!--    <script src="troncons.geojson" type="text/javascript"></script> -->
</head>



<body>

    <div id='map'></div>

    <button id="button1">Station variable1</button>
    <button id="button2">Station variable2</button>
    <button id="button3">Troncons variable3</button>

    <script>

    // define the layers groups:
    var stationsWait = L.layerGroup();
    var GroupLayerTroncons = L.layerGroup();

    // Load some stations
    var Vincennes = L.circle([48.8473,2.43318], { color: 'red',fillColor: '#f03',fillOpacity: 0.5, radius: 750 }).bindPopup("Choisissez une variable").addTo(stationsWait);
    var Nation = L.circle([48.8487,2.39626], { color: 'red',fillColor: '#f03', fillOpacity: 0.5,radius: 750 }).bindPopup("Choisissez une variable").addTo(stationsWait);



    // Load some sections of the RERA:

    var sections_RERA = {
    "type": "FeatureCollection",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

    "features": [
    { "type": "Feature", "properties": { "id": 1 , "flow": 500 }, "geometry": { "type": "LineString", "coordinates": [ [ 2.22241227492659, 48.897131251501115 ], [ 2.237644924286148, 48.892430179977538 ] ] } },
    { "type": "Feature", "properties": { "id": 2 , "flow": 400 }, "geometry": { "type": "LineString", "coordinates": [ [ 2.237796534409823, 48.892431145089262 ], [ 2.277988160372222, 48.88068267218889 ], [ 2.291233854345376, 48.87646267502052 ], [ 2.295956684874181, 48.874690897366008 ] ] } },
    { "type": "Feature", "properties": { "id": 3 , "flow": 300 }, "geometry": { "type": "LineString", "coordinates": [ [ 2.295958036238904, 48.874590924832241 ], [ 2.308533488711002, 48.874964167617904 ], [ 2.315348461217771, 48.875403260408021 ], [ 2.329165082403959, 48.873581863436044 ], [ 2.330553508046893, 48.871690011018686 ], [ 2.330553508046893, 48.871690011018686 ] ] } },
    { "type": "Feature", "properties": { "id": 4 , "flow": 200}, "geometry": { "type": "LineString", "coordinates": [ [ 2.330554792932899, 48.871590037832199 ], [ 2.34106115320042, 48.867749099632711 ], [ 2.344584312147049, 48.864769023056539 ], [ 2.347801519250009, 48.861987132117697 ] ] } },
    { "type": "Feature", "properties": { "id": 5 , "flow": 100 }, "geometry": { "type": "LineString", "coordinates": [ [ 2.347801519250009, 48.861987132117697 ], [ 2.349954033166742, 48.859499314657278 ], [ 2.357872312519592, 48.856342662783582 ], [ 2.373020720593452, 48.844025242488712 ] ] } },
    { "type": "Feature", "properties": { "id": 6 , "flow": 500}, "geometry": { "type": "LineString", "coordinates": [ [ 2.373020720593452, 48.844025242488712 ], [ 2.375307175290527, 48.842837414357263 ], [ 2.378035989383918, 48.842651667917124 ], [ 2.379696184575886, 48.843160200223871 ], [ 2.384654536154551, 48.846585203162263 ], [ 2.38585340994371, 48.847691165562274 ], [ 2.390073858038943, 48.849512428852194 ], [ 2.397050398888572, 48.848847918381693 ] ] } },
    { "type": "Feature", "properties": { "id": 7, "flow": 250 }, "geometry": { "type": "LineString", "coordinates": [ [ 2.397050398888572, 48.848847918381693 ], [ 2.40254859872989, 48.844976207608681 ], [ 2.417864326491966, 48.843551984219573 ], [ 2.423292942257146, 48.845777878447315 ], [ 2.428427826130349, 48.847202264244189 ], [ 2.434335613031259, 48.847230342470212 ] ] } }
    ]
    }

    var sections_others = [{
            "type": "Feature",
             "properties": {
                    "id": 12,
                "name": "Autres-Autres",
                "flow": 500,
                "popupContent": "Texte à changer",
                  "popupContent2": "Text de la nouvelle variable"
            },
            "geometry": {
                "type": "LineString",
         "coordinates": [   [2.373068996549787 , 48.844124177694574],[2.373068176412221 , 48.844124882353711]]
            }
        }
    ]


    function onEachFeature(feature, layer) {
        if (feature.properties && feature.properties.popupContent) {
            layer.bindPopup(feature.properties.popupContent);
        }
        //console.log ( "The id of the feature is " +       feature.properties.id)
    }

    function style (feature){// paramétrage de la symbologie de la couche "arrondissement"
    //return { color: "#046380", weight: 1, fillColor: '#4BB5C1', fillOpacity: .5 };
}

L.geoJson(sections_RERA, { onEachFeature: onEachFeature, style: style }).addTo(GroupLayerTroncons);
sections_RERA.id = 10;
console.log(sections_RERA.id )
// Load sections of an other dummy lines:
function style2 (feature){// paramétrage de la symbologie de la couche "arrondissement"
return { color: "red", weight: 5, fillColor: '#4BB5C1', fillOpacity: .5 };
}
L.geoJson(sections_others, { onEachFeature: onEachFeature, style: style2 }).addTo(GroupLayerTroncons);
sections_others.id = 11;
console.log(sections_others.id )


// Load the map
var mbAttr =  'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',   attribution: mbAttr});

var map = L.map('map', {
    center: [48.8666, 2.333],
    zoom: 13,
    layers: [streets, GroupLayerTroncons,  stationsWait]
});


var baseLayers = {"Grayscale": grayscale,"Streets": streets};
var overlays = {    "Waiting Times": stationsWait,"Troncons" : GroupLayerTroncons};
L.control.layers(baseLayers, overlays).addTo(map);


//Objectif: Find the min value in a group layer according a given property

function onEachFeature2(feature, layer) {
    if (feature.properties && feature.properties.flow) {
        console.log ( "The value of the feature property is " + feature.properties.flow); // later we use the OneProperty variable
    }
}


// Body of the GetMin function
function GetMin(GroupLayer, OneProperty){
    GroupLayer.eachLayer(function (OneLayer) {
    L.geoJson(OneLayer, {   // it's work whith sections_RERA instead of OneLayer
            onEachFeature:  onEachFeature2
            //  onEachFeature : function onEachFeature3 (feature, layer) {  console.log( feature.properties.flow); layer.bindPopup("feature.properties.flow"); }
        })
        console.log ( "theoretically we change layer----");
    })};

    // Call of the function
    var OneProperty = "Flow";
    GetMin(GroupLayerTroncons, OneProperty);


</script>
</body>
</html>

Web控制台返回：

错误：GeoJSON对象无效。

但是，当我替换局部变量＆＃34; OneLayer＆＃34;通过全局变量＆＃34; sections_RERA＆＃34;或＆＃34; sections_others＆＃34;。（第135行）

＆＃34; OneLayer＆＃34;和＆＃34; sections_RERA＆＃34;，它是同一类型的对象吗？

Answer 1

Leaflet的L.geoJSON工厂将原始 GeoJSON数据对象（如sections_RERA变量）作为第一个参数，而不是Leaflet已构建的图层（如您的子图层）在GroupLayerTroncons函数中循环的GetMin变量。

目前还不清楚你想要实现的目标。如果您只想阅读图层中的原始GeoJSON数据，请直接在eachLayer回调中执行此操作。这些属性在每个图层上都显示为layer.feature.properties：

var groupLayer = L.layerGroup();

// Nesting a Leaflet GeoJSON Layer Group into groupLayer Layer Group.
var geoJsonGroupLayer = L.geoJSON(geoJsonRawData, options).addTo(groupLayer);

groupLayer.eachLayer(inspectLayer);

function inspectLayer(layer) {
  if (layer.feature && layer.feature.properties) {
    // layer is a non-group, built from GeoJSON data.
    // inspect the layer...
  } else if (layer instanceof L.LayerGroup) {
    // layer is a nested Layer Group.
    // Recursive call to inspectLayer function.
    layer.eachLayer(inspectLayer);
  }
}

嵌套函数的问题每个图层以及带有地理对象的传单的onEach功能

1 个答案: