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

1次阅读

没有评论

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

在 WebGL 地理信息可视化开发中，新手常遇到几个典型问题：

地图切片加载时出现明显卡顿，尤其是网络状况不佳时
不同坐标系统（如 WGS84 和屏幕坐标）转换错误导致点位偏移
二维、三维和球体视图之间难以保持同步和一致的交互体验

这些问题往往让初学者感到困惑，影响开发效率和应用体验。

在选择 3D 地理数据渲染方案时，常见的选择有 Cesium、Three.js 和 Mapbox。它们各有特点：

Cesium：专为地理空间设计，内置全球地形和坐标系统支持，API 对 GIS 开发者友好，但内存占用相对较高
Three.js：通用 3D 渲染引擎，灵活性高，但需要自行实现地理坐标转换和地形处理
Mapbox：擅长 2D/2.5D 地图渲染，轻量级，但对真 3D 支持有限

对于需要展示真实地理空间数据的项目，Cesium 通常是更合适的选择。

Cesium 提供了简单的方式来加载各种地图切片服务。以下是一个加载高德地图切片的示例：

const viewer = new Cesium.Viewer('cesiumContainer');

// 添加高德影像图层
const amapLayer = new Cesium.WebMapTileServiceImageryProvider({url: 'https://webst{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
  subdomains: ['01', '02', '03', '04'],
  layer: 'img',
  style: 'default',
  format: 'image/png',
  tileMatrixSetID: 'w',
  maximumLevel: 18
});

viewer.imageryLayers.addImageryProvider(amapLayer);

Cesium 的 Entity API 可以方便地创建和展示点位信息：

// 创建一个带标签的点位
const pointEntity = viewer.entities.add({
  name: '示例点位',
  position: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100),
  point: {
    pixelSize: 10,
    color: Cesium.Color.RED,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 2
  },
  label: {
    text: '北京',
    font: '14pt sans-serif',
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    outlineWidth: 2,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    pixelOffset: new Cesium.Cartesian2(0, -10)
  }
});

在 Cesium 中，常用的坐标转换包括：

WGS84 经纬度转笛卡尔坐标：

const cartesian = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);

笛卡尔坐标转屏幕坐标（用于叠加 HTML 元素）：

const screenPos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
  viewer.scene, 
  cartesian
);

下面是一个完整的点位可视化示例，包含错误处理和视图控制：

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

// 添加地图切片（带错误重试）function addTileLayer(urlTemplate, maxRetry = 3) {
  const provider = new Cesium.UrlTemplateImageryProvider({
    url: urlTemplate,
    credit: '高德地图',
    maximumLevel: 18,
    enablePickFeatures: false
  });

  provider.errorEvent.addEventListener(() => {if (maxRetry > 0) {setTimeout(() => addTileLayer(urlTemplate, maxRetry - 1), 1000);
    }
  });

  viewer.imageryLayers.addImageryProvider(provider);
}

addTileLayer('https://webst{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}');

// 生成随机点位
function generateRandomPoints(count, extent) {const entities = [];
  for (let i = 0; i < count; i++) {const lon = extent.west + Math.random() * (extent.east - extent.west);
    const lat = extent.south + Math.random() * (extent.north - extent.south);

    entities.push(viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(lon, lat),
      point: {
        pixelSize: 8,
        color: Cesium.Color.fromRandom({alpha: 0.8})
      }
    }));
  }
  return entities;
}

// 生成 100 个随机点位
const points = generateRandomPoints(100, {
  west: 115,
  east: 117,
  south: 39,
  north: 41
});

// 视图联动
viewer.scene.camera.changed.addEventListener(() => {
  const center = viewer.camera.positionWC;
  const cartographic = Cesium.Cartographic.fromCartesian(center);
  console.log(` 当前中心点: ${Cesium.Math.toDegrees(cartographic.longitude)}, ${Cesium.Math.toDegrees(cartographic.latitude)}`);
});

切片缓存策略：
使用 Cesium.TileCache 缓存已加载的切片
合理设置 maximumNumberOfLoadedTiles 控制内存使用

点位聚合算法：

viewer.dataSources.add(Cesium.DataSource.load('https://your-server.com/points.json')
    .then(dataSource => {
      dataSource.clustering.enabled = true;
      dataSource.clustering.pixelRange = 30;
    })
);