栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Python

关于flask入门教程-ajax+百度地图实现热力图

Python 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

关于flask入门教程-ajax+百度地图实现热力图

热力图是通过密度函数进行可视化用于表示地图中点的密度的热图。它使人们能够独立于缩放因子感知点的密度。

前文也讲了关于max、pointsize、blursize这几个值一直也没找到最合适的处理办法。所以对于热力点的处理一直没好的解决方案,所以尝试用百度地图api来处理。

第一种方式是刚摸索百度地图热力图时用的方法,直接将数据透传给前端。

@app.route('/echartdemo13')
def echartdemo13():
    sql = "select a.longitude,a.latitude,b.GDP from citylocation a,citygdp b where a.cityname=b.cityname"
    result = db.session.execute(sql).fetchall()
    data = [{'lng': row[0], "lat": row[1], 'count': row[2]} for row in result]
    print(data)
    return render_template('echartdemo13.html',data=data)

前台的代码来自于百度,这里需要注意的是将后端数组如何直接传递给javascript,通过 {{ data|tojson }} 这个方式即可,其次是关于可以设置热力值heatmapOverlay.setDataSet({data:points,max:1200});



    
    
      
    
    热力图功能示例
    
        ul,li{list-style: none;margin:0;padding:0;float:left;}
        html{height:100%}
        body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
        #container{height:500px;width:100%;}
        #r-result{width:100%;}
       


    


第二种方式通过ajax方式,这里返回了一个json。

@app.route('/getjson14', methods=['GET'])
def getjson14():
    # 千万不要先将内部的对象序列化成字符串,然后再序列化外边的对象。
    # 再复杂的结构都可以表示为一个dict,
    # 而之前不需要做任何序列化操作!!!
    # 经过多轮测试,提前序列化会导致很多解析问题!!!
    # 废弃原有的方案,使用两个表直接关联
    sql = "select a.longitude,a.latitude,b.GDP from citylocation a,citygdp b where a.cityname=b.cityname"
    result = db.session.execute(sql).fetchall()
    data = [{'lng': row[0],"lat":row[1], 'count': row[2] } for row in result]
    print(data)
    datadict = {'data': data}
    # data=[
    # [
    #  {'name': '遵义市', 'value': [106.9235642, 27.72917731, 908.76]},
    #  {'name': '自贡市', 'value': [104.7757383, 29.34187324, 647.73]}
    # ]
    response = jsonify(datadict)
    print(datadict)
    response.status_code = 200  # or 400 or whatever
    return jsonify(datadict)

@app.route('/echartdemo14')
def echartdemo14():
    return render_template('echartdemo14.html')

前端代码和之前差不多类似,在地图呈现后多了一个ajax处理环节,和之前的数据处理方式一样。


  
      
      
      
 
        
      
      热力图功能示例
      
          ul,li{list-style: none;margin:0;padding:0;float:left;}
          html{height:100%}
          body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
          #container{height:500px;width:100%;}
          #r-result{width:100%;}
       
  
  
      
  
  
  

最后,谢谢关注,谢谢支持!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/767360.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号