如何将AmCharts世界地图的自定义图片标记设为圆形？

am5.Picture本身并不支持radius属性，直接添加这个属性自然不会生效，要实现图片标记的圆形效果，得用遮罩（mask）或者容器裁剪的方式来实现，下面给你两种可行的方案：

方案一：使用遮罩（Mask）直接裁剪图片 #

这是最直接的方式，给Picture元素添加一个圆形遮罩，就能把图片裁剪成圆形：

方式1：全局统一设置遮罩 #

如果所有图片标记都要做成一样的圆形，可以在创建Picture时直接配置遮罩：

pointSeries.bullets.push(function() {
  return am5.Bullet.new(root, {
    sprite: am5.Picture.new(root, {
      templateField: "pictureSettings",
      // 添加圆形遮罩，半径和图片宽高的一半对应
      mask: am5.Circle.new(root, {
        radius: 25
      })
    })
  })
})

pointSeries.data.setAll([{
  geometry: { type: "Point", coordinates: [20.703790, 40.416775] },
  pictureSettings: {
    src: "/validators/example0.png",
    width: 50,
    height: 50,
    centerX: am5.p50,
    centerY: am5.p50
  }
}])

方式2：通过templateField动态配置遮罩 #

如果需要针对不同的标记设置不同的圆形尺寸，可以把遮罩配置放到pictureSettings里：

pointSeries.bullets.push(function() {
  return am5.Bullet.new(root, {
    sprite: am5.Picture.new(root, {
      templateField: "pictureSettings"
    })
  })
})

pointSeries.data.setAll([{
  geometry: { type: "Point", coordinates: [20.703790, 40.416775] },
  pictureSettings: {
    src: "/validators/example0.png",
    width: 50,
    height: 50,
    centerX: am5.p50,
    centerY: am5.p50,
    // 为当前标记单独设置圆形遮罩
    mask: am5.Circle.new(root, {
      radius: 25
    })
  }
}])

方案二：用容器包裹并开启裁剪 #

如果需要对图片标记做更多布局控制，可以把Picture放到一个Container里，给容器设置圆角并开启裁剪：

pointSeries.bullets.push(function() {
  // 创建容器，设置宽高和圆角（圆角值为宽高的一半就是圆形）
  const bulletContainer = am5.Container.new(root, {
    width: 50,
    height: 50,
    cornerRadius: 25,
    clip: true, // 必须开启裁剪才能生效
    centerX: am5.p50,
    centerY: am5.p50
  })

  // 把图片添加到容器中，占满容器
  bulletContainer.children.push(am5.Picture.new(root, {
    src: "/validators/example0.png",
    width: am5.percent(100),
    height: am5.percent(100)
  }))

  return am5.Bullet.new(root, {
    sprite: bulletContainer
  })
})

注意：两种方案里的尺寸要对应，比如宽高50的话，圆角/遮罩半径设为25刚好是正圆形；如果图片是矩形，想要裁剪成圆形，半径取宽高中较小值的一半即可。

内容的提问来源于stack exchange，提问作者mpalma