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

1次阅读

没有评论

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

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

切片加载卡顿：特别是在网络条件不佳或数据量大的情况下，地图切片加载缓慢，严重影响用户体验。
多视图同步困难：在需要同时展示二维、三维和球体视图时，如何保持视图间的同步成为一个挑战。
动态点位信息展示不直观：点位信息的动态更新和交互处理不够直观，导致用户难以快速获取所需信息。

这些问题不仅影响开发效率，还会降低最终用户的使用体验。本文将针对这些问题，提供一套完整的解决方案。

在 Cesium 中，常用的切片方案有 WMTS（Web Map Tile Service）和 TMS（Tile Map Service）。以下是它们的性能对比：

WMTS：
优点：支持多种投影方式，适合大规模地图展示。
缺点：配置复杂，需要额外的服务端支持。
TMS：
优点：简单易用，适合中小规模地图展示。
缺点：不支持动态投影，灵活性较差。

根据实际需求，我们选择了 TMS 方案，因为它更易于实现和调试，适合大多数中小型项目。

以下是实现分屏视图联动的核心代码：

// 初始化二维视图
const viewer2D = new Cesium.Viewer('map2D', {
  sceneMode: Cesium.SceneMode.SCENE2D,
  baseLayerPicker: false,
});

// 初始化三维视图
const viewer3D = new Cesium.Viewer('map3D', {
  sceneMode: Cesium.SceneMode.SCENE3D,
  baseLayerPicker: false,
});

// 初始化球体视图
const viewerGlobe = new Cesium.Viewer('mapGlobe', {
  sceneMode: Cesium.SceneMode.SCENE3D,
  baseLayerPicker: false,
});

// 同步相机位置
viewer2D.camera.changed.addEventListener(() => {
  viewer3D.camera.setView({
    destination: viewer2D.camera.position,
    orientation: viewer2D.camera.headingPitchRoll,
  });
  viewerGlobe.camera.setView({
    destination: viewer2D.camera.position,
    orientation: viewer2D.camera.headingPitchRoll,
  });
});

以下是动态点位信息标注的核心代码：

// 创建点位实体
const entity = viewer3D.entities.add({position: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100),
  point: {
    pixelSize: 10,
    color: Cesium.Color.RED,
  },
  label: {
    text: '北京市',
    font: '14pt sans-serif',
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    outlineWidth: 2,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    pixelOffset: new Cesium.Cartesian2(0, -10),
  },
});

// 动态更新点位信息
viewer3D.clock.onTick.addEventListener(() => {
  entity.position = Cesium.Cartesian3.fromDegrees(116.4 + Math.random() * 0.1,
    39.9 + Math.random() * 0.1,
    100
  );
});

为了提高切片加载效率，我们可以使用预加载策略：

// 预加载当前视图周围的切片
viewer3D.scene.globe.tileLoadProgressEvent.addEventListener((remaining) => {if (remaining === 0) {
    // 预加载周围切片
    viewer3D.scene.globe._surface.tileProvider._cache.tilesToRender.forEach((tile) => {viewer3D.scene.globe._surface.tileProvider.loadTile(tile);
    });
  }
});

对于大数据量的点位信息，可以使用 WebWorker 进行异步处理：

// 主线程
const worker = new Worker('pointWorker.js');
worker.onmessage = (e) => {
  const points = e.data;
  points.forEach((point) => {
    viewer3D.entities.add({
      position: point.position,
      point: point.style,
    });
  });
};

// 发送数据到 Worker
worker.postMessage({type: 'loadPoints', data: largePointData});

// pointWorker.js
self.onmessage = (e) => {if (e.data.type === 'loadPoints') {const points = processPoints(e.data.data);
    self.postMessage(points);
  }
};

为了避免内存泄漏，需要注意以下几点：

及时移除不再使用的实体和事件监听器。
使用 destroy 方法清理资源。
定期检查内存使用情况。

在 Cesium 中，常用的坐标系有 WGS84 和 Web 墨卡托。以下是坐标转换的示例：

// WGS84 转 Web 墨卡托
const cartographic = Cesium.Cartographic.fromDegrees(116.4, 39.9);
const projected = Cesium.WebMercatorProjection.project(cartographic);

// Web 墨卡托转 WGS84
const unprojected = Cesium.WebMercatorProjection.unproject(projected);
const degrees = Cesium.Cartographic.toDegrees(unprojected);

在移动端使用 Cesium 时，需要注意以下几点：