1

シンプルなサイドプロジェクトだと思っていたものに取り組んでいます。私はPythonについて何も知らないので、私は自分の快適ゾーンから少し外れていることがわかりました（PHPは私が扱っているものです）。興味のあるポイントのセットを表示する（cloudemadeのリーフレットを使用して）滑りやすいマップを作成しようとしています。POIの名前、緯度、経度を含むCSVファイルがあります。

これまでのところ、CSVデータを読み取ってJSONデータに変換し、bottle.pyを使用してWebページにJSONデータのダンプを表示することができます。

私の質問は、bottle.pyのJSONデータをjqueryを介してleafletのjavascriptライブラリに渡すにはどうすればよいですか？

クリス

4

1 に答える 1

0

leaflet は GEOJSON をサポートしているため、リーフレットでベクターデータを簡単に表示できます。

見る：

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

python geojsonライブラリは geojson もサポートしているため、適切なオブジェクトに取得し、結果の JSON をリーフレットに提供する前に必要なプロパティを追加する以外に、python 側で行う必要があることはあまりありません。

標準の 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);            
}
于 2012-05-14T05:01:56.817 に答える