将kml多边形转换为svg路径

Question

我有带placeMarkkers的KML文件，每个文件都有多边形坐标。我想根据从json文件中读取的值来更改动态多边形的填充颜色。我的理解是Google会缓存kml文​​件，因此您无法轻松更改动态多边形的填充颜色。

所以我试图将我的kml多边形转换为svg路径，以便我可以使用Raphael将我的多边形放在我的Google地图上。然后我可以用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> 

Answer 1

免责声明：我在geodetics有点生疏，但觉得这里的＃1的问题是坐标系 - 纬度，经度是投影相关的数据点，而你的屏幕是一个平面像素。你需要做的是先将这些转换为北向和东向点。

有一个投影转换库在那里叫做proj.4 - 用它来转换你的坐标。如果需要的话，还有它的JavaScript的端口，你可以轻松地适应您的使用在https://trac.osgeo.org/proj/

通用转换过程会是这样的（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/