Question

我正在研究我认为简单的侧面项目。事实证明我有点不在我的舒适区，因为我对python一无所知（PHP就是我的工作）。我正在尝试创建一个显示一组兴趣点的滑动地图（使用cloudemade的传单）。我有一个CSV文件，其中包含POI的名称，纬度和经度。

到目前为止，我能够读取CSV数据并将其转换为JSON数据，并使用bottle.py在网页中显示JSON数据的转储。

我的问题是如何通过jquery将bottle.py的JSON数据传递给leaflet的javascript库？

克里斯

Answer 1

宣传单支持GEOJSON，可以使用传单轻松显示矢量数据。

请参阅：

http://leaflet.cloudmade.com/examples/geojson.html

python geojson库也支持geojson，所以你不需要在python端做很多事情，除了把它放到适当的对象中并在提供生成的JSON之前添加你想要的任何其他属性小叶。

只需使用标准XMLHttpRequest（）从您提供的JSON对象中获取它们。

function loadData(){

    // retrieve and load features to a layer
    var xhrequest = new XMLHttpRequest();
    xhrequest.onreadystatechange = function(){
        if (xhrequest.readyState == 4){
            if (xhrequest.status == 200){
                var geojsonLayer = new L.GeoJSON();
                geojsonLayer.on("featureparse", function(e){
                    if (e.properties && e.properties.name && e.properties.value){
                        var popupContent = "Whatever added properties you want to display";
                        e.layer.bindPopup(popupContent);                     
                    }; 
                    // any styles you've added
                    if (e.properties && e.properties.style && e.layer.setStyle){
                        e.layer.setStyle(e.properties.style);                      
                    };                      
                });    
                var layerItems =  JSON.parse(xhrequest.responseText);
                // add features to layer
                for (i=0; i<layerItems.length;i++){
                    var geojsonFeature = layerItems[i];
                    geojsonLayer.addGeoJSON(geojsonFeature);                       
                };
                map.addLayer(geojsonLayer); 
            };                
        };            
    };
    var url= "<url of where you are serving the GEOJSON data>"; 
    xhrequest.open('GET', url, true);
    xhrequest.send(null);            
}

将来自python（bottle.py）的json数据传递给leaflet的javascript库，以显示在一个滑动的地图上

1 个答案: