数据可视化图层
数据可视化图层是针对空间数据进行可视化展现所提供的一套API解决方案，包含：热力图、迁徙图。
图层介绍
| Head | Head | Head | Head |
|---|---|---|---|
| 热力图 | 迁徙图 |
图层调用
可视化API是以附加库的形式加载的，请确保：
引入时须传入libraries=visualization参数，如下所示：
<script charset="utf-8" src="https://apis.map.qq.com/api/jue?libraries=visualization&key=YOUR_KEY"></script>
以下是调用热力图能力的代码示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello world!</title>
<style type="text/css">
#container{
/*地图(容器)显示大小*/
width:1200px;height:400px;
}
</style>
<script charset="utf-8" src="https://apis.map.qq.com/api/jue?key=YOUR_KEY&libraries=visualization"></script>
<script>
//地图初始化函数，本例取名为init，开发者可根据实际情况定义
function initMap() {
//定义地图中心点坐标
var center=new TMap.LatLng(40.040934,116.272677)
//定义map变量，调用TMap.Map构造函数创建地图
var map = new TMap.Map(document.getElementById('container'), {
center: center,//设置地图中心点坐标
zoom:15, //设置地图缩放级别
});
var Heat = new TMap.visualization.Heat({
height: 800, // 峰值高度
radius: 500, // 最大辐射半径
offset: 100,
max: 3000,
gradientColor: {
0.1: "(rgba(40,118,70,0.2))",
0.4: "rgba(40,118,70,0.4)",
0.6: "rgba(229,195,77,0.6)",
0.75: "rgba(215,136,67,0.7)",
1: "rgba(188,91,82,0.85)",
},
}).addTo(map);
Heat.setData([
{ lat: 40.040934, lng: 116.272677, count:100},
{ lat: 40.04035, lng: 116.272666, count:100},
//其它点省略...
]);
}
</script>
</head>
<!-- 页面载入后，调用init函数 -->
<body onload="initMap()">
<!-- 定义地图显示容器 -->
<div id="container"></div>
</body>
</html>
呈现效果如下：
本页内容