弧线图

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



创建弧线图

// 创建地图
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('未点击到图形');
    }
});

查看示例

这篇文章对您解决问题是否有帮助?

已解决
未解决