구멍난 다각형 만들기

이 예제에서는 다각형을 생성할 때 구성하는 좌표값을 좌표 배열의 배열로 설정하여 구멍난 다각형을 만드는 방법을 설명합니다.

original docs : https://apis.map.kakao.com/web/sample/donut/

결과

Loading...

라이브 에디터

function(){ const path = [ {lat: 33.45086654081833, lng: 126.56906858718982}, {lat: 33.45010890948828, lng: 126.56898629127468}, {lat: 33.44979857909499, lng: 126.57049357211622}, {lat: 33.450137483918496, lng: 126.57202991943016}, {lat: 33.450706188506054, lng: 126.57223147947938}, {lat: 33.45164068091554, lng: 126.571312669315}, ]; const hole = [ {lat: 33.4506262491095, lng: 126.56997323165163}, {lat: 33.45029422800042, lng: 126.57042659659218}, {lat: 33.45032339792896, lng: 126.5710395101452}, {lat: 33.450622037218295, lng: 126.57136070280123}, {lat: 33.450964416902046, lng: 126.57129448564594}, {lat: 33.4510527150534, lng: 126.5707562770697}, ]; return ( <> <Map // 지도를 표시할 Container center={{ // 지도의 중심좌표 lat: 33.450701, lng: 126.570667, }} style={{ // 지도의 크기 width: "100%", height: "450px", }} level={3} // 지도의 확대 레벨 > <Polygon path={[path, hole]} strokeWeight={2} strokeColor={'#b26bb2'} strokeOpacity={0.8} fillColor={'#f9f'} fillOpacity={0.7} /> </Map> </> ) }

function(){
  const path = [
    {lat: 33.45086654081833, lng: 126.56906858718982},
    {lat: 33.45010890948828, lng: 126.56898629127468},
    {lat: 33.44979857909499, lng: 126.57049357211622},
    {lat: 33.450137483918496, lng: 126.57202991943016},
    {lat: 33.450706188506054, lng: 126.57223147947938},
    {lat: 33.45164068091554, lng: 126.571312669315},
  ];

  const hole = [
    {lat: 33.4506262491095, lng: 126.56997323165163},
    {lat: 33.45029422800042, lng: 126.57042659659218},
    {lat: 33.45032339792896, lng: 126.5710395101452},
    {lat: 33.450622037218295, lng: 126.57136070280123},
    {lat: 33.450964416902046, lng: 126.57129448564594},
    {lat: 33.4510527150534, lng: 126.5707562770697},
  ];

  return (
    <>
      <Map // 지도를 표시할 Container
        center={{
          // 지도의 중심좌표
          lat: 33.450701,
          lng: 126.570667,
        }}
        style={{
          // 지도의 크기
          width: "100%",
          height: "450px",
        }}
        level={3} // 지도의 확대 레벨
      >
        <Polygon
          path={[path, hole]}
          strokeWeight={2}
          strokeColor={'#b26bb2'}
          strokeOpacity={0.8}
          fillColor={'#f9f'}
          fillOpacity={0.7}
        />
      </Map>
    </>
  )
}