1、增加DrawTools工具说明文件

2、修改绘制鼠标提示

src/components/CrMap/DrawTools.js

@@ -9,13 +9,6 @@
 import * as Cesium from 'cesium';
 /* 引入地理工具箱 */
 import * as turf from '@turf/turf'
-/* 引入墙的材质 */
-import WallMaterialProperty from './WallMaterialProperty.js'
-/* 引入动态圆材质 */
-import CircleMaterialProperty from './CircleMaterialProperty.js'
-import {
-	param
-} from 'jquery';
 
 /* 扩展数组方法 */
 
@@ -274,6 +267,9 @@ class DrawTools {
 		} else {
 			this._sketchPointImage = this._iconNormal;
 		}
+		/* 获取画布的宽度和高度 */
+		this._canvasWidth = this._viewer.scene.canvas.width;
+		this._canvasHeight = this._viewer.scene.canvas.height;
 	}
 
 	/**
@@ -893,7 +889,7 @@ class DrawTools {
  */
 Object.assign(DrawTools.prototype, {
 	/**
-	 * 设置点击点显示的标记
+	 * �����������置点击点显示�����标记
 	 * @param {JSNO} options 配置项
 	 * @param {String} options.lineLabel 线点文字标注
 	 * @param {String} options.polygonLabel 面点文字标注
@@ -1014,6 +1010,8 @@ Object.assign(DrawTools.prototype, {
 	 * @param {Cesium.ScreenSpaceEventHandler} handler
 	 */
 	_clearEvent: function(handler) {
+		/* 清理事件的同时 彻底清理提示标签 */
+		this._endTooltip();
 		if (!handler) return;
 		/* 干掉事件句柄 释放资源 */
 		handler.destroy();
@@ -1777,6 +1775,8 @@ Object.assign(DrawTools.prototype, {
 			entityParam.lineWidth = _self._param.lineWidth * 3;
 			/* 为父实体设置参数 保存该OD线集合的必要参数 */
 			this._odlineFatherEntity.setParams(entityParam);
+			/* 创建一个临时集合 方便回退删除 */
+			this._odlineEntitys = [];
 		}
 		/* 从父节点获取必要参数 */
 		let faterParam = this._odlineFatherEntity.getParams();
@@ -1838,6 +1838,7 @@ Object.assign(DrawTools.prototype, {
 				parseInt(params.odlineCount));
 			this._drawEntity.polyline.positions = results;
 			this._drawEntity.setEntityType(DrawTools.DrawType.OdLine);
+			this._odlineEntitys.push(this._drawEntity);
 			if (isEdit !== undefined && isEdit === true) {
 				this._drawEntity.setIsEdit(true);
 			}
@@ -1868,6 +1869,34 @@ Object.assign(DrawTools.prototype, {
  * 对外方法
  */
 Object.assign(DrawTools.prototype, {
+
+	/**
+	 * 鼠标双击结束提示事件
+	 * @param {Cesium.Cartesian2} position 位置
+	 */
+	_drawMovingDoubleTooltip(position) {
+		this._updateTooltip('左键单击绘制,右键单击撤销<br>左键双击结束绘制', position);
+	},
+
+	/**
+	 * 鼠标单击结束提示事件
+	 * @param {Cesium.Cartesian2} position 位置
+	 */
+	_drawMovingSimpleTooltip(position) {
+		this._updateTooltip('左键单击结束绘制', position);
+	},
+
+	/**
+	 * 移除最后绘制的一个点元素
+	 */
+	_removeLastDrawPointEntity() {
+		let lastPointEntity = this._pointEntitys.last();
+		if (lastPointEntity !== undefined) {
+			this._removeEntityByObject(lastPointEntity);
+			this._pointEntitys.pop();
+		}
+	},
+
 	/**
 	 * 绘制点工具
 	 * @ignore 生成方法时不对外公开
@@ -1950,7 +1979,7 @@ Object.assign(DrawTools.prototype, {
 		/* 注册鼠标左键双击事件 */
 		this._registerLeftDoubleClickEvent(handler, function(event) {
 			/* 干掉事件句柄 释放资源 */
-			_self._clearEvent();
+			_self._clearEvent(handler);
 			/* 回调 */
 			if (options.onComplete) options.onComplete(_self._sketchPoints, _self._sketchOutputPoints);
 		})
@@ -2000,6 +2029,8 @@ Object.assign(DrawTools.prototype, {
 			let loc = _self._transfromFromScreenPoint(event.endPosition);
 			if (!Cesium.defined(loc.sLocation)) return;
 			if (_self._sketchTempPoints.length > 1) {
+				/* 标签提示 */
+				_self._drawMovingDoubleTooltip(event.endPosition);
 				_self._sketchTempPoints.pop();
 				_self._sketchTempPoints.push(loc.sLocation);
 				/* 监听输出 */
@@ -2015,10 +2046,7 @@ Object.assign(DrawTools.prototype, {
 				_self._sketchTempPoints.splice(_self._sketchTempPoints.length - 2, 1);
 				/* 如果绘制了点 则删除最后一个 */
 				if (_self._isDrawPoint) {
-					let lastPointEntity = _self._pointEntitys[_self._pointEntitys.length - 1];
-					_self._entities.remove(lastPointEntity);
-					/* 移除点实体数据中的最后一条数据 */
-					_self._pointEntitys.pop();
+					_self._removeLastDrawPointEntity();
 				}
 				if (options.onUndo) options.onUndo();
 			}
@@ -2083,6 +2111,8 @@ Object.assign(DrawTools.prototype, {
 			let loc = _self._transfromFromScreenPoint(event.endPosition);
 			if (!Cesium.defined(loc.sLocation)) return;
 			if (_self._sketchTempPoints.length > 1) {
+				/* 标签提示 */
+				_self._drawMovingDoubleTooltip(event.endPosition);
 				_self._sketchTempPoints.pop();
 				_self._sketchTempPoints.push(loc.sLocation);
 				/* 监听输出 */
@@ -2108,6 +2138,7 @@ Object.assign(DrawTools.prototype, {
 		/* 注册鼠标右键单击事件 */
 		this._registerRightClickEvent(handler, function(event) {
 			if (_self._sketchTempPoints.length > 2) {
+				_self._removeLastDrawPointEntity();
 				/* 移除正式点最有一个元素 */
 				_self._sketchPoints.pop();
 				/* 移除临时点倒数第二个元素 */
@@ -2162,6 +2193,8 @@ Object.assign(DrawTools.prototype, {
 			let loc = _self._transfromFromScreenPoint(event.endPosition);
 			if (!Cesium.defined(loc.sLocation)) return;
 			if (_self._sketchTempPoints.length > 1) {
+				/* 标签提示 */
+				_self._drawMovingDoubleTooltip(event.endPosition);
 				_self._sketchTempPoints.pop();
 				_self._sketchTempPoints.push(loc.sLocation);
 				/* 监听输出 */
@@ -2187,11 +2220,9 @@ Object.assign(DrawTools.prototype, {
 		})
 		/* 注册鼠标右键单击事件 */
 		this._registerRightClickEvent(handler, function(event) {
-			if (_self._sketchTempPoints.length > 2) {
-				/* 移除正式点最有一个元素 */
-				_self._sketchPoints.pop();
-				/* 移除临时点倒数第二个元素 */
-				_self._sketchTempPoints.splice(_self._sketchTempPoints.length - 2, 1);
+			if (_self._odlineEntitys.length > 0) {
+				_self._removeLastDrawPointEntity();
+				_self._removeEntityByObject(_self._odlineEntitys.last());
 				if (options.onUndo) options.onUndo();
 			}
 		});
@@ -2240,6 +2271,8 @@ Object.assign(DrawTools.prototype, {
 			let loc = _self._transfromFromScreenPoint(event.endPosition);
 			if (!Cesium.defined(loc.sLocation)) return;
 			if (_self._sketchTempPoints.length > 1) {
+				/* 标签提示 */
+				_self._drawMovingDoubleTooltip(event.endPosition);
 				_self._sketchTempPoints.pop();
 				_self._sketchTempPoints.push(loc.sLocation);
 				/* 监听输出 */
@@ -2255,10 +2288,7 @@ Object.assign(DrawTools.prototype, {
 				_self._sketchTempPoints.splice(_self._sketchTempPoints.length - 2, 1);
 				/* 如果绘制了点 则删除最后一个 */
 				if (_self._isDrawPoint) {
-					let lastPointEntity = _self._pointEntitys[_self._pointEntitys.length - 1];
-					_self._entities.remove(lastPointEntity);
-					/* 移除点实体数据中的最后一条数据 */
-					_self._pointEntitys.pop();
+					_self._removeLastDrawPointEntity();
 				}
 				if (options.onUndo) options.onUndo();
 			}
@@ -2333,6 +2363,8 @@ Object.assign(DrawTools.prototype, {
 		this._registerMouseMoveEvent(handler, function(event) {
 			/* 如果还未创建圆 则直接返回 */
 			if (_self._sketchTempPoints.length <= 0) return;
+			/* 标签提示 */
+			_self._drawMovingSimpleTooltip(event.endPosition);
 			/* 获取空间位置 */
 			var cartesian = _self._viewer.scene.pickPosition(event.endPosition);
 			/* 如果获取点失败 则直接返回 */
@@ -2390,6 +2422,8 @@ Object.assign(DrawTools.prototype, {
 		this._registerMouseMoveEvent(handler, function(event) {
 			/* 如果还未创矩形 则直接返回 */
 			if (_self._sketchTempPoints.length < 1) return;
+			/* 标签提示 */
+			_self._drawMovingSimpleTooltip(event.endPosition);
 			/* 识别屏幕位置 */
 			let loc = _self._transfromFromScreenPoint(event.endPosition);
 			if (!Cesium.defined(loc.sLocation)) return;
@@ -2438,6 +2472,8 @@ Object.assign(DrawTools.prototype, {
 			let loc = _self._transfromFromScreenPoint(event.endPosition);
 			if (!Cesium.defined(loc.sLocation)) return;
 			if (_self._sketchTempPoints.length > 1) {
+				/* 标签提示 */
+				_self._drawMovingDoubleTooltip(event.endPosition);
 				_self._sketchTempPoints.pop();
 				_self._sketchTempPoints.push(loc.sLocation);
 				_self._sketchWallHeights.pop();
@@ -2455,10 +2491,7 @@ Object.assign(DrawTools.prototype, {
 				_self._sketchWallHeights.splice(_self._sketchWallHeights.length - 2, 1);
 				/* 如果绘制了点 则删除最后一个 */
 				if (_self._isDrawPoint) {
-					let lastPointEntity = _self._pointEntitys[_self._pointEntitys.length - 1];
-					_self._entities.remove(lastPointEntity);
-					/* 移除点实体数据中的最后一条数据 */
-					_self._pointEntitys.pop();
+					_self._removeLastDrawPointEntity();
 				}
 			}
 		});
@@ -2516,6 +2549,8 @@ Object.assign(DrawTools.prototype, {
 			let loc = _self._transfromFromScreenPoint(event.endPosition);
 			if (!Cesium.defined(loc.sLocation)) return;
 			if (_self._sketchOutputPoints.length > 1) {
+				/* 标签提示 */
+				_self._drawMovingSimpleTooltip(event.endPosition);
 				_self._sketchOutputPoints.pop();
 				_self._sketchOutputPoints.push(loc.gLocation);
 			}
@@ -2540,6 +2575,7 @@ Object.assign(DrawTools.prototype, {
 		this._clear();
 		/* 注册事件 */
 		_self._drawEventHandler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
+		_self._beginTooltip('左键单击绘制', undefined);
 		/* 分类型注册事件 */
 		switch (type) {
 			case DrawTools.DrawType.Point: //绘制点
@@ -2635,7 +2671,7 @@ Object.assign(DrawTools.prototype, {
 	/**
 	 * 提示标签初始化
 	 * @ignore 生成方法时不对外公开
-	 * @param {String} text 显示的文本内容
+	 * @param {String} text 显示的文本内���
 	 * @param {JSON} mousePosition 鼠标位置 
 	 */
 	_tooltipInit: function(text, mousePosition) {
@@ -2667,18 +2703,32 @@ Object.assign(DrawTools.prototype, {
 		if (mousePosition === undefined) {
 			/* 挂接鼠标移动事件 */
 			document.onmousemove = function(event) {
-				tooltipObj.style.left = (event.clientX + 10) + 'px';
-				tooltipObj.style.top = (event.clientY - tooltipObj.offsetHeight / 2) + 'px';
+				if (event.clientX < 100 || event.clientX > _self._canvasWidth - 100 || event.clientY <
+					100 ||
+					event.clientY > _self._canvasHeight - 100) {
+					tooltipObj.style.display = 'none';
+				} else {
+					tooltipObj.style.display = 'flex';
+					tooltipObj.style.left = (event.clientX + 10) + 'px';
+					tooltipObj.style.top = (event.clientY - tooltipObj.offsetHeight / 2) + 'px';
+				}
 			}
 		} else {
-			tooltipObj.style.left = (mousePosition.x + 10) + 'px';
-			tooltipObj.style.top = (mousePosition.y - tooltipObj.offsetHeight / 2) + 'px';
+			if (mousePosition.x < 100 || mousePosition.x > _self._canvasWidth - 100 || mousePosition.y <
+				100 ||
+				mousePosition.y > _self._canvasHeight - 100) {
+				tooltipObj.style.display = 'none';
+			} else {
+				tooltipObj.style.display = 'flex';
+				tooltipObj.style.left = (mousePosition.x + 10) + 'px';
+				tooltipObj.style.top = (mousePosition.y - tooltipObj.offsetHeight / 2) + 'px';
+			}
 		}
 	},
 
 	/**
 	 * 移除提示标签
-	 * @ignore 生成�������������法时不�����外公开
+	 * @ignore 生成方法时不对外公开
 	 */
 	_tooltipRemove: function() {
 		let tooltipObj = document.getElementById(this._tooltipId);
@@ -2698,8 +2748,15 @@ Object.assign(DrawTools.prototype, {
 		if (tooltipObj != null) {
 			if (text != undefined) tooltipObj.innerHTML = text;
 			if (mousePosition != undefined) {
-				tooltipObj.style.left = (mousePosition.x + 10) + 'px';
-				tooltipObj.style.top = (mousePosition.y - tooltipObj.offsetHeight / 2) + 'px';
+				if (mousePosition.x < 100 || mousePosition.x > this._canvasWidth - 100 || mousePosition.y <
+					100 ||
+					mousePosition.y > this._canvasHeight - 100) {
+					tooltipObj.style.display = 'none';
+				} else {
+					tooltipObj.style.display = 'flex';
+					tooltipObj.style.left = (mousePosition.x + 10) + 'px';
+					tooltipObj.style.top = (mousePosition.y - tooltipObj.offsetHeight / 2) + 'px';
+				}
 			}
 		}
 	},
@@ -2718,6 +2775,36 @@ Object.assign(DrawTools.prototype, {
 	 */
 	_setMouseDefaultStyle: function() {
 		document.querySelector('body').style.cursor = 'default';
+	},
+
+	/**
+	 * 启用标签
+	 * @ignore 不公开
+	 * @param {String} text 标签文字
+	 * @param {Cesium.Cartesian2} position 鼠标位置
+	 */
+	_beginTooltip(text, position) {
+		this._tooltipInit(text, position);
+		this._setMousePointerStyle();
+	},
+
+	/**
+	 * 更新标签标签
+	 * @ignore 不公开
+	 * @param {String} text 标签文字
+	 * @param {Cesium.Cartesian2} position 鼠标位置
+	 */
+	_updateTooltip(text, position) {
+		this._tooltipSetText(text, position);
+	},
+
+	/**
+	 * 结束标签
+	 * @ignore 不公开
+	 */
+	_endTooltip() {
+		this._tooltipRemove();
+		this._setMouseDefaultStyle();
 	}
 })
 
@@ -4238,7 +4325,7 @@ Object.assign(DrawTools.prototype, {
 			/* 更新中心位置数组 */
 			this._movePoint = endLoc.sLocation;
 		} else {
-			/* 循环处理所有移动点 */
+			/* 循环���理所有移动点 */
 			for (let i = 0; i < this._startMovePoints.length; i++) {
 				/* 计算转换后的位置 */
 				let position = this._calculateTransformPosition(this._startMovePoints[i], distance, bearing,
@@ -4302,7 +4389,7 @@ Object.assign(DrawTools.prototype, {
 			_self._editEntity.polygon.hierarchy = {
 				positions: _self._sketchEditPoints,
 			};
-			/* 此处需要特殊处理一下 */
+			/* 此处���要特殊处理一下 */
 			if (_self._editEntity.polyline != undefined) {
 				/* 如果创建区域的同时 创建了边界线 则根据区域的边界创建线 */
 				let polygonPositions = _self._editEntity.polygon.hierarchy._value.positions;
@@ -4932,6 +5019,365 @@ DrawTools.PolygonType = Object.freeze({
 	HousePolygon: 'housePolygon', //拉伸贴地面
 })
 
+
+class WallMaterialProperty {
+	/**
+	 * 构造方法
+	 * @ignore 无需公开
+	 * @param {JSON} options 配置项
+	 * @param {Cesium.Viewer} options.viewer 着色器运行所需的视图
+	 * @param {Cesium.Color} options.color [墙的颜色，默认蓝色] 可选
+	 * @param {Number} options.duration [循环时间 默认1000] 可选
+	 * @param {String} options.trailImage 墙的贴图
+	 * @param {JSON} options.param 着色器参数
+	 * @param {Number} options.param.count [数量 可选 默认为1]
+	 * @param {String} options.param.direction [方向 可选 默认竖直 ] 取值vertical/horizontal
+	 * @param {String} options.param.order [顺序 可选 上下/下上/顺时针/逆时针 与方向配合使用 ] 取值+/-
+	 */
+	constructor(options) {
+		/* 着色器运行依赖的视图 */
+		this._viewer = options.viewer;
+		/* 变更事件 */
+		this._definitionChanged = new Cesium.Event();
+		this._color = undefined;
+		/* 墙的颜色 */
+		this.color = options.color || Cesium.Color.BLUE;
+		/* 动态循环周期 */
+		this.duration = options.duration || 1000;
+		/* 墙的贴图 */
+		this.trailImage = options.trailImage;
+		/* 默认时间 */
+		this._time = (new Date()).getTime();
+		/* 材质类型名称 */
+		this._materialTypeName = 'WallMaterial' + this._guid();
+		/* 存储相关参数的属性 以便后期进行追踪修改 */
+		this._param = {
+			color: this.color._value.toCssColorString(),
+			image: this.trailImage,
+			duration: this.duration,
+			count: 0,
+			direction: '',
+			order: '',
+		}
+		/* 将材质加入缓存 以便重复利用 */
+		Cesium.Material._materialCache.addMaterial(this._materialTypeName, {
+			fabric: {
+				type: this._materialTypeName,
+				uniforms: {
+					time: -20,
+					color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
+					image: options.trailImage,
+				},
+				source: this._getDirectionWallShader(options.param)
+			},
+			translucent: function(material) {
+				/* 材质是否半透明 */
+				return true;
+			}
+		});
+	}
+
+	/**
+	 * 生成GUID随机数
+	 * @ignore 无需公开
+	 */
+	_guid() {
+		function S4() {
+			return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+		}
+		return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+	}
+
+	/**
+	 * 重新获取类型方法
+	 * @ignore 无需公开
+	 * @param {Cesium.JulianDate} time 时间
+	 */
+	getType(time) {
+		return this._materialTypeName;
+	}
+
+	/**
+	 * 重写获取值方法
+	 * @ignore 无需公开
+	 * @param {Cesium.JulianDate} time
+	 * @param {JSON} result 
+	 */
+	getValue(time, result) {
+		if (!Cesium.defined(result)) {
+			result = {};
+		}
+		result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.BLUE, result.color);
+		result.image = this.trailImage;
+		if (this.duration) {
+			result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
+		}
+		this._viewer.scene.requestRender();
+		return result;
+	}
+
+	/**
+	 * 重写对比函数
+	 * @ignore 无需公开
+	 * @param {Object} other 传入对比对象
+	 */
+	equals(other) {
+		return (this === other || (other instanceof WallMaterialProperty && Cesium.Property.equals(this
+				._color, other._color) && other._param.order === this._param.order && other._param.count ===
+			this._param.count && other._param.direction === this._param.direction && other.duration === this
+			.duration));
+	}
+
+	/**
+	 * 创建着色器资源
+	 * @ignore 无需公开
+	 * @param {JSON} options 配置项
+	 * @param {Number} options.count [数量 可选 默认为1]
+	 * @param {String} options.direction [方向 可选 默认竖直 ] 取值vertical/horizontal
+	 * @param {String} options.order [顺序 可选 上下/下上/顺时针/逆时针 与方向配合使用 ] 取值+/-
+	 */
+	_getDirectionWallShader(options) {
+		let op = Cesium.defaultValue(options, {});
+		// console.log('>>>op===', op);
+		let count = op.count !== undefined && typeof op.count === 'number' && op.count > 0 ? op
+			.count : 1;
+		let direction = op.direction === 'horizontal' ? 'horizontal' : 'vertical';
+		let order = op.order === '+' ? '+' : '-';
+		this._param.count = count;
+		this._param.direction = direction;
+		this._param.order = order;
+		let materail = '';
+		/* 补充参数 */
+		// console.log(this._param);
+		materail += 'czm_material czm_getMaterial(czm_materialInput materialInput){\n' +
+			'  czm_material material = czm_getDefaultMaterial(materialInput);\n' +
+			'  vec2 st = materialInput.st;\n';
+		if (direction === 'vertical') {
+			materail += '  vec4 colorImage = texture2D(image,vec2(st.s,fract(float(' + count + ')*st.t ' + order +
+				' time)));\n';
+		} else if (direction === 'horizontal') {
+			materail += '  vec4 colorImage = texture2D(image, vec2(fract(float(' + count + ')*st.s ' + order +
+				' time), st.t));\n'
+		}
+		materail += '  vec4 fragColor;\n' +
+			'  fragColor.rgb = color.rgb / 1.0;\n' +
+			'  fragColor = czm_gammaCorrect(fragColor);\n' +
+			'  material.alpha = colorImage.a * color.a;\n' +
+			'  material.diffuse = color.rgb;\n' +
+			'  material.emission = fragColor.rgb;\n' +
+			'  return material;\n' +
+			'}';
+		return materail;
+	}
+}
+
+/**
+ * 增加默认属性
+ */
+Object.defineProperties(WallMaterialProperty.prototype, {
+	/**
+	 * @ignore 无需公开
+	 * 判断是否相等，返回false表示属性一直在变化中
+	 */
+	isConstant: {
+		get: function() {
+			return false;
+		}
+	},
+	/**
+	 * @ignore 无需公开
+	 * 事件变更
+	 */
+	definitionChanged: {
+		get: function() {
+			return this._definitionChanged;
+		}
+	},
+	/* 颜色属性 */
+	color: Cesium.createPropertyDescriptor('color')
+})
+
+
+/**
+ * 创建者：王成
+ * 操作系统：MAC
+ * 创建日期：2022年12月29日
+ * 描述：动态扩散圆材质
+ */
+class CircleMaterialProperty {
+	/**
+	 * 构造方法
+	 * @ignore 无需公开
+	 * @param {JSON} options 配置项
+	 * @param {Cesium.Viewer} options.viewer 着色器运行所需的视图
+	 * @param {Cesium.Color} options.color [圆环的颜色，默认蓝色] 可选
+	 * @param {Number} options.duration [循环时间 默认1000] 可选
+	 * @param {Number} options.count [圆环的数量 可选 默认为1]
+	 */
+	constructor(options) {
+		/* 着色器运行依赖的视图 */
+		this._viewer = options.viewer;
+		/* 变更事件 */
+		this._definitionChanged = new Cesium.Event();
+		this._color = undefined;
+		/* 扩算圆环的颜色 */
+		this.color = options.color || Cesium.Color.BLUE;
+		/* 扩散圆环的数量 */
+		this.count = options.count || 1.0;
+		/* 动态循环周期 */
+		this.duration = options.duration || 1000;
+		/* 默认时间 */
+		this._time = (new Date()).getTime();
+		/* 材质类型名称 */
+		this._materialTypeName = 'jtCircleMaterial'
+		/* 存储相关参数的属性 以便后期进行追踪修改 */
+		this._param = {
+			color: this.color._value.toCssColorString(),
+			duration: this.duration,
+			count: this.count,
+		}
+		/* 将材质加入缓存 以便重复利用 */
+		Cesium.Material._materialCache.addMaterial(this._materialTypeName, {
+			fabric: {
+				type: this._materialTypeName,
+				uniforms: {
+					time: 0,
+					color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
+					count: 1.0,
+				},
+				source: this._getCircleMaterial(),
+			},
+			translucent: function(material) {
+				/* 材质是否半透明 */
+				return true;
+			}
+		});
+	}
+
+	/**
+	 * @ignore 无需公开
+	 * 获取材质着色器Shader
+	 */
+	_getCircleMaterial() {
+		let circleMaterial = "czm_material czm_getMaterial(czm_materialInput materialInput)\n" +
+			"{\n" +
+			"  czm_material material = czm_getDefaultMaterial(materialInput);\n" +
+			"  material.diffuse = 1.5 * color.rgb;\n" +
+			"  vec2 st = materialInput.st;\n" +
+			"  vec3 str = materialInput.str;\n" +
+			"  float dis = distance(st, vec2(0.5, 0.5));\n" +
+			"  float per = fract(time);\n" +
+			"  if (abs(str.z) > 0.001)\n" +
+			"  {\n" +
+			"     //着色器渲染停止，不在绘制内容  \n" +
+			"     discard;\n" +
+			"  }\n" +
+			"  if (dis > 0.5)\n" +
+			"  {\n" +
+			"     //超出半径范围时，着色器渲染停止  \n" +
+			"     discard;\n" +
+			"  } else {\n" +
+			"     //把半径分成count份，每两份之间的间隔距离  \n" +
+			"     float perDis = 0.5 / count;\n" +
+			"     float disNum;\n" +
+			"     float bl = 0.0;\n" +
+			"     //循环，最多999个环  \n" +
+			"     for (int i = 0; i <= 999; i++)\n" +
+			"     {\n" +
+			"        //判断是否属于数量内的环  \n" +
+			"        if (float(i) <= count)\n" +
+			"        {\n" +
+			"           disNum = perDis * float(i) - dis + per / count;\n" +
+			"           if (disNum > 0.0)\n" +
+			"           {\n" +
+			"               if (disNum < perDis)\n" +
+			"               {\n" +
+			"                  bl = 1.0 - disNum / perDis;\n" +
+			"               } else if (disNum - perDis < perDis) {\n" +
+			"                  bl = 1.0 - abs(1.0 - disNum / perDis);\n" +
+			"               }\n" +
+			"               material.alpha = color.a * pow(bl, 3.0);\n" +
+			"           }\n" +
+			"        }\n" +
+			"     }\n" +
+			"  }\n" +
+			"  return material;\n" +
+			"}\n";
+		return circleMaterial;
+	}
+}
+
+/**
+ * @ignore 无需公开
+ * 必须重写的方法
+ */
+Object.assign(CircleMaterialProperty.prototype, {
+	/**
+	 * 重新获取类型方法
+	 * @ignore 无需公开
+	 * @param {Cesium.JulianDate} time 时间
+	 */
+	getType: function(time) {
+		return this._materialTypeName;
+	},
+
+	/**
+	 * 重写获取值方法
+	 * @ignore 无需公开
+	 * @param {Cesium.JulianDate} time
+	 * @param {JSON} result 
+	 */
+	getValue: function(time, result) {
+		if (!Cesium.defined(result)) {
+			result = {};
+		}
+		result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.BLUE, result
+			.color);
+		result.count = this.count;
+		if (this.duration) {
+			result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
+		}
+		this._viewer.scene.requestRender();
+		return result;
+	},
+
+	/**
+	 * 重写对比函数
+	 * @ignore 无需公开
+	 * @param {Object} other 传入对比对象
+	 */
+	equals: function(other) {
+		return (this === other || (other instanceof CircleMaterialProperty && Cesium.Property.equals(this
+			._color, other._color)));
+	}
+})
+
+/**
+ * 默认属性
+ */
+Object.defineProperties(CircleMaterialProperty.prototype, {
+	/**
+	 * 判断是否相等，返回false表示属性一直在变化中
+	 * @ignore 无需公开
+	 */
+	isConstant: {
+		get: function() {
+			return false;
+		}
+	},
+	/**
+	 * 事件变更
+	 * @ignore 无需公开
+	 */
+	definitionChanged: {
+		get: function() {
+			return this._definitionChanged;
+		}
+	},
+	/* 颜色属性 */
+	color: Cesium.createPropertyDescriptor('color')
+})
+
 /* 输出 */
 export {
 	DrawTools

src/components/jt-dialog/dialogEditProperty.vue

@@ -79,7 +79,7 @@
 						</div>
 					</div>
 					<div class="jt-wall-row" v-show="isShowVideoUrl" style="height: 100px;">
-						<div class="col-left">文字内容</div>
+						<div class="col-left">视频地址</div>
 						<div class="col-main"><el-input v-model="txtVideoUrl" placeholder="输入播放视频的地址" clearable type="textarea" :rows="2" /></div>
 					</div>
 					<div class="el-body-foot">
@@ -383,6 +383,7 @@ function _setShowControls(isShow) {
 	isShowOutlineWidth.value = isShow;
 	isShowSpeed.value = isShow;
 	isShowVideoUrl.value = isShow;
+	isShowArcHeight.value = isShow;
 }
 
 /**