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);

获取SVG路径和VML的中心

1 个答案: