상세 컨텐츠

본문 제목

anchor 값의 의미

카테고리 없음

by 폴리프레임 2024. 4. 26. 17:47

본문

반응형

지도에 아이콘의 위치를 세밀히 조정하게 될때, 점검해야하는 anchor 의 옵션은 다음과 같다.

const vectorLayer = new VectorLayer({
    source: new VectorSource({
        features: [marker]
    }),
    style: new Style({
        image: new Icon({
            anchor: [0.5, 1],
            src: 'https://openlayers.org/en/latest/examples/data/icon.png'
        })
    })
});

map.addLayer(vectorLayer);
  • [0, 0]: 아이콘의 왼쪽 상단 모서리가 기준점
  • [0.5, 0.5]: 아이콘의 중앙이 기준점
  • [1, 1]: 아이콘의 오른쪽 하단 모서리가 기준점
  • [0.5, 1]: 아이콘의 하단 중앙이 기준점 (일반적으로 ‘핀’ 형태의 마커에 사용되며, 마커의 끝점이 정확한 위치를 가리키게 함)