編輯器
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，這是包含 17 個命名鍵的對象，例如brandColor和fontPrimary。 - 移除編輯器： 使用
handle.destroy()。
限制
- 無法保存、導出或發佈，也沒有更改回調。
- 控制句柄不暴露地圖對象。您無法添加自己的圖層，也不能讀取用戶繪制的內容。
- 底圖和主題在掛載時確定。若要修改其中之一，必須銷毀並重新掛載編輯器，這會丟失編輯結果。
- 每個頁面同時只能運行一個編輯器。
- 編輯器掛載期間，主題值會應用於整個文檔，銷毀後會恢復原值。
- 不向您的代碼發出就緒或失敗信號。錯誤會顯示在瀏覽器控制台中。