弧线图
弧线图用以展示两点之间的关联,可以用在迁徙图等表示流向的场景中。
创建弧线图
// 创建地图
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('未点击到图形');
}
});
这篇文章对您解决问题是否有帮助?
已解决
未解决