热力图是通过密度函数进行可视化用于表示地图中点的密度的热图。它使人们能够独立于缩放因子感知点的密度。
前文也讲了关于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%;}
最后,谢谢关注,谢谢支持!



