SuperMap iClient3D for WebGL扩展开发教程——圆形旋转广告牌

圆形旋转广告牌.gif

在这个效果图中，还有另外一个比较有意思的效果，圆形的旋转广告牌，这一级来实现该效果。

1、效果分析

在该效果中，可以将效果进行拆分，主要有一下两个难点：
（1）侧面贴图，基于之前的经验可以选择wall对象进行实现。
（2）旋转效果，该效果可以有两个想法，一个是通过设置对象的orientation进行实现，类似前面实现的雷达扫描效果，另外一个想法就是通过改变wall的节点顺序，基于这两个想法，下面来做具体实现。

2、效果实现

旋转效果通过实验，第二个实现的想法是可行的，orientation设置只对模型类、球类等对实体对象有效果。
下面直接上代码：

class RollCircleBoard {
    /**
     * 
     * @param {Cartesian3} position 位置点
     * @param {Number} R 半径 
     * @param {Number} height 高度
     * @param {image} image 广告图片
     */
    constructor(position, R, height, image) {
        let start = 0
        let wallPosition = this.getWallCirclepoints(position, R, height,start)
        let _that=this
        this.entity = new Cesium.Entity({
            position: position,
            wall: {
                positions:new Cesium.CallbackProperty(function(){
                    start += 1 
                    let newP=_that.getWallCirclepoints(position, R, height,start)
                    return  Cesium.Cartesian3.fromDegreesArrayHeights(newP.position)
                },false),
                minimumHeights: wallPosition.minheights,
                maximumHeights: wallPosition.maxheights,
                material: new Cesium.ImageMaterialProperty({
                    image: image,
                    transparent: true,
                    color:Cesium.Color.WHITE
                }),
                outline: false
            }
        });
    }
    getWallCirclepoints(center, Rlength, height,rotation) {
        var ellipseOutlineInner = new Cesium.EllipseOutlineGeometry({
            center: center,
            semiMajorAxis: Rlength,
            semiMinorAxis: Rlength,
            rotation: Cesium.Math.toRadians(rotation)
        });
        var geometryInner = Cesium.EllipseOutlineGeometry.createGeometry(ellipseOutlineInner);

        var valuesInner = geometryInner.attributes.position.values;
        var positions = []
        var minheights = []
        var maxheights = []
        for (var i = 0; i < valuesInner.length; i = i + 3) {

            var position = new Cesium.Cartesian3(valuesInner[i], valuesInner[i + 1], valuesInner[i + 2]);
            var cartographic = Cesium.Cartographic.fromCartesian(position);
            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
            var pheight = cartographic.height;
            positions.push(longitude)
            positions.push(latitude)
            positions.push(pheight)
            minheights.push(pheight)
            maxheights.push(pheight + height)
        }
        positions.push(positions[0])
        positions.push(positions[1])
        positions.push(positions[2])
        minheights.push(positions[2])
        maxheights.push(positions[2] + height)

        var wallposition = {
            position: positions,
            minheights: minheights,
            maxheights: maxheights
        }
        return wallposition
    }
}
export default RollCircleBoard

最后来看下效果

圆形旋转广告板.gif