Python數據分析及可視化實例之熱力雲圖

01-26

系列文章總目錄：Python數據分析及可視化實例目錄

本節和Bokeh無關，

在開發微信小程序海豹戰隊的過程中，

可以用用微信小程序API實現地理坐標顯示，

但是看著別人云圖那麼贊，還是忍不住尋找方法，

於是找到了一種最簡單的方式：

利用騰訊地圖提供的API，通過FLask Web進行顯示。

http://lbs.qq.com/javascript_v2/case-run.html#overlay-heatmap

源碼：

<!DOCTYPE html>n<html lang="en">n<head>n <meta charset="utf-8">n <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />n <meta name="viewport" content="width_=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>n <title>騰訊地圖熱力圖插件</title>n <style>n body, html {n width: 100%;n height: 100%;n }nn * {n margin: 0px;n padding: 0px;n }nn body, button, input, select, textarea {n font: 12px/16px Verdana, Helvetica, Arial, sans-serif;n }n </style>n <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>n <script src="http://open.map.qq.com/apifiles/plugins/heatmap/heatmap.min.js"></script>n</head>n<body>nn<div class="heatmap" stylex="width:100%;height:100%" id="map-canvas">nn</div>n<script>nn window.onload = function () {n map = new qq.maps.Map(document.getElementById("map-canvas"), {n zoom: 14,n center: new qq.maps.LatLng(39.921984, 116.418261)n });nn //地圖非同步載入，在idle或者tilesloaded後初始化n qq.maps.event.addListenerOnce(map, "idle", function () {n if (QQMapPlugin.isSupportCanvas) {n heatmap = new QQMapPlugin.HeatmapOverlay(map,n {n //點半徑，設置為1即可n "radius": 1,n //熱力圖最大透明度n "maxOpacity": 0.8,n //是否在每一屏都開啟重新計算，如果為true則每一屏都會有一個紅點n "useLocalExtrema": true,n //設置大小欄位n "valueField": countn }n );n n testData = {n max: 100,n data: [n {"lng": 116.418261, "lat": 39.921984, "count": 50},n {"lng": 116.423332, "lat": 39.916532, "count": 51},n {"lng": 116.419787, "lat": 39.930658, "count": 15},n {"lng": 116.418455, "lat": 39.920921, "count": 40},n {"lng": 116.418843, "lat": 39.915516, "count": 100},n {"lng": 116.42546, "lat": 39.918503, "count": 6},n {"lng": 116.423289, "lat": 39.919989, "count": 18},n {"lng": 116.418162, "lat": 39.915051, "count": 80},n {"lng": 116.422039, "lat": 39.91782, "count": 11},n {"lng": 116.41387, "lat": 39.917253, "count": 7},n {"lng": 116.41773, "lat": 39.919426, "count": 42},n {"lng": 116.421107, "lat": 39.916445, "count": 4},n {"lng": 116.417521, "lat": 39.917943, "count": 27},n {"lng": 116.419812, "lat": 39.920836, "count": 23},n {"lng": 116.420682, "lat": 39.91463, "count": 60},n {"lng": 116.415424, "lat": 39.924675, "count": 8},n {"lng": 116.419242, "lat": 39.914509, "count": 15},n {"lng": 116.422766, "lat": 39.921408, "count": 25},n {"lng": 116.421674, "lat": 39.924396, "count": 21},n {"lng": 116.427268, "lat": 39.92267, "count": 1},n {"lng": 116.417721, "lat": 39.920034, "count": 51},n {"lng": 116.412456, "lat": 39.92667, "count": 7},n {"lng": 116.420432, "lat": 39.919114, "count": 11},n {"lng": 116.425013, "lat": 39.921611, "count": 35},n {"lng": 116.418733, "lat": 39.931037, "count": 22},n {"lng": 116.419336, "lat": 39.931134, "count": 4},n {"lng": 116.413557, "lat": 39.923254, "count": 5},n {"lng": 116.418367, "lat": 39.92943, "count": 3},n {"lng": 116.424312, "lat": 39.919621, "count": 100},n {"lng": 116.423874, "lat": 39.919447, "count": 87},n {"lng": 116.424225, "lat": 39.923091, "count": 32},n {"lng": 116.417801, "lat": 39.921854, "count": 44},n {"lng": 116.417129, "lat": 39.928227, "count": 21},n {"lng": 116.426426, "lat": 39.922286, "count": 80},n {"lng": 116.421597, "lat": 39.91948, "count": 32},n {"lng": 116.423895, "lat": 39.920787, "count": 26},n {"lng": 116.423563, "lat": 39.921197, "count": 17},n {"lng": 116.417982, "lat": 39.922547, "count": 17},n {"lng": 116.426126, "lat": 39.921938, "count": 25},n {"lng": 116.42326, "lat": 39.915782, "count": 100},n {"lng": 116.419239, "lat": 39.916759, "count": 39},n {"lng": 116.417185, "lat": 39.929123, "count": 11},n {"lng": 116.417237, "lat": 39.927518, "count": 9},n {"lng": 116.417784, "lat": 39.915754, "count": 47},n {"lng": 116.420193, "lat": 39.917061, "count": 52},n {"lng": 116.422735, "lat": 39.915619, "count": 100},n {"lng": 116.418495, "lat": 39.915958, "count": 46},n {"lng": 116.416292, "lat": 39.931166, "count": 9},n {"lng": 116.419916, "lat": 39.924055, "count": 8},n {"lng": 116.42189, "lat": 39.921308, "count": 11},n {"lng": 116.413765, "lat": 39.929376, "count": 3},n {"lng": 116.418232, "lat": 39.920348, "count": 50},n {"lng": 116.417554, "lat": 39.930511, "count": 15},n {"lng": 116.418568, "lat": 39.918161, "count": 23},n {"lng": 116.413461, "lat": 39.926306, "count": 3},n {"lng": 116.42232, "lat": 39.92161, "count": 13},n {"lng": 116.4174, "lat": 39.928616, "count": 6},n {"lng": 116.424679, "lat": 39.915499, "count": 21},n {"lng": 116.42171, "lat": 39.915738, "count": 29},n {"lng": 116.417836, "lat": 39.916998, "count": 99},n {"lng": 116.420755, "lat": 39.928001, "count": 10},n {"lng": 116.414077, "lat": 39.930655, "count": 14},n {"lng": 116.426092, "lat": 39.922995, "count": 16},n {"lng": 116.41535, "lat": 39.931054, "count": 15},n {"lng": 116.413022, "lat": 39.921895, "count": 13},n {"lng": 116.415551, "lat": 39.913373, "count": 17},n {"lng": 116.421191, "lat": 39.926572, "count": 1},n {"lng": 116.419612, "lat": 39.917119, "count": 9},n {"lng": 116.418237, "lat": 39.921337, "count": 54},n {"lng": 116.423776, "lat": 39.921919, "count": 26},n {"lng": 116.417694, "lat": 39.92536, "count": 17},n {"lng": 116.415377, "lat": 39.914137, "count": 19},n {"lng": 116.417434, "lat": 39.914394, "count": 43},n {"lng": 116.42588, "lat": 39.922622, "count": 27},n {"lng": 116.418345, "lat": 39.919467, "count": 8},n {"lng": 116.426883, "lat": 39.917171, "count": 3},n {"lng": 116.423877, "lat": 39.916659, "count": 34},n {"lng": 116.415712, "lat": 39.915613, "count": 14},n {"lng": 116.419869, "lat": 39.931416, "count": 12},n {"lng": 116.416956, "lat": 39.925377, "count": 11},n {"lng": 116.42066, "lat": 39.925017, "count": 38},n {"lng": 116.416244, "lat": 39.920215, "count": 91},n {"lng": 116.41929, "lat": 39.915908, "count": 54},n {"lng": 116.422116, "lat": 39.919658, "count": 21},n {"lng": 116.4183, "lat": 39.925015, "count": 15},n {"lng": 116.421969, "lat": 39.913527, "count": 3},n {"lng": 116.422936, "lat": 39.921854, "count": 24},n {"lng": 116.41905, "lat": 39.929217, "count": 12},n {"lng": 116.424579, "lat": 39.914987, "count": 57},n {"lng": 116.42076, "lat": 39.915251, "count": 70},n {"lng": 116.425867, "lat": 39.918989, "count": 8}]n };n //繪製熱力圖n heatmap.setData(testData);n } else {n alert("您的瀏覽器不支持canvas，無法繪製熱力圖！！")n }nn });nnn };n</script>n</body>n</html>n

本主實現效果：

https://intumu.com/haibao/bokeh/?postid=59b08f07cba65609f9c68bba

膠水語言博大精深，

本主只得一二為新人帶路：

Python數據分析及可視化實例目錄

Python數據分析及可視化實例之熱力雲圖

源碼：

最後，別只收藏不關注哈