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

作者：桔子
本文同步发布于https://www.jianshu.com/p/99e0f83f1352

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

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)
}

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)
	}
});

最后来看下实现的效果：