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

Question

我正在制作Leaflet Map，并且我有一个json对象，我将要添加Leaflet javascript的L.GeoJson所需的所有必要属性。 因此，我阅读了文档，并使用此功能对象的文档中所述，使用“功能”，“几何”和“属性”构建了一个“ 功能集合” ，因此我在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的JSFiddle代码段测试 ，这里是测试文件csv，用于测试文件csv ，请提前输入ty以获取帮助。

Answer 1

看来您是通过在GeoJSON对象的popupContent字段/属性中编写要在弹出窗口中显示的html内容来复制Leaflet GeoJSON教程的。 确实，这是存储该内容的好地方。

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

请详细检查Leaflet教程的源代码，您将看到它们使用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/