跳至主要内容

<kaleidr-map> — 元素

宣告式 façade。放置元素並設定屬性;它會在 連接時掛載,並在移除時卸載。

<kaleidr-map product="viewer" share-id="abcd1234" style="height:480px"></kaleidr-map>

屬性表

已根據 kaleidr-sdk/packages/embed/src/element.ts 驗證。屬性名稱 採用 kebab-case;kaleidr.js 中對應的 Kaleidr.mount(...) 選項名稱 採用 camelCase。

屬性產品必填預設值含義
product全部chat | viewer | editor | tile
publishable-keychat, editor, tile是*kld_pk_live_…;運行時交換為 session token
api-keychat, editor, tile已棄用別名;也接受舊版 kld_live_…
share-idviewer已發布地圖 / share id;省略時會在 bundle 載入時拋出錯誤
map-idviewershare-id 的別名
style-idtile, editor選用tile:viewer 預設值;editor:組織預設值 → kaleidr-morning底圖 style id,或(editor)完整 style URL
map-targetchat選用host map element 的 CSS selector
containedchat選用false將面板固定在 mount element 內,而不是浮動在 document.body
centerviewer, tile, editor選用lon,lat
zoomviewer, tile, editor選用editor: 2初始 zoom
pitchviewer, tile, editor選用0初始 pitch
bearingviewer, tile, editor選用0初始 bearing
themechat, editor選用JSON CSS-token object string
doorway全部選用產品預設值iframe | attach 覆蓋
base全部選用https://cdn.kaleidr.com用於延遲載入 bundle(/embed/v1/*.js)的 CDN origin
viewer-baseviewer, tile選用https://map-embed.kaleidr.comiframe 載入的 origin — 與 bundle CDN 不同
api-basechat, editor, tile選用https://api.kaleidr.com/inference-api必須包含 /inference-apihttps://api.kaleidr.com 這樣的 bare origin 會在工作階段交換時傳回 404。適用於所有執行工作階段交換的產品(chat、editor、tile)。
tile-baseeditor選用https://tile.kaleidr.com用於解析目錄中 style-id 值的 Tile CDN
flag全部選用每個元素的 dormancy 覆蓋設定

* 授權/計費使用時必填。Viewer 不需要金鑰;向 Viewer embed 傳入金鑰會以 product_not_allowed 拒絕。

請為元素設定高度(內嵌 style 或 CSS)。每個產品都會填滿其 容器;位於未設定尺寸容器中的 iframe 產品會回退為 固定 500px 高度,以保持可見。

Handle matrix

行為與 /embed/v1/ 目前發布版本一致。不支援的組合不會拋出錯誤 — SDK 會記錄 [kaleidr] 警告並傳回。這是 v1 主版本別名的 contract; 移除可呼叫的方法會構成破壞性行為變更。

方法chatviewereditortile
destroy()
setCamera(camera)no-op
setTheme(theme)是(即時)n/a僅掛載時n/a
setStyle(styleId)n/an/an/a僅在 tile 中公開

Chat 不會控制地圖相機 — 在 Kaleidr.mount(...) 之後請使用 您自己的地圖實例的相機 API。Editor 的即時 setTheme 將在後續 SDK 版本中提供;掛載時的 theme 已經可用。

即時更新

centerzoompitchbearing 會被監聽,並在不重新掛載的情況下重新調整 viewer、 editor 與 tile 的視野。theme 變更會即時更新 chat; editor theme 仍然僅在掛載時套用。

Chat + map-target

Chat 連接至您的即時地圖,而字串屬性無法攜帶 map instance。可以透過以下兩種 方式提供:

  • Imperative(建議): Kaleidr.mount(el, { product: 'chat', publishableKey, map, contained: true }).
  • Declarative: 將 map instance 儲存在 host element 上: hostEl.__kaleidrMap__ = map,然後設定 map-target="#host"

沒有地圖時,chat 會以 headless 模式運行(無地圖互動)。