편집기
Editor는 Kaleidr의 지도 편집 도구를 페이지 안에 제공합니다. Kaleidr 기본 지도에 텍스트, 이미지, 마커, 팝업을 추가하고 지도 요소의 스타일을 다시 지정할 수 있습니다.
개발하기 전에 범위를 확인하세요
삽입형 편집기는 페이지 내부에서 실행되며 편집 결과는 페이지 메모리에 저장됩니다. 삽입된 편집기에서는 아무것도 저장, 내보내기, 게시할 수 없으며 변경 시 페이지에 콜백도 전달되지 않습니다. 페이지를 새로고침하거나 편집기를 제거하면 편집 결과가 사라집니다. 이 도구로 사용자에게 지도 게시 과정을 제공할 수는 없습니다. 저장, 공유, 삽입할 지도는 Kaleidr Studio에서 만들고 Viewer로 표시하세요.
한눈에 보기
| 질문 | 답변 |
|---|---|
| 무엇이 필요한가요? | 공개 가능 키(kld_pk_live_…)이며 design 범위가 있어야 합니다. 새 키에는 기본 포함됩니다. |
| 어떤 요금제인가요? | Free를 포함한 모든 요금제. |
| 어떻게 표시되나요? | iframe이 아니라 페이지 내부에 표시됩니다. 지도와 편집기 패널은 문서의 요소입니다. |
| 편집 내용은 어디에 저장되나요? | 저장되지 않습니다. 페이지를 새로고침하거나 편집기를 파기할 때까지 메모리에만 남습니다. |
| 내 코드가 편집 내용을 읽을 수 있나요? | 아니요. 변경 이벤트, 내보내기, 지도 객체 접근 기능이 없습니다. |
| 페이지당 몇 개를 사용할 수 있나 요? | 하나. |
최소 마운트
<div id="editor" style="height:640px"></div>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
const handle = Kaleidr.mount('#editor', {
product: 'editor',
publishableKey: 'kld_pk_live_…',
});
</script>
마운트 대상에 높이를 지정해야 합니다. 편집기는 해당 공간을 가득 채웁니다.
삽입형 편집기에 포함된 기능
편집기 도구 모음에는 여덟 가지 항목이 있습니다.
- 텍스트: 지도에 배치하는 제목 및 본문.
- 이미지: 지도에 배치하는 이미지.
- 마커: 특정 위치에 놓는 마커.
- 팝업: 위치에 연결된 팝업.
- 배경: 지도 뒤쪽 배경.
- 레이어: 기본 지도 자체의 레이블, 3D 건물, 조명, 지형 레이어.
- 디자인: 기본 지도 피처, 피처 범주 또는 지역을 선택하여 스타일을 변경합니다.
- 범례: 레이블 및 범례 설정.
포함되지 않은 기능
다음 Kaleidr Studio 기능은 삽입형 편집기에 포함되지 않습니다.
- 데이터 탭: 데이터셋 업로드가 불가능하므로 업로드한 데이터에 스타일을 적용하는 기능이 처리할 데이터가 없습니다.
- 예제 지도와 스타일 종류가 있는 Studio 디자인 카탈로그.
- AI 패널.
- 3D 모델 라이브러리.
- 공유 및 게시.
- 프로젝트: 저장된 지도 목록이나 열기 및 저장 기능이 없습니다.
- 로그인: 삽입 기능은 개인 Kaleidr 계정이 아닌 사용자의 키로 실행됩니다.
작동 방식
- SDK가 공개 가능 키를 단기 세션으로 교환하여 키,
design범위, 페이지 출처를 확인합니다. - 동시에 SDK가
editor.js를https://cdn.kaleidr.com에서 로드합니다. 크기가 수 MB이며 편집기를 마운트할 때만 로드합니다. 두 과정이 끝나면 편집기가 시작됩니다. - 편집기는 마운트 대상 내부에 지도를 만들고
https://tile.kaleidr.com에서 기본 지도를 불러옵니다. 스타일, 스프라이트, 글꼴 요청에 는 공개 가능 키가 포함되므로 기본 지도 호스트가 페이지를 인식할 수 있습니다. 세션 토큰은 URL에 포함되지 않습니다. - 편집기 패널은 마운트 대상 내부의 지도 위에 나타납니다.
모든 기능이 페이지 안에서 실행되므로 콘텐츠 보안 정책에서 Viewer나 Tile보다 더 많은 리소스를 허용해야 합니다. 정확한 지시문은 콘텐츠 보안 정책을 참조하세요.
페이지에서 할 수 있는 일
- 기본 지도 선택:
styleId를 사용합니다. 예:kaleidr-night. - 초기 카메라 설정:
center,zoom,pitch,bearing을 사용합니다. - 나중에 카메라 이동:
handle.setCamera(...)를 사용합니다. - 브랜드 스타일 적용:
theme은brandColor,fontPrimary등 17개의 명명된 키를 가진 객체입니다. - 편집기 제거:
handle.destroy()를 사용합니다.
제한 사항
- 저장, 내보내기, 게시가 불가능하며 변경 콜백도 없습니다.
- 핸들이 지도 객체를 노출하지 않습니다. 사용자 정의 레이어를 추가하거나 사용자가 그린 내용을 읽을 수 없습니다.
- 기본 지도와 테마는 마운트 시 고정됩니다. 변경하려면 편집기를 파기하고 다시 마운트해야 하며 편집 내용은 사라집니다.
- 한 페이지에서 동시에 하나의 편집기만 사용할 수 있습니다.
- 편집기가 마운트된 동안 테마 값이 문서 전체에 적용되고 파기하면 원래 값으로 복원됩니다.
- 사용자 코드에 준비 완료 또는 실패 신호가 제공되지 않습니다. 실패는 브라우저 콘솔에 나타납니다.