Как использовать круговой перевод для перемещения круга геойсона на 50% его динамического радиуса - PullRequest
Новая
       9

Как использовать круговой перевод для перемещения круга геойсона на 50% его динамического радиуса

0 голосов
/ 06 июля 2018

У меня есть слой 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],
      },
    },
  ],
};

1 Ответ

0 голосов
/ 07 июля 2018

Это было бы очень просто, если бы circle-translate поддерживал стиль, управляемый данными. Вы бы просто использовали то же выражение, но со значениями, вдвое меньшими.

Увы, это не так.

Возможно, вам придется взглянуть на изменение данных GeoJSON, прежде чем они будут добавлены на карту.

...