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

最新推荐文章于 2025-03-25 15:15:15 发布

MrCharles

最新推荐文章于 2025-03-25 15:15:15 发布

阅读量2.7k

点赞数

本文链接：https://blog.csdn.net/MrCharles/article/details/111382945

版权

疑难杂症专栏收录该内容

56 篇文章

订阅专栏

数据可视化

数据可视化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>

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