layout 속성 (위치, 크기, 모양 결정)이 속성들은 "무엇을, 어디에, 어떻게 놓을지"를 결정합니다.
| 속성 이름 | 설명 및 예시 | 비고 |
|---|---|---|
icon-image |
사용할 아이콘의 이름입니다. map.addImage()로 등록한 이름이나 Mapbox Studio의 아이콘 이름을 넣습니다. |
예: 'airport-15', 'drone-icon' |
icon-size |
아이콘의 크기 배율입니다. (1이 기본 크기) | 예: 1.5 (1.5배 크게) |
icon-rotate |
아이콘을 회전시킵니다. 드론 헤딩(Heading) 표시에 필수입니다. | 예: ['get', 'heading'] (데이터의 heading 값만큼 회전) |
icon-allow-overlap |
⭐️ 매우 중요. 아이콘끼리 겹칠 때 숨길지 말지 결정합니다. true로 해야 겹쳐도 다 보입니다. |
기본값: false (겹치면 하나만 보임) |
icon-ignore-placement |
다른 심볼들과 겹쳐도 무시하고 무조건 그릴지 여부입니다. | true 추천 (모든 드론 표시용) |
text-field |
표시할 텍스트 내용입니다. 데이터의 속성(properties)을 가져올 수 있습니다. |
예: ['get', 'speed'] 또는 '속도: {speed}' |
text-font |
사용할 폰트 배열입니다. | 예: ['Noto Sans KR Regular'] |
text-offset |
아이콘 기준으로 텍스트 위치를 미세 조정합니다. (x, y) | 예: [0, 1.5] (아이콘 아래로 내림) |
text-anchor |
텍스트가 아이콘의 어느 쪽에 붙을지 결정합니다. | 'top', 'bottom', 'center' 등 |
paint 속성 (색상, 투명도 결정)이 속성들은 "어떤 색으로 칠할지"를 결정하며, layout보다 렌더링 비용이 저렴해서 자주 바꿔도 성능에 영향이 적습니다.
| 속성 이름 | 설명 및 예시 | 비고 |
|---|---|---|
icon-color |
아이콘의 색상을 변경합니다. 단, 이미지가 SDF(Signed Distance Field) 형식이어야만 작동합니다. | 일반 PNG/JPG는 색상이 안 바뀜. SDF여야 ['get', 'color']로 드론 색 변경 가능. |
icon-opacity |
아이콘의 투명도 (0 ~ 1) | 0.8 |
text-color |
텍스트 색상 | '#FFFFFF' |
text-halo-color |
텍스트 테두리(후광) 색상. 글씨 가독성을 높일 때 씁니다. | '#000000' (검은 테두리) |
text-halo-width |
텍스트 테두리 두께 | 2 |