본문으로 건너뛰기

오버레이 - 폴리곤

MapPolygonWrapper 컴포넌트는 폴리곤을 지도의 API 를 이용해 그립니다.

const paths = [
  new Position(37.4002343929478, 127.108339583181),
  new Position(37.4002330712894, 127.107806511177),
  new Position(37.4004906706981, 127.107806987924),
  new Position(37.4004919924535, 127.108339948814),
];

const innerPaths = [
  new Position(37.4002343929478 + 0.00005, 127.108339583181 - 0.00005),
  new Position(37.4002330712894 + 0.00005, 127.107806511177 + 0.00005),
  new Position(37.4004906706981 - 0.00005, 127.107806987924 + 0.00005),
  new Position(37.4004919924535 - 0.00005, 127.108339948814 - 0.00005),
];

// 원래 path 의 반대방향으로 reverse
innerPaths.reverse();

export function PolygonWrapperMap() {
  return (
    <MintMap base={{ center: new Position(37.4004906706981, 127.107806987924), zoomLevel: 19 }}>
      <MapPolygonWrapper position={paths} innerPositions={[ innerPaths ]} />
    </MintMap>
  );
}

PolygonMarker VS MapPolygonWrapper​

MapPolygonWrapper 컴포넌트는 PolygonMarker 와 유사한 기능을 합니다. 차이점이 있다면 PolygonMarker 는 지도 API 상에서 같은 레이어에 존재하여 z-index 가 다른 마커와 함께 적용을 받는데, MapPolygonWrapper 는 지도의 API 를 이용하므로 마커의 레이어와는 다른 레이어에 그려져서 z-index 가 마커와 독립적으로 동작합니다.

그래서 PolygonMarker 를 이용하면 z-index 기반의 복잡한 레이어구성을 하기에 좋습니다. 단, 폴리곤을 렌더링하는 부분까지 React 로 되어있기 때문에 React 의 라이프사이클에 영향을 받습니다. (컴포넌트가 해제되고 다시 생성되는 경우 깜빡임이 있을 수 있습니다.)

기본 기능​

position​

폴리곤의 path 좌표를 지정합니다.

innerPositions​

innerPositions 는 폴리곤 내부의 punching 되는 영역을 지정합니다.

path 를 여러개 지정하여 영역을 여러개 지정할 수 있습니다.

Google 에서는 innerPositions 좌표의 순서가 바깥쪽 경로를 정의하는 좌표의 순서와 반대여야 합니다. 예를 들어 바깥쪽 경로 좌표의 순서가 시계 방향이면 안쪽 경로는 시계 반대 방향이어야 합니다. 그렇지 않으면 punching 이 되지 않습니다.

visible​

이 값을 false 로 설정하면 해당 폴리곤이 숨겨집니다.

editable​

이 값을 true 로 설정하면 도형을 수정할 수 있습니다. (Google only)

폴리곤 스타일​

lineColor​

외곽선의 색상을 지정합니다.

lineSize​

외곽선의 폭을 지정합니다.

lineOpacity​

외곽선의 투명도를 지정합니다.

fillColor​

폴리곤의 배경색을 지정합니다.

fillOpacity​

폴리곤의 배경 투명도를 지정합니다.