Preface
Data visualization API (Web) is a professional geospatial data visualization rendering engine based on Tencent's location service JavaScript API GL .
Through this set of API, the visual display of trajectory data, coordinate point data, thermal power, migration, route and other spatial data can be realized.
Steps for usage
1. Register as a Tencent location service developer, and enter the console -> key management interface to create a key;
2. Data visualization API (hereinafter referred to as visualization API), the visualization effect provided is superimposed on JavaScript API GL in the form of a layer, and the data displayed in the layer is uniformly managed by the instantiated object.
3. Load the visualization API
The visualization API is loaded in the form of an additional library of the Javascript API GL. Please make sure that the
&libraries=visualization parameter must be passed in when importing (see: Javascript API GL loading parameter description )
<script src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY&libraries=visualization"></script>
Track graph realization
You can learn more about the parameters through the reference manual
. The following is a code example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动态轨迹图</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=visualization"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script src="https://mapapi.qq.com/web/lbs/visualizationApi/demo/data/trail.js"></script>
<script>
function initMap() {
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
var map = new TMap.Map("container", {
zoom:12,//设置地图缩放级别
center: center,//设置地图中心点坐标
mapStyleId: "style1" //个性化样式
});
//初始化轨迹图并添加至map图层
new TMap.visualization.Trail({
pickStyle:function(item){ //轨迹图样式映射函数
return {
width: 2
}
},
startTime: 0,//动画循环周期的起始时间戳
showDuration: 120,//动画中轨迹点高亮的持续时间
playRate:30 // 动画播放倍速
})
.addTo(map)
.setData(trailData);//设置数据
}
</script>
</body>
</html>
Effect picture
