javascript - Leaflet AJAX - 调用properties.description

Question

我目前有一个包含各种 Storm 跟踪多边形的 geojson 文件。下面是 geojson 中的 Storm 轨迹代码示例:

"type": "FeatureCollection",
"features": [
    {
        "type": "Feature",
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        -99.77300262,
                        44.60599899
                    ],
                    [
                        -98.35206604,
                        43.85266495
                    ],
                    [
                        -98.36608887,
                        43.83942413
                    ],
                    [
                        -98.38034821,
                        43.82631302
                    ],
                    [
                        -98.3948288,
                        43.81333542
                    ],
                    [
                        -98.40955353,
                        43.80049515
                    ],
                    [
                        -98.42449188,
                        43.78779221
                    ],
                    [
                        -98.43965912,
                        43.77523422
                    ],
                    [
                        -98.45504761,
                        43.76281357
                    ],
                    [
                        -98.47065735,
                        43.75054169
                    ],
                    [
                        -98.48647308,
                        43.73841858
                    ],
                    [
                        -98.50251007,
                        43.72644043
                    ],
                    [
                        -98.51876068,
                        43.71461868
                    ],
                    [
                        -98.53520966,
                        43.70294571
                    ],
                    [
                        -98.55186462,
                        43.69142914
                    ],
                    [
                        -98.56872559,
                        43.68006897
                    ],
                    [
                        -98.58578491,
                        43.66886902
                    ],
                    [
                        -98.60303497,
                        43.65782928
                    ],
                    [
                        -98.6204834,
                        43.64694977
                    ],
                    [
                        -98.63811493,
                        43.6362381
                    ],
                    [
                        -98.65594482,
                        43.62569046
                    ],
                    [
                        -98.6739502,
                        43.61531067
                    ],
                    [
                        -98.69213867,
                        43.60509872
                    ],
                    [
                        -98.71050262,
                        43.59506226
                    ],
                    [
                        -98.72904205,
                        43.58519745
                    ],
                    [
                        -98.74775696,
                        43.5755043
                    ],
                    [
                        -98.76663208,
                        43.56599045
                    ],
                    [
                        -98.78568268,
                        43.55664825
                    ],
                    [
                        -98.80488586,
                        43.54749298
                    ],
                    [
                        -98.82424927,
                        43.538517
                    ],
                    [
                        -98.84377289,
                        43.52971649
                    ],
                    [
                        -98.8634491,
                        43.52110672
                    ],
                    [
                        -98.88327026,
                        43.51268005
                    ],
                    [
                        -98.90324402,
                        43.50443649
                    ],
                    [
                        -98.9233551,
                        43.49638367
                    ],
                    [
                        -98.94360352,
                        43.48851776
                    ],
                    [
                        -98.96398926,
                        43.48084641
                    ],
                    [
                        -98.98451233,
                        43.47336197
                    ],
                    [
                        -99.00514984,
                        43.4660759
                    ],
                    [
                        -99.02592468,
                        43.45897675
                    ],
                    [
                        -99.04682159,
                        43.45207977
                    ],
                    [
                        -99.06348419,
                        43.44674301
                    ],
                    [
                        -99.77300262,
                        44.60599899
                    ]
                ]
            ]
        },
        "properties": {
            "name": "Storm: C8, Valid: 22Jul18 09:30Z",
            "styleUrl": "#strmCone",
            "styleHash": "-13cdefe0",
            "styleMapHash": {
                "normal": "#strmCone_n",
                "highlight": "#strmCone_h"
            },
            "description": "\n    \n    <html>\n    <body>\n    <table width=\"250px\">\n    <tr>\n    <td colspan=\"2\">\n    <h3><b>C8</b>&nbsp;Storm Report</h3>\n    <p>\n    <b>Issue Time:</b> 22Jul18 09:30Z UTC<br>\n    <b>Scan Time:</b> 22Jul18 09:24Z UTC<br>\n    <b>Source:</b> Auto Plot Mode.<br>\n    <b>Storm Type:</b> Hail<br>\n    <b>Echo Top Alt:</b> 50000ft<br>\n    </p>\n    <p>\n    Hail at 44.61N, 99.77W Nexrad Site: ABR ID: C8 Scan Time: 09:24Z Echo Top: 50K feet Direction: 141 degrees Velocity: 19 knots\n    </p>\n    <hr>\n    </td>\n    </tr>\n    </table>\n    </body>\n    </html>\n    \n   ",
            "stroke": "#ffff00",
            "stroke-opacity": 0.4980392156862745,
            "stroke-width": 4,
            "fill": "#00ff00",
            "fill-opacity": 0.4980392156862745
        },
        "id": "StrmCone3921090"
    },

要在我的传单 map 中调用此文件，我使用以下代码:

function popUp(f,l){
    var out = [];
 if (f.properties){
     for(key in f.properties){
           out.push(key+": "+f.properties[key]);
        }
     l.bindPopup(out.join("<br />"));
    }
}

var storm_tracks = new L.GeoJSON.AJAX("http://tropicalwx.us:81/TropicalWX/modules/weather_map/includes/kml/radar/storm_track.geojson",{onEachFeature:popUp});      
storm_tracks.addTo(map);

这工作正常，但它显示了所有属性，而不仅仅是属性的描述部分(见下图)。我怎样才能让这段代码只显示属性的描述部分(即删除笔划/笔划不透明度、笔划宽度等)

Answer 1

您的意思是您只想要“描述”属性的内容吗？第一步可能是这样，然后进行优化。

function popUp(f,l){
    var out = [];
 if (f.properties){
     for(key in f.properties){
           if (key == 'description') {out.push(key+": "+f.properties[key]);}
        }
     l.bindPopup(out.join("<br />"));
    }
}

var storm_tracks = new L.GeoJSON.AJAX("http://tropicalwx.us:81/TropicalWX/modules/weather_map/includes/kml/radar/storm_track.geojson",{onEachFeature:popUp});      
storm_tracks.addTo(map);