获取SVG路径和VML的中心

Question

我正在尝试使用以下不同的方法： http : //jvectormap.owl-hollow.net

我对获得不同国家/地区的中心非常感兴趣（因此我可以在该国家/地区上放一些标记）。

但是我有点儿挣扎，我尝试了几件事，例如获取路径的周围框，然后从中获取中心。

但由于某些国家/地区的某些形状，这种方法失败了。 例如美国，环绕音箱的中间在加拿大。

谁能帮我吗？

Answer 1

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

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

您剩下的是可以在每个单独的路径段上进行迭代，计算其各自的长度并实现足够好的近似算法来找到主要部分的中心的可能性。 请注意，只有“ lineto”，“ curveto”和“ arcto”命令是路径总长度的一部分，您可以通过在path元素上调用.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);