AMCharts 4-适用于单个国家/地区的地图笔划不均匀

Question

如上图所示。我已经在美国中风了。但是，大陆笔画的顶部明显比其余笔画更细。我的配置如下：

  polygonTemplate.stroke = am4core.color('#2c2626')
  polygonTemplate.strokeWidth = 0
  polygonTemplate.nonScalingStroke = true

然后我有一个转接器来激活活动的国家，

polygonTemplate.adapter.add('strokeWidth', (stroke, target) => {
    if (target.dataItem && target.dataItem.dataContext && this.selectedCountry) {
      if (target.dataItem.dataContext.id === this.selectedCountry.id) {
        return 2
      }
    }
    return stroke
  })

从网上示例中可以找到，这是应用笔触的正确方法。有没有办法我甚至可以在全国范围内进行这种中风？它发生在大多数国家/地区，但在一些国家还不如..

编辑：感谢Sam的帮助，我现在中风了。但是看来我必须两次按新国家才能使其处于活动状态-一次将旧国家切换为不活动状态，然后再次添加活动状态。 GIF低于

Answer 1

问题是，边界国与您选择的国家的笔画重叠。我将strokeWidth设置为10，并将fillOpacity设置为0.6。您可以在下图或that代码笔中清楚地看到它。

另外在适配器中设置zIndex对我来说并没有任何改变。

但是您可以使用states：

使用要使用的属性创建活动（或自定义）状态。您也可以在此处使用zIndex。现在，将该州设置为您要突出显示的每个国家/地区。

var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fillOpacity = 0.6;
polygonTemplate.stroke = am4core.color('#2c2626');
polygonTemplate.strokeWidth = 0;
polygonTemplate.zIndex = 0;
polygonTemplate.nonScalingStroke = true;

// Create active state
var activeState = polygonTemplate.states.create("active");
activeState.properties.strokeWidth = 10;
activeState.properties.zIndex = 1;

// Create an event to toggle "active" statestate
polygonTemplate.events.on("hit", function(ev) {
  ev.target.isActive = !ev.target.isActive;
  console.log(ev.target.dataItem.dataContext.id);
});

chart.events.once('inited', event => {
  polygonSeries.mapPolygons.values.find(i => i.dataItem.dataContext.id === 'US').isActive = true;
});

这是结果：

This代码笔显示了状态示例。希望有帮助。

编辑：

要使用双击切换活动状态，您可以将hit事件替换为doublehit事件（docs）。但是您可能想立即禁用双击缩放。使用以下几行（docs）：

chart.seriesContainer.events.disableType("doublehit");
chart.chartContainer.background.events.disableType("doublehit");

我创建了this代码笔来向您展示示例。

Answer 2

更新的解决方案：https://codepen.io/team/amcharts/pen/dyXPRVR 您必须为悬停的多边形设置较大的zIndex值，并调用toFront（）使其比之前悬停的多边形更高：

polygonTemplate.events.on("over", function(event){
    event.target.zIndex = Number.MAX_VALUE;
    event.target.toFront();
})