javascript - 获取 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);