如何显示地图框图层中的堆叠位置？

Question

我对mapboxgl还是陌生的，它试图创建一个允许用户随时间过滤点的地图。我使用数据定制了本教程，以启动并运行初始地图：

https://docs.mapbox.com/help/tutorials/show-changes-over-time/

在我加载数据并意识到许多点共享相同坐标之前，一切工作都非常好。

有些谷歌搜索显示了此答案：

Multiple markers - Same coordinates

使用偏移量或旋转的想法都是合理的解决方案。不幸的是，我不清楚如何在加载数据时将其应用于数据。我相信脚本的相关部分是：

map.on('load', function() {
  map.addLayer({
    id: 'year',
    type: 'circle',
    source: {
      type: 'geojson',
      data: './grandpascan.geojson' // replace this with the url of your own geojson
    },
    paint: {
      'circle-radius': [
        'interpolate',
        ['linear'],
        ['number', ['get', 'Pages']],
        0, 4,
        5, 24
      ],
      'circle-color': [
        'interpolate',
        ['linear'],
        ['number', ['get', 'Pages']],
        0, '#2DC4B2',
        1, '#3BB3C3',
        2, '#669EC4',
        3, '#8B88B6',
        4, '#A2719B',
        5, '#AA5E79'
      ],
      'circle-opacity': 0.8
  },

如果是正确的话，我该如何识别这些要点？尽管我可能完全误解了它们如何组合在一起，但是它们似乎并不是可以在CSS中轻松解决的标记。

谢谢！

Answer 1

此处的代码正在地图中创建一个类型为circle的图层。您可以使用circle-translate属性来偏移位置。

如果要使用CSS变换来偏移标记，则应将它们创建为circle-translate对象，这些对象存在于HTML之外，位于地图外部。