Блог

У меня есть небольшое приложение для создания карт. Когда пользователь нажимает кнопку поиска, я хочу, чтобы карта увеличивалась в определенной области на карте и появлялось поле. Я получаю сообщение об ошибке, что уже есть источник с этим идентификатором. Что это значит и как я могу это исправить?

 const Map = (props) => {
  console.log(props);
  const mapContainerRef = useRef(null);

  const [lng, setLng] = useState(5);
  const [lat, setLat] = useState(34);
  const [zoom, setZoom] = useState(1.5);
  const [globalMap, setMap] = useState(Object());

  // Initialize map when component mounts
  useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/dark-v10',
      center: [lng, lat],
      zoom: zoom
    });

    setMap(map);

    // Disable default box zooming.
    map.boxZoom.disable();
    
    // Create a popup, but don't add it to the map yet.
    var popup = new mapboxgl.Popup({
      closeButton: false
    });

    // Add navigation control (the  /- zoom buttons)
    map.addControl(new mapboxgl.NavigationControl(), 'top-right');

    map.on('move', () => {
      setLng(map.getCenter().lng.toFixed(4));
      setLat(map.getCenter().lat.toFixed(4));
      setZoom(map.getZoom().toFixed(2));
    });

    map.on('load', function () {
    
    // function omitted to save space

    }

    // Clean up on unmount
    return () => map.remove(); 
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  React.useEffect(() => {
    if(props.show) {

      // Coordinates (eventually connect to back end)
      var northEast = [131.308594, 46.195042];
      var southEast = [117.597656, 8.233237];
      var southWest = [79.101563, 32.842674];
      var northWest = [86.847656, 44.715514];

      var maxSouth = Math.min(southEast[1], southWest[1]);
      var maxWest = Math.min(southWest[0], northWest[0]);
      var maxNorth = Math.max(northWest[1], northEast[1]);
      var maxEast = Math.max(northEast[0], southEast[0]);
      globalMap.fitBounds([
        [maxWest - 5, maxSouth - 5], // southwestern corner of the bounds
        [maxEast   5, maxNorth   5] // northeastern corner of the bounds
      ]); 
      
      // Add bounding box to the map
      // Defines bounding box
      // Polygons seem to be the preferred method according to my research
      globalMap.addSource('route', {
        'type': 'geojson',
        'data': {
            'type': 'Feature',
            'properties': {},
            'geometry': {
                'type': 'LineString',
                'coordinates': [
                    northEast, southEast, southWest, northWest, northEast
                ]
            }
        }
      });

      // Draws bounding box
      globalMap.addLayer({
        'id': 'route',
        'type': 'line',
        'source': 'route',
        'layout': {
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': '#ff0000',
            'line-width': 5
        }
      });
    }
  });

 

Ошибка возникает на линии globalMap.addSource('route', { ... . Он также показывает раздел setLng, setLat, setZoom.