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

Question

我正在尝试学习如何使用 JavaScript 库 leaflet 和 d3 来创建各种地图可视化。

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

这意味着，例如，在教程地图中，如果我的纬度值 (55, -3) 落在亚利桑那州的多边形内，程序可以将此点归类为属于亚利桑那州。

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

Answer 1

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

我对 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。不过我还没有测试过。