腾讯位置大数据中提供了位置流量趋势数据、区域热力图数据、人口迁徙数据。今天就来讲讲区域热力图，如何获取数据，以及对数据的解读



一、数据的获取

F12打开开发者工具，点击NetWork，如上图所示则为当时的数据：



下图所示为每个时间段的数据：



热力图数据的部分示例：



可能有小伙伴看到这个数据一头雾水，其实我也是，后来经过一番搜索，以及探索终于发现了数据中的奥秘，以及如何还原为经纬度坐标数据。

可能大家直觉的才香前面就是直角坐标，后面是对应坐标的人数，那该如何还原呢，那就需要确定原点，以及直角坐标系中一个单位到底代表的是什么？

首先解决坐标原点问题



该数据中有一个center_gcj属性，就是该区域的中点，也是直角坐标系的原点。
其次坐标系中一个单位到底代表多少，代表什么



解铃还须系铃人啊，通过看源码，发现了答案



也就是说1个单位代表0.0001的经纬度。解密完毕，希望能帮到有需要的小伙伴们。

import requests
import json
import pandas as pd


def get_TecentData():
    url = 'https://heat.qq.com/api/getHeatDataByDate.php?region_id=5381&date=2020-09-25&sub_domain='
    response = requests.post(url)
    datas = response.text
    dictdatas = json.loads(datas)  # dumps是将dict转化成str格式，loads是将str转化成dict格式
    print(dictdatas)
    result1 = pd.DataFrame.from_dict(dictdatas, orient='index').T
    result1.dropna()
    print(result1)
    print(result1.dropna())
    result1.to_csv('t1.txt', mode='a', index=False, header=None)


if __name__ == '__main__':
    get_TecentData()

export default {
  data() {
    return {
      adCode: 420100, // 武汉市code
      disProvince: null, // 区域图层
      depth: 2, // 区域等级 0省级 1市级 2区县级
      colors: {}, // 区域颜色
      heatmap: null, // 热力图
      city: '武汉市'
    }
  },
  created() {
    var that = this
    var url =
      'https://webapi.amap.com/maps?v=1.4.11&key=申请的key&plugin=AMap.DistrictSearch,AMap.DistrictLayer'
    var jsapi = document.createElement('script')
    jsapi.charset = 'utf-8'
    jsapi.src = url
    // 加载完后的回调
    jsapi.onload = function() {
      // 防止插件没有初始化完成
      setTimeout(() => {
        that.getData()
      }, 500)
    }
    document.head.appendChild(jsapi)
  },
  methods: {
    // 创建地图
    initMap() {
      var that = this
      this.map = new AMap.Map('heatMap', {
        zoom: 9,
        center: [114.318924, 30.6],
        pitch: 1,
        resizeEnable: true,
        showIndoorMap: false
      })
      // 绘制遮罩层
      new AMap.DistrictSearch({
        extensions: 'all',
        subdistrict: 0
      }).search(that.city, function(status, result) {
        // 外多边形坐标数组和内多边形坐标数组
        var outer = [
          new AMap.LngLat(-360, 90, true),
          new AMap.LngLat(-360, -90, true),
          new AMap.LngLat(360, -90, true),
          new AMap.LngLat(360, 90, true)
        ]
        var holes = result.districtList[0].boundaries
        var pathArray = [outer]
        pathArray.push.apply(pathArray, holes)
        var polygon = new AMap.Polygon({
          pathL: pathArray,
          strokeColor: '#193976',
          strokeWeight: 1,
          fillColor: '#193976', // 遮罩背景色
          fillOpacity: 1
        })
        polygon.setPath(pathArray)
        that.map.add(polygon)
      })
    },
    // 创建区域图层
    initPro(code, dep) {
      let that = this
      this.disProvince && disProvince.setMap(null)
      this.disProvince = new AMap.DistrictLayer.Province({
        zIndex: 12,
        adcode: [code],
        depth: dep,
        styles: {
          fill: function(properties) {
            // properties为可用于做样式映射的字段，包含
            // NAME_CHN:中文名称
            // adcode_pro
            // adcode_cit
            // adcode
            var adcode = properties.adcode
            return that.getColorByAdcode(adcode)
          },
          'province-stroke': 'cornflowerblue',
          'city-stroke': 'white', // 中国地级市边界
          'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
        }
      })
      this.disProvince.setMap(this.map)
    },
    // 颜色辅助方法
    getColorByAdcode(adcode) {
      if (!this.colors[adcode]) {
        var gb = Math.random() * 155
        this.colors[adcode] = 'rgb(' + gb + ',' + gb + ',250)'
      }
      return this.colors[adcode]
    },
    // 限制地图显示范围
    lockMapBounds() {
      var bounds = this.map.getBounds()
      this.map.setLimitBounds(bounds)
    },
    // 绘制热力图
    drwaHeatmap(heatmapData) {
      var that = this
      if (!this.isSupportCanvas()) {
        alert(
          '热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~'
        )
      }
      this.map.plugin(['AMap.Heatmap'], function() {
        // 初始化heatmap对象
        that.heatmap = new AMap.Heatmap(that.map, {
          radius: 25, // 给定半径
          opacity: [0, 0.8]
          /*,
            gradient:{
                0.5: 'blue',
                0.65: 'rgb(117,211,248)',
                0.7: 'rgb(0, 255, 0)',
                0.9: '#ffea00',
                1.0: 'red'
            }
             */
        })
        that.heatmap.setDataSet({
          data: heatmapData.data, // [{lng:'',lag:'',count:}]
          max: heatmapData.max
        })
      })
    },
    // 获取数据
    getData() {
       // 获取热力数据
      commIssueHeatMap().then(res => {
        let data = {
          max: 100, // 最大值
          data: res.data.result
        }
        this.initMap()
        this.initPro(this.adCode, this.depth)
        this.lockMapBounds()
        this.drwaHeatmap(data)
      })
    },
    // 判断浏览区是否支持canvas
    isSupportCanvas() {
      var elem = document.createElement('canvas')
      return !!(elem.getContext && elem.getContext('2d'))
    }
  }
}

 

后台所用技术springmvc+ibatis

实现效果

代码实现如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="${rc.contextPath}/common/js/jquery-1.10.2.js"></script>
    <script src="${rc.contextPath}/common/plugs/echart/js/esl.js" type="text/javascript"></script>
</head>

<body>
 	
<div id="main" style="width:100%;height:350px;">  </div>

</body>



<script type="text/javascript">

	require.config({
		paths:{ 
		 'echarts': '${rc.contextPath}/common/plugs/echart/js/echarts-map'
		}
	});

	// 作为入口
	require(
    [
        'echarts',
		 'echarts/chart/map'
    ], 
    function (ec) {
    	var myChart = ec.init(document.getElementById('main'));
        
        var cityMap = {
		    "杭州市": "330100"
		};
		var placeList = [
			{name:'西湖区', geoCoord:[120.13, 30.27],count:$!{xh}},
			{name:'上城区', geoCoord:[120.17, 30.25],count:$!{sc}},
			{name:'下城区', geoCoord:[120.17, 30.28],count:$!{xc}},
			{name:'江干区', geoCoord:[120.20, 30.27],count:$!{jg}},
			{name:'拱墅区', geoCoord:[120.13, 30.32],count:$!{gs}},
			{name:'滨江区', geoCoord:[120.20, 30.20],count:$!{bj}},
			{name:'萧山区', geoCoord:[120.27, 30.17],count:$!{xs}},
			{name:'余杭区', geoCoord:[120.30, 30.42],count:$!{yh}},
			{name:'桐庐县', geoCoord:[119.67, 29.80],count:$!{tl}},
			{name:'淳安县', geoCoord:[119.03, 29.60],count:$!{ca}},
			{name:'建德市', geoCoord:[119.28, 29.48],count:$!{jd}},
			{name:'富阳市', geoCoord:[119.95, 30.05],count:$!{fy}},
			{name:'临安市', geoCoord:[119.72, 30.23],count:$!{la}}
		];
        option = {
		    tooltip : {
		        trigger: 'item',
		        formatter: '{b}'
		    },
			
		    series : [
		        {
		            name: '杭州市地图',
		            type: 'map',
		            mapType: '杭州市',
		            roam:true,
		            itemStyle:{
		                normal:{label:{show:true}},
		                emphasis:{label:{show:true}}
		            },
		            data:[],
					markPoint : {
						symbol:'Circle',
		                symbolSize: 0.3,
		                large: true,
		                effect : {
		                    show: true
		                },
						itemStyle:{
						  normal:{color:"#FF3300"}
						},
		                data : (function(){
		                	var data = [];
		                	for(var j=0;j<placeList.length;j++){
		                    	
		                    	var len = placeList[j].count;
								var x = parseInt(4*Math.random())%4;
		                    	var geoCoord = placeList[j].geoCoord;
		                    	while(len--) {
									if(x==0){
										data.push({
											name : placeList[j].name + len,
											value : 2000,
											geoCoord : [
												geoCoord[0] + Math.random()*0.05,
												geoCoord[1] + Math.random()*0.05
											]
										})
									}
									if(x==1){
										data.push({
											name : placeList[j].name + len,
											value : 2000,
											geoCoord : [
												geoCoord[0] + Math.random()*0.05,
												geoCoord[1] - Math.random()*0.05
											]
										})
									}
									if(x==2){
										data.push({
											name : placeList[j].name + len,
											value : 2000,
											geoCoord : [
												geoCoord[0] - Math.random()*0.05,
												geoCoord[1] - Math.random()*0.05
											]
										})
									}
									if(x==3){
										data.push({
											name : placeList[j].name + len,
											value : 2000,
											geoCoord : [
												geoCoord[0] + Math.random()*0.05,
												geoCoord[1] - Math.random()*0.05
											]
										})
									} 
		                    	}
		                    }
		                    
		                    return data;
		                })()
		            }
		        }
		    ],
		    backgroundColor: '#fffff'
        };            
        var curIndx = 0;
		var mapType = [];
		var mapGeoData = require('echarts/util/mapData/params');
		
		for (var city in cityMap) {
		    mapType.push(city);
		    // 自定义扩展图表类型
		    mapGeoData.params[city] = {
		        getGeoJson: (function (c) {
		            var geoJsonName = cityMap[c];
		            return function (callback) {
		                $.getJSON('${rc.contextPath}/common/plugs/echart/js/' + geoJsonName + '.json', callback);
		            }
		        })(city)
		    }
		}
		
		var ecConfig = require('echarts/config');
		var zrEvent = require('zrender/tool/event');
		
                 
        myChart.setOption(option);  
    }  
);  
</script>

</html>


前台所需要的js,前往