跳到主要内容

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。