将烧瓶应用中的geojson数据传递给javascript,以便在传单地图中使用

时间:2017-06-28 21:52:34

标签: javascript python flask leaflet geojson

好的,我在网页上有一个使用flask,python,html,javascript的地图。我的问题是,当我硬编码geoJson数据时,它工作正常。当我将geoJson数据从python脚本传递给要在传单中使用的Javascript时,它不起作用。除了没有数据的视觉错误之外,我没有收到任何错误。

我正在使用python从csv文件中读取数据,并使用修改后的版本创建geoJson文件:

  

http://www.andrewdyck.com/how-to-convert-csv-data-to-geojson/   谢谢安德鲁

这是用于调用python方法的JavaScript。它是通过html中的onClick函数调用调用的:

function getValues(){
    $.ajax({
       data: chks}, // there is data passed, but it doesn't effect this issue
       type : 'POST',
       url : '/process'
})
  .done(function(data){  // its this passed data that is not being read correctly.  When I hard code this with the geojson found below, it works great.
      var markOptions = {
          radius:8,
          ... };
      var pntslay = L.geoJson(data, {
          pointsToLayer: function(feature, latlng){
             return L.circleMarker(latlng, markOptions);
}}).addTo(map);

这是我修改过的python和烧瓶代码:

@app.route('/process', methods=['POST'])
def process():
    data = request.form['chks']
    rawData = csv.reader(open('sample.csv', 'rb'), dialect='excel')
# the template. where data from the csv will be formatted to geojson
    template = \
    ''' \
    { "type" : "Feature",
        "geometry" : {
            "type" : "Point",
            "coordinates" : [%s,%s]},
    "properties" : { "name" : "%s", "value" : "%s"}
    },
    '''
# the head of the geojson file
    output = \
    ''' \
    { "type" : "Feature Collection",
    {"features" : [
    '''
# loop through the csv by row skipping the first
    iter = 0
    for row in rawData:
        iter += 1
        if iter >= 2:
            id = row[0]
            lat = row[1]
            lon = row[2]
    output += template % (row[2], row[1], row[0])
 # the tail of the geojson file
    output += \
    ''' \
    ]};
    '''            
    return output

这是geoJson文件。当我硬编码时,它可以工作。当我使用python脚本中传递的数据时,它不会。硬编码数据是从firefox firebug中的输出中复制的。

var geojsonPnts = {
    "type": "Feature Collection",
    "feature" : [
        {"type" : "Feature",
        "geometry" : {
             "type" : "Point",
             "coordinates" : [ -86.27, 32.36 ]},
        "properties" : { "name" : "some place" }
      },
       {"type" : "Feature",
        "geometry" : {
             "type" : "Point",
             "coordinates" : [ -105.45, 40.63 ]},
        "properties" : { "name" : "some other place" }
      },
      ]};

我不确定为什么传递的数据不起作用。请原谅错别字错误。我无法将我的工作代码复制并粘贴到此处。

1 个答案:

答案 0 :(得分:0)

我怀疑你的python输出结尾有一个额外的分号(;)。

还要确保传递给data工厂的L.geoJSON已经是正确的JavaScript对象。例如,您可以输出typeof data来检查该内容。

如果它仍然是一个字符串,只需先使用JSON.parse(data)转换它。