最简单的迁徙图实现demo

前言

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

使用步骤

1、注册成为腾讯位置服务开发者，并进入控制台 -> key管理界面创建key；

2、数据可视化API（以下简称可视化API），所提供的可视化效果是以图层的方式叠加在JavaScript API GL之上，图层中所显示的数据由实例化的对象统一管理。

3、加载可视化API

可视化API是以 Javascript API GL 的附加库的形式加载的，请确保：
引入时须传入&libraries=visualization参数（查看： Javascript API GL加载参数说明）

<script src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY&libraries=visualization"></script>

应用场景

弧线图用以展示两点之间的关联，可以用在迁徙图等表示流向的场景中。

代码

大家可通过参考手册
先了解下参数详情。

创建弧线图

// 创建地图
var map = new TMap.Map('container', {center: new TMap.LatLng(40.040934, 116.272677)
});// 创建弧线图
var arc = new TMap.visualization.Arc({pickStyle: function(arcLine) { // 样式映射函数var red = {color: '#DD0000', animateColor:'#FF0000'};var blue = {color: '#0000DD',animateColor: '#0000FF'};return arcLine.id == 'red' ? red : blue;},
}).addTo(map); // 通过addTo()添加到指定地图实例// 设置数据，若需要更新数据则再次调用setData方法即可
arc.setData([{id: 'red',from: { lat: 40.040934, lng: 116.272677 }, // 弧线起点to: { lat: 38.040934, lng: 116.272677 }  // 弧线终点},{id: 'red',from: { lat: 40.040934, lng: 116.272677 },to: { lat: 38.040934, lng: 116.272677 }}
]);

获取点击的弧线

如果您希望获取鼠标点击的弧线图形的具体信息，可以监听弧线图的click事件。

arc.on('click', function(evt) {if (evt.detail.arc) {console.log('点击了：', evt.detail.arc); // 用户所点击的图形所对应的数据} else {console.log('未点击到图形');}
});

效果图

在线示例

作者：腾讯位置服务

链接：https://segmentfault.com/a/1190000039123367

来源：segmentfault

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

最简单的迁徙图实现demo相关推荐

Mapbox + ECharts 实现简单迁徙图
文章目录概述预览效果实现代码说明相关链接概述 ECharts是开源的可视化图表库,其中有丰富的图表.本文使用Mapbox结合ECharts插件实现了简单的迁徙地图. 预览效果实现代码 & ...
利用pyechart绘制简单的迁徙流向图、世界地图
1.介绍 Echarts 是一个由百度开源的数据可视化,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fi ...
Android绘图机制 Demo(简单完成美图秀秀的滤镜)
Android绘图机制 Demo(简单完成美图秀秀的滤镜) 1.xml <?xml version="1.0" encoding="utf-8"?> ...
python画人口迁徙图_echarts 手把手教你画迁徙图（城市内部级别+百度地图支持）2...
最近要做一个上海的迁徙图,搜到的都是 echarts 和mapv一样,有自己的API说明和demo 形式上非常相近,而且看起来功能比mapv更加完善. 另外是滴滴的一个蝌蚪迁徙图,看起来是真实轨迹的模 ...
地图 svg中国地图、echarts百度迁徙图
总结下最近使用过的地图控件: 第一种 svg中国地图 demo:http://www.oschina.net/code/snippet_54124_36979 这个很简单,照着demo里面直接调用就可 ...
02 【ArcGIS JS API + eCharts系列】实现二、三维迁徙图的绘制
概述上一篇文章通过纯前端的方式实现了ArcGIS JS API和eCharts的普通二维图表绘制,因为这些图表绘制其实是跟地理坐标无关的,只需要设置图表的位置即可,所以仅仅用了纯前端的方式去实现.这 ...
AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图（迁徙图）
首先肯定是给出demo啦: 演示demo 直接到左侧选择框中选择View taxi flow里面随便选个日期总体介绍最近由于工作室项目需要做一个数据可视化平台,这个平台最终是交由国外人使用的.而国 ...
echarts symbol 回调函数_【OpenLayer 实战】实现仿Echarts风格的动态迁徙图/航班图
使用的数据还是来自echarts,模拟了全国各地到湖南重点景区的客流情况. 分析要实现动态迁徙图的效果,主要需解决两个问题曲线的绘制.因为给出的数据只有起点和终点两个点位,所以想要绘制曲线 ...
navicat er图没有连线_迁徙图？流向图？城市关系强度图？
文章首发于公众号「码上GIS」,欢迎关注.文中流向图和城市关系强度图的 ArcMap 10.5 Mxd 工程和数据可在公众号后台回复「190708」和「190709」获取不记得是从哪年开始,每年春运 ...