ViewportQuad

ViewportQuad是Cesium中的一个实用项，可将纹理绘制到对称的四边形上，并缩放为视口的大小。

示例

var viewer = new Cesium.Viewer('cesiumContainer');
var quad = new Cesium.ViewportQuad({
    context: viewer.scene.context,
    texture: 'path/to/texture.png'
});
viewer.scene.primitives.add(quad);

构造函数

• ViewportQuad({options})

  • options : 对称四边形设置，包括:

    • texture: 纹理。
    • ellipsoid: 固定椭球，用于非贴地图集。
    • show: 四边形是否可见。
    • rectangle: 四边形所需的线程安全矩形。
    • rotation: 四边形的旋转。
    • uniformMapping: 默认材质中的uniform属性数组与viewportQuad实例之间的映射。
    • vertexShaderSource: 顶点着色器源。
    • fragmentShaderSource: 片段着色器源。
    • numberOfHorizontalLines: 水平线数量。
    • numberOfVerticalLines: 垂直线数量。
    • minificationFilter: 缩小过滤器。
    • magnificationFilter: 放大过滤器。
    • pickId: 可选参数，仅在需要捕获拾取事件时使用。

方法

• geoRectangleToUvRectangle(rectangle): 将指定的以弧度为单位的线程安全坐标转换为纹理坐标系并返回。

  • rectangle: Rectangle对象。

• update(): 更新四边形。如果在实例创建之后更改了任何设置，则需要调用此函数。

示例代码

var viewer = new Cesium.Viewer('cesiumContainer');
var quad = new Cesium.ViewportQuad({
    context: viewer.scene.context,
    texture: 'path/to/texture.png'
});
viewer.scene.primitives.add(quad);

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {
    // 将纹理旋转到鼠标位置
    var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
    if (cartesian) {
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        quad.rotation = -cartographic.longitude;
        quad.update();
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

参考文献

• ViewportQuad Cesium Documentation

• Viewport Quad Tutorial by Patrick Cozzi