[react] 지도에서 다각형 영역 표시하기

22 Dec 2023

react

지도 애플리케이션을 개발할 때, 다각형 영역을 표시하는 것은 매우 중요합니다. React와 함께 다각형 영역을 표시하는 방법을 알아보겠습니다.

지도 라이브러리 선택

React에서 다각형 영역을 표시하기 위해서는 먼저 지도 라이브러리를 선택해야 합니다. 가장 인기 있는 지도 라이브러리로는 Google Maps API, Mapbox, Leaflet 등이 있습니다.

여기서는 Mapbox를 사용하여 예제를 설명하겠습니다.

Mapbox 설치

먼저, Mapbox를 설치합니다.

npm install mapbox-gl

Mapbox 사용하기

다음으로, React 애플리케이션에서 Mapbox를 사용하여 지도를 표시합니다.

import React, { useEffect } from 'react';
import mapboxgl from 'mapbox-gl';

const Map = () => {
  useEffect(() => {
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [12.550343, 55.665957],
      zoom: 9,
    });
  }, []);

  return <div id="map" style={{ width: '100%', height: '400px' }} />;
}

다각형 영역 표시하기

이제, Mapbox를 사용하여 다각형 영역을 표시하는 방법을 알아보겠습니다.

const addPolygonToMap = map => {
  const polygon = {
    type: 'Feature',
    geometry: {
      type: 'Polygon',
      coordinates: [
        [
          [12.553046, 55.685000],
          [12.551038, 55.685283],
          [12.549975, 55.684235],
          [12.550960, 55.683607],
          [12.553033, 55.684207],
          [12.553046, 55.685000]
        ]
      ]
    }
  };

  map.on('load', () => {
    map.addLayer({
      id: 'polygon',
      type: 'fill',
      source: {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: [polygon]
        }
      },
      layout: {},
      paint: {
        'fill-color': '#088',
        'fill-opacity': 0.8
      }
    });
  });
};

위 코드를 사용하여 addPolygonToMap 함수를 생성하고, 이를 useEffect 내에서 호출하여 다각형 영역을 지도에 추가할 수 있습니다.

이제, React에서 Mapbox를 사용하여 다각형 영역을 표시하는 방법을 알게 되었습니다. 다음 단계로는 상황에 맞게 다각형을 적용하고 스타일을 변경하여 보다 멋진 지도 애플리케이션을 개발할 수 있을 것입니다.