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

Question

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

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

这意味着，例如在教程 map 中，如果我有一个落在亚利桑那州多边形内的经纬度值 (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。不过我还没有测试过。