Cesium中文官网实战：3D地图切片加载与动态点位信息可视化最佳实践

1次阅读

没有评论

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

在使用 Cesium 进行 3D 地图开发时，开发者常常会遇到以下几个典型问题：

切片加载卡顿：当加载大规模地图切片时，浏览器会出现明显的卡顿现象，影响用户体验
多视图同步困难：在同时展示二维、三维和球体视图时，保持各视图间的同步和联动需要复杂的逻辑
动态点位展示不直观：大量动态点位的渲染效率低下，信息展示方式单一
性能优化无头绪：面对复杂场景时缺乏系统的性能优化方案

Cesium 支持多种地图切片方案，以下是两种主流方案的对比：

WMTS(Web Map Tile Service)
标准化程度高，支持缓存
支持多种坐标系统和投影方式
适合大规模 GIS 应用
配置相对复杂
TMS(Tile Map Service)
实现简单，易于部署
支持标准的 XYZ 瓦片编号
适合小型项目和快速开发
功能相对有限

在实际项目中我们选择了 TMS 方案，因为：

开发周期短
与 Cesium 原生 API 兼容性好
便于自定义切片方案

// 初始化主视图
const viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    layer: 'osm',
    style: 'default',
    format: 'image/png',
    tileMatrixSetID: 'EPSG:3857'
  }),
  baseLayerPicker: false
});

// 创建二维视图
const viewer2D = new Cesium.Viewer('viewer2D', {
  sceneMode: Cesium.SceneMode.SCENE2D,
  // 其他配置与主视图一致
});

// 相机同步
viewer.camera.changed.addEventListener(() => {syncCameras(viewer.camera, viewer2D.camera);
});

viewer2D.camera.changed.addEventListener(() => {syncCameras(viewer2D.camera, viewer.camera);
});

function syncCameras(source, target) {
  // 实现相机位置同步逻辑
  target.setView({
    destination: source.position,
    orientation: {
      heading: source.heading,
      pitch: source.pitch,
      roll: source.roll
    }
  });
}

// 创建点位实体
function createPoint(position, properties) {
  return viewer.entities.add({
    position: position,
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2
    },
    label: {
      text: properties.name,
      font: '14pt sans-serif',
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      outlineWidth: 2,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      pixelOffset: new Cesium.Cartesian2(0, -10)
    },
    properties: properties
  });
}

// 批量添加点位
async function addPointsInBatches(pointsData, batchSize = 100) {for (let i = 0; i < pointsData.length; i += batchSize) {const batch = pointsData.slice(i, i + batchSize);
    await new Promise(resolve => {requestAnimationFrame(() => {
        batch.forEach(point => {
          createPoint(Cesium.Cartesian3.fromDegrees(point.longitude, point.latitude),
            point.properties
          );
        });
        resolve();});
    });
  }
}

// 设置切片缓存策略
viewer.scene.globe.tileCacheSize = 1000;
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;

// 预加载周边切片
viewer.camera.moveEnd.addEventListener(() => {
  const cameraPosition = viewer.camera.position;
  const surfacePosition = viewer.scene.globe.ellipsoid.cartesianToCartographic(cameraPosition);

  // 预加载当前视窗周围的切片
  for (let i = -2; i <= 2; i++) {for (let j = -2; j <= 2; j++) {
      const offsetLat = surfacePosition.latitude + i * 0.01;
      const offsetLon = surfacePosition.longitude + j * 0.01;
      const offsetPosition = Cesium.Cartesian3.fromRadians(
        offsetLon,
        offsetLat,
        surfacePosition.height
      );
      viewer.scene.globe.pick(offsetPosition, viewer.scene);
    }
  }
});

// worker.js
self.onmessage = function(e) {const { points} = e.data;
  const processed = points.map(point => {
    // 执行密集计算
    return {position: [point.lng, point.lat],
      properties: point.properties
    };
  });
  self.postMessage(processed);
};

// 主线程
const worker = new Worker('worker.js');
worker.onmessage = function(e) {
  const processedPoints = e.data;
  // 添加处理后的点位
};

worker.postMessage({points: largePointData});

// 1. 定期清理不可见的实体
setInterval(() => {
  const entities = viewer.entities.values;
  entities.forEach(entity => {if (!viewer.camera.viewRectangle.intersects(entity.boundingSphere)) {viewer.entities.remove(entity);
    }
  });
}, 30000);

// 2. 释放不再使用的资源
function cleanup() {viewer.entities.removeAll();
  viewer.imageryLayers.removeAll(true);
  viewer.destroy();}

// 3. 监控内存使用
const stats = new MemoryStats();
stats.domElement.style.position = 'fixed';
stats.domElement.style.right = '0px';
stats.domElement.style.bottom = '0px';
document.body.appendChild(stats.domElement);

function monitorMemory() {stats.update();
  requestAnimationFrame(monitorMemory);
}
monitorMemory();