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). But you maybe want to disable zoom on double click now. That's possible with the following lines (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();
})

AMCharts 4 - 应用于单个国家时地图笔划不均匀

AMCharts 4 - Map stroke uneven when applied to single countries

maps

amcharts