2

Javascript ライブラリリーフレットをd3と共に使用して、さまざまなマップ ビジュアライゼーションを作成する方法を学習しようとしています。

私は、インタラクティブな米国のコロプレス マップを作成するこのチュートリアルに従っています。これは私が必要とするもののいくつかを提供しますが、私が望む主な機能は、属している地域に従って分類された緯度/経度座標のリストを持つことです。

これは、たとえば、チュートリアル マップで、緯度経度値 (55, -3) がアリゾナ州のポリゴンの州内にある場合、プログラムはこのポイントをアリゾナ州に属するものとして分類できることを意味します。

リーフレット (または d3) ライブラリに、緯度経度座標をパラメーターとして入力し、それが属する機能の名前を返すことができる関数はありますか? 上記のチュートリアルでは、onEveryFeature プロパティを介してすべての機能に関数をアタッチし、各機能がホバーされたときにマウスオーバー イベントを発生させることができます。この機能をマウスポイントの代わりに数値で入力されたデータに拡張する方法は確かにありますか?

4

1 に答える 1

5

これを行うには、リーフレットを微調整する必要があります。マウスクリックの処理はブラウザーに任せているため、ポイントがポリゴン内にあるかどうかを判断するためのロジックは必要ありません。

私はd3についてあまり詳しくありませんが、箱から出してすぐにこれを行う方法がはっきりとわかりません。ポリゴン コードを見ると、クリッピング アルゴリズムと無限線の交点が見つかります。

ただし、3 つ目のライブラリを追加する場合、これはかなり単純なはずです。OpenLayers Geometry ライブラリは、ポイントがポリゴン内にあるかどうかを判断できます。

編集:私はこれを機能させました。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 に答える