按纬度经度查找topojson特征

Posted 2023-02-22

【中文标题】按纬度经度查找topojson特征

【英文标题】：Find topojson feature by latitude longitude

【发布时间】：2014-09-26 17:36:44

【问题描述】：

我正在处理的演示基于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;
    );

【问题讨论】：

请分享您的代码或 jsfiddle。

尝试使用 Document.elementFromPoint()。

【参考方案1】：

你最好的选择是创建一个隐藏的画布，它反映可见的画布，但以不同的 RGB 颜色（文字“位图”）绘制每个国家，并通过鼠标光标处的像素颜色查找相应的特征位置。

您可以看到这个here 的工作示例。我已将位图保持可见，以便您查看正在发生的事情。

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

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