跳至主要内容

Tiles — 嵌入設計型底圖

product="tile" 透過 style id 將設計型 Kaleidr 底圖嵌入 iframe。 它擁有自己的地圖；請透過 kaleidr-embed:* postMessage 介面進行控制。

  • 接入方式： iframe — 地圖在 map-embed.kaleidr.com 中載入。
  • 所需範圍： maps.
  • 最低方案： Free — Free 金鑰建立時包含 ["maps"] 範圍與 ["tile"] 產品權限。Tile 是 Free 可運行的唯一需要金鑰的產品。

開始之前​

  • 您頁面的 origin 必須位於金鑰的 origin allowlist 中。否則工作階段交換 會以 403 session_origin_mismatch 失敗。file:// 不會傳送 Origin，因此一定會失敗 — 請透過 HTTP(S) 提供。請參閱 取得 API 金鑰。
  • 您的 CSP 必須允許 SDK loader 與 map-embed.kaleidr.com frame host。僅嵌入 Tile 時不需要 tile / vendor image host — 這些資源位於 Kaleidr iframe 內部。請參閱 Content Security Policy。

掛載​

<kaleidr-map product="tile" publishable-key="kld_pk_live_…" style-id="kaleidr-morning"
             center="-0.12,51.5" zoom="11" style="height:480px"></kaleidr-map>

內建 style id 包括 kaleidr-morning、kaleidr-afternoon、 kaleidr-night、kaleidr-editorial、kaleidr-plain（以及 registry alias）。

Handle​

const handle = Kaleidr.mount('#basemap', {
  product: 'tile',
  publishableKey: 'kld_pk_live_…',
  styleId: 'kaleidr-night',
});

handle.setCamera({ center: [2.35, 48.85], zoom: 12 });
handle.setStyle('kaleidr-editorial');   // live style swap — tile only
handle.destroy();

setStyle(styleId) 僅在 tile handle 上公開。在 chat、 editor 或 viewer 上呼叫時，會記錄 [kaleidr] 警告並傳回。

一個金鑰，一個共用池

publishable-key（maps 範圍）授權存取底圖 — 不存在 單獨的 tile 金鑰 — 每個底圖 session 都會計入您方案的 共用每月地圖載入額度。請參閱 使用 tiles。