时间戳

首页 > 解决方案 > 如何使用 circle-translate 将 geojson 圆移动 50% 的动态半径

mapbox - 如何使用 circle-translate 将 geojson 圆移动 50% 的动态半径

问题描述

我有一个 Mapbox 层，其中有多个具有完全相同坐标的 GEOJson 功能（因此它们相互堆叠）。

为了防止它们被堆叠的问题，我希望使用该circle-translate选项将每个圆圈从另一个圆圈移开。如果每个圆圈都很20px宽，这将很容易，因为我可以将一个10px向左移动，另一个10px向右移动。

我的问题是每个圆的半径是根据特征的值生成的，所以有些比其他的大。因此，我需要该translate值是圆直径的 50%。

有没有办法做到这一点？

这是我的图层的代码

const LNG = {
  name: 'LNG',
  id: 'lng-markers',
  showDetailsOnHover: true,
  source: {
    type: 'geojson',
    data,
  },
  type: 'circle',
  paint: {
    'circle-color': '#E74133',
    'circle-translate': [-10, -10],
    'circle-radius': [
      'interpolate',
      ['exponential', 1],
      ['number', ['get', 'LNG']],
      0,
      7,
      10,
      10,
      100,
      15,
      1000,
      20,
      10000,
      25,
      100000,
      30,
      1000000,
      35,
      10000000,
      40,
      100000000,
      45,
    ],
  },
  opacity: 70,
  checked: true,
  offset: { bottom: [0, -10] },
  childLayers: [
    {
      id: 'lng-markers__props',
      type: 'symbol',
      filter: ['>', `${ 'LNG' }`, 0],
      source: 'lng-markers',
      layout: {
        'text-field': `{${ 'LNG' }_en}`,
        'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
        'text-size': 12,
      },
      paint: {
        'text-color': '#FFFFFF',
        'text-translate': [-10, -10],
      },
    },
  ],
};

标签： mapboxmapbox-gl-js

解决方案

circle-translate如果支持数据驱动的样式，这将非常简单。您只需使用相同的表达式，但值是大小的一半。

唉，它没有。

在将 GeoJSON 数据添加到地图之前，您可能需要考虑修改它。

推荐阅读