散点图

散点图是用以展示海量独立数据点的可视化类型,支持圆形图形或用户自定义图标。目前支持百万级的数据点展示。



创建散点图

// 创建地图
var map = new TMap.Map('container', {
    center: new TMap.LatLng(40.040934, 116.272677)
});
 
// 创建散点图
var dot = new TMap.visualization.Dot({
    faceTo: 'screen', // 设置散点朝向
    styles: {
        redCircle: {  // 定义一个红色圆形样式
            type: 'circle',
            fillColor: '#FF0000'
        }
    }
}).addTo(map); // 通过addTo()添加到指定地图实例
 
// 设置数据,若需要更新数据则再次调用setData方法即可
dot.setData([
    { lat: 40.040934, lng: 116.272677, styleId: "redCircle" },
    { lat: 40.040350, lng: 116.262432, styleId: "redCircle" }
]);

参考手册 | 查看示例

获取点击的数据点

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

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

查看示例

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

已解决
未解决