本文共 8197 字，大约阅读时间需要 27 分钟。

作者：桔子

本文同步更新于简书文章https://www.jianshu.com/p/1bd04050223b

这一节课程讲解CallbackProperty机制，官方解释为由回调函数延迟计算其值的属性。小编个人的理解为，该机制为间隔时间执行指定的方法返回属性值，用于对属性进行赋值。该机制可以可以说非常强大，可以实现许多动态效果。 首先来看下CallbackProperty的实例化参数

let CallbackProperty=new Cesium.CallbackProperty(callback, isConstant)

callback：回调函数，用于计算并返回属性值

isConstant：返回值是否变化 在Cesium原生范例中提供了一个线生长并计算线长度的范例，

可以看到线非常平滑的在生长，同步的文本也在变化，下面来看下示例代码

var startLatitude = 35;var startLongitude = -120;var endLongitude;var startTime = Cesium.JulianDate.now();// Add a polyline to the scene. Positions are dynamic.var isConstant = false;var redLine =  viewer.entities.add({    polyline : {        // This callback updates positions each frame.        positions : new Cesium.CallbackProperty(function(time, result) {            endLongitude = startLongitude + 0.001 * Cesium.JulianDate.secondsDifference(time, startTime);            return Cesium.Cartesian3.fromDegreesArray([startLongitude, startLatitude, endLongitude, startLatitude], Cesium.Ellipsoid.WGS84, result);        }, isConstant),        width : 5,        material : Cesium.Color.RED    }});

可以看到在polyline的position设置时，使用CallbackProperty，通过计算线的结束点，不断返回位置坐标。

对于CallbackProperty有了初步的了解之后，这个时候会产生疑问，在什么情况下可以使用CallbackProperty？ 根据小编的测试发现，在添加所有的entity时只要属性为property的都可以使用CallbackProperty。 下面来看下小编实现的一些效果： 交互绘制和高程量算利用对鼠标事件的封装组合，形成常用的一些工具。以高程量算为例，示例代码如下

/** * 作者:ljw20190619 */define([], function () {	Cesium.measureHeighthandler = function (viewer) {		this._viewer = viewer		this._dislabel		this._disline				this._startposition		this._endposition		this._startpoint		this._endpoint		this._startHeight		this._endHeight		this._height		this._circledis = 0		this._circle		this._customdatasoure = new Cesium.CustomDataSource('myData');		this._handler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);		this._viewer.dataSources.add(this._customdatasoure)		let _that = this		this.active = function () {			//设置鼠标左键单击回调事件			_that._handler.setInputAction(function (e) {				//获取点击位置笛卡尔坐标				let position = _that._viewer.scene.pickPosition(e.position);				_that._startposition = position				//将笛卡尔坐标转化为经纬度坐标				let cartographic = Cesium.Cartographic.fromCartesian(position);				let startheight = cartographic.height;				_that._startHeight = startheight				//在点击位置添加对应点				if (!_that._startpoint) {					_that._startpoint = _that._customdatasoure.entities.add({						point: {							color: new Cesium.Color(1, 1, 0),							pixelSize: 5,							outlineColor: new Cesium.Color(0, 1, 1),							disableDepthTestDistance: Number.POSITIVE_INFINITY						},						position: new Cesium.CallbackProperty(function () {							return _that._startposition						}, false),					});				}				_that._handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)				_that._handler.setInputAction(function (e) {					let position = _that._viewer.scene.pickPosition(e.endPosition);					_that._endposition = position					//将笛卡尔坐标转化为经纬度坐标					let cartographic = Cesium.Cartographic.fromCartesian(position);					let endheight = cartographic.height;					_that._endHeight = endheight					_that._height = _that._endHeight - _that._startHeight					_that._circledis = Cesium.Cartesian3.distance(_that._startposition, Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, _that._startHeight))					if (!_that._endpoint) {						_that._endpoint = _that._customdatasoure.entities.add({							point: {								color: new Cesium.Color(1, 1, 0),								pixelSize: 5,								outlineColor: new Cesium.Color(0, 1, 1),								disableDepthTestDistance: Number.POSITIVE_INFINITY							},							position: new Cesium.CallbackProperty(function () {								let cartographic = Cesium.Cartographic.fromCartesian(_that._startposition);								return Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, _that._endHeight)							}, false),						});					}					//绘制结果文本					if (!_that._dislabel) {						_that._dislabel = _that._customdatasoure.entities.add({							position: new Cesium.CallbackProperty(function () {								let cartographic = Cesium.Cartographic.fromCartesian(_that._startposition);								return Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, (cartographic.height + _that._endHeight) / 2)							}, false),							label: {								text: new Cesium.CallbackProperty(function () {									return Math.abs(_that._height).toFixed(2) + '米'								}, false),								font: '24px Helvetica',								// fillColor: Cesium.Color.SKYBLUE,								// outlineColor: Cesium.Color.BLACK,								outlineWidth: 2,								pixelOffset: new Cesium.Cartesian2(60, 0),								showBackground: true,								// style: Cesium.LabelStyle.FILL_AND_OUTLINE,								disableDepthTestDistance: Number.POSITIVE_INFINITY							}						})					}					//绘制结果线					if (!_that._disline) {						_that._disline = _that._customdatasoure.entities.add({							polyline: {								positions: new Cesium.CallbackProperty(function () {									let cartographic = Cesium.Cartographic.fromCartesian(_that._startposition);									return Cesium.Cartesian3.fromRadiansArrayHeights([cartographic.longitude, cartographic.latitude, cartographic.height, cartographic.longitude, cartographic.latitude, _that._endHeight])								}, false),								width: 2,								material: Cesium.Color.ORANGERED.withAlpha(0.5),								//depthFailMaterial: Cesium.Color.ORANGERED.withAlpha(0.5)								depthFailMaterial: new Cesium.ColorMaterialProperty(Cesium.Color.ORANGERED.withAlpha(0.5))							}						})					}					//绘制圆面					if (!_that._circle) {						_that._circle = _that._customdatasoure.entities.add({							position: new Cesium.CallbackProperty(function () {								let cartographic = Cesium.Cartographic.fromCartesian(_that._startposition);								return Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, _that._endHeight)							}, false),							ellipse: {								semiMajorAxis: new Cesium.CallbackProperty(function () {									return _that._circledis								}, false),								semiMinorAxis: new Cesium.CallbackProperty(function () {									return _that._circledis								}, false),								height: new Cesium.CallbackProperty(function () {									return _that._endHeight								}, false),								material: Cesium.Color.YELLOW.withAlpha(0.2),								outline: true,								outlineColor: Cesium.Color.WHITE.withAlpha(0.5)							}						})					}					_that._handler.setInputAction(function (e) {						if (_that._circle) {							_that._customdatasoure.entities.remove(_that._circle)													}						_that._circle = undefined						_that._handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)						_that._handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)					}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)				}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)			}, Cesium.ScreenSpaceEventType.LEFT_CLICK);		}		this.disactive = function () {			_that._customdatasoure.entities.removeAll()			_that._dislabel=undefined			_that._disline = undefined			_that._startposition = undefined			_that._endposition = undefined			_that._startpoint = undefined			_that._endpoint = undefined			_that._startHeight = undefined			_that._endHeight = undefined			_that._height = undefined			_that._circledis = 0			_that._circle = undefined		}	}	return Cesium.measureHeighthandler})

旋转相对比较简单，利用对圆面设置旋转实现，代码如下：

var addRoatePOI = function(POIObjs) {				POIObjs.forEach(function(value, index, array) {					var POIEntity = viewer.entities.add({						name: value[2],						position: Cesium.Cartesian3.fromDegrees(value[0], value[1], 180000),						ellipse: {							semiMinorAxis: 100000,							semiMajorAxis: 100000,							height: 180000,							material: new Cesium.ImageMaterialProperty({								image: 'images/Oval.png',								repeat: new Cesium.Cartesian2(1, 1),								transparent: true							}),							rotation: new Cesium.CallbackProperty(getRotationValue, false),							stRotation: new Cesium.CallbackProperty(getRotationValue, false),							outline: false, // height must be set for outline to display							numberOfVerticalLines: 100						},						description: '测试数据'					});				})				var rotation = Cesium.Math.toRadians(30);				function getRotationValue() {					rotation += 0.002;					return rotation;				}			}

本节教程就到这里，欢迎转发、留言、讨论。

转载地址：http://snvxi.baihongyu.com/