关于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});
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://api.map.baidu.com/api?v=2.0&ak=akZILvuv0Ovr6uU3eKlaXP2Pgx9jprjO"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<title>热力图功能示例</title>
<style type="text/css">
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%;}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("container");
//设置地图的中心点
var point = new BMap.Point(117.830586, 30.943465);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 13);
// 允许滚轮缩放
map.enableScrollWheelZoom();
//设置热力图的点参数
var points={{ data|tojson }};
//var points = [{'lng': 106.9235642, 'lat': 27.72917731, 'count': 908.76}, {'lng': 104.7757383, 'lat': 29.34187324, 'count': 647.73}, {'lng': 118.0489291, 'lat': 36.81297732, 'count': 2866.75}, {'lng': 104.6266294, 'lat': 30.13201885, 'count': 657.9}, {'lng': 114.0164347, 'lat': 33.0133554, 'count': 1055.45}, {'lng': 113.1279331, 'lat': 27.83095331, 'count': 1274.8}, {'lng': 113.5716888, 'lat': 22.27372338, 'count': 1202.58}, {'lng': 114.6522355, 'lat': 33.62031651, 'count': 1227.9}, {'lng': 122.2024466, 'lat': 29.98784846, 'count': 633.45}, {'lng': 106.5478234, 'lat': 29.56583775, 'count': 7894.24}, {'lng': 105.1700283, 'lat': 37.51627081, 'count': 169.23}, {'lng': 113.3873179, 'lat': 22.51937679, 'count': 1826.32}, {'lng': 113.6188587, 'lat': 34.74816626, 'count': 4000}, {'lng': 119.4518449, 'lat': 32.2010717, 'count': 1957}, {'lng': 112.4598339, 'lat': 23.04980324, 'count': 1065.9}, {'lng': 103.7153675, 'lat': 27.34166893, 'count': 379.62}, {'lng': 113.109587, 'lat': 36.19521285, 'count': 920.2}, {'lng': 112.9333745, 'lat': 28.23171601, 'count': 4547.06}, {'lng': 125.3170564, 'lat': 43.81465336, 'count': 3369.7}, {'lng': 117.6425833, 'lat': 24.51629846, 'count': 1400.71}, {'lng': 100.4481108, 'lat': 38.92499918, 'count': 212.69}, {'lng': 114.8798409, 'lat': 40.76629221, 'count': 966.12}, {'lng': 110.4742643, 'lat': 29.11936498, 'count': 242.48}, {'lng': 110.354765, 'lat': 21.27314854, 'count': 1402.77}, {'lng': 117.3178456, 'lat': 34.81129402, 'count': 1362.04}, {'lng': 111.0015197, 'lat': 35.02710558, 'count': 827}, {'lng': 112.0391963, 'lat': 22.91776705, 'count': 394.27}, {'lng': 113.1229884, 'lat': 29.35964745, 'count': 1539.36}, {'lng': 102.5452931, 'lat': 24.35509544, 'count': 736.5}, {'lng': 97.00619075, 'lat': 33.00793631, 'count': 31.86}, {'lng': 110.1602392, 'lat': 22.63913181, 'count': 835.82}, {'lng': 109.7296193, 'lat': 38.28500391, 'count': 1756.67}, {'lng': 111.608204, 'lat': 26.42397794, 'count': 767.01}, {'lng': 122.229814, 'lat': 40.66549047, 'count': 1002.4}, {'lng': 117.0639395, 'lat': 28.26332646, 'count': 342.7}, {'lng': 106.2264994, 'lat': 38.48672373, 'count': 763.26}, {'lng': 112.3498743, 'lat': 28.55702602, 'count': 712.27}, {'lng': 114.3897919, 'lat': 27.79965496, 'count': 870}, {'lng': 111.2808169, 'lat': 30.69440274, 'count': 1547.32}, {'lng': 104.6410019, 'lat': 28.75530193, 'count': 870.85}, {'lng': 81.3210651, 'lat': 43.91562166, 'count': 891.37}, {'lng': 128.8335853, 'lat': 47.72524721, 'count': 202.4}, {'lng': 113.5739992, 'lat': 37.85614977, 'count': 429.4}, {'lng': 111.9771537, 'lat': 21.86068627, 'count': 641.8}, {'lng': 119.4074836, 'lat': 32.39608084, 'count': 2207.99}, {'lng': 120.1585989, 'lat': 33.34879402, 'count': 2266.26}, {'lng': 129.501983, 'lat': 42.88878189, 'count': 545}, {'lng': 109.4842116, 'lat': 36.58530771, 'count': 885.42}, {'lng': 121.4427172, 'lat': 37.46284389, 'count': 4358.46}, {'lng': 103.0113123, 'lat': 29.98318122, 'count': 286.54}, {'lng': 118.7536983, 'lat': 30.94293115, 'count': 525.7}, {'lng': 113.8465655, 'lat': 34.03735861, 'count': 1312.78}, {'lng': 117.2783324, 'lat': 34.20604556, 'count': 2866.93}, {'lng': 122.0608515, 'lat': 46.07552935, 'count': 261.39}, {'lng': 114.4989249, 'lat': 37.07007965, 'count': 1210.62}, {'lng': 114.062997, 'lat': 32.12519119, 'count': 1092.23}, {'lng': 114.9125713, 'lat': 27.82127297, 'count': 631.22}, {'lng': 113.9208991, 'lat': 35.30358629, 'count': 1181.45}, {'lng': 112.7277137, 'lat': 38.41578821, 'count': 435.4}, {'lng': 113.9114206, 'lat': 30.92704394, 'count': 800.67}, {'lng': 112.2058553, 'lat': 32.08988367, 'count': 1538.3}, {'lng': 109.7341106, 'lat': 28.3152203, 'count': 303.44}, {'lng': 112.9386417, 'lat': 27.8331964, 'count': 894.01}, {'lng': 108.704336, 'lat': 34.33099832, 'count': 1098.7}, {'lng': 114.3171008, 'lat': 29.84391853, 'count': 520.33}, {'lng': 116.0413985, 'lat': 43.93127123, 'count': 591.25}, {'lng': 100.7962265, 'lat': 22.01104779, 'count': 160.99}, {'lng': 101.7762661, 'lat': 36.61715389, 'count': 628.28}, {'lng': 108.9396288, 'lat': 34.26657426, 'count': 3241.49}, {'lng': 102.636287, 'lat': 37.92804404, 'count': 228.77}, {'lng': 114.2999175, 'lat': 30.59549293, 'count': 5515.76}, {'lng': 111.2740684, 'lat': 23.47949807, 'count': 573.7}, {'lng': 106.1938101, 'lat': 37.99692224, 'count': 210}, {'lng': 118.3797487, 'lat': 31.34062729, 'count': 1108.63}, {'lng': 120.2984351, 'lat': 31.56805091, 'count': 5758}, {'lng': 87.61444413, 'lat': 43.82445861, 'count': 1311}, {'lng': 113.1253055, 'lat': 40.99301248, 'count': 550}, {'lng': 106.8180669, 'lat': 39.68954559, 'count': 391.12}, {'lng': 104.2486329, 'lat': 23.36566622, 'count': 329.9}, {'lng': 120.6953222, 'lat': 27.99754975, 'count': 2925.57}, {'lng': 109.5046201, 'lat': 34.50129919, 'count': 801.42}, {'lng': 119.1560345, 'lat': 36.70623085, 'count': 3090.9}, {'lng': 122.1153614, 'lat': 37.51203397, 'count': 1944.7}, {'lng': 89.18680113, 'lat': 42.94982521, 'count': 185.3}, {'lng': 109.1850114, 'lat': 27.73477239, 'count': 296.9}, {'lng': 117.8054873, 'lat': 30.94680757, 'count': 466.6}, {'lng': 108.9404213, 'lat': 34.89781612, 'count': 187.73}, {'lng': 122.2601902, 'lat': 43.61706336, 'count': 1176.23}, {'lng': 125.9340429, 'lat': 41.7262472, 'count': 627.1}, {'lng': 123.8359396, 'lat': 42.28449702, 'count': 722.1}, {'lng': 105.7210149, 'lat': 34.58217819, 'count': 300.22}, {'lng': 117.1946744, 'lat': 39.0831461, 'count': 9108.83}, {'lng': 118.1741145, 'lat': 39.62915804, 'count': 4469.08}, {'lng': 119.9183846, 'lat': 32.45800045, 'count': 2002.58}, {'lng': 117.0815522, 'lat': 36.20000525, 'count': 2051.7}, {'lng': 112.5443051, 'lat': 37.87012419, 'count': 1778.05}, {'lng': 121.416326, 'lat': 28.65932803, 'count': 2415.12}, {'lng': 82.97716272, 'lat': 46.74465094, 'count': 300.2}, {'lng': 105.5894809, 'lat': 30.53562871, 'count': 495.23}, {'lng': 113.3766354, 'lat': 31.69183407, 'count': 401.66}, {'lng': 126.9736599, 'lat': 46.63471214, 'count': 733.4}, {'lng': 116.9798454, 'lat': 33.64089908, 'count': 650.3}, {'lng': 118.2699985, 'lat': 33.96333773, 'count': 1015.21}, {'lng': 120.5811425, 'lat': 31.30106785, 'count': 9000}, {'lng': 124.8188255, 'lat': 45.13981382, 'count': 1102.8}, {'lng': 124.3441615, 'lat': 43.16437442, 'count': 789.1}, {'lng': 112.4258475, 'lat': 39.32997887, 'count': 670.1}, {'lng': 131.1514152, 'lat': 46.64467677, 'count': 376.7}, {'lng': 106.3633681, 'lat': 39.01821095, 'count': 298.07}, {'lng': 114.5088465, 'lat': 38.04165214, 'count': 3401}, {'lng': 110.7834788, 'lat': 32.65274451, 'count': 736.8}, {'lng': 123.4253224, 'lat': 41.80328501, 'count': 5017}, {'lng': 114.0527611, 'lat': 22.54581913, 'count': 9510.91}, {'lng': 120.5820428, 'lat': 29.99840081, 'count': 2782.74}, {'lng': 111.4626624, 'lat': 27.24320199, 'count': 730.33}, {'lng': 113.5923346, 'lat': 24.81345609, 'count': 683.1}, {'lng': 117.9384709, 'lat': 28.45827785, 'count': 901}, {'lng': 121.4691603, 'lat': 31.23231042, 'count': 16872.42}, {'lng': 115.6508955, 'lat': 34.41554613, 'count': 1140}, {'lng': 109.9354935, 'lat': 33.87209676, 'count': 285.9}, {'lng': 115.3703437, 'lat': 22.7888421, 'count': 469.99}, {'lng': 116.6774959, 'lat': 23.35602649, 'count': 1203.25}, {'lng': 91.76501828, 'lat': 29.23914171, 'count': 54.03}, {'lng': 118.0844472, 'lat': 24.48248217, 'count': 2053.74}, {'lng': 109.5078052, 'lat': 18.25453332, 'count': 230.79}, {'lng': 117.633822, 'lat': 26.26685733, 'count': 972.71}, {'lng': 111.1942272, 'lat': 34.77339346, 'count': 874.39}, {'lng': 119.5214538, 'lat': 35.41665241, 'count': 1025.08}, {'lng': 88.87854452, 'lat': 29.27012232, 'count': 86.3}, {'lng': 118.5823703, 'lat': 24.9105711, 'count': 3564.76}, {'lng': 118.8695953, 'lat': 28.93892253, 'count': 752.78}, {'lng': 103.7941393, 'lat': 25.49300739, 'count': 1005.5}, {'lng': 107.6277483, 'lat': 35.73906858, 'count': 357.61}, {'lng': 113.0505649, 'lat': 23.68426231, 'count': 1112.5}, {'lng': 120.377381, 'lat': 36.06695117, 'count': 5666.19}, {'lng': 119.5947199, 'lat': 39.93427061, 'count': 930.49}, {'lng': 108.650804, 'lat': 21.98385822, 'count': 504.18}, {'lng': 104.903924, 'lat': 25.0909246, 'count': 324.52}, {'lng': 107.5179504, 'lat': 26.25750319, 'count': 356}, {'lng': 107.9787081, 'lat': 26.58709537, 'count': 312.57}, {'lng': 123.911636, 'lat': 47.35230182, 'count': 852.6}, {'lng': 130.9972546, 'lat': 45.76977855, 'count': 302}, {'lng': 100.9689665, 'lat': 22.78075735, 'count': 247.3}, {'lng': 115.0234623, 'lat': 35.76215406, 'count': 774.81}, {'lng': 119.0029943, 'lat': 25.45688325, 'count': 816.98}, {'lng': 113.8493545, 'lat': 27.62625401, 'count': 520.39}, {'lng': 106.6608735, 'lat': 35.54313997, 'count': 231.89}, {'lng': 113.1865269, 'lat': 33.76760361, 'count': 1312.1}, {'lng': 122.0652316, 'lat': 41.11791582, 'count': 926.5}, {'lng': 101.7170599, 'lat': 26.58590677, 'count': 523.99}, {'lng': 98.85269467, 'lat': 25.85586947, 'count': 53.36}, {'lng': 119.521636, 'lat': 26.66972812, 'count': 736.45}, {'lng': 121.539795, 'lat': 29.87088522, 'count': 5125.82}, {'lng': 105.0551226, 'lat': 29.58280293, 'count': 690.28}, {'lng': 112.5224871, 'lat': 32.9925948, 'count': 1955.84}, {'lng': 120.8901076, 'lat': 31.98215841, 'count': 3417.88}, {'lng': 118.1724011, 'lat': 26.64496038, 'count': 728.73}, {'lng': 108.3615594, 'lat': 22.82032196, 'count': 1800.43}, {'lng': 118.791695, 'lat': 32.06232359, 'count': 5010.36}, {'lng': 106.1065663, 'lat': 30.84015413, 'count': 827.82}, {'lng': 115.8531859, 'lat': 28.68647798, 'count': 2207.11}, {'lng': 92.05761118, 'lat': 31.47871485, 'count': 51.15}, {'lng': 129.6261041, 'lat': 44.54969954, 'count': 781}, {'lng': 104.6764962, 'lat': 31.46971942, 'count': 960.2}, {'lng': 116.117641, 'lat': 24.29100482, 'count': 612.36}, {'lng': 103.8464298, 'lat': 30.07824843, 'count': 552.25}, {'lng': 110.9209445, 'lat': 21.66576606, 'count': 1492.09}, {'lng': 118.4994374, 'lat': 31.69874146, 'count': 811.01}, {'lng': 111.1378527, 'lat': 37.51777337, 'count': 845.5}, {'lng': 114.010622, 'lat': 33.58290125, 'count': 682}, {'lng': 112.4480866, 'lat': 34.6191517, 'count': 2321.2}, {'lng': 105.4386581, 'lat': 28.87487998, 'count': 714.81}, {'lng': 111.990481, 'lat': 27.70499879, 'count': 680.72}, {'lng': 104.9191903, 'lat': 33.40270968, 'count': 169.4}, {'lng': 117.0291323, 'lat': 25.10336214, 'count': 991.49}, {'lng': 104.8278129, 'lat': 26.59626563, 'count': 500.64}, {'lng': 116.5005646, 'lat': 31.74703183, 'count': 676.1}, {'lng': 109.411304, 'lat': 24.32815154, 'count': 1260.3}, {'lng': 118.3419832, 'lat': 35.0521819, 'count': 2400}, {'lng': 103.2082859, 'lat': 35.60152658, 'count': 106.38}, {'lng': 111.5126412, 'lat': 36.0881667, 'count': 892.1}, {'lng': 100.0783331, 'lat': 23.88015807, 'count': 218.3}, {'lng': 94.36032592, 'lat': 29.65181336, 'count': 53.1}, {'lng': 115.9796954, 'lat': 36.45661771, 'count': 1606.51}, {'lng': 125.1371162, 'lat': 42.88538694, 'count': 410.1}, {'lng': 123.1670176, 'lat': 41.26732385, 'count': 735.3}, {'lng': 102.266224, 'lat': 27.88485261, 'count': 784.19}, {'lng': 119.2157459, 'lat': 34.59756402, 'count': 1150.81}, {'lng': 119.9183972, 'lat': 28.47103478, 'count': 644.04}, {'lng': 100.2292387, 'lat': 26.88031004, 'count': 143.59}, {'lng': 103.7634075, 'lat': 29.55481269, 'count': 743.92}, {'lng': 116.7006858, 'lat': 39.5198873, 'count': 1331.1}, {'lng': 103.8319523, 'lat': 36.06155856, 'count': 1100.39}, {'lng': 117.670857, 'lat': 36.21369533, 'count': 546.33}, {'lng': 109.2171524, 'lat': 23.75293894, 'count': 385.24}, {'lng': 91.13932178, 'lat': 29.64827666, 'count': 178.91}, {'lng': 102.7207429, 'lat': 25.04067606, 'count': 2120.37}, {'lng': 76.16460238, 'lat': 39.71414332, 'count': 38}, {'lng': 84.88680374, 'lat': 45.57907801, 'count': 710.2}, {'lng': 114.3017875, 'lat': 34.79857281, 'count': 930.22}, {'lng': 75.98680993, 'lat': 39.47018052, 'count': 375}, {'lng': 98.49375654, 'lat': 39.73164639, 'count': 405.03}, {'lng': 115.9969126, 'lat': 29.7076493, 'count': 1032.06}, {'lng': 117.1762445, 'lat': 29.3096995, 'count': 461.5}, {'lng': 112.2340279, 'lat': 30.33771138, 'count': 837.1}, {'lng': 112.1934231, 'lat': 31.03762004, 'count': 730.07}, {'lng': 112.7462041, 'lat': 37.68634055, 'count': 763.8}, {'lng': 112.8456418, 'lat': 35.4912631, 'count': 730.5}, {'lng': 121.1214196, 'lat': 41.09307352, 'count': 916}, {'lng': 119.6427218, 'lat': 29.08213636, 'count': 2094.7}, {'lng': 102.1860474, 'lat': 38.51964831, 'count': 210.51}, {'lng': 116.3681371, 'lat': 23.55239774, 'count': 1008.99}, {'lng': 113.2354554, 'lat': 35.21638822, 'count': 1247.61}, {'lng': 113.0763915, 'lat': 22.58141262, 'count': 1550.37}, {'lng': 98.28854582, 'lat': 39.772293, 'count': 183.91}, {'lng': 120.75423, 'lat': 30.75621991, 'count': 2296}, {'lng': 130.3111332, 'lat': 46.79770871, 'count': 512.5}, {'lng': 113.6810911, 'lat': 34.76924318, 'count': 343.4}, {'lng': 116.581975, 'lat': 35.41530996, 'count': 2542.8}, {'lng': 116.9891449, 'lat': 36.66506686, 'count': 3910.8}, {'lng': 126.5438643, 'lat': 43.83561954, 'count': 1800.6}, {'lng': 114.9879616, 'lat': 27.11641023, 'count': 720.53}, {'lng': 130.9618926, 'lat': 45.29292426, 'count': 419.5}, {'lng': 114.4112285, 'lat': 23.11433866, 'count': 1729.9}, {'lng': 115.0331502, 'lat': 30.20208147, 'count': 687}, {'lng': 118.3322832, 'lat': 29.71708254, 'count': 309.3}, {'lng': 102.013349, 'lat': 35.51994632, 'count': 43.68}, {'lng': 114.8672466, 'lat': 30.45655588, 'count': 862.3}, {'lng': 116.994531, 'lat': 32.62753812, 'count': 603.5}, {'lng': 116.7928684, 'lat': 33.95725992, 'count': 461.6}, {'lng': 119.0098378, 'lat': 33.61175391, 'count': 1345.07}, {'lng': 109.993821, 'lat': 27.55829783, 'count': 674.92}, {'lng': 120.0819525, 'lat': 30.89640398, 'count': 1301.56}, {'lng': 120.8316503, 'lat': 40.7095054, 'count': 531.4}, {'lng': 119.7583897, 'lat': 49.20960951, 'count': 932.01}, {'lng': 111.7419269, 'lat': 40.84086523, 'count': 1865.71}, {'lng': 102.419055, 'lat': 23.37166259, 'count': 650.42}, {'lng': 112.566659, 'lat': 26.89740922, 'count': 1420.34}, {'lng': 115.692747, 'lat': 37.73461477, 'count': 781.5}, {'lng': 127.5211429, 'lat': 50.24364023, 'count': 261.4}, {'lng': 130.2902475, 'lat': 47.34748904, 'count': 251}, {'lng': 114.2913507, 'lat': 35.7472903, 'count': 427.74}, {'lng': 111.5616353, 'lat': 24.40659891, 'count': 380}, {'lng': 115.4747873, 'lat': 35.23412684, 'count': 1151.58}, {'lng': 114.6957615, 'lat': 23.7461946, 'count': 477.19}, {'lng': 108.081007, 'lat': 24.6956751, 'count': 467}, {'lng': 79.92030127, 'lat': 37.11449924, 'count': 100.59}, {'lng': 117.2217886, 'lat': 31.82343995, 'count': 2702.5}, {'lng': 120.1503805, 'lat': 30.27641481, 'count': 5945.82}, {'lng': 107.0188336, 'lat': 33.06981208, 'count': 509.7}, {'lng': 114.4870296, 'lat': 36.61203878, 'count': 2342.2}, {'lng': 97.36894734, 'lat': 37.37665732, 'count': 365.49}, {'lng': 100.6190909, 'lat': 36.28683148, 'count': 69.89}, {'lng': 110.3245171, 'lat': 20.03281627, 'count': 590.55}, {'lng': 102.1022646, 'lat': 36.502147, 'count': 173.31}, {'lng': 100.8994719, 'lat': 36.95431158, 'count': 54.53}, {'lng': 93.51328622, 'lat': 42.81696646, 'count': 165.96}, {'lng': 126.5288784, 'lat': 45.80175924, 'count': 3665.9}, {'lng': 100.2436805, 'lat': 34.4731433, 'count': 20.43}, {'lng': 110.2856192, 'lat': 25.27640391, 'count': 1108.63}, {'lng': 106.6265367, 'lat': 26.65114407, 'count': 1121.82}, {'lng': 109.5947374, 'lat': 23.11442232, 'count': 527.8}, {'lng': 113.2591135, 'lat': 23.13183682, 'count': 10604.48}, {'lng': 105.8396287, 'lat': 32.43780735, 'count': 321.87}, {'lng': 106.6294221, 'lat': 30.45870446, 'count': 537.2}, {'lng': 106.2384043, 'lat': 36.01602421, 'count': 104.03}, {'lng': 114.928843, 'lat': 25.83240066, 'count': 1119.47}, {'lng': 101.9607982, 'lat': 30.05233857, 'count': 122.83}, {'lng': 102.9095347, 'lat': 34.98442561, 'count': 67.84}, {'lng': 115.8087528, 'lat': 32.89209703, 'count': 720}, {'lng': 121.6649338, 'lat': 42.01951879, 'count': 361.1}, {'lng': 116.3531817, 'lat': 27.95233706, 'count': 630.01}, {'lng': 123.9514413, 'lat': 41.87872723, 'count': 890.2}, {'lng': 119.2917036, 'lat': 26.07760642, 'count': 3068.21}, {'lng': 113.1159282, 'lat': 23.0240907, 'count': 5651.52}, {'lng': 108.3432726, 'lat': 21.6177666, 'count': 319.54}, {'lng': 109.4832804, 'lat': 30.27475683, 'count': 351.13}, {'lng': 114.8898004, 'lat': 30.3946239, 'count': 395.29}, {'lng': 109.7755978, 'lat': 39.60723695, 'count': 2643.2}, {'lng': 118.669129, 'lat': 37.43409498, 'count': 2359.94}, {'lng': 113.7465722, 'lat': 23.02325151, 'count': 4246.25}, {'lng': 104.6235958, 'lat': 35.58115528, 'count': 156.02}, {'lng': 99.70114502, 'lat': 27.82237393, 'count': 77.1}, {'lng': 116.2968283, 'lat': 37.45016095, 'count': 1657.82}, {'lng': 104.3953334, 'lat': 31.12898208, 'count': 921.3}, {'lng': 98.58473943, 'lat': 24.43651307, 'count': 140.63}, {'lng': 124.3790872, 'lat': 40.12576492, 'count': 728.9}, {'lng': 124.7033777, 'lat': 52.33379013, 'count': 98.18}, {'lng': 113.2931201, 'lat': 40.07562569, 'count': 694.3}, {'lng': 125.0975828, 'lat': 46.58807767, 'count': 2900.1}, {'lng': 121.6097417, 'lat': 38.91325595, 'count': 5158.1}, {'lng': 100.2289929, 'lat': 25.59492808, 'count': 474.9}, {'lng': 107.463356, 'lat': 31.21170088, 'count': 819.2}, {'lng': 101.5265938, 'lat': 25.04856457, 'count': 404.44}, {'lng': 118.3117158, 'lat': 32.30356473, 'count': 695.65}, {'lng': 107.3608207, 'lat': 22.38003899, 'count': 389.2}, {'lng': 118.8806869, 'lat': 42.25587957, 'count': 1080.18}, {'lng': 117.4902514, 'lat': 30.67658142, 'count': 300.8}, {'lng': 117.9373554, 'lat': 40.97720104, 'count': 880.5}, {'lng': 104.0623615, 'lat': 30.66102365, 'count': 5551.3}, {'lng': 113.0092463, 'lat': 25.77349554, 'count': 1081.8}, {'lng': 116.6182465, 'lat': 23.65972359, 'count': 559.2}, {'lng': 120.444675, 'lat': 41.5714384, 'count': 654.4}, {'lng': 117.8594327, 'lat': 31.59997305, 'count': 625}, {'lng': 119.9697279, 'lat': 31.81213755, 'count': 2976.7}, {'lng': 111.6928965, 'lat': 29.03469839, 'count': 1491.6}, {'lng': 87.30511364, 'lat': 44.00986351, 'count': 557}, {'lng': 97.17147819, 'lat': 31.14328311, 'count': 67.5}, {'lng': 116.8330464, 'lat': 38.30388067, 'count': 2203}, {'lng': 82.06287061, 'lat': 44.90456223, 'count': 128.27}, {'lng': 115.7731346, 'lat': 33.84601674, 'count': 512.78}, {'lng': 117.9648236, 'lat': 37.38135712, 'count': 1551.52}, {'lng': 105.2807841, 'lat': 27.30595926, 'count': 600.85}, {'lng': 123.7605949, 'lat': 41.29209215, 'count': 860.4}, {'lng': 116.4011742, 'lat': 39.90281066, 'count': 13777.9}, {'lng': 109.1156021, 'lat': 21.48359313, 'count': 397.6}, {'lng': 99.16054296, 'lat': 25.1149115, 'count': 260.9}, {'lng': 115.4582785, 'lat': 38.87304898, 'count': 2050.3}, {'lng': 107.129072, 'lat': 34.3736758, 'count': 976.09}, {'lng': 109.8346622, 'lat': 40.65628316, 'count': 2460.8}, {'lng': 117.3838771, 'lat': 32.91798917, 'count': 636.9}, {'lng': 106.6148632, 'lat': 23.90526956, 'count': 563.51}, {'lng': 104.134792, 'lat': 36.54472787, 'count': 311.18}, {'lng': 126.4177183, 'lat': 41.93748415, 'count': 433.17}, {'lng': 122.8331446, 'lat': 45.61772004, 'count': 441.5}, {'lng': 106.740593, 'lat': 31.86741366, 'count': 280.9}, {'lng': 86.14261698, 'lat': 41.76263044, 'count': 638}, {'lng': 107.3810685, 'lat': 40.76472139, 'count': 608.6}, {'lng': 122.9891958, 'lat': 41.1066585, 'count': 2200}, {'lng': 114.3866674, 'lat': 36.09742396, 'count': 1311.3}, {'lng': 105.9442251, 'lat': 26.25659385, 'count': 232.92}, {'lng': 117.0514282, 'lat': 30.52719638, 'count': 988.11}, {'lng': 109.0244482, 'lat': 32.68685351, 'count': 327.06}, {'lng': 80.10344186, 'lat': 32.50350883, 'count': 18.5}, {'lng': 88.13788415, 'lat': 47.84359539, 'count': 134.86}, {'lng': 105.7246936, 'lat': 38.85132383, 'count': 305.89}, {'lng': 80.25843778, 'lat': 41.16779774, 'count': 606.3}, {'lng': 102.2229954, 'lat': 31.90164005, 'count': 132.76}];
//判断浏览器是否支持canvas
if(!isSupportCanvas()){alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')}
//热力图初始化
heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20,"maxOpacity":0.6});
//地图添加热力图层
map.addOverlay(heatmapOverlay);
//热力图层添加数据
//调整max的值效果会不一样，但count值一定要在max值之内
heatmapOverlay.setDataSet({data:points,max:1200});
//不知道作用
//判断浏览区是否支持canvas
heatmapOverlay.show();
function isSupportCanvas(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
closeHeatmap();
</script>
第二种方式通过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处理环节，和之前的数据处理方式一样。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="/static/js/echarts.min.js"></script>
<script src="/static/js/jquery.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=akZILvuv0Ovr6uU3eKlaXP2Pgx9jprjO"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<title>热力图功能示例</title>
<style type="text/css">
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%;}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("container");
//设置地图的中心点
var point = new BMap.Point(117.830586, 30.943465);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 13);
// 允许滚轮缩放
map.enableScrollWheelZoom();
$.ajax({
url:'/getjson14',
result:{},
type:'GET',
dataType:'json',
success:function(result){
var points = result.data;
//判断浏览器是否支持canvas
if(!isSupportCanvas()){alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')}
//热力图初始化
heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20,"maxOpacity":0.6});
//地图添加热力图层
map.addOverlay(heatmapOverlay);
//热力图层添加数据
//调整max的值效果会不一样，但count值一定要在max值之内
heatmapOverlay.setDataSet({data:points,max:12000});
//不知道作用
//判断浏览区是否支持canvas
heatmapOverlay.show();
function isSupportCanvas(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
},
error:function (msg) {
console.log(msg);
alert('系统发生错误');
}
})
</script>
最后，谢谢关注，谢谢支持！