使用腾讯位置服务进行数据可视化

本文主要是介绍使用腾讯位置服务进行数据可视化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

数据可视化

数据可视化API（Web），是基于腾讯位置服务JavaScript API GL实现的专业地理空间数据可视化渲染引擎。通过这套API，可以实现轨迹数据、坐标点数据、热力、迁徙、航线等空间数据的可视化展现。

弧线流向图是可以用来展示迁徙类数据的工具，譬如说物流，春运客流，行程跟踪等等。本文尝试使用腾讯位置服务，通过JS来实现一个小例子。
在这里插入图片描述

注册腾讯位置服务

使用之前需要注册一下腾讯位置服务：
点击https://lbs.qq.com?lbs_invite=U7ZRFLU，注册即可。也可以通过微信注册。

如果需要邀请码，请填写专属邀请码： U7ZRFLU

注册成功之后，尽情探索吧。

数据可视化实践弧线流向图

简单易用，只需三步接入

在注册成为腾讯位置服务开发者并申请好KEY之后，只需3步，即可完成一个可视化场景的渲染：

引入腾讯地图JS，加上自己的KEY

<script charset="utf-8"src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=visualization"></script>

创建地图实例

  function initMap() {var center = new TMap.LatLng(37.80787, 112.269029);// 就是北京啦var data = arcData;//初始化地图var map = new TMap.Map("container", {zoom: 5,//设置地图缩放级别pitch: 30,center: center,//设置地图中心点坐标mapStyleId: "style1" //个性化样式});//初始化弧线图并添加至map图层new TMap.visualization.Arc({mode: 'vertical' // 弧线平面与地平面垂直}).addTo(map).setData(data);//设置数据}

结果

完整代码


<body onload="initMap()"><div id="container"></div><script src="https://mapapi.qq.com/web/lbs/visualizationApi/demo/data/arc.js"></script><script>function initMap() {var center = new TMap.LatLng(37.80787, 112.269029);var data = arcData;//初始化地图var map = new TMap.Map("container", {zoom: 5,//设置地图缩放级别pitch: 30,center: center,//设置地图中心点坐标mapStyleId: "style1" //个性化样式});//初始化弧线图并添加至map图层new TMap.visualization.Arc({mode: 'vertical' // 弧线平面与地平面垂直}).addTo(map).setData(data);//设置数据}</script>
</body>

如图得到结果：
在这里插入图片描述