Cesium中文官网实战：3D地图切片加载与点位信息可视化全解析

1次阅读

没有评论

共计 1867 个字符，预计需要花费 5 分钟才能阅读完成。

Cesium 的 3D 地图展示依赖于瓦片（Tile）技术，通过将地图数据分层分块加载，实现高效渲染。理解这一机制是优化性能的关键。

分层分级（LOD）：地图被划分为多个层级（Level），每层级包含不同详细程度的瓦片。随着视角拉近，自动加载更精细层级的瓦片。
四叉树索引：每个瓦片通过行列号（X/Y）和层级（Z）唯一标识，采用四叉树结构组织，确保快速定位所需瓦片。
动态投影：Cesium 支持多种投影方式（如 WGS84、Web 墨卡托），切片时自动处理坐标转换，确保地图无缝拼接。

不同视图模式下，点位信息的渲染逻辑和适用场景各有特点：

二维模式（2D）
使用平面坐标系，适合传统 GIS 应用。
点位通过 Billboard 或Label实现，渲染效率最高。
缺点：无法体现高程信息，视角固定。
三维模式（3D）
支持地形和高程数据，点位可绑定高度值。
常用 Entity 或Primitive渲染，灵活性高。
缺点：性能开销较大，需注意遮挡问题。
球体模式（Globe）
地球曲面展示，适合全球尺度数据。
需处理球面距离和贴地效果（如HeightReference.CLAMP_TO_GROUND）。
缺点：坐标转换复杂，边缘区域可能变形。

以下是一个完整的点位加载示例，包含注释说明：

// 初始化 Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: Cesium.createWorldTerrain(),
  shouldAnimate: true
});

// 加载切片地图（以 OSM 为例）viewer.imageryLayers.addImageryProvider(
  new Cesium.OpenStreetMapImageryProvider({url: 'https://a.tile.openstreetmap.org/'})
);

// 添加点位数据（二维 / 三维通用）function addPoint(lon, lat, height, name) {
  viewer.entities.add({
    name: name,
    position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2
    },
    label: {
      text: name,
      font: '14pt sans-serif',
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      outlineWidth: 2,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      pixelOffset: new Cesium.Cartesian2(0, -10)
    }
  });
}

// 示例：添加北京、上海、广州三个点位
addPoint(116.4, 39.9, 0, '北京');
addPoint(121.47, 31.23, 0, '上海');
addPoint(113.26, 23.12, 0, '广州');