래스터 지도 예제

이 라이브러리는 기본적으로 GL(WebGL)을 자동 로드합니다. 호환성·리소스 이유로 WebGL을 끄고 싶다면 disableGL을 true로 설정해 non-GL(레거시) 렌더러를 강제할 수 있습니다. GL 로드가 실패하면 자동으로 non-GL로 한 번 더 시도합니다.

래스터 지도 사용 (disableGL)

disableGL만 켜면 별도 서브모듈 설정 없이 GL을 끌 수 있습니다:

import { Map, Polyline } from "@rousen/react-naver-maps";

function App() {
  return (
    <Map
      ncpKeyId="your-ncp-key-id"
      disableGL
      initialOptions={{ center: { x: 126.978, y: 37.5665 }, zoom: 12 }}
    />
  );
}

대량 Polyline를 non-GL로 렌더링

대량 오버레이에서도 WebGL을 끄고 싶을 때 disableGL로 강제할 수 있습니다:

코드

import { Map, Polyline } from "@rousen/react-naver-maps";
import { useState, useEffect } from "react";

function RasterMapPolylineExample() {
  const [paths, setPaths] = useState<Array<Array<{ x: number; y: number }>>>(
    []
  );

  useEffect(() => {
    // 많은 수의 경로 생성
    const generatedPaths: Array<Array<{ x: number; y: number }>> = [];
    for (let i = 0; i < 100; i++) {
      const path: Array<{ x: number; y: number }> = [];
      for (let j = 0; j < 10; j++) {
        path.push({
          x: 127.0276 + (Math.random() - 0.5) * 0.1,
          y: 37.4979 + (Math.random() - 0.5) * 0.1,
        });
      }
      generatedPaths.push(path);
    }
    setPaths(generatedPaths);
  }, []);

  return (
    <Map
      ncpKeyId="your-ncp-key-id"
      disableGL
      initialOptions={{
        center: { x: 127.0276, y: 37.4979 },
        zoom: 13,
      }}
    >
      {paths.map((path, index) => (
        <Polyline
          key={index}
          path={path}
          strokeColor={`hsl(${(index * 10) % 360}, 70%, 50%)`}
          strokeWeight={2}
          strokeOpacity={0.7}
        />
      ))}
    </Map>
  );
}

export default GLPolylineExample;

언제 disableGL을 사용할까?

• 특정 브라우저/기기에서 WebGL 호환성 문제가 있을 때
• 서버 사이드 렌더링 중 GL 초기화를 피하고 싶을 때
• 단순 지도 + 소량 오버레이만 필요해 레거시 렌더러로 충분할 때