获取SVG路径的中心和VML

Question

我尝试不同的事情：http://jvectormap.owl-hollow.net

我在得到不同的国家（这样我就可以把该国一个小标记）的中心非常感兴趣。

但我有点挣扎着，我已经尝试了几件事情，比如获得一个路径的周围盒子，然后从中获取中心。

但由于某些国家的某些形状，它有点失败。例如美国，环绕盒子的中间位于加拿大。

任何人都可以帮我吗？

Answer 1

只要给出由URL提供的SVG数据，计算上就不可能找出美国（或任何其他国家）考虑主要/中心部分的哪一部分。

一个近似的解决方案是将最大可填充区域作为主区域并计算该区域的中心。不幸的是，SVG API没有提供面积计算的方法。

你留下的是在每个单独的路径段上迭代的可能性，计算它们各自的长度并实现一个足够好的近似算法来找到主要部分的中心。请注意，只有“lineto”，“curveto”和“arcto”命令是通过在路径元素上调用.getTotalLength()才能获得的总路径长度的一部分。

一个非常原始的代码框架：

var getCenterOfCountry = function (path) { 

    var posX, posY, i, ii, seg; 

    posX = 0; 
    posY = 0; 

    for (i=0, ii=path.pathSegList.numberOfItems; i<ii; i++) { 

    seg = path.pathSegList.getItem(i); 

    switch (seg.pathSegTypeAsLetter) { 
     case 'z': 
     case 'Z': 
     // handle case close path, update pos 
     break; 
     case 'M': 
     // handle case moveto abs, update pos 
     break; 
     case 'm': 
     // handle case moveto rel, update pos 
     break; 

     // ... handle all remaining cases, remember to update pos 

     default: 
     // handle case path segment unknown 
    } 
    } 
}; 

调用，如：

var usPath, usCenterCoords; 

usPath = document.querySelector('#jvectormap1_us'); 
usCenterCoords = getCenterOfCountry(usPath);