最近有客户咨询是否能实现如下的动态标注效果，下面来看下如何实现。
棱锥标注.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
