React-mapbox-gl отображает несколько карт в одном компоненте - PullRequest
Новая
       36

React-mapbox-gl отображает несколько карт в одном компоненте

0 голосов
/ 30 марта 2020

Я пытаюсь создать приложение с фильтром геолокации на Картах. Я перехожу к компоненту реквизита с данными массива (geolocation et c.), Он работает правильно. Пример моего объекта. Когда я пытаюсь фильтровать свои данные, отправляю данные второго раза в реквизит, Mapbox отображает источник с другой (неправильной) карты. Функция, которую я использую после загрузки стилей карты: 

const handleLostMapLoaded = (map, lng, lat, rad, index) => {
  map.loadImage(
    "",
      map.addImage("cat", image);
    }
  );
  map.addSource(`${index}point`, {
    type: "geojson",
    data: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "Point",
            //53.015331, 18.6057
            coordinates: [lng, lat]
          }
        }
      ]
    }
  });
  map.addLayer({
    id: `${index}points`,
    type: "symbol",
    source: `${index}point`,
    layout: {
      "icon-image": "cat",
      "icon-size": 0.05
    }
  });
  }
};

Компонент карты: 

      <div id={`post${props.data.idPosty}`}>
        <Map
          className={`post${props.data.idPosty}`}
          style="mapbox://styles/mapbox/streets-v11"
          containerStyle={{
            height: "100vh",
            width: "100vw"
          }}
          center={[location[0], location[1]]}
          containerStyle={{ width: 300, height: 200, margin: "auto" }}
          onStyleLoad={(map, e) => {
            handleLostMapLoaded(
              map,
              location[0],
              location[1],
              0,
              props.data.idPosty
            );
          }}
        />
      </div>
...