简体   繁体   English

传单AJAX-调用properties.description

[英]Leaflet AJAX - Call properties.description

I currently have a geojson file with various storm tracking polygons. 我目前有一个带有各种风暴跟踪多边形的geojson文件。 Below is an example of the storm track code in geojson: 以下是geojson中风暴跟踪代码的示例:

"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"
    },

To call this file in my leaflet map, I'm using this code: 要在我的传单地图中调用此文件,请使用以下代码:

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);

This works fine, but it shows all of the property instead of just the description part of the property (see image below). 这可以正常工作,但是它显示了所有属性,而不仅仅是属性的描述部分(请参见下图)。 How can I get this code to just show the description part of properties (ie remove the stroke/stroke-opacity, stroke-width, etc.) 如何获得此代码以仅显示属性的描述部分(即删除笔触/笔触不透明度,笔触宽度等)

https://imgur.com/a/rTr9ncG

Do you mean you only want the content of the 'Description' property? 您是说只想要'Description'属性的内容吗? Firsts step might be this, then optimise. 首先是这个,然后是乐观。

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);

Peebee's answer worked as needed. Peebee的答案按需工作。 Conversely, I was able to use this code as well (to remove the "description" label): 相反,我也可以使用以下代码(删除“描述”标签):

function popUp(f,l){
var out = [];
out.push(f.properties["description"]);
l.bindPopup(out.join(""));
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM