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

Question

我是 mapboxgl 的新手，正在尝试创建一个允许用户随时间过滤点的地图。我用我的数据定制了这个教程来得到初始地图运行:

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

在我加载数据并意识到许多点共享相同坐标之前，一切都运行良好。

一些谷歌搜索揭示了这个答案：

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

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 转换来偏移标记，您应该将它们创建为存在于 HTML 中的 Marker 对象，在地图之外。

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

How to display stacked locations in a mapbox layer?

mapbox

mapbox-gl-js

mapbox-gl

mapbox-marker