频道栏目
首页 > 网络 > 云计算 > 正文

全国大学分布热力图实现教程

2017-12-07 13:35:05      个评论    来源:jgzquanquan的博客  
收藏   我要投稿

1.数据准备

第一步得有全国大学经纬度信息,本来打算自己爬取,后来找到网上有人已经打包好的全国大学经纬度信息,但是由于它是腾讯坐标(用的是火星坐标GCJ_02),而我们现在要调用的是百度地图的api,其用的是百度坐标。下面稍微解释一下几种坐标的差别。

 地球坐标 (WGS84) 国际标准,从 GPS 设备中取出的数据的坐标系 国际地图提供商使用的坐标系

 火星坐标 (GCJ-02)也叫国测局坐标系 中国标准,从国行移动设备中定位获取的坐标数据使用这个坐标系 国家规定: 国内出版的各种地图系统(包括电子形式),必须至少 采用GCJ-02对地理位置进行首次加密

 百度坐标 (BD-09) 百度标准,百度 SDK,百度地图,Geocoding 使用(本来就乱了, 百度又在火星坐标上来个二次加密)

2.数据处理

接下来就是处理数据了,首先进行的是将腾讯坐标转换成百度坐标,数据格式如下:

中国人民大学 39.99173116.30965

清华大学 40.0036116.32697

北京交通大学 39.95092116.34107

北京工业大学 39.87385116.48067

北京航空航天大学 39.98421116.34975

北京理工大学 39.96091116.31667

北京科技大学 39.99135116.36072

北方工业大学 39.9289116.20819

北京化工大学 39.97069116.42098

北京工商大学 39.9256116.31492

北京服装学院 39.97402116.43062

北京邮电大学 39.96337116.35685

详细数据url地址:http://download.csdn.net/download/jgzquanquan/10148627

然后我需要要坐标转换,并且以一定的格式输出以方便传入到百度api中,数据格式如下:

{"lng":116.31608196337851,"lat":39.99792627537259,"count":50},

{"lng":116.33340814277092,"lat":40.009780570502635,"count":50},

{"lng":116.34750970867914,"lat":39.957086116513146,"count":50},

{"lng":116.48715543594966,"lat":39.87986870711284,"count":50},

{"lng":116.35619452073995,"lat":39.99036838691412,"count":50},

{"lng":116.32310239107963,"lat":39.967099252661534,"count":50},

{"lng":116.36716864919447,"lat":39.99749774045856,"count":50},

{"lng":116.21459074380809,"lat":39.93517523825392,"count":50},

{"lng":116.42744879742955,"lat":39.976775219057615,"count":50},

详细数据url地址:http://download.csdn.net/download/jgzquanquan/10148635

这边我主要用了python才处理这些数据,具体代码如下:

import math  
def main():  
    queryFile = open("poi_university.txt", 'r', encoding='utf-8')  
    fout = open('university_lee1.txt', 'a', encoding='utf-8')  
    for query in queryFile:  
        splitRes = query.split('\t')  
        if len(splitRes) != 3:  
            print(query, ' 格式不正确')  
        else:  
            uinfo = []  
            lat = query.split('\t')[1]  
            lng = query.split('\t')[2]  
            # 下面是数据转换的逻辑  
            x=float(lng.rstrip('\n'))  
            y=float(lat)  
            z=math.sqrt(x*x+y*y)+0.00002*math.sin(y*math.pi)  
            theta=math.atan2(y,x)+0.000003*math.cos(x*math.pi)  
            bd_lng=z*math.cos(theta)+0.0065  
            bd_lat=z*math.sin(theta)+0.006  
            str1="{"+"\"lng\":"+str(bd_lng)+","+"\"lat\":" +str(bd_lat)+",\"count\":50},"  
            fout.write(str1 + '\n')  
            print(str1)  
    queryFile.close()  
    fout.close()  
main()

3.百度api

这边我主要找到了百度地图web端api中的一个关于热力图的例子,该地址的url为:http://lbsyun.baidu.com/jsdemo.htm#c1_15;我主要修改了其数据源,以及再改了一些参数,下面是该例子的源码

<!DOCTYPE html>  
<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 type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></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>  
    <div id="r-result">  
        <input type="button"  onclick="openHeatmap();" value="显示热力图"/><input type="button"  onclick="closeHeatmap();" value="关闭热力图"/>  
    </div>  
</body>  
</html>  
<script type="text/javascript">  
    var map = new BMap.Map("container");          // 创建地图实例  
  
    var point = new BMap.Point(116.418261, 39.921984);  
    map.centerAndZoom(point, 15);             // 初始化地图,设置中心点坐标和地图级别  
    map.enableScrollWheelZoom(); // 允许滚轮缩放  
    
    var points =[  
    {"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}];  
     
    if(!isSupportCanvas()){  
        alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')  
    }  
    //详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md  
    //参数说明如下:  
    /* visible 热力图是否显示,默认为true  
     * opacity 热力的透明度,1-100  
     * radius 势力图的每个点的半径大小     
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示  
     *  {  
            .2:'rgb(0, 255, 255)',  
            .5:'rgb(0, 110, 255)',  
            .8:'rgb(100, 0, 255)'  
        }  
        其中 key 表示插值的位置, 0~1.   
            value 为颜色值.   
     */  
    heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});  
    map.addOverlay(heatmapOverlay);  
    heatmapOverlay.setDataSet({data:points,max:100});  
    //是否显示热力图  
    function openHeatmap(){  
        heatmapOverlay.show();  
    }  
    function closeHeatmap(){  
        heatmapOverlay.hide();  
    }  
    closeHeatmap();  
    function setGradient(){  
        /*格式如下所示:  
        {  
            0:'rgb(102, 255, 0)',  
            .5:'rgb(255, 170, 0)',  
            1:'rgb(255, 0, 0)'  
        }*/  
        var gradient = {};  
        var colors = document.querySelectorAll("input[type='color']");  
        colors = [].slice.call(colors,0);  
        colors.forEach(function(ele){  
            gradient[ele.getAttribute("data-key")] = ele.value;   
        });  
        heatmapOverlay.setOptions({"gradient":gradient});  
    }  
    //判断浏览区是否支持canvas  
    function isSupportCanvas(){  
        var elem = document.createElement('canvas');  
        return !!(elem.getContext && elem.getContext('2d'));  
    }  
</script>  

该html详情请见我的资源:http://download.csdn.net/download/jgzquanquan/10148642

4.展示效果

\

上一篇:MapReduce数据去重实例
下一篇:AdaBoost简介及原理介绍
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站