Cesium三维中使用

在三维中使用矢量图层与二维中的API保持一致，同时Cesium中的标签三维增加了volume选项，本小节我们使用实例来说明三维中增加的功能。

为何不使用Cesium原生的GeoJsonDataSource

• Cesium原生的GeoJsonDataSource在内部将每个矢量对象都转换为Entity，而Entity是Cesium中的高层封装，虽然使用较为简单，但是效率太低，气象数据在渲染的时候有几千个站点是比较常见的，此时原生的性能很难接受，而我们的实现是基于Primitive API针对气象需求进行了简化，抛弃了繁重的Entity对象，因此性能上大为提高。
• 原生的数据源的样式如果要设置，需要手动循环设置每个entity的样式，而且碰撞检测等功能并非自带（自带的聚合并非常用的避免遮盖），自行实现仍然具备一定难度，因此我们直接将这个功能封装到图层中。
• 原生不支持同步显示标签，QE中支持任意多的标签围绕，且有文字、图片和柱体三种形式。
• ...
• 为了跟二维的API保持一致，一样的好用。

多边形挤压

传统的二维平面经过高度拉升可以形成三维的效果，这在QE的实现中保持了与二维API的一致性，只要在样式的polygon部分增加extrudeHeight配置即可：

async function load() {
    const data = await getJSONZip("public/demos/data/china.bounds.zip");
    const provider = new GeoJSONFeatureProvider(data);
    const style: IFeatureStyle3DOptions = {
        polygon: {
            color: Spectra.random().alpha(0.6),
            extrudeHeight: 50000,
            strokeColor:"white"
        }
    }
    const layer = new CGeoJSONLayer().setDataSource(provider).setDrawOptions(style);
    viewer.scene.primitives.add(layer);
    await viewer.goto(105, 26, 2000000, { pitch: -45 });
}

在上方实例中，我们首先加载了一个geojson数据，然后创建数据解析器，接着创建样式，在样式中，设置多边形的填充颜色为随机色，挤压高度为50km，描边颜色为白色。这里所有的配置与二维一样，都可以使用函数或者分级规则来进行设定。

示例代码

三维标签

在三维中引入了IFeatureLabelStyle3DOptions，其中增加了volume?:IFeatureVolumeStyleOptions，该配置支持使用一个柱体对数据进行标签呈现，比如使用柱体的高矮表示降水量的大小：

volume: {
    xDelta: 0.1,
    yDelta: 0.1,
    height: (feature) => {
        if (feature.properties['PRE_1h'] > 9000) {
            return 0;
        }
        return Number(feature.properties['PRE_1h']) * 100000;
    },
    color: (feature) => {
        return feature.properties['PRE_1h'] > 10 ? predefinedColorNames.greenyellow : predefinedColorNames.blue
    }
}

以上xDelta和yDelta分别表示柱体的宽高，单位是度，也可以使用函数或者分级规则实现根据数据值每个feature返回不同的大小。

示例代码

综合演示

下面是一个站点填图在三维中的综合演示代码，逻辑与二维完全一致：