javascript - 如何循环遍历geojson数据并根据条件显示属性值

Question

这是我的 geojson 数据

var json = '[{"type": "FeatureCollection", "crs": {"properties": {"type": "proj4", "href": "http://spatialreference.org/ref/epsg/4326/"}, "type": "link"}, "features": [{"properties": {"species": "Oxalis corniculata L.", "listvalues": 0, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 1}, {"properties": {"species": "Pinus roxburghii Sargen", "listvalues": 2, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 2}, {"properties": {"species": "Trifolium repens L.", "listvalues": 1, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 3}, {"properties": {"species": "Poa annua L.", "listvalues": 0, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 4}, {"properties": {"species": "Fragaria nubicola Lindley ex Lacatia", "listvalues": 0, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 5}, {"properties": {"species": "Cedrus deodara (Roxb. ex Lambert.) G.Don.", "listvalues": 2, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 6}]}]'

我想要以下结果:

(1) All species whose listvalues=0
(2) All species whose listvalues=1
(3) All species whose listvalues=2

如何使用 jquery 或 javascript 实现此目的？

JavaScript代码

 <script type="text/javascript">

    $('.bottom').hide(); // initially hide the bottom content

//set event listener to trigger on header click
    $('.header').click(function() {

    $(this).next('.bottom').slideToggle();// find the next bottom content afterthe header and toggle it up or down depending on its current state.

    });
        function main_map_init (map, options) {
            var promise = $.getJSON('{% url "extdata" %}');

            promise.then(function(data) {
            var allbusinesses = L.geoJson(data);
            var cafes = L.geoJson(data, {


                pointToLayer: function(feature, latlng) {

                 return new L.CircleMarker(latlng, {
                radius: 8,
                    fillColor:'Red ',
                    color:'Red' ,
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.4,
                    clickable: true

           <!--     }).on('mouseover', function() {
                    <!-- this.bindPopup(feature.properties.species).openPopup(); -->
                <!-- });  -->
                }).on('click', function() {

                        var div = $('<div id="container" style="width: 200px; height: 200px;"></div>')[0];
                        this.bindPopup(div);
                        this.openPopup();
                        $("#container").ready(
                        function(){
    //---------------------------------------------------
          // Create the chart
             $(function () {
            // $.each(promise, function (i, point) {
   // point.y = point.promise;
//});
            $('#container').highcharts({
                chart: {
                    type: 'pie',
                    backgroundColor: 'rgba(0,0,0,0)',
                    y:100

                },
                title: {
                    text: 'sfs '
                },
                yAxis: {
                    title: {
                        text: ' '
                    }
                },
                plotOptions: {
                    pie: {
//                        y:1,
                        shadow: false,
//                        center: ['50%', '50%'],
                        borderWidth: 0,
                        showInLegend: false,
                        size: '80%',
                        innerSize: '60%'
                      ,

                        data: [
                            ['Plant Functional Type1', 18],
                            ['Plant Functional Type2', 14],
                            ['Plant Functional Type3', 11]


                        ]
                    }
                },
                tooltip: {
                        useHTML: true,
                        shared:true,

                         <!-- valueSuffix: '%' -->
             formatter: function () {   

                    return  this.point.name +  
                      '</b><br/>Species: ' + feature.properties.species+ ' <br> name ' + feature.properties.listvalues;                             
        }

                },
                series: [
                    {
                        type: 'pie',
                        name: 'PFT',
                        data: promise,
                        dataLabels: {
                            color:'black',
                            distance: -20,
                            formatter: function () {
                                <!-- if(this.percentage!=0)  return Math.round(this.percentage)  + '%'; -->

                            }
                        }
                    },
                    {
                        type: 'pie',
                        name: 'PFT',

                        dataLabels: {
                            connectorColor: 'grey',
                            color:'black',
//                            y:-10,
                            softConnector: false,
                            connectorWidth:1,
                            verticalAlign:'top',
                            distance: 20,
                            formatter: function () {
                                if(this.percentage!=0)  return this.point.name;

                            }
                        }
                    }
                ]
            });
        });



//===========================
                            });


                    }); 
            }

        });
        map.fitBounds(allbusinesses.getBounds(), {
            padding: [50, 50]
        });
        cafes.addTo(map)
        });


        }
</script>

在弹出窗口中，我想显示 listvalues=0 的物种名称，然后 listvalues=1 和 listvalues=2

Answer 1

var json = '[{"type": "FeatureCollection", "crs": {"properties": {"type": "proj4", "href": "http://spatialreference.org/ref/epsg/4326/"}, "type": "link"}, "features": [{"properties": {"species": "Oxalis corniculata L.", "listvalues": 0, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 1}, {"properties": {"species": "Pinus roxburghii Sargen", "listvalues": 2, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 2}, {"properties": {"species": "Trifolium repens L.", "listvalues": 1, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 3}, {"properties": {"species": "Poa annua L.", "listvalues": 0, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 4}, {"properties": {"species": "Fragaria nubicola Lindley ex Lacatia", "listvalues": 0, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 5}, {"properties": {"species": "Cedrus deodara (Roxb. ex Lambert.) G.Don.", "listvalues": 2, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 6}]}]'
var jsondata = JSON.parse(json);

var listvalues = {}; 
jsondata.features.forEach(function (entry) {
    if (!listvalues[entry.properties.listvalues] || listvalues[entry.properties.listvalues] !== []) {
      listvalues[entry.properties.listvalues] = [];
    }
    listvalues[entry.properties.listvalues].push(entry);
  })