JT-CIM-SDK/packages/Widgets/DrawTools/DrawMilitaryPlot.js

import MilitaryPlot from './/MilitaryPlot/drawingMethod/index.js'

//编辑类
import EntityEdit from './MilitaryPlot/EntityEdit.js';

/* 引入属性编辑框 */
import DialogEditProperty from './CrEditProperty_MilitaryPlot.ce.vue'
/* 引入组件注册 */
import {
	defineCustomElement
} from 'vue'

/**
 * 设置附加参数
 * @ignore 生成方法时不对外公开
 * @param {JSON} params 参数
 */
Cesium.Entity.prototype.setParams = function(params) {
	this._params = params;
}

/**
 * 获取附加参数
 * @ignore 生成方法时不对外公开
 */
Cesium.Entity.prototype.getParams = function() {
	return this._params;
}


/**
 * 设置实体是否可编辑
 * @ignore 生成方法时不对外公开
 * @param {Boolean} isEdit 是否可编辑
 */
Cesium.Entity.prototype.setIsEdit = function(isEdit) {
	this._isEdit = isEdit;
}

/**
 * 获取实体是否可编辑
 * @ignore 生成方法时不对外公开
 * @return {Boolean} isEdit
 */
Cesium.Entity.prototype.getIsEdit = function() {
	return this._isEdit;
}

/**
 * 军事标绘
 */
class DrawMilitaryPlot {
	/**
	 * 默认初始化
	 * @param {Object} viewer 三维场景
	 */
	constructor(options) {
		if (!options.viewer) throw new DeveloperError('no options.viewer object!');
		if (!options.Cesium) throw new DeveloperError('no options.Cesium object!');

		this._viewer = options.viewer;
		this.cesium = options.Cesium;

		this.drawArr = [];
		this.Draw = '';
		// 鼠标点击获取实体修改事件
		this.edit = new EntityEdit(this._viewer);
		this.edit.activate(); //激活编辑
		//获取得到实体 cesium回调机制
		this.edit.EditEndEntity.addEventListener((result) => {
			if (result.Type) {
				this.handleFirstPosition(result.Type);
				this.edit.DrawExample = this.Draw;
			}
			this._editEntity = result; //选中的实体
		})
	}

	/**
	 * 静态方法 初始化并获取属性编辑参数
	 */
	static initEditPropertyParams() {
		return {
			id: undefined, //用于标识及传递当前编辑的实体类型 内容为DrawTools.DrawType
			color: 'rgba(0,255,0,0.75)', //用于颜色标识
			outlineWidth: 0, //用于标识描边线宽度
			outlineColor: 'rgba(255,255,255,1)', //用于标识描边线颜色
		}
	}

	// 编辑时获取到实体时调用
	editActivate() {
		return this.edit
	}

	handleFirstPosition(type) {
		/* 开启地形检测 必须开启 否则会导致获取地形高度时异常 导致鼠标移动时位置哆嗦 */
		this._viewer.scene.globe.depthTestAgainstTerrain = true;
		
		switch (type) {
			case "DrawStraightArrow":
				// 绘制直线箭头
				this.Draw = new MilitaryPlot.DrawStraightArrow({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawAttackArrow":
				// 绘制攻击箭头
				this.Draw = new MilitaryPlot.DrawAttackArrow({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawPincerArrow":
				//绘制钳击箭头
				this.Draw = new MilitaryPlot.DrawPincerArrow({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawGatheringPlace":
				this.Draw = new MilitaryPlot.DrawGatheringPlace({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawClosedCurve":
				this.Draw = new MilitaryPlot.DrawClosedCurve({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawSector":
				this.Draw = new MilitaryPlot.DrawSector({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawBowLine":
				this.Draw = new MilitaryPlot.DrawBowLine({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawBowPlane":
				this.Draw = new MilitaryPlot.DrawBowPlane({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawCurve":
				//绘制曲线
				this.Draw = new MilitaryPlot.DrawCurve({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawCurveFlag":
				//绘制曲线旗帜
				this.Draw = new MilitaryPlot.DrawCurveFlag({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawRectFlag":
				//绘制矩形直角旗帜
				this.Draw = new MilitaryPlot.DrawRectFlag({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawTriangleFlag":
				//绘制三角旗帜
				this.Draw = new MilitaryPlot.DrawTriangleFlag({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;

			case "DrawPoint":
				//绘制点
				this.Draw = new MilitaryPlot.DrawPoint({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawPolyline":
				// 绘制线
				this.Draw = new MilitaryPlot.DrawPolyline({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawPolygon":
				// 多边形
				this.Draw = new MilitaryPlot.DrawPolygon({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawRectangle":
				// 绘制矩形
				this.Draw = new MilitaryPlot.DrawRectangle({
					viewer: this._viewer,
					Cesium: this.cesium
				})
				break;
			case "DrawCircle":
				//绘制圆
				this.Draw = new MilitaryPlot.DrawCircle({
					viewer: this._viewer,
					Cesium: this.cesium
				});
				break;
		}
	}

	// 加载数据
	addEntity(data) {
		this.handleFirstPosition(data.type);
		if (this.Draw) {
			let entity = this.Draw.addload(data.position);
			entity._id = data.id
			return entity
		}
	}
}

/**
 * 通用对外公开函数-鼠标事件 
 */
Object.assign(DrawMilitaryPlot.prototype, /** @lends DrawMilitaryPlot.prototype */ {
	/**
	 * 设置鼠标为十字样式
	 * @ignore 生成方法时不对外公开
	 */
	_setMousePointerStyle() {
		document.querySelector('body').style.cursor = 'crosshair';
	},

	/**
	 * 恢复鼠标指针为默认样式
	 * @ignore 生成方法时不对外公开
	 */
	_setMouseDefaultStyle() {
		document.querySelector('body').style.cursor = 'default';
	},

	/**
	 * 注册鼠标左键点击事件
	 * @ignore 生成方法时不对外公开
	 * @param {Cesium.ScreenSpaceEventHandler} handler 事件句柄
	 * @param {Function} callChange 回调callChange(event)
	 */
	_registerLeftClickEvent(handler, callChange) {
		let _self = this;
		if (!handler) return;

		handler.setInputAction(function(event) {
			/* 锁定点击事件 以免和移动事件冲突 */
			_self._lock = true;
			clearTimeout(_self._timer);
			_self._timer = setTimeout(function() {
				if (callChange) callChange(event);
				/* 解除锁定 */
				_self._lock = false;
			}, 200);
		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
	},

	/**
	 * 注册鼠标移动事件
	 * @ignore 生成方法时不对外公开
	 * @param {Cesium.ScreenSpaceEventHandler} handler 事件句柄
	 * @param {Function} callChange 回调callChange(event)
	 */
	_registerMouseMoveEvent(handler, callChange) {
		let _self = this;
		if (!handler) return;

		handler.setInputAction(function(event) {
			if (_self._lock === undefined || _self._lock === false) {
				if (callChange) callChange(event);
			}
		}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
	},

	/**
	 * 注册鼠标左键按下事件
	 * @ignore 生成方法时不对外公开
	 * @param {Cesium.ScreenSpaceEventHandler} handler 事件句柄
	 * @param {Function} callChange 回调callChange(event)
	 */
	_registerLeftDownEvent(handler, callChange) {
		if (!handler) return;
		handler.setInputAction(function(event) {
			if (callChange) callChange(event);
		}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
	},

	/**
	 * 注册鼠标左键抬起事件
	 * @ignore 生成方法时不对外公开
	 * @param {Cesium.ScreenSpaceEventHandler} handler 事件句柄
	 * @param {Function} callChange 回调callChange(event)
	 */
	_registerLeftUpEvent(handler, callChange) {
		if (!handler) return;
		handler.setInputAction(function(event) {
			if (callChange) callChange(event);
		}, Cesium.ScreenSpaceEventType.LEFT_UP);
	},

	/**
	 * 清除事件
	 * @ignore
	 * @param {Cesium.ScreenSpaceEventHandler} handler
	 */
	_clearEvent(handler) {
		if (!handler) return;

		/* 干掉事件句柄 释放资源 */
		handler.destroy();
		handler = null;
	}

});

/**
 * 属性编辑相关
 */
Object.assign(DrawMilitaryPlot.prototype, {

	/**
	 * 设置实体可编辑，编辑的实体必须包含编辑类型
	 * @ignore 生成方法时不对外公开
	 * @param {Cesium.Entity} entity 编辑的实体
	 */
	_setEntityIsEdit(entity) {
		let _self = this;

		/* 关闭属性编辑框 */
		this._closePropertyEditDialog();

		/* 设置实体要素可编辑 */
		entity.setIsEdit(true);
		this.edit.handlePickEditEntity(entity);

		/* 激活编辑 并显示属性编辑框 */
		this._sendShowPropertyDialog(entity);

		/* 注册统一事件 用于单击拾取实体 */
		let handler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
		this._registerLeftClickEvent(handler, function(event) {
			/* 只要点击 关闭属性编辑框 */
			_self._closePropertyEditDialog();

			let feature = _self._viewer.scene.pick(event.position);
			if (feature !== undefined && feature.id instanceof Cesium.Entity) {
				let editEntity = feature.id;
				if (
					editEntity.Type == 'DrawStraightArrow' ||
					editEntity.Type == 'DrawAttackArrow' ||
					editEntity.Type == 'DrawPincerArrow' ||
					editEntity.Type == 'DrawGatheringPlace' ||
					editEntity.Type == 'DrawClosedCurve' ||
					editEntity.Type == "DrawSector" ||
					editEntity.Type == "DrawBowLine" ||
					editEntity.Type == "DrawBowPlane" ||
					editEntity.Type == 'DrawCurve' ||
					editEntity.Type == 'DrawCurveFlag' ||
					editEntity.Type == 'DrawRectFlag' ||
					editEntity.Type == 'DrawTriangleFlag' ||

					editEntity.Type == 'DrawPoint' ||
					editEntity.Type == 'DrawPolyline' ||
					editEntity.Type == 'DrawPolygon' ||
					editEntity.Type == 'DrawRectangle' ||
					editEntity.Type == 'DrawCircle'
				) {
					_self._sendShowPropertyDialog(feature.id);
				}
			}
		});
	},

	/**
	 * 打开实体编辑对话框
	 * @ignore 生成方法时不对外公开
	 * @param {Cesium.Entity} entity
	 */
	_sendShowPropertyDialog(entity) {

		let _self = this;
		/* 获取可编辑实体的类型 */
		let editEntityType = entity.Type;
		if (entity.getIsEdit() === undefined || entity.getIsEdit() === false || editEntityType === undefined) {
			/* 选择的实体不可编辑 */
			return;
		}

		/* 编辑属性 */
		let editProperty = entity.getParams();
		if (editProperty !== undefined && this.onEditProperty !== undefined) {
			editProperty.id = editEntityType;

			/* 更改测试 */
			_self._openPropertyEditDialog(editProperty,
				//编辑回调
				function(params) {
					_self.updateEditEntityProperty(params);
				},
				//移除回调
				function() {
					// _self.Draw.clear();
					_self._viewer.entities.remove(entity);
					_self.edit.clearAllEditVertex(); //禁用编辑
				}
			);
		}
	},
	
	/**
	 * 更新当前编辑的实体属性
	 * @param {JSON} params
	 */
	updateEditEntityProperty: function(params) {
		let _self = this;
		
		if (this._editEntity === undefined) return;
		if (this._editEntity.getIsEdit() === undefined || this._editEntity.getIsEdit() === false) return;
		let editEntityType = this._editEntity.Type;
		if (editEntityType === undefined) return;
		
		let material = this._editEntity.polygon.material;
		if (material instanceof Cesium.ColorMaterialProperty) {
			let newMaterial = this._materialColorProperty({
				color: params.color,
			});
			this._editEntity.polygon.material = newMaterial;
		}
		if (this._editEntity.polyline !== undefined) {
			let newMaterial = this._materialColorProperty({
				color: params.outlineColor,
			});
			this._editEntity.polyline.material = newMaterial;
			this._editEntity.polyline.width = parseFloat(params.outlineWidth);
		}
		/* 重新关联墙实体的属性 */
		this._editEntity.setParams(params);
	},
	
	/**
	 * 颜色材质
	 * @ignore 生成方法时不对外公开
	 * @param {JSON} options 配置项
	 * @param {String} options.color 文字颜色 rgba(r,g,b,a)
	 */
	_materialColorProperty(options) {
		let mColor = 'rgba(0,255,0,1)';
		if (options !== undefined && options.color !== undefined) mColor = options.color;
		/* 创建材质 */
		let colorMaterial = new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString(mColor));
		colorMaterial._param = {
			color: mColor,
		}
		/* 返回材质 */
		return colorMaterial;
	}
})

/**
 * 通用对外公开函数 
 */
Object.assign(DrawMilitaryPlot.prototype, /** @lends DrawMilitaryPlot.prototype */ {

	/**
	 * 开始绘制
	 * @param {String} type 绘制类型 鼠标点击绘制时调用
	 */
	drawActivate(type) {
		/* 设置鼠标样式为十字 */
		this._setMousePointerStyle();

		this.handleFirstPosition(type);
		this.Draw.startCreate(type)

		// 标绘完成返回数据
		this.Draw.DrawEndEvent.addEventListener((entity, positions, drawType) => {
			console.log({
				entity,
				positions,
				drawType
			});

			// 恢复鼠标指针为默认样式
			this._setMouseDefaultStyle();

			if (entity) {


				let entityParam = DrawMilitaryPlot.initEditPropertyParams();
				entity.setParams(entityParam);

				// 设置实体可编辑，编辑的实体必须包含编辑类型
				this._setEntityIsEdit(entity);
			}
		});

		this.drawArr.push(this.Draw);

		return this.Draw
	},

	/**
	 * 删除选定图形
	 */
	clearOne: function() {

		this.Draw.clear();
		// this.edit.deactivate(); //禁用编辑
	},

	/**
	 * 删除所有图形
	 */
	clearAll: function() {

		for (var i = 0; i < this.drawArr.length; i++) {
			this.drawArr[i].clear();
		}
		this.edit.deactivate(); //禁用编辑

		/* 关闭属性编辑框 */
		this._closePropertyEditDialog();
		/* 移除操作容器 */
		let buttonDiv = document.getElementById("drawButtonDiv");
		if (buttonDiv) {
			//从页面移除
			document.body.removeChild(buttonDiv);
		}
	},
});

/**
 * 属性编辑相关（UI）
 */
Object.assign(DrawMilitaryPlot.prototype, {
	/**
	 * 打开属性编辑窗口
	 * @ignore
	 * @param {JSON} params 参数
	 * @param {Function} callEdit 编辑回调
	 * @param {Function} callRemove 移除回调
	 */
	_openPropertyEditDialog: function(params, callEdit, callRemove) {
		this._editPropertyDialogDomId = 'dialog-property-dom-militaryplot';
		this._registerDOMPropertyEdit = 'dialog-edit-property-militaryplot'
		/* 获取一个属性编辑组件 */
		let PropertyEditComponent = customElements.get(this._registerDOMPropertyEdit);
		/* 如果组件还未注册 则进行注册 否则不在注册 避免重复注册的BUG */
		if (PropertyEditComponent === undefined) {
			PropertyEditComponent = defineCustomElement(DialogEditProperty);
			customElements.define(this._registerDOMPropertyEdit, PropertyEditComponent);
		}

		/* 先关闭编辑框 */
		this._closePropertyEditDialog();
		/* 创建组件 */
		let dialogPropertyElement = new PropertyEditComponent({
			params: params,
		})
		dialogPropertyElement.id = this._editPropertyDialogDomId;
		dialogPropertyElement.showDialog = true;
		document.body.appendChild(dialogPropertyElement);

		/* 监听修改事件 */
		dialogPropertyElement.addEventListener(
			"submit",
			(e) => {
				if (callEdit) callEdit(e.detail[0]);
			},
			false
		);
		/* 监听移除事件 */
		dialogPropertyElement.addEventListener(
			"remove",
			(e) => {
				if (callRemove) callRemove();
			},
			false
		);
	},

	/**
	 * 关闭属性编辑框
	 * @ignore
	 */
	_closePropertyEditDialog() {
		let dom = document.getElementById(this._editPropertyDialogDomId);
		if (dom !== null && dom !== undefined) {
			document.body.removeChild(dom);
		}
	},

})

export default DrawMilitaryPlot;