стиль картографических точек с использованием других фигур, кроме круга - PullRequest
Новая
       7

стиль картографических точек с использованием других фигур, кроме круга

0 голосов
/ 23 мая 2018

В настоящее время у меня есть слой mapbox со многими точками, которые отображаются с использованием circle.Есть ли способ использовать другие формы для определения слоя вместо круга?

Вот что у меня есть: 

export const gaugeLayer = fromJS({
  id: 'gauges',
  source: 'gauges',
  type: 'circle',
  interactive: true,
  minzoom: 5,
  layout: {
    visibility: 'visible',
  },
  paint: {
    'circle-radius': {
      base: 3,
      stops: [[5, 3.5], [7, 4]],
    },
    'circle-stroke-color': '#fafafa',
    'circle-stroke-width': 1,
    'circle-color': {
      property: 'classId',
      stops: [
        [1, '#f9a825'], //yellow #f9a825
        [2, '#0D47A1'], //blue #1a237e
        [3, '#03a9f4'], //light blue
        [4, '#ff6f00'], //orange Winter storm
        [5, '#F44336'],
        [6, '#087f23'], //green
        [7, '#f06292'], //pink
        [8, '#7E57C2'],
        [9, '#C51162'],
      ],
    },
  },
});

Могу ли я использовать diamond?Или какой предпочтительный способ использования различных форм?

1 Ответ

0 голосов
/ 24 мая 2018

Нет простого способа сделать это, но я решил использовать symbol для этого.Но вам нужно загрузить svgs на карту заранее.После того, как вы загрузите их, вы не сможете изменить их цвета, если файл svg.Много петель, чтобы прыгать. 

{
    id: source,
    source: source,
    type: 'symbol',
    interactive: true,
    layout: {
      'icon-image': {
        property: 'geoClassId',
        stops: [
          [1, `${source}-1`],
          [2, `${source}-2`],
          [3, `${source}-3`],
          [4, `${source}-4`],
          [5, `${source}-5`],
          [6, `${source}-6`],
        ],
      },
      'icon-allow-overlap': true,
      'symbol-avoid-edges': true,
      'text-field': {
        property: 'geoClassId',
        stops: [
          [1, `${source}-1`],
          [2, `${source}-2`],
          [3, `${source}-3`],
          [4, `${source}-4`],
          [5, `${source}-5`],
          [6, `${source}-6`],
        ],
      },
      'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
      'text-size': 8,
      'text-transform': 'uppercase',
      'text-letter-spacing': 0.05,
      'text-offset': [0, 1.3],
    },
    paint: {
      'text-color': '#ffffff',
    },
  }
...