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

【问题标题】：How to display stacked locations in a mapbox layer?如何在地图框图层中显示堆叠位置？
【发布时间】：2019-11-29 16:27:33
【问题描述】：

我对 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 中轻松解决的标记，尽管我可能完全误解了这一切是如何组合在一起的。

谢谢！

【问题讨论】：

标签： mapbox mapbox-gl-js mapbox-gl mapbox-marker

【解决方案1】：

这里的代码是在地图中创建一个图层，类型为circle。您可以使用 circle-translate 属性偏移位置。

如果您想使用 CSS 转换来偏移标记，您应该将它们创建为存在于 HTML 中的 Marker 对象，位于地图之外。

【讨论】：