Question

我正在研究的演示基于World tour，它使用canvas而不是SVG，因此我无法将鼠标事件附加到国家/地区路径以查找单击的国家/地区。有没有办法找到哪个特征包含从鼠标坐标得到的纬度/经度？

var canvas = d3.select("canvas")
    .on("mousemove", function() {
        var p = d3.mouse(canvas.node());
        console.log(projection.invert(p)); // which country contains these coordinates?
    });

var countries;
queue()
    .defer(d3.json, 'world-110m.json.txt')
    .defer(d3.tsv, 'world-country-names.tsv')
    .await(function ready(error, world, names) {
        countries = topojson.feature(world, world.objects.countries).features;
    });

Answer 1

您最好的选择是创建一个隐藏的画布，用于镜像可见的画布，但用不同的RGB颜色绘制每个国家/地区（文字＆＃34;位图＆＃34;），并按照颜色查找相应的特征。鼠标光标位置的像素。

您可以看到此here的有效示例。我保持位图可见，这样你就可以看到发生了什么。

您还有其他选择：

使用库（例如Turf.js）进行多边形点检查，例如与turf.inside。
作为优化，构建每个要素中所有点的d3.geom.quadtree，并仅对四叉树叶节点内的要素执行多边形点检查。

通过纬度经度查找topojson特征

1 个答案: