Фильтр Mapbox: Желание отображать слои отображения отдельно на основе ключа свойства

Question

Используя два объекта в коллекции geo json как и пример:

{
  "type": "Feature",
 "properties": {
      "name": "Eau minérale Mélodie",
      "id_osm": 7041403159,
      "image": "File:Eau min%C3%A9rale M%C3%A9lodie.jpg",
      "refill" : "yes"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
        6.1281257,
        46.3431274
      ]
    }
  },
  {
    "type": "Feature",
    "properties": {
      "id_osm": 7041937865,
      "id_wikidata": "Q55169831",
      "image": "File:Alterszentrum%20Bullinger-Hardau.jpg",
      "name": "Fountain by Retirement Home Bullinger-Hardau",
      "mergedOn": "id_wikidata"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
        8.5098981,
        47.3803762
      ]
    }
  }

Я хочу отобразить точки с добавлением ключа в отдельном слое. Никогда не кластер и другой цвет.

Я пробовал:

фильтр: ["==", ['get', 'refill']], но безрезультатно.

Как лучше поступить?

Спасибо,

Стюарт

Answer 1

Есть несколько способов добавить круги на вашу карту, основываясь на свойствах ваших данных. Рекомендуемый подход заключается в добавлении слоя circle, где circle-color свойства paint определяется выражением has:

map.addLayer({
  'id': 'colored-circles',
  'type': 'circle',
  'source': 'points',
  'paint': {
    'circle-radius': 10,
    /**
     * color circles by the refill property, using a 'case' and 'has' expression
     * https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#case
     * https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#has
     */
    'circle-color': [
      'case',
      ['has', 'refill'],
      '#fbb03b',
      /* other */ '#3bb2d0'
     ]
   }
});

Полные подробности реализации можно найти в этом JSFiddle : https://jsfiddle.net/3r8zxf17/3/. Добавьте свой токен доступа к Mapbox, где это указано, чтобы просмотреть получившуюся карту и круги.

Однако при вышеупомянутом подходе круги будут находиться в одном слое. Если вы хотите, чтобы все объекты со свойством refill находились в отдельном слое, вы можете добавить на карту два слоя, как показано ниже, используя свойство circle-opacity.

/* Add a circle layer for features with the 'refill' property. */
map.addLayer({
  'id': 'has-refill',
  'type': 'circle',
  'source': 'points',
  'paint': {
    'circle-radius': 10,
    'circle-color': '#fbb03b',
    'circle-opacity': [
      'case',
      ['has', 'refill'],
      1,
      /* other */ 0
    ]
  }
});

/* Add a circle layer for features without the 'refill' property. */
map.addLayer({
  'id': 'no-refill',
  'type': 'circle',
  'source': 'points',
  'paint': {
    'circle-radius': 10,
    'circle-color': '#3bb2d0',
    'circle-opacity': [
      'case',
      ['has', 'refill'],
      0,
      /* other */ 1
    ]
  }
});

Полный код находится в этом JSFiddle: https://jsfiddle.net/9apcge3n/. Вы также можете добавить свой токен доступа Mapbox, чтобы просмотреть результат здесь.

Вот снимок экрана визуального результата для обоих указанных выше подходов: