javascript - LatLong 落在 D3 + Leaflet 中的给定多边形内

Question

我正在尝试学习如何使用 Javascript 库 leaflet以及d3创建各种 map 可视化。

我一直在关注this tutorial它创建了具有一定交互性的美国分区统计图。这提供了我需要的一些功能，但我想要的主要功能是根据所属区域进行分类的纬度/经度坐标列表。

这意味着，例如在教程 map 中，如果我有一个位于亚利桑那州多边形内的经纬度值 (55, -3)，则程序可以将此点分类为属于亚利桑那州。

传单(或 d3)库中是否有一个函数可以让我输入经纬度坐标作为参数并返回它所属的要素的名称？上面的教程允许您通过 onEveryFeature 属性将函数附加到每个功能，并且可以在将鼠标悬停在每个功能上时触发鼠标悬停事件。当然有办法将此功能扩展到数字输入的数据而不是鼠标点吗？

Answer 1

如果您想这样做，则需要对传单进行一些调整。它将鼠标点击的处理留给了浏览器，因此不需要逻辑来确定点是否位于多边形内。

我对 d3 不是很了解，但我不太清楚它是如何开箱即用的。查看多边形代码，我确实找到了裁剪算法和无限线的交点。

但是，如果您添加第三个库，这应该相当简单。 OpenLayers 几何库 can determine if a point lies inside a polygon .

编辑:我让它工作，另请参阅 http://jsfiddle.net/VaY3E/4/

var parser = new OpenLayers.Format.GeoJSON();
var vectors = parser.read(statesData);
var lat = 36;
var lon = -96;
var point = new OpenLayers.Geometry.Point(lon, lat);
for( var i = 0; i< vectors.length; i++ ){
    if(vectors[i].geometry.intersects(point)){
       alert(vectors[i].attributes['name']);
    }
}

或者您可以使用https://github.com/maxogden/geojson-js-utils ，一个更具体的库。看起来它知道如何读取 GeoJSON 并且有一个方法 gju.pointInPolygon。不过我还没有测试过。