Advanced Tutorial

Google Street View in CesiumJS

进阶中级30 分钟

这篇教程把街景级观察和三维城市场景接到一起,适合做街道核验、巡检和沉浸式定位。

Overview

它解决的不是“加街景”,而是“对齐街景”

价值在于把街景位置、方向和三维城市模型对齐。这样用户可以从城市尺度快速落到街道尺度,并进行核验和比对。

Use Cases

适合场景

  • 街道级巡检。
  • 现场核验和远程比对。
  • 城市模型与真实街景联合浏览。

Starter Code

街景入口思路

const marker = viewer.entities.add({
  position: Cartesian3.fromDegrees(lon, lat, height),
  billboard: { image: "./street-view-pin.svg" },
});

handler.setInputAction(() => {
  openStreetViewPanel(streetViewId);
}, ScreenSpaceEventType.LEFT_CLICK);

Project Advice

要优先保证什么

先保证位置准确 位置误差会直接破坏街景和城市场景之间的对应关系。
再处理朝向 朝向正确后,街景切换才有可信度。
入口要明显 用户必须知道哪里可以进入街景,而不是靠猜。

Suggested Flow

建议练习顺序

  1. 先准备相关服务配置。
  2. 加载 Photorealistic 3D Tiles 作为背景。
  3. 加入 Street View 入口和定位逻辑。
  4. 处理街景与三维模型的方向对齐。
  5. 测试从城市级视角到街景级视角的切换。

Good For

最适合用在

  • 街道核验。
  • 巡检和现场复核。
  • 城市模型与现实对照。

Pitfalls

重点风险

  • 位置和朝向偏差会直接破坏可信度。
  • 服务依赖链长,配置问题要优先排查。
  • 要注意访问权限和使用限制。