Question

我正在制作Leaflet Map并且我有一个json对象，我想要添加传单javascript的L.GeoJson所需的所有属性。所以我阅读文档并使用“功能”，“几何”和“属性”构建“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代码段test with jsfiddle，这里是测试file csv for test的文件csv，提前获取任何帮助。

Answer 1

您似乎通过编写要在GeoJSON对象的MatOfPoint字段/属性中的弹出窗口中的html内容来复制Leaflet GeoJSON教程。实际上，它是存储该内容的好地方。

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

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

onEachFeature

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

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

1 个答案: