19.12.2022 в 17:08

Maps и React

Информация о версии:

Node v18
React-Mapbox-Gl v15
Mapbox-Gl v2

React-mapbox-gl — это библиотека, которая позволяет вам использовать Mapbox GL JS, библиотеку JavaScript для интерактивных, настраиваемых векторных карт, в приложении React. Он предоставляет набор компонентов React, упрощающих работу с Mapbox GL JS декларативным способом, позволяя вам указывать поведение и стиль карты в качестве свойств компонента React.

Чтобы начать работу с react-mapbox-gl, вам понадобится токен доступа Mapbox, который вы можете получить, зарегистрировав учетную запись Mapbox. Получив токен доступа, вы можете установить библиотеку с помощью npm или yarn:

npm install react-mapbox-gl mapbox-gl

или

yarn add react-mapbox-gl mapbox-gl

Затем вы можете импортировать компонент Map из react-mapbox-gl и использовать его для рендеринга карты в вашем приложении:

import React from 'react';
import MapboxGL from 'mapbox-gl';
import { Map } from 'react-mapbox-gl';
const App = () => {
  return (
    <Map
      style={{
        width: '100%',
        height: '100%',
      }}
      mapboxAccessToken={mapbox_token}
      initialViewState={{
        latitude: 29.935260993668,
        longitude: -90.08128396541,
        zoom: 12,
        pitch: 60,
      }}
      mapStyle='mapbox://styles/mapbox/light-v11'
    />
  );
};
export default App;

Компонент Map принимает ряд реквизитов, позволяющих настраивать внешний вид и поведение карты. Например, вы можете использовать свойство mapStyle, чтобы указать стиль Mapbox, который будет использоваться для карты, а свойства center и zoom — для управления исходным видом карты.

Вы также можете добавить на карту другие функции Mapbox GL JS, используя другие компоненты, предоставляемые react-mapbox-gl, такие как Marker, Popup и Layer. Например, вы можете добавить маркер на карту следующим образом:

import React, { useState } from 'react';
import MapboxGL from 'mapbox-gl';
import { Map, Marker } from 'react-mapbox-gl';

const App = () => {
  const [mark, setMark] = useState()
  const [showPopup, setShowPopup] = useState(false)

const {lat, lon} = mark
return (
    <Map
      style="mapbox://styles/mapbox/streets-v9"
      containerStyle={{
        height: '400px',
        width: '100%'
      }}
      center={[-74.50, 40]}
      zoom={9}
    >
    {/*
    based on the mark object the mark
    the popup will render conditionally
    */}
    {showPopup ?
      <Marker
        longitude={lon}
        latitude={lat}
        onClick={() => setShowPopup(false)}
      >
      </Marker>
    :
      <Popup
        longitude={lon}
        latitude={lat}
        anchor='bottom'
        closeOnClick={false}
        onClose={() => setShowPopup(true)}
        focusAfterOpen={true}
      >
      {/* popup info*/}
      </Popup>
    }
    </Map>
  );
};
export default App;

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

react-mapbox-gl также предоставляет несколько других функций, упрощающих работу с Mapbox GL JS в приложении React. Например, вы можете использовать реквизит onStyleLoad для выполнения действия после завершения загрузки стиля карты или использовать реквизит onClick для обработки событий кликов на карте. Вы можете найти полный список доступных реквизитов.

#JavaScript #React

346

Войти на сайт

Maps и React