2

ポリゴン座標を持つプレースマーカーを含む KML ファイルがあります。json ファイルから読み込んだ値に応じて、その場でポリゴンの塗りつぶしの色を変更したいと思います。私の理解では、Google は kml ファイルをキャッシュしているため、その場でポリゴンの塗りつぶしの色を簡単に変更することはできません。

そのため、Raphael を使用してポリゴンを Google マップに配置できるように、kml ポリゴンを svg パスに変換しようとしています。次に、JavaScriptで塗りつぶしの色を変更できます。

しかし、ポリゴン座標をsvgパスに変換するにはどうすればよいですか?

座標のサンプル セットは次のようになります。

 <Polygon><outerBoundaryIs><LinearRing><coordinates>-80.098181,40.42127 -80.096479,40.421262 -80.096464,40.421409 -80.096448,40.421551 -80.096444,40.421583 -80.096434,40.421666 -80.096406,40.421931 -80.096389,40.422087 -80.096353,40.422423 -80.09583,40.426101 -80.095525,40.428234 -80.095315,40.429714 -80.095276,40.429989 -80.092585,40.428593 -80.092273,40.428431 -80.09069,40.430519 -80.090384,40.430924 -80.08989,40.430618 -80.089699,40.4305 -80.089499,40.430359 -80.088738,40.429886 -80.088418,40.429688 -80.088254,40.429585 -80.087931,40.429384 -80.087086,40.428859 -80.086867,40.428722 -80.086658,40.428592 -80.086493,40.42849 -80.08617,40.428282 -80.086177,40.428265 -80.08621,40.428188 -80.0864,40.427742 -80.086397,40.42749 -80.086394,40.427125 -80.08631,40.426427 -80.086335,40.425887 -80.086235,40.425409 -80.085776,40.425327 -80.085442,40.42527 -80.084993,40.424585 -80.085076,40.42448 -80.085542,40.423842 -80.085679,40.423125 -80.085659,40.423011 -80.085626,40.422827 -80.085191,40.421758 -80.08467,40.420859 -80.084258,40.420336 -80.083828,40.4201 -80.083078,40.420005 -80.082504,40.420072 -80.081444,40.420196 -80.080888,40.420181 -80.080775,40.420178 -80.080604,40.420173 -80.080122,40.420161 -80.079753,40.420151 -80.07947,40.420144 -80.079287,40.420139 -80.078239,40.420296 -80.077661,40.420418 -80.076213,40.420726 -80.075673,40.420766 -80.075298,40.420719 -80.075127,40.420625 -80.074909,40.420307 -80.075028,40.419779 -80.07539,40.419028 -80.07583,40.41836 -80.076065,40.418108 -80.076528,40.417616 -80.077217,40.417124 -80.077503,40.417002 -80.077725,40.416907 -80.078391,40.416622 -80.078614,40.416528 -80.078657,40.41651 -80.078693,40.416491 -80.078755,40.416457 -80.079174,40.416233 -80.079205,40.416217 -80.079292,40.416128 -80.079439,40.415977 -80.079456,40.41596 -80.079614,40.415473 -80.079604,40.415377 -80.079584,40.415179 -80.07958,40.415168 -80.079539,40.415042 -80.079499,40.414915 -80.079407,40.414785 -80.079742,40.414965 -80.08086,40.415568 -80.081458,40.415889 -80.081535,40.41593 -80.082292,40.416343 -80.08238,40.416392 -80.082597,40.41651 -80.082624,40.416525 -80.082787,40.416614 -80.083508,40.417007 -80.083934,40.417239 -80.084422,40.417505 -80.084622,40.417432 -80.084852,40.417348 -80.085329,40.417179 -80.085419,40.417141 -80.085948,40.41695 -80.086252,40.417184 -80.088463,40.418885 -80.088964,40.418631 -80.089036,40.418595 -80.089145,40.418539 -80.089173,40.418525 -80.089346,40.418438 -80.089376,40.418457 -80.089398,40.418471 -80.089964,40.418827 -80.090299,40.419055 -80.091306,40.419739 -80.091642,40.419967 -80.091803,40.420088 -80.091966,40.420043 -80.092445,40.419915 -80.092561,40.419885 -80.096792,40.418748 -80.098853,40.41815 -80.098868,40.418242 -80.09943,40.421273 -80.098181,40.42127</coordinates></LinearRing></outerBoundaryIs></Polygon>
4

1 に答える 1

9

免責事項：私は測地学に少し慣れていませんが、ここでの一番の問題は座標系だと思います-緯度、経度は投影に依存するデータポイントですが、画面はフラットなピクセルです。あなたがする必要があるのは、最初にこれらを北座標と東座標に変換することです。

proj.4という投影変換ライブラリがあります。これを使用して座標を変換します。必要に応じて、 https://trac.osgeo.org/proj/で簡単に使用できる JavaScript ポートがあります。

一般的な変換プロセスは次のようになります (LAT、LNG は実際の座標です)。

var source = new Proj4js.Proj('WGS84');
var dest = new Proj4js.Proj('GOOGLE');
var p = new Proj4js.Point( LATITUDE, LONGITUDE ); // replace with actual coords!
var pdest = Proj4js.transform(source, dest, p);

この時点で、pdest.x と pdest.y には SVG 互換の座標が含まれます。

座標がピクセル単位に変換されたら、単にそれらをプロットし、範囲と単位に注意してください。北座標と東座標は 800,000 の範囲になるため、移動やスケーリングなどの変換を適用する可能性があります。

最終結果は次のようになります (錆びているため、緯度/経度をめちゃくちゃにして反転させた可能性があります)。

これは、変換とプロットを備えた作業中のjsfiddleです: http://jsfiddle.net/LPzKV/1/

最終結果

于 2012-11-19T20:55:33.207 に答える