Блог

Я некоторое время работал с mapboxgl, и мне нужно изменить цвет круга в зависимости от местоположения пользователя. Круг начинается с цвета, если пользователь находится на вершине круга, он меняется на другой цвет, и, основываясь на взаимодействии пользователя с приложением, он снова меняет цвет.

Это мои исходные данные и данные слоя:

       const pontosCircle = pontos.map((pointRoute) => ({
        id: pointRoute.order,
        type: 'Feature',
        properties: { collected: 0, name: pointRoute.order },
        geometry: { type: 'Point', coordinates: pointRoute.coordinates }
      }));

      const sourceId = 'pontos';
      const source = {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: pontosCircle
        }
      };
      const layerCircles = {
        id: 'pontosRota',
        type: 'circle',
        source: sourceId,
        paint: {
          'circle-color': [
            'case',
            ['==', ['get', 'collected'], 0],
            'rgba(235, 68, 90, .8)',
            ['==', ['get', 'collected'], 1],
            'rgba(17, 105, 54, .8)',
            ['==', ['get', 'collected'], 2],
            '#ffffff',
            '#000000'
          ],
          'circle-stroke-width': 2,
          'circle-stroke-color': [
            'case',
            ['==', ['get', 'collected'], 0],
            'rgba(235, 68, 90, .8)',
            ['==', ['get', 'collected'], 1],
            'rgba(17, 105, 54, .8)',
            ['==', ['get', 'collected'], 2],
            '#ffffff',
            '#000000'
          ],
          'circle-radius': {
            stops: [
              [0, 0],
              [20, metersToPixelsAtMaxZoom(rota.raioColeta, rota.pontos[0].ponto.coordinates[1])]
            ],
            base: 2
          }
        }
      };
      const layerLabels = {
        id: 'pontosRota-labels',
        type: 'symbol',
        source: sourceId,
        layout: {
          'text-field': '{name}',
          'text-size': 14
        }
      };
 

И это код, который загружает слой / источник в mapbox:

 
      if (!map.getSource(sourceId)) {
        map.addSource(sourceId, source);
      }
      if (!map.getLayer(layerCircles.id) amp;amp; !map.getLayer(layerLabels.id)) {
        map.addLayer(layerCircles);
        map.addLayer(layerLabels);
      }
 

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

Я думаю, что setData() метод, доступный для источников GeoJSON в Mapbox GL JS, — это то, что вы ищете. Метод позволяет обновлять базовые исходные данные и запускает повторный рендеринг карты. Затем следует использовать стиль, основанный на данных, и стилизовать ваши слои обновлений по желанию.

https://docs.mapbox.com/mapbox-gl-js/api/sources/#geojsonsource#setdata

Вот пример псевдокода

 map.getSource("source-id").setData(updatedGeoJSONData);
 

Я нахожусь в процессе составления руководства для разработчиков Mapbox, которое будет включать руководства по такого рода материалам. Это еще не сделано, но вы можете следить за обновлениями и получать уведомления, когда они будут выпущены здесь.