SuperMap iClient3D for WebGL扩展开发教程——动态棱锥标注

最近有客户咨询是否能实现如下的动态标注效果，下面来看下如何实现。

棱锥标注.gif

1、棱锥实现

从截图可以看到，这里对象是棱锥，但是在Cesium的Enity对象中，并没有直接的棱锥对象可以使用，这里有两个思路去解决。
（1）通过primitive去绘制，需要自己构建棱锥的每一个顶点坐标、索引、位置矩阵，以及shader等等。从表面看这种方式比较直接，但是开发解决WebGL底层，需要大量的基础支持和计算，不是特别理想。
（2）是否有其他Entity对象，可以变形得到棱锥，这里想到了CylinderGraphics圆柱体对象。CylinderGraphics圆柱体对象可以变形得到圆台、棱柱、圆锥、棱锥，下面我们直接看代码。

cylinder: {
    length: 6,
    topRadius: 5,
    bottomRadius: 0,
    slices: 4,
    outline: true,
    outlineColor: Cesium.Color.YELLOW,
    material: Cesium.Color.AQUAMARINE.withAlpha(0.5)
}

棱锥.png

2、动画

根据上面的动图，把动画分为两个动作，分别是旋转和上下的弹跳，这里同样采用Cesium原生的CallbackProperty进行实现。

let start = 0
let Yoffset = 0
let maxoffset = 2
let isUp = true
var Cone = viewer.entities.add({ 
    name: 'Red cone',
    position: new Cesium.CallbackProperty(function() {
        if (isUp) {
            Yoffset += 0.005
        } else {
            Yoffset -= 0.005
        }
        if (Yoffset >= maxoffset) {
            isUp = false
        }
        if (Yoffset <= -1) {
            isUp = true
        }

        return Cesium.Cartesian3.fromDegrees(108, 29, 10 + Yoffset)
    }, false),
    orientation: new Cesium.CallbackProperty(function() {
        start += 1
        let roll = Cesium.Math.toRadians(start)
        Cesium.Math.zeroToTwoPi(roll)
        return Cesium.Transforms.headingPitchRollQuaternion(
            Cesium.Cartesian3.fromDegrees(108, 29, 10),
            new Cesium.HeadingPitchRoll(roll, 0, 0.0)
        )
    }, false),
    cylinder: {
        length: 6,
        topRadius: 5,
        bottomRadius: 0,
        slices: 4,
        outline: true,
        outlineColor: Cesium.Color.YELLOW,
        material: Cesium.Color.AQUAMARINE.withAlpha(0.5)
    }
});

最后来看下实现的效果：

棱锥标注实现.gif