SceneMap：2D / 3D 场景切换

SceneMap 根据 mode 在 TMap 与 CesiumMap 之间切换，并使用具名插槽分别承载二维和三维覆盖物。

<template>
  <button @click="toggle">切换到 {{ mode === '2d' ? '3D' : '2D' }}</button>

  <div class="scene-container">
    <SceneMap
      ref="sceneRef"
      :mode="mode"
      provider="osm"
      :cesium-token="cesiumToken"
      @load2d="onLoad2d"
      @load3d="onLoad3d"
      @error="onError"
    >
      <template #2d>
        <TMapMarker :position="{ lng: 116.4, lat: 39.9 }" />
      </template>

      <template #3d>
        <CesiumEntity :config="pointConfig" />
      </template>
    </SceneMap>
  </div>
</template>

<script setup lang="ts">
import { SceneMap, TMapMarker, CesiumEntity, useSceneMap } from "scene-mapping-gis";
import type { CesiumEntityConfig } from "scene-mapping-gis/3d";

const { mode, toggle } = useSceneMap();

const pointConfig: CesiumEntityConfig = {
  type: "point",
  position: [116.4, 39.9, 0],
  point: { pixelSize: 12 },
};
</script>

Props

名称	类型	说明
mode	'2d' | '3d'	必填，当前模式
tdtKey	string	2D 天地图 Key
provider	TMapProvider	2D 地图源，默认 tianditu
url	string	2D 自定义 XYZ 地址
cesiumToken	string	Cesium ion Token
options	TMapOptions | CesiumMapOptions	透传给当前地图容器

事件与方法

• load2d(map)：Leaflet Map 就绪。
• load3d(viewer)：Cesium Viewer 就绪。
• error(error)：当前地图初始化失败。
• get2DMap()：获取 Leaflet Map。
• get3DViewer()：获取 Cesium Viewer。
• locate2D(options)：当前为 2D 时进行业务定位，否则抛出错误。

useSceneMap

const {
  mode,       // Ref<'2d' | '3d'>，初始为 2d
  switchTo2d,
  switchTo3d,
  toggle,
} = useSceneMap();

切换模式会卸载当前地图引擎并创建另一个引擎。需要跨模式保留的中心点、选择状态和业务数据，应存放在 SceneMap 外部的业务状态中。