GeoJsonDataSource

data 可以是 URL 字符串，也可以是已经解析好的 GeoJSON 对象。 传对象时不需要网络请求，适合内联数据。

参数

var geojson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: { name: '监测点 A', value: 42 },
      geometry: { type: 'Point', coordinates: [116.391263, 39.907359] }
    },
    {
      type: 'Feature',
      properties: { name: '作业区', value: 87 },
      geometry: {
        type: 'Polygon',
        coordinates: [[
          [116.30, 39.86], [116.48, 39.86],
          [116.48, 39.98], [116.30, 39.98],
          [116.30, 39.86]
        ]]
      }
    }
  ]
};

Cesium.GeoJsonDataSource.load(geojson, {
  clampToGround: true,
  stroke: Cesium.Color.fromCssColorString('#4d9bff'),
  fill: Cesium.Color.fromCssColorString('#4d9bff').withAlpha(0.3),
  strokeWidth: 2
}).then(function (ds) {
  viewer.dataSources.add(ds);
  viewer.flyTo(ds);
});

按属性改样式

默认样式一刀切。按字段分级着色要在加载完成后遍历实体，读 properties 里的值再改图形属性：

Cesium.GeoJsonDataSource.load(geojson).then(function (ds) {
  var entities = ds.entities.values;
  for (var i = 0; i < entities.length; i++) {
    var e = entities[i];
    var v = e.properties.value ? e.properties.value.getValue() : 0;

    if (e.point) {
      e.point.color = v > 60
        ? Cesium.Color.fromCssColorString('#ff5c5c')
        : Cesium.Color.fromCssColorString('#4d9bff');
      e.point.pixelSize = 8 + v / 20;
    }
    if (e.polygon) {
      e.polygon.material = Cesium.Color.fromCssColorString('#4d9bff')
        .withAlpha(0.15 + v / 300);
    }
  }
  viewer.dataSources.add(ds);
});

常用成员

四个常见问题

1. 坐标顺序反了

GeoJSON 的坐标是 [经度, 纬度]，和常见 GIS 数据里的 纬度, 经度 顺序相反。灌错顺序的结果是数据整体跑到南极附近， 肉眼立刻可辨。

2. 三维坐标被压平

coordinates 的第三个值是高度，但只有在 clampToGround: false 且几何本身带高度时才生效。 开了贴地，高度会被地形覆盖。

3. 大数据量加载卡死

每个 Feature 都会生成 Entity，一万个要素的转换时间在秒级。 超过这个量级应该改用 Cesium3DTileset，或者自己解析 GeoJSON 并用 Primitive 批量绘制。

4. 面要素没有边线

strokeWidth 对贴地面同样受 WebGL 线宽限制，看起来只有 1 像素。 需要清晰边界时补一条 polyline，或者把面拆成多段分别渲染。