Mapbox 및 React 소개

14548 단어 react tutorial mapbox javascript

This post is part of my Building Interactive Maps with React course - a course for anyone wanting to learn how to build interactive maps and integrate them into their React applications. If you enjoy this guide, then chances are you will enjoy the course too!

너는 무엇을 배울 거니
Mapbox GL JS를 사용하여 시작 및 실행하고 반응하는 방법을 안내하기 위한 글입니다.기본 React 맵 구성 요소를 만드는 방법과 맵에 일반적인 사용자 정의 설정을 추가하는 방법을 알려 줍니다.이 안내서가 끝날 때, Mapbox GL JS와 React를 사용하여 기본적인 전체 화면 상호작용 지도를 만들 수 있습니다.

선결 조건

기본적으로 React

에 익숙하다

Mapbox 소개
Mapbox에 익숙해진 경우 계속하여 응용 프로그램 설정으로 건너뜁니다.요컨대, Mapbox는 웹, 모바일, AR에 지도와 위치 구동을 구축하는 응용 프로그램에 구축 블록을 제공하는 강력한 플랫폼이다. 야외에서 만나는 많은 지도 체험은 아마도 Mapbox (즉 Strava, 뉴욕타임스, Shopify, Square) 가 제공할 것이다.주요 제품은 다음과 같습니다.

지도: 멋진 지도 스타일과 상호작용하는 SDK

내비게이션: 내비게이션 체험을 위한 강력한 루트 엔진 개발

검색: 지리적 인코딩 서비스

Studio: 사용자 지정 맵 및 시각화를 위한 강력한 UI 개발

비전: 카메라 및 인공지능 중심 툴킷

데이터: 경계, 교통, 이동 데이터를 포함한 신뢰할 수 있는 데이터 세트

이 시리즈는 그들의 지도와 작업실 제품을 중점적으로 소개할 것이다.네비게이션, 시각, 검색 등 다른 제품에 대해 깊이 이해할 수 있는 기회가 있기를 바랍니다.
이 설명서에서는 Mapbox GL JS 및 React를 사용하는 방법에 대해 살펴보겠습니다.이 자바스크립트 라이브러리는 최소한의 코드로 모든 React 프로그램에 예쁘고 높은 상호작용의 지도를 추가할 수 있도록 합니다.

응용 프로그램 설정
사용하기 편리하도록 create-react-app을 사용하여 프로그램을 시작하고 실행할 것입니다.계속하려면 mysandbox repo에서 이 안내서를 찾을 수 있습니다.
Mapbox에는 Mapbox GL JS를 사용하는 계정이 필요합니다.계좌가 없으면 그들signup page로 가세요.계정을 생성한 후 https://account.mapbox.com/의 계정 페이지로 로그인하여 이동합니다.'방문 영패' 라는 제목의 부분과 '기본 공공 영패' 를 보셔야 합니다.프로젝트의 루트 디렉터리에 새 .env 파일을 만들고 방금 추적한 접근 카드를 복사합니다.이 영패를 .env 파일에 추가해야 합니다.일반적으로 Best Practice는 액세스 토큰과 같은 중요한 정보를 .env 파일에 저장하고 버전 관리 외부에 두는 것입니다.

# .env
REACT_APP_MAPBOX_TOKEN=<YOUR_TOKEN_HERE>

그런 다음 Mapbox GL JS를 프로젝트에 종속 항목으로 추가해야 합니다.

# yarn
yarn add mapbox-gl

# npm
npm install mapbox-gl

맵 만들기
기본 응용 프로그램의 기초 구조 설정과 의존 항목을 설치한 후에 우리는 전체 화면 상호작용 지도를 만들 수 있다.만약 당신이 단지 한 부분을 잡고 싶을 뿐이라면, 계속 앞으로 나아가세요. 아래의 코드 블록이 바로 당신의 표입니다.그렇지 않으면, 나는 아래에서 이 관건적인 개념들을 하나하나 소개할 것이다.

import React, { useRef, useEffect } from "react";
import mapboxgl from "mapbox-gl";
// import the mapbox styles
// alternatively can use a link tag in the head of public/index.html
// see https://docs.mapbox.com/mapbox-gl-js/api/
import "mapbox-gl/dist/mapbox-gl.css";

// Grab the access token from your Mapbox account
// I typically like to store sensitive things like this
// in a .env file
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN;

const App = () => {
  const mapContainer = useRef();

  // this is where all of our map logic is going to live
  // adding the empty dependency array ensures that the map
  // is only rendered once
  useEffect(() => {
    // create the map and configure it
    // check out the API reference for more options
    // https://docs.mapbox.com/mapbox-gl-js/api/map/
    const map = new mapboxgl.Map({
      container: mapContainer.current,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-87.903982, 43.020403],
      zoom: 12,
    });

    // cleanup function to remove map on unmount
    return () => map.remove();
  }, []);

  return <div ref={mapContainer} style={{ width: "100%", height: "100vh" }} />;
};

export default App;

알겠습니다. 방문 영패 위치부터 위의 코드 세션을 한 줄 한 줄 훑어봅시다.Mapbox에서는 액세스 토큰이 있어야 Mapbox GL JS 라이브러리를 사용할 수 있습니다.우리는 이미 프로그램 설정 단계에서 접근 영패를 가져와 .env 파일에 저장했다.현재, 우리는 응용 프로그램에서 이 변수를 인용할 수 있다.

// Grab the access token from your Mapbox account
// I typically like to store sensitive things like this
// in a .env file
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN

우선 [useRef](https://reactjs.org/docs/hooks-reference.html#useref) 갈고리를 사용하여 맵 용기에 인용을 만듭니다.이 ref를 사용해서 맵박스가 지도를 렌더링하는 곳을 알려 드리겠습니다.그러나 우리 지도 논리의 고기와 감자는 [useEffect](https://reactjs.org/docs/hooks-reference.html#useeffect) 갈고리 내부에 산다.논리를 useEffect 갈고리에 놓으면 구성 요소가 마운트되기 전에 렌더링되지 않고 빈 의존 항목 그룹을 갈고리에 전달하면 렌더링이 한 번만 렌더링되지 않도록 합니다.
매핑을 초기화하는 데 필요한 실제 논리는 매우 작다.여섯 줄 코드로 아름다운 상호작용 지도를 만듭니다!새 변수map를 만들고 그 값을 Mapbox GL JS map의 새 인스턴스로 설정하기만 하면 됩니다.구조기는 대량의 설정 옵션을 사용할 수 있지만, 이 예에 대해서는 간단함을 유지할 것입니다.필요한 옵션은 container 및 style뿐입니다.Mapbox Docs에서 이 두 옵션과 기타 사용 가능한 모든 옵션에 대한 상세한 설명을 찾을 수 있습니다.나는 예쁜 밀워키 지도를 렌더링하기 위해 선택할 수 있는 center와 zoom 옵션을 추가했다.
구성 요소가 마운트 해제될 때 맵을 삭제할 수 있도록 useEffect 갈고리에 정리 함수를 추가하기를 희망합니다.마지막으로, 우리는 리프를 구성 요소에서 되돌아오는 div에 전달하고, 맵이 전체 뷰포트의 너비와 높이를 차지하도록 스타일을 지정합니다.그렇지!프로그램을 시작하면, 밀워키 전체 화면 지도를 축소하고 이동할 수 있는 완전한 상호작용이 있어야 한다.

const App = () => {
  const mapContainer = useRef();

  // this is where all of our map logic is going to live
  // adding the empty dependency array ensures that the map
  // is only created once
  useEffect(() => {
    // create the map and configure it
    // check out the API reference for more options
    // https://docs.mapbox.com/mapbox-gl-js/api/map/
    const map = new mapboxgl.Map({
      container: mapContainer.current,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-87.903982, 43.020403],
      zoom: 12,
    });

    // cleanup function to remove map on unmount
    return () => map.remove();
  }, []);

  return <div ref={mapContainer} style={{ width: "100%", height: "100vh" }} />;
};

export default App;

다음 단계
우리는 지도를 개선하기 위해 많은 일을 할 수 있는데, 이것들은 모두 첫 번째 강좌의 범위를 넘어섰다.이 시리즈의 다음 글은 맵에 쉽게 추가할 수 있는 다양한 미리 정의된 맵박스 스타일 (basemaps) 을 연구할 것이다.이 강좌는 각 양식의 유용한 상하문을 제공하고 각 양식의 흔한 용례를 이해하도록 안내할 것입니다.
만약 그때까지 기다릴 수 없다면, 다음은 다른 미리 정의된 Mapbox 스타일의 목록입니다. 시도해 보십시오.기존 style 옵션을 다음 스타일의 URL 중 하나로 바꾸기만 하면 됩니다.

mapbox://styles/mapbox/streets-v11

mapbox://styles/mapbox/outdoors-v11

mapbox://styles/mapbox/light-v10

mapbox://styles/mapbox/dark-v10

mapbox://styles/mapbox/satellite-v9

mapbox://styles/mapbox/satellite-streets-v11

mapbox://styles/mapbox/navigation-preview-day-v4

mapbox://styles/mapbox/navigation-preview-night-v4

mapbox://styles/mapbox/navigation-guidance-day-v4

mapbox://styles/mapbox/navigation-guidance-night-v4

만약 당신이 이 문장이 매우 유용하다고 생각한다면, 전송, 공유, 또는 한 부를 찾아 주십시오 The Mapbox Developer's Handbook!

유용한 링크 및 리소스

지도함 홈페이지https://www.mapbox.com/