PostGIS的GeoJSON加载到Cesium无报错但不显示多边形求助

问题根源 #

1. 坐标系不匹配：你的PostGIS表使用EPSG:2100（希腊ETRS89投影坐标系，米制平面坐标），而Cesium默认要求输入WGS84经纬度（EPSG:4326）。直接使用的平面坐标数值（如386788, 4204512）远超出经纬度合理范围（经度±180，纬度±90），导致多边形被渲染到地球可视范围之外。
2. Cesium API使用错误：Cesium.GeoJsonDataSource.load()是异步加载方法，返回的是Promise对象，不能直接赋值给polygon.hierarchy属性——该属性需要PolygonHierarchy实例或Cartesian3坐标数组。

解决方案 #

步骤1：修正PostGIS查询，输出WGS84经纬度的GeoJSON #

用ST_Transform将几何数据从EPSG:2100转换为EPSG:4326，再通过ST_AsGeoJSON输出符合要求的GeoJSON：

SELECT ST_AsGeoJSON(ST_Transform(mygeom, 4326)) 
FROM mytable WHERE id = 370;

注：ST_AsGeoJSON输出的坐标顺序为[经度, 纬度]，完全匹配GeoJSON规范，无需额外调整。

步骤2：修正Cesium代码，正确加载GeoJSON #

以下两种方式均可实现：

方式一：使用GeoJsonDataSource加载（推荐，自动处理GeoJSON层级）

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

// 替换为PostGIS返回的转换后GeoJSON对象
Cesium.GeoJsonDataSource.load({
  "type":"MultiPolygon",
  "coordinates":[[[[23.7297, 37.9838],[23.7300, 37.9838],[23.7300, 37.9837],[23.7297, 37.9837],[23.7297, 37.9838]]]]
}).then(function(dataSource) {
  viewer.dataSources.add(dataSource);
  
  // 批量设置多边形样式
  const entities = dataSource.entities.values;
  entities.forEach(entity => {
    entity.polygon.extrudedHeight = 100000.0;
    entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.5);
    entity.polygon.outline = true;
    entity.polygon.outlineColor = Cesium.Color.BLACK;
    entity.polygon.closeTop = true;
    entity.polygon.closeBottom = true;
  });
  
  viewer.zoomTo(dataSource);
});

方式二：手动转换坐标创建Polygon实体

适合需要精细控制实体属性的场景：

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

// 替换为PostGIS返回的转换后GeoJSON坐标
const geoJsonCoords = [[[[23.7297, 37.9838],[23.7300, 37.9838],[23.7300, 37.9837],[23.7297, 37.9837],[23.7297, 37.9838]]]];

// 工具函数：将GeoJSON经纬度转换为Cesium笛卡尔坐标
function geoJsonToCartesian(coords) {
  const cartesianArray = [];
  // 遍历MultiPolygon层级：MultiPolygon → Polygon → LinearRing → 坐标对
  coords.forEach(polygon => {
    polygon.forEach(ring => {
      ring.forEach(coord => {
        cartesianArray.push(Cesium.Cartesian3.fromDegrees(coord[0], coord[1]));
      });
    });
  });
  return cartesianArray;
}

// 创建多边形实体
const greenPolygon = viewer.entities.add({
  name: "Green extruded polygon",
  polygon: {
    hierarchy: new Cesium.PolygonHierarchy(geoJsonToCartesian(geoJsonCoords)),
    extrudedHeight: 100000.0,
    material: Cesium.Color.YELLOW.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
    closeTop: true,
    closeBottom: true
  },
});

viewer.zoomTo(greenPolygon);

验证要点 #

• 确认PostGIS中EPSG:2100的坐标系定义正确（部分环境可能需手动导入空间参考）。
• 转换后的GeoJSON坐标需在[-180, 180]（经度）和[-90, 90]（纬度）范围内。

内容的提问来源于stack exchange，提问作者slevin