2

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

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

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

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

4

1 回答 1

5

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

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

但是，如果添加第三个库，这应该相当简单。OpenLayers 几何库可以确定一个点是否位于多边形内。

编辑：我得到了这个工作，另见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。我还没有测试过。

于 2013-02-20T16:47:28.410 回答