唯杰地图 logo唯杰地图
VJMAP
EN

cesium

vjmap/references/overlay/cesium.md 3.5 KB83 行
原文

本文回答：Cesium 3D 场景与 vjmap 2D CAD 的双向叠加（CAD 作 Cesium 图层 / Cesium 3D 模型叠到 vjmap）。

一、Cesium 加载 CAD WMS

const svc = new vjmap.Service(URL, TOKEN);
await svc.openMap({ mapid: "sys_cadcesium", mapopenway: vjmap.MapOpenWay.GeomRender });

const wmsUrl = svc.wmsTileUrl({
  mapid: "sys_cadcesium",
  layers: "默认图层名",
  srs: "EPSG:3857",
  crs: "EPSG:4544",
  webMapType: "WGS84",        // Cesium 是 WGS84
  bbox: ""                    // ⚠️ 清空默认 {bbox-epsg-3857} 占位（vjmap 引擎专用，Cesium 不替换会残留字面量）
});

const cesiumViewer = new Cesium.Viewer("cesiumContainer");
cesiumViewer.imageryLayers.addImageryProvider(
  new Cesium.UrlTemplateImageryProvider({
    url: wmsUrl + "&BBOX={westProjected},{southProjected},{eastProjected},{northProjected}",
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    tileWidth: 256,
    tileHeight: 256
  })
);

官方示例（web/07cesiumCadWmsLayer.js）的写法：srs: "EPSG:4326" + WebMapServiceImageryProvider（其默认 GeographicTilingScheme、自动追加 BBOX）：

const wmsUrl4326 = svc.wmsTileUrl({ mapid: "sys_cadcesium", layers: "默认图层名", bbox: "", srs: "EPSG:4326", crs: "EPSG:4544" });
cesiumViewer.imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({ url: wmsUrl4326 }));

二、把 Cesium 模型叠到 vjmap 上

更常见的是通过 vjmap 做底图，Cesium 本身就是 3D 地球，二者不能简单互相"addLayer"。

方案：

  • 用 iframe 独立放 vjmap + Cesium，通过 postMessage 同步 center / zoom / rotate。
  • 或用 vjmap3d（但本 skill 不覆盖）。

三、2D - 3D 视角同步

粗略映射：

// vjmap → Cesium
cesiumViewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(center.lng, center.lat, 1000),
  orientation: {
    heading: Cesium.Math.toRadians(-map.getBearing()),
    pitch: Cesium.Math.toRadians(-(90 - map.getPitch())),
    roll: 0
  },
  duration: 0
});

Cesium 的 pitch = -90 时 = 正视地面（= vjmap 的 pitch: 0）。

四、Cesium 常用配置（配合 CAD）

  • 关闭天空 / 大气：viewer.scene.skyBox.show = false, viewer.scene.sun.show = false, viewer.scene.moon.show = false。
  • 换成白色背景：viewer.scene.globe.baseColor = Cesium.Color.WHITE。
  • 禁用地形：viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider()。

五、CAD 底图 + Cesium 倾斜摄影 3DTiles

业务里常常既要 3D 倾斜，又要 2D CAD：

  • 方式 A：CAD 作 Cesium 的 ImageryLayer（即 WMS），再叠 3DTiles。
  • 方式 B：把 3DTiles 转成 vjmap 可接受的形式（需要 vjmap3d 扩展，本 skill 不覆盖）。

六、常见坑

  1. Cesium.UrlTemplateImageryProvider 的 URL 占位符：必须是 {westProjected} 之类，和 vjmap 栅格源的 {bbox-epsg-3857} 占位符不同。
  2. WMS 瓦片错位：tilingScheme 必须与 wmsTileUrl 的 srs 一致——srs: "EPSG:3857" 配 WebMercatorTilingScheme（BBOX 用 {westProjected}… 米制占位）；srs: "EPSG:4326" 配 GeographicTilingScheme（WebMapServiceImageryProvider 的默认，官方示例即此组合）。
  3. Cesium 默认坐标在米，vjmap 在经纬度：传参时注意单位。
  4. 性能：Cesium + CAD WMS + 互联网底图 + 3DTiles 一起开，GPU 压力大；低配机要降质。