React+MapBox Geojson 올리기 (Height 속성 활용하기 )

📍MapBox로 3D GeoJSON 표현하기

GeoJSON 데이터를 MapBox에서 3D로 표현하고 싶다면, Height 속성을 이용해 3D 효과를 적용할 수 있다.

---

1️⃣ MapBox 기본 세팅

이전 글에서 MapBox 기본 세팅 방법을 다루었다. 기본 설정이 이미 되어있다면, 이 단계는 건너뛰어도 된다!

React+Mapbox 초기 세팅 🌍

---

2️⃣ GeoJSON 레이어 추가하기

GeoJSON에 있는 height 속성을 기반으로 3D 효과를 주기 위해서, paint 속성을 설정해야 한다.

여기서 중요한 점은 리터럴 함수를 사용하여 GeoJSON의 특정 필드를 참조할 수 있다는 점이다!

 

필요한 paint 속성:

• 'fill-extrusion-color': 폴리곤의 색상. GeoJSON에 color 속성이 없으면, 직접 값을 지정할 수 있다.
• 'fill-extrusion-height': 폴리곤의 높이. height 속성을 사용하여 높이를 지정할 수 있다.
• 'fill-extrusion-base': 폴리곤의 시작 높이. 예를 들어, base_height 속성으로 기준 높이를 조정할 수 있다.
• 'fill-extrusion-opacity': 폴리곤의 투명도. 0에서 1 사이의 값을 지정하여 투명도를 조절할 수 있다. 

'fill-extrusion-color': ['get', 'color'], //geojson의 color property 값
'fill-extrusion-height': ['get', 'height'], //geojson의 height property 값
'fill-extrusion-base': ['get', 'base_height'], //geojson의 base_height property 값
'fill-extrusion-opacity': 0.8

---

3️⃣ fill-extrusion-height vs fill-extrusion-base

• fill-extrusion-height

1. 1. 폴리곤의 전체 높이를 설정하는 속성이다.
   2. 폴리곤이 얼마나 높은지 (즉, z축으로 얼마나 솟아나는지) 결정한다.
   3. 예시: fill-extrusion-height: 100;이라고 설정하면, 해당 폴리곤은 100 미터의 높이로 표시된다.
2. fill-extrusion-base
   1. 입체 폴리곤의 기준 높이를 설정하는 속성이다.
   2. 폴리곤이 시작하는 지면의 높이를 결정한다. 이 속성은 높이(fill-extrusion-height)와 함께 사용되어 폴리곤의 시작점을 조정할 수 있다.
   3. 예시: fill-extrusion-base: 50;라고 설정하면, 해당 폴리곤은 50 미터 위에서 시작하여 높이만큼 추가적으로 뻗어 나간다. 따라서, 만약 fill-extrusion-height가 100이라면, 이 폴리곤은 50미터에서 시작하여 150미터까지 올라간다.

---

4️⃣ 전체 코드

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import { useEffect, useRef } from 'react';
import './App.css';

function App() {
  const mapRef = useRef<mapboxgl.Map | null>(null);
  const mapContainerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    mapRef.current = new mapboxgl.Map({
      container: mapContainerRef.current as HTMLDivElement,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-87.61694, 41.86625],
      zoom: 15.99,
      pitch: 40,
      bearing: 20,
      antialias: true
    });

    mapRef.current.on('load', () => {
      mapRef.current?.addSource('floorplan', {
        type: 'geojson',
        data: 'https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson'
      });

      mapRef.current?.addLayer({
        id: 'room-extrusion',
        type: 'fill-extrusion',
        source: 'floorplan',
        paint: {
          'fill-extrusion-color': ['get', 'color'],
          'fill-extrusion-height': ['get', 'height'],
          'fill-extrusion-base': ['get', 'base_height'],
          'fill-extrusion-opacity': 0.8
        }
      });
    });

    return () => {
      mapRef.current?.remove();
    };
  }, []);

  return (
    <>
      <div id='map-container' ref={mapContainerRef} />
    </>
  )
}

export default App;

 

---

참고

Extrude polygons for 3D indoor mapping