LatLong落在D3 + Leaflet中的给定多边形内 [英] LatLong falls within a given polygon in D3 + Leaflet

问题描述

我想学习如何使用Javascript库小册子以及 d3 来创建各种地图视觉效果。

I am trying to learn how to use the Javascript library leaflet along with d3 to create various map visualisations.

我一直在关注本教程，其创建美国的choropleth地图与一些互动。这提供了一些我需要的，但我想要的主要功能是有一个纬度/长坐标列表根据它们属于哪个区域。

I have been following this tutorial which creates a choropleth map of the United States with some interactivity. This provides some of what I need, but the main functionality I want is to have a list of lat/long coordinates classified according to which region they belong to.

例如，在教程地图中，如果我有一个落在亚利桑那州多边形状态的纬度长值（55，-3），程序可以将这个点归类为亚利桑那州。

This would mean, in the tutorial map for example, if I had a lat long value (55, -3) which fell within the state of Arizona's polygon, the program could classify this point as belonging to Arizona.

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

Is there a function in the leaflet (or d3) library which will allow me to enter a lat long coordinate as a parameter and return the name of the feature it belongs to? The tutorial above allows you to attach a function to every feature via the onEveryFeature property and can fire mouseover events when each feature is hovered over. Surely there is a way to extend this functionality to numerically entered data instead of mouse points?

推荐答案

Leaflet需要一些调整，如果你希望这样做。它使浏览器处理mouseclicks，因此不需要逻辑来确定点是否位于多边形内。

Leaflet would need some tweaking if you wish to do this. It leaves the handling of mouseclicks to the browser and therefore does not need logic for determining if a point lies inside a polygon.

我不太了解d3，但它不是对我来说显而易见的是如何做到这一点。查看多边形代码，我发现一个剪切算法和无限线的交集。

I am not very knowledgeable about d3 but it's not glaringly obvious to me how it'd do this out of the box. Looking at the polygon code, I do find a clipping algorithm and intersection of infinite lines.

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

If you add a third library, however, this should be rather simple. The OpenLayers Geometry library can determine if a point lies inside a polygon.

编辑：我有这个工作，参见 http://jsfiddle.net/VaY3E/4/

I got this to work, see also 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 。我没有测试它。

Or you could use https://github.com/maxogden/geojson-js-utils , a bit more specific library. It looks like it knows how to read GeoJSON and it has a method gju.pointInPolygon. I've not tested it though.

这篇关于LatLong落在D3 + Leaflet中的给定多边形内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！