根据经纬度查找topojson特征

Question

我正在制作的演示基于World tour，它使用画布而不是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颜色绘制每个国家(文字"位图")，并根据鼠标光标位置的像素颜色查找相应的特征。

您可以在这里看到一个工作示例。我一直保持位图可见，这样你就可以看到发生了什么。

你确实有一些其他的选择:

1. 使用库(如Turf.js)来做多边形点检查，例如使用turf.inside.
2. 作为优化，构建d3.geom。对每个特征的所有点进行四叉树检查，只对四叉树叶节点内的特征进行多边形点检查。