Python数据分析及可视化实例之热力云图

Python数据分析及可视化实例之热力云图

系列文章总目录:Python数据分析及可视化实例目录


本节和Bokeh无关,

在开发微信小程序海豹战队的过程中,

可以用用微信小程序API实现地理坐标显示,

但是看着别人云图那么赞,还是忍不住寻找方法,

于是找到了一种最简单的方式:

利用腾讯地图提供的API,通过FLask Web进行显示。

lbs.qq.com/javascript_v

源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>腾讯地图热力图插件</title>
    <style>
        body, html {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0px;
            padding: 0px;
        }

        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
    </style>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
    <script src="http://open.map.qq.com/apifiles/plugins/heatmap/heatmap.min.js"></script>
</head>
<body>

<div class="heatmap" style="width:100%;height:100%" id="map-canvas">

</div>
<script>

    window.onload = function () {
        map = new qq.maps.Map(document.getElementById("map-canvas"), {
            zoom: 14,
            center: new qq.maps.LatLng(39.921984, 116.418261)
        });

        //地图异步加载,在idle或者tilesloaded后初始化
        qq.maps.event.addListenerOnce(map, "idle", function () {
            if (QQMapPlugin.isSupportCanvas) {
                heatmap = new QQMapPlugin.HeatmapOverlay(map,
                        {
                            //点半径,设置为1即可
                            "radius": 1,
                            //热力图最大透明度
                            "maxOpacity": 0.8,
                            //是否在每一屏都开启重新计算,如果为true则每一屏都会有一个红点
                            "useLocalExtrema": true,
                            //设置大小字段
                            "valueField": 'count'
                        }
                );
                
                testData = {
                    max: 100,
                    data: [
                        {"lng": 116.418261, "lat": 39.921984, "count": 50},
                        {"lng": 116.423332, "lat": 39.916532, "count": 51},
                        {"lng": 116.419787, "lat": 39.930658, "count": 15},
                        {"lng": 116.418455, "lat": 39.920921, "count": 40},
                        {"lng": 116.418843, "lat": 39.915516, "count": 100},
                        {"lng": 116.42546, "lat": 39.918503, "count": 6},
                        {"lng": 116.423289, "lat": 39.919989, "count": 18},
                        {"lng": 116.418162, "lat": 39.915051, "count": 80},
                        {"lng": 116.422039, "lat": 39.91782, "count": 11},
                        {"lng": 116.41387, "lat": 39.917253, "count": 7},
                        {"lng": 116.41773, "lat": 39.919426, "count": 42},
                        {"lng": 116.421107, "lat": 39.916445, "count": 4},
                        {"lng": 116.417521, "lat": 39.917943, "count": 27},
                        {"lng": 116.419812, "lat": 39.920836, "count": 23},
                        {"lng": 116.420682, "lat": 39.91463, "count": 60},
                        {"lng": 116.415424, "lat": 39.924675, "count": 8},
                        {"lng": 116.419242, "lat": 39.914509, "count": 15},
                        {"lng": 116.422766, "lat": 39.921408, "count": 25},
                        {"lng": 116.421674, "lat": 39.924396, "count": 21},
                        {"lng": 116.427268, "lat": 39.92267, "count": 1},
                        {"lng": 116.417721, "lat": 39.920034, "count": 51},
                        {"lng": 116.412456, "lat": 39.92667, "count": 7},
                        {"lng": 116.420432, "lat": 39.919114, "count": 11},
                        {"lng": 116.425013, "lat": 39.921611, "count": 35},
                        {"lng": 116.418733, "lat": 39.931037, "count": 22},
                        {"lng": 116.419336, "lat": 39.931134, "count": 4},
                        {"lng": 116.413557, "lat": 39.923254, "count": 5},
                        {"lng": 116.418367, "lat": 39.92943, "count": 3},
                        {"lng": 116.424312, "lat": 39.919621, "count": 100},
                        {"lng": 116.423874, "lat": 39.919447, "count": 87},
                        {"lng": 116.424225, "lat": 39.923091, "count": 32},
                        {"lng": 116.417801, "lat": 39.921854, "count": 44},
                        {"lng": 116.417129, "lat": 39.928227, "count": 21},
                        {"lng": 116.426426, "lat": 39.922286, "count": 80},
                        {"lng": 116.421597, "lat": 39.91948, "count": 32},
                        {"lng": 116.423895, "lat": 39.920787, "count": 26},
                        {"lng": 116.423563, "lat": 39.921197, "count": 17},
                        {"lng": 116.417982, "lat": 39.922547, "count": 17},
                        {"lng": 116.426126, "lat": 39.921938, "count": 25},
                        {"lng": 116.42326, "lat": 39.915782, "count": 100},
                        {"lng": 116.419239, "lat": 39.916759, "count": 39},
                        {"lng": 116.417185, "lat": 39.929123, "count": 11},
                        {"lng": 116.417237, "lat": 39.927518, "count": 9},
                        {"lng": 116.417784, "lat": 39.915754, "count": 47},
                        {"lng": 116.420193, "lat": 39.917061, "count": 52},
                        {"lng": 116.422735, "lat": 39.915619, "count": 100},
                        {"lng": 116.418495, "lat": 39.915958, "count": 46},
                        {"lng": 116.416292, "lat": 39.931166, "count": 9},
                        {"lng": 116.419916, "lat": 39.924055, "count": 8},
                        {"lng": 116.42189, "lat": 39.921308, "count": 11},
                        {"lng": 116.413765, "lat": 39.929376, "count": 3},
                        {"lng": 116.418232, "lat": 39.920348, "count": 50},
                        {"lng": 116.417554, "lat": 39.930511, "count": 15},
                        {"lng": 116.418568, "lat": 39.918161, "count": 23},
                        {"lng": 116.413461, "lat": 39.926306, "count": 3},
                        {"lng": 116.42232, "lat": 39.92161, "count": 13},
                        {"lng": 116.4174, "lat": 39.928616, "count": 6},
                        {"lng": 116.424679, "lat": 39.915499, "count": 21},
                        {"lng": 116.42171, "lat": 39.915738, "count": 29},
                        {"lng": 116.417836, "lat": 39.916998, "count": 99},
                        {"lng": 116.420755, "lat": 39.928001, "count": 10},
                        {"lng": 116.414077, "lat": 39.930655, "count": 14},
                        {"lng": 116.426092, "lat": 39.922995, "count": 16},
                        {"lng": 116.41535, "lat": 39.931054, "count": 15},
                        {"lng": 116.413022, "lat": 39.921895, "count": 13},
                        {"lng": 116.415551, "lat": 39.913373, "count": 17},
                        {"lng": 116.421191, "lat": 39.926572, "count": 1},
                        {"lng": 116.419612, "lat": 39.917119, "count": 9},
                        {"lng": 116.418237, "lat": 39.921337, "count": 54},
                        {"lng": 116.423776, "lat": 39.921919, "count": 26},
                        {"lng": 116.417694, "lat": 39.92536, "count": 17},
                        {"lng": 116.415377, "lat": 39.914137, "count": 19},
                        {"lng": 116.417434, "lat": 39.914394, "count": 43},
                        {"lng": 116.42588, "lat": 39.922622, "count": 27},
                        {"lng": 116.418345, "lat": 39.919467, "count": 8},
                        {"lng": 116.426883, "lat": 39.917171, "count": 3},
                        {"lng": 116.423877, "lat": 39.916659, "count": 34},
                        {"lng": 116.415712, "lat": 39.915613, "count": 14},
                        {"lng": 116.419869, "lat": 39.931416, "count": 12},
                        {"lng": 116.416956, "lat": 39.925377, "count": 11},
                        {"lng": 116.42066, "lat": 39.925017, "count": 38},
                        {"lng": 116.416244, "lat": 39.920215, "count": 91},
                        {"lng": 116.41929, "lat": 39.915908, "count": 54},
                        {"lng": 116.422116, "lat": 39.919658, "count": 21},
                        {"lng": 116.4183, "lat": 39.925015, "count": 15},
                        {"lng": 116.421969, "lat": 39.913527, "count": 3},
                        {"lng": 116.422936, "lat": 39.921854, "count": 24},
                        {"lng": 116.41905, "lat": 39.929217, "count": 12},
                        {"lng": 116.424579, "lat": 39.914987, "count": 57},
                        {"lng": 116.42076, "lat": 39.915251, "count": 70},
                        {"lng": 116.425867, "lat": 39.918989, "count": 8}]
                };
                //绘制热力图
                heatmap.setData(testData);
            } else {
                alert("您的浏览器不支持canvas,无法绘制热力图!!")
            }

        });


    };
</script>
</body>
</html>


本主实现效果:

intumu.com/haibao/bokeh



胶水语言博大精深,

本主只得一二为新人带路:

Python数据分析及可视化实例目录


最后,别只收藏不关注哈

编辑于 2017-10-13

文章被以下专栏收录