Leaflet - 将功能添加到 json 对象并将结果放在地图上

Question

我正在制作一张传单地图，我有一个 json 对象，我想添加传单 javascript 的 L.GeoJson 所需的所有属性。 所以我阅读了文档并使用“Feature”、“Geometry”和“Properties”构建了一个“FeatureCollection”，如feature-objects 的文档中所述，所以我在 javascript 中创建了这段代码：

 _addFeatureToJson: function(papaJson){
    papaJson["type"]="FeatureCollection";
    papaJson["features"]=[];
    var title = papaJson.meta.fields;
    for (var num_linea = 0; num_linea < papaJson.data.length - 1; num_linea++) { //  var depth = papaJson.data.length - 1;
        var obj = papaJson.data[num_linea]; //single element of papa parse json object
        var fields = title.toString().trim().split(",");
        var lng = parseFloat(obj[this.options.longitudeTitle]);
        var lat = parseFloat(obj[this.options.latitudeTitle]);
        if (fields.length+"=="+title.length && lng<180 && lng>-180 && lat<90 && lat>-90) {
            var feature = {};
            feature["type"]="Feature";
            feature["geometry"]={};
            feature["properties"]={};
            feature["geometry"]["type"]="Point";
            feature["geometry"]["coordinates"]=[lng,lat];
            var content ='<div class="popup-content"><table class="table table-striped table-bordered table-condensed">';
            for (var i=0; i< title.length; i++) {
                if (title[i] != this.options.latitudeTitle && title[i] != this.options.longitudeTitle) {
                    if(title[i]==this.options.titleForSearch){
                        feature["properties"]["search"]=obj[title[i]];
                        feature["properties"]["title"]=obj[title[i]];
                    }else{
                        feature["properties"][title[i]] = this._deleteDoubleQuotes(obj[title[i]]);
                        var href='';
                        if (obj[title[i]].indexOf('http') === 0) {
                            href = '<a target="_blank" href="' + obj[title[i]] + '">'+ obj[title[i]] + '</a>';
                        }
                        if(href.length > 0)content += '<tr><th>'+title[i]+'</th><td>'+ href +'</td></tr>';
                        else content += '<tr><th>'+title[i]+'</th><td>'+ obj[title[i]] +'</td></tr>';
                    }
                }//end of if
            }//end of for
            content += "</table></div>";
            feature["properties"]["popupContent"]=content;
            papaJson["features"].push(feature);           
        }
    }

    return papaJson;
}

使用“popupContent”字段添加功能后，当我在 LeafletMap 上加载 Json 时，所有标记都已正确创建，但是当我单击它们时，弹出窗口不存在，这里是加载 Json 对象的代码。

 _loadGeoJSON: function (content) {
    if (typeof content == 'string') {
        content = JSON.parse(content);
    }
    var layer = L.geoJson(content, this.options.layerOptions);

    if (layer.getLayers().length === 0) {
        throw new Error('GeoJSON has no valid layers.');
    }

    if (this.options.addToMap) {
        layer.addTo(this._map);
    }
    return layer;
},

这里我有一个 JSFiddle sn-p test with jsfiddle，这里是用于测试的文件 csv file csv for test，请提前联系以寻求帮助。

Answer 1

您似乎复制了 Leaflet GeoJSON 教程，方法是在 GeoJSON 对象的 popupContent 字段/属性中编写您希望在弹出窗口中出现的 html 内容。事实上，它是存储这些内容的好地方。

但是，它不会自动转换为绑定到标记的实际弹出窗口。

请仔细检查Leaflet tutorial的源代码，你会看到他们使用函数onEachFeature来读取该内容并将其转换为弹出窗口。

function onEachFeature(feature, layer) {
    var popupContent = "<p>I started out as a GeoJSON "
        + feature.geometry.type + ", but now I'm a Leaflet vector!</p>";

    //////////////////////////////////////////////////////////////
    // popupContent property to actual popup
    //////////////////////////////////////////////////////////////
    if (feature.properties && feature.properties.popupContent) {
        popupContent += feature.properties.popupContent;
    }

    layer.bindPopup(popupContent);
    //////////////////////////////////////////////////////////////
}

更新 jsfiddle：http://jsfiddle.net/gynog5nx/1/