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

/* 引入Cesium */
// import * as Cesium from 'Cesium';

import CreateRemindertip from "../common/ReminderTip.js";

//点对象
import PointObject from "../PointObject.js";

/* 引入属性编辑框 */
import DialogEditProperty from './CrEditProperty_Point.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 {DrawPoint.DrawType} entityType 实体挂接的数据类型
 */
Cesium.Entity.prototype.setEntityType = function(entityType) {
	this._entityType = entityType;
}

/**
 * 获取实体挂接的数据类型
 * @ignore 生成方法时不对外公开
 * @@return {DrawPoint.DrawType} 实体挂接的数据类型
 */
Cesium.Entity.prototype.getEntityType = function(entityType) {
	return this._entityType;
}

/**
 * 设置实体是否可编辑
 * @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 DrawPoint {
	/**
	 * 默认初始化
	 */
	constructor(viewer) {
		if (!viewer) throw new Cesium.DeveloperError('no viewer object!');
		this._viewer = viewer;

		/* 开启地形检测 必须开启 否则会导致获取地形高度时异常 导致鼠标移动时位置哆嗦 */
		this._viewer.scene.globe.depthTestAgainstTerrain = true;
		/* 取消地图右键点击事件 */
		this._viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

		/* 实体数据集 */
		this._entities = [];

		//绘制点
		this._pointObject = new PointObject(viewer);
	}

	/**
	 * 静态方法 初始化并获取属性编辑参数
	 */
	static initEditPropertyParams() {
		return {
			id: undefined, //用于标识及传递当前编辑的实体类型 内容为DrawPoint.DrawType
			label: {
				text: '金田CIM三维基础平台', //文字内容
				font: 'Helvetica', //文字字体
				fontSize: 24, //文字字体大小
				bolder: false, //文字是否加粗
				italic: false, //文字是否倾斜
				fillColor: 'rgba(0,255,0,0.75)', //文字颜色
				showOutline: false, //是否显示描边线
				outlineWidth: 0, //描边线宽度
				outlineColor: 'rgba(255,255,255,1)', //描边线颜色
				showBackground: false, //是否显示背景
				backgroundPadding: 0, //以像素为单位指定水平和垂直背景填充。
				backgroundColor: 'rgba(255,255,255,1)', //背景颜色
				pixelOffsetX: 0, //横向偏移像素
				pixelOffsetY: 0 //纵向偏移像素
			},
			point: {
				color: 'rgba(0,255,0,0.75)', //点颜色
				pixelSize: 10, //点像素大小
				showOutline: false, //是否显示描边线
				outlineWidth: 0, //描边线宽度
				outlineColor: 'rgba(255,255,255,1)', //描边线颜色
			},
			billboard: {
				imgUrl: 'jt3dSDK/imgs/point/point3.png', //图片路径
				alpha: 1, //透明度
				scale: 1, //放大比例
			},
			model: {
				url: 'jt3dSDK/gltf/pyramid.glb', //模型路径
				alpha: 1, // 模型透明度

				showSilhouette: false, //是否显示模型轮廓
				silhouetteColor: 'rgba(255,255,255,1)', // 模型轮廓颜色[0~255,0~255,0~255,0~1]
				silhouetteSize: 0, //模型轮廓宽度

				minimumPixelSize: 128, // 模型最小刻度
				maximumScale: 20000, // 模型的最大比例尺大小，设置模型最大放大大小
				heading: 0.0, // 以弧度为单位的航向分量
				pitch: 0.0, //以弧度为单位的螺距分量
				roll: 0.0, // 以弧度为单位的滚动分量
			}
		}
	}

	/**
	 * 世界坐标转换为经纬度坐标
	 * @ignore 生成方法时不对外公开
	 * @param {Cesium.Cartesian3} position 点
	 */
	_cartesian3ToGeo(position) {
		let g = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
		return {
			longitude: Cesium.Math.toDegrees(g.longitude),
			latitude: Cesium.Math.toDegrees(g.latitude),
			height: g.height,
		}
	}

	/**
	 * 弧度转度
	 * @ignore
	 * @param {Number} arc 弧度
	 * @return {Number} 角度
	 */
	_arcToDegree(arc) {
		return arc / Math.PI * 180;
	}

	/**
	 * 根据地形或实景或模型检测当前屏幕位置的经纬度及高度
	 * @ignore
	 * @param {JSON} screenPoint 屏幕坐标
	 * @param {Number} screenPoint.x 屏幕坐标x
	 * @param {Number} screenPoint.y 屏幕坐标y
	 * @return {JSON} 位置信息{lng,lat,height}
	 */
	_getScreenClickPositionAndHeight(screenPoint) {
		var lng = undefined,
			lat = undefined,
			height = undefined;

		/* 从相机位置到 windowPosition 处的像素创建射线在世界坐标系中 */
		var ray = this._viewer.scene.camera.getPickRay(screenPoint);
		/* 找到射线与渲染的地球表面之间的交点 */
		var position = this._viewer.scene.globe.pick(ray, this._viewer.scene);
		/* 获取地理位置的制图表达 */
		var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);

		/* 查询屏幕位置的要素 */
		var feature = this._viewer.scene.pick(screenPoint);
		if (feature == undefined) {
			lng = this._arcToDegree(cartographic.longitude);
			lat = this._arcToDegree(cartographic.latitude);
			height = cartographic.height;
		} else {
			var cartesian = this._viewer.scene.pickPosition(screenPoint);
			if (Cesium.defined(cartesian)) {
				var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
				lng = this._arcToDegree(cartographic.longitude);
				lat = this._arcToDegree(cartographic.latitude);
				height = cartographic.height;
			}
		}
		/* 返回结果 */
		return {
			lng: lng,
			lat: lat,
			height: height,
		}
	}

	/**
	 * 屏幕位置转换为经纬度位置及空间位置
	 * @ignore
	 * @param {Cesium.Cartesian2} screenPosition 屏幕位置
	 * @return {JSON} 经纬度位置及空间位置
	 */
	_transfromFromScreenPoint(screenPosition) {
		/* 根据屏幕位置获取经度、纬度和高度信息 */
		let location = this._getScreenClickPositionAndHeight(screenPosition);
		/* 经纬度位置转换为三维坐标 */
		var cartesian = Cesium.Cartesian3.fromDegrees(location.lng, location.lat, location.height);
		/* 返回 */
		return {
			gLocation: location,
			sLocation: cartesian,
		}
	}
}

/**
 * 通用对外公开函数-鼠标事件 
 */
Object.assign(DrawPoint.prototype, /** @lends DrawPoint.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(DrawPoint.prototype, /** @lends DrawPoint.prototype */ {

	draw: function(type, options) {
		/* 定义自身 */
		let _self = this;

		/*撤销编辑*/
		_self._unActivateEdit();

		/* 注册事件 */
		this._drawEventHandler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
		this._drawType = type;

		/* 分类型注册事件 */
		switch (type) {
			case DrawPoint.DrawType.Model: //模型
				_self._sketchDrawModel(_self._drawEventHandler, options);
				break;
			case DrawPoint.DrawType.Label: //文字
				_self._sketchDrawLabel(_self._drawEventHandler, options);
				break;
			case DrawPoint.DrawType.Point: //点
				_self._sketchDrawPoint(_self._drawEventHandler, options);
				break;
			case DrawPoint.DrawType.Point2Label: //点及文字
				_self._sketchDrawPoint2Label(_self._drawEventHandler, options);
				break;
			case DrawPoint.DrawType.Billboard: //广告牌
				_self._sketchDrawBillboard(_self._drawEventHandler, options);
				break;
			case DrawPoint.DrawType.Billboard2Label: //广告牌及文字
				_self._sketchDrawBillboard2Label(_self._drawEventHandler, options);
				break;
		}
	},

	/**
	 * 清理所有资源
	 */
	clearAll() {
		for (var i = 0; i < this._entities.length; i++) {
			var getById = viewer.entities.getById(this._entities[i]);
			if (getById) {
				this._viewer.entities.remove(getById);
			}
		}

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

	/**
	 * 绘制文字工具
	 * @ignore 生成方法时不对外公开
	 * @param {Object} handler 事件句柄
	 * @param {JSON} options 配置项
	 * @param {Function} [options.onComplete(cPoint, gPoint)] 完成回调 可选
	 * @param {Function} [options.onError(message)] 错误回到 可选
	 */
	_sketchDrawLabel(handler, options) {
		let _self = this;
		/* 注册鼠标左键点击事件 */
		this._registerLeftClickEvent(handler, function(event) {
			/* 识别屏幕位置 */
			let loc = _self._transfromFromScreenPoint(event.position);
			if (!Cesium.defined(loc.sLocation)) return;

			let entityParam = DrawPoint.initEditPropertyParams();
			entityParam.label.font = entityParam.label.fontSize + "px " + entityParam.label.font;
			entityParam.label.pixelOffset = {
				x: entityParam.label.pixelOffsetX,
				y: entityParam.label.pixelOffsetY
			}

			/* 绘制文字 */
			_self._pointObject.addLabel(loc.sLocation, {
				label: entityParam.label
			}).then((entity) => {
				_self._entities.push(entity.id);

				entityParam = DrawPoint.initEditPropertyParams();

				_self._drawEntity = entity;
				/* 挂接参数到实体上 */
				_self._drawEntity.setParams(entityParam);
				/* 设置实体类型 */
				_self._drawEntity.setEntityType(DrawPoint.DrawType.Label);

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

				/* 干掉事件句柄 释放资源 */
				_self._clearEvent(handler);
				/* 监听输出 */
				if (options.onComplete) options.onComplete(loc.sLocation, loc.gLocation);

			});
		})
	},

	/**
	 * 绘制点工具
	 * @ignore 生成方法时不对外公开
	 * @param {Object} handler 事件句柄
	 * @param {JSON} options 配置项
	 * @param {Function} [options.onComplete(cPoint, gPoint)] 完成回调 可选
	 * @param {Function} [options.onError(message)] 错误回到 可选
	 */
	_sketchDrawPoint(handler, options) {
		let _self = this;
		/* 注册鼠标左键点击事件 */
		this._registerLeftClickEvent(handler, function(event) {
			/* 识别屏幕位置 */
			let loc = _self._transfromFromScreenPoint(event.position);
			if (!Cesium.defined(loc.sLocation)) return;

			let entityParam = DrawPoint.initEditPropertyParams();

			/* 绘制文字 */
			_self._pointObject.addPoint(loc.sLocation, {
				point: entityParam.point
			}).then((entity) => {
				_self._entities.push(entity.id);

				entityParam = DrawPoint.initEditPropertyParams();

				_self._drawEntity = entity;
				/* 挂接参数到实体上 */
				_self._drawEntity.setParams(entityParam);
				/* 设置实体类型 */
				_self._drawEntity.setEntityType(DrawPoint.DrawType.Point);

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

				/* 干掉事件句柄 释放资源 */
				_self._clearEvent(handler);
				/* 监听输出 */
				if (options.onComplete) options.onComplete(loc.sLocation, loc.gLocation);

			});
		})
	},

	/**
	 * 绘制点及文字工具
	 * @ignore 生成方法时不对外公开
	 * @param {Object} handler 事件句柄
	 * @param {JSON} options 配置项
	 * @param {Function} [options.onComplete(cPoint, gPoint)] 完成回调 可选
	 * @param {Function} [options.onError(message)] 错误回到 可选
	 */
	_sketchDrawPoint2Label(handler, options) {
		let _self = this;
		/* 注册鼠标左键点击事件 */
		this._registerLeftClickEvent(handler, function(event) {
			/* 识别屏幕位置 */
			let loc = _self._transfromFromScreenPoint(event.position);
			if (!Cesium.defined(loc.sLocation)) return;

			let entityParam = DrawPoint.initEditPropertyParams();
			entityParam.label.font = entityParam.label.fontSize + "px " + entityParam.label.font;
			entityParam.label.pixelOffset = {
				x: entityParam.label.pixelOffsetX,
				y: entityParam.label.pixelOffsetY - 10
			}

			/* 绘制文字 */
			_self._pointObject.addPoint(loc.sLocation, {
				point: entityParam.point,
				label: entityParam.label
			}).then((entity) => {
				_self._entities.push(entity.id);

				entityParam = DrawPoint.initEditPropertyParams();
				entityParam.label.pixelOffsetY = -10;

				_self._drawEntity = entity;
				/* 挂接参数到实体上 */
				_self._drawEntity.setParams(entityParam);
				/* 设置实体类型 */
				_self._drawEntity.setEntityType(DrawPoint.DrawType.Point2Label);

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

				/* 干掉事件句柄 释放资源 */
				_self._clearEvent(handler);
				/* 监听输出 */
				if (options.onComplete) options.onComplete(loc.sLocation, loc.gLocation);
			});
		})
	},

	/**
	 * 绘制广告牌工具
	 * @ignore 生成方法时不对外公开
	 * @param {Object} handler 事件句柄
	 * @param {JSON} options 配置项
	 * @param {Function} [options.onComplete(cPoint, gPoint)] 完成回调 可选
	 * @param {Function} [options.onError(message)] 错误回到 可选
	 */
	_sketchDrawBillboard(handler, options) {
		let _self = this;
		/* 注册鼠标左键点击事件 */
		this._registerLeftClickEvent(handler, function(event) {
			/* 识别屏幕位置 */
			let loc = _self._transfromFromScreenPoint(event.position);
			if (!Cesium.defined(loc.sLocation)) return;

			let entityParam = DrawPoint.initEditPropertyParams();

			/* 绘制文字 */
			_self._pointObject.addBillboard(loc.sLocation, {
				billboard: entityParam.billboard
			}).then((entity) => {
				_self._entities.push(entity.id);

				entityParam = DrawPoint.initEditPropertyParams();
				entityParam.label.pixelOffsetY = -50;

				_self._drawEntity = entity;
				/* 挂接参数到实体上 */
				_self._drawEntity.setParams(entityParam);
				/* 设置实体类型 */
				_self._drawEntity.setEntityType(DrawPoint.DrawType.Billboard);

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

				/* 干掉事件句柄 释放资源 */
				_self._clearEvent(handler);
				/* 监听输出 */
				if (options.onComplete) options.onComplete(loc.sLocation, loc.gLocation);
			});
		})
	},

	/**
	 * 绘制广告牌及文字工具
	 * @ignore 生成方法时不对外公开
	 * @param {Object} handler 事件句柄
	 * @param {JSON} options 配置项
	 * @param {Function} [options.onComplete(cPoint, gPoint)] 完成回调 可选
	 * @param {Function} [options.onError(message)] 错误回到 可选
	 */
	_sketchDrawBillboard2Label(handler, options) {
		let _self = this;
		/* 注册鼠标左键点击事件 */
		this._registerLeftClickEvent(handler, function(event) {
			/* 识别屏幕位置 */
			let loc = _self._transfromFromScreenPoint(event.position);
			if (!Cesium.defined(loc.sLocation)) return;

			let entityParam = DrawPoint.initEditPropertyParams();
			entityParam.label.font = entityParam.label.fontSize + "px " + entityParam.label.font;
			entityParam.label.pixelOffset = {
				x: entityParam.label.pixelOffsetX,
				y: entityParam.label.pixelOffsetY - 50
			}

			/* 绘制文字 */
			_self._pointObject.addBillboard(loc.sLocation, {
				billboard: entityParam.billboard,
				label: entityParam.label
			}).then((entity) => {
				_self._entities.push(entity.id);

				entityParam = DrawPoint.initEditPropertyParams();
				entityParam.label.pixelOffsetY = -50;

				_self._drawEntity = entity;
				/* 挂接参数到实体上 */
				_self._drawEntity.setParams(entityParam);
				/* 设置实体类型 */
				_self._drawEntity.setEntityType(DrawPoint.DrawType.Billboard2Label);

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

				/* 干掉事件句柄 释放资源 */
				_self._clearEvent(handler);
				/* 监听输出 */
				if (options.onComplete) options.onComplete(loc.sLocation, loc.gLocation);
			});
		})
	},

	/**
	 * gltf
	 * @ignore 生成方法时不对外公开
	 * @param {Object} handler 事件句柄
	 * @param {JSON} options 配置项
	 * @param {Function} [options.onComplete(cPoint, gPoint)] 完成回调 可选
	 * @param {Function} [options.onError(message)] 错误回到 可选
	 */
	_sketchDrawModel(handler, options) {
		let _self = this;
		/* 注册鼠标左键点击事件 */
		this._registerLeftClickEvent(handler, function(event) {
			/* 识别屏幕位置 */
			let loc = _self._transfromFromScreenPoint(event.position);
			if (!Cesium.defined(loc.sLocation)) return;

			let entityParam = DrawPoint.initEditPropertyParams();

			/* 绘制文字 */
			_self._pointObject.addModel(loc.sLocation, {
				model: entityParam.model
			}).then((entity) => {
				_self._entities.push(entity.id);

				entityParam = DrawPoint.initEditPropertyParams();

				_self._drawEntity = entity;
				/* 挂接参数到实体上 */
				_self._drawEntity.setParams(entityParam);
				/* 设置实体类型 */
				_self._drawEntity.setEntityType(DrawPoint.DrawType.Model);

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

				/* 干掉事件句柄 释放资源 */
				_self._clearEvent(handler);
				/* 监听输出 */
				if (options.onComplete) options.onComplete(loc.sLocation, loc.gLocation);
			});
		})
	},


	/**
	 * 更新当前编辑的实体属性
	 * @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.getEntityType();
		if (editEntityType === undefined) return;

		if (editEntityType === DrawPoint.DrawType.Label) {
			this._updateLabelProperty(params);
		} else if (editEntityType === DrawPoint.DrawType.Point) {
			this._updatePointProperty(params);
		} else if (editEntityType === DrawPoint.DrawType.Point2Label) {
			this._updatePoint2LabelProperty(params);
		} else if (editEntityType === DrawPoint.DrawType.Billboard) {
			this._updateBillboardProperty(params);
		} else if (editEntityType === DrawPoint.DrawType.Billboard2Label) {
			this._updateBillboard2LabelProperty(params);
		} else if (editEntityType === DrawPoint.DrawType.Model) {
			this._updateModelProperty(params);
		}
	},

	/**
	 * 更新文字的属性
	 * @ignore 不公开方法
	 * @param {Object} params
	 */
	_updateLabelProperty(params) {

		let label = params.label;
		
		this._editEntity.label.text=label.text;

		//组合字体
		// /*font:font-style font-weight font-size/line-height font-family;*/
		// font:italic bolder 20px/10px Arial;
		let font = "";
		if (label.italic) {
			font += 'italic '
		}
		if (label.bolder) {
			font += ' bolder '
		}
		font += label.fontSize + "px " + label.font;
		this._editEntity.label.font = font; //字体样式
		this._editEntity.label.fillColor = Cesium.Color.fromCssColorString(label.fillColor);

		this._editEntity.label.outlineColor = Cesium.Color.fromCssColorString(label.outlineColor);
		this._editEntity.label.outlineWidth = parseFloat(label.outlineWidth);

		this._editEntity.label.showBackground = label.showBackground;
		this._editEntity.label.backgroundColor = Cesium.Color.fromCssColorString(label.backgroundColor);
		this._editEntity.label.backgroundPadding = new Cesium.Cartesian2(parseFloat(label.backgroundPadding), parseFloat(label.backgroundPadding));

		this._editEntity.label.pixelOffset = new Cesium.Cartesian2(parseFloat(label.pixelOffsetX), parseFloat(label.pixelOffsetY));

		/* 重新关联实体的属性 */
		this._editEntity.setParams(params);
	},

	/**
	 * 更新点的属性
	 * @ignore 不公开方法
	 * @param {Object} params
	 */
	_updatePointProperty(params) {
		let point = params.point;
		this._editEntity.point.color = Cesium.Color.fromCssColorString(point.color);
		this._editEntity.point.pixelSize = parseFloat(point.pixelSize);
		this._editEntity.point.outlineColor = Cesium.Color.fromCssColorString(point.outlineColor);
		this._editEntity.point.outlineWidth = parseFloat(point.outlineWidth);

		/* 重新关联实体的属性 */
		this._editEntity.setParams(params);
	},

	/**
	 * 更新点及文字的属性
	 * @ignore 不公开方法
	 * @param {Object} params
	 */
	_updatePoint2LabelProperty(params) {

		let label = params.label;
		
		this._editEntity.label.text=label.text;

		let font = "";
		if (label.italic) {
			font += 'italic '
		}
		if (label.bolder) {
			font += ' bolder '
		}
		font += label.fontSize + "px " + label.font;
		this._editEntity.label.font = font; //字体样式

		this._editEntity.label.fillColor = Cesium.Color.fromCssColorString(label.fillColor);

		this._editEntity.label.outlineColor = Cesium.Color.fromCssColorString(label.outlineColor);
		this._editEntity.label.outlineWidth = parseFloat(label.outlineWidth);

		this._editEntity.label.showBackground = label.showBackground;
		this._editEntity.label.backgroundColor = Cesium.Color.fromCssColorString(label.backgroundColor);
		this._editEntity.label.backgroundPadding = new Cesium.Cartesian2(parseFloat(label.backgroundPadding), parseFloat(label.backgroundPadding));

		let point = params.point;
		this._editEntity.point.color = Cesium.Color.fromCssColorString(point.color);
		this._editEntity.point.pixelSize = parseFloat(point.pixelSize);

		this._editEntity.point.outlineColor = Cesium.Color.fromCssColorString(point.outlineColor);
		this._editEntity.point.outlineWidth = parseFloat(point.outlineWidth);

		/* 重新关联实体的属性 */
		this._editEntity.setParams(params);
	},

	/**
	 * 更新广告牌的属性
	 * @ignore 不公开方法
	 * @param {Object} params
	 */
	_updateBillboardProperty(params) {
		let billboard = params.billboard;

		this._editEntity.billboard.image = billboard.imgUrl;
		this._editEntity.billboard.scale = billboard.scale;

		/* 重新关联实体的属性 */
		this._editEntity.setParams(params);
	},

	/**
	 * 更新广告牌及文字的属性
	 * @ignore 不公开方法
	 * @param {Object} params
	 */
	_updateBillboard2LabelProperty(params) {

		let label = params.label;
		
		this._editEntity.label.text=label.text;
		
		let font = "";
		if (label.italic) {
			font += 'italic '
		}
		if (label.bolder) {
			font += ' bolder '
		}
		font += label.fontSize + "px " + label.font;
		this._editEntity.label.font = font; //字体样式
		this._editEntity.label.fillColor = Cesium.Color.fromCssColorString(label.fillColor);

		this._editEntity.label.outlineColor = Cesium.Color.fromCssColorString(label.outlineColor);
		this._editEntity.label.outlineWidth = parseFloat(label.outlineWidth);

		this._editEntity.label.showBackground = label.showBackground;
		this._editEntity.label.backgroundColor = Cesium.Color.fromCssColorString(label.backgroundColor);
		this._editEntity.label.backgroundPadding = new Cesium.Cartesian2(parseFloat(label.backgroundPadding), parseFloat(label.backgroundPadding));

		this._editEntity.label.pixelOffset = new Cesium.Cartesian2(parseFloat(label.pixelOffsetX), parseFloat(label.pixelOffsetY));

		let billboard = params.billboard;
		this._editEntity.billboard.image = billboard.imgUrl;
		this._editEntity.billboard.scale = billboard.scale;

		/* 重新关联实体的属性 */
		this._editEntity.setParams(params);
	},

});

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

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

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

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

		/* 注册统一事件 用于单击拾取实体 */
		let handler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
		this._registerLeftClickEvent(handler, function(event) {
			/* 只要点击 就清除选中状态 */
			_self._unActivateEdit();
			let feature = _self._viewer.scene.pick(event.position);
			if (feature !== undefined && feature.id instanceof Cesium.Entity) {
				let editEntityType = feature.id.getEntityType();
				if (editEntityType === DrawPoint.DrawType.Label ||
					editEntityType === DrawPoint.DrawType.Point ||
					editEntityType === DrawPoint.DrawType.Point2Label ||
					editEntityType === DrawPoint.DrawType.Billboard ||
					editEntityType === DrawPoint.DrawType.Billboard2Label ||
					editEntityType === DrawPoint.DrawType.Model) {
						
					feature.id.setIsEdit(true);
					_self._sendShowPropertyDialog(feature.id);
				}
			}
		});

		this._registerMouseMoveEvent(handler, function(event) {
			let toolTip = "单击修改属性，单击拖动修改位置";

			let feature = _self._viewer.scene.pick(event.endPosition);
			if (feature !== undefined && feature.id instanceof Cesium.Entity) {
				let editEntityType = feature.id.getEntityType();
				if (editEntityType === DrawPoint.DrawType.Label ||
					editEntityType === DrawPoint.DrawType.Point ||
					editEntityType === DrawPoint.DrawType.Point2Label ||
					editEntityType === DrawPoint.DrawType.Billboard ||
					editEntityType === DrawPoint.DrawType.Billboard2Label ||
					editEntityType === DrawPoint.DrawType.Model) {

					if (feature.id.getIsEdit()) {
						toolTip = "单击修改属性，单击拖动修改位置";
						CreateRemindertip(toolTip, event.endPosition, true);
					} else {
						toolTip = "单击修改属性";
						CreateRemindertip(toolTip, event.endPosition, true);
					}
				}
			} else {
				CreateRemindertip(toolTip, event.endPosition, false);
			}
		});
	},

	/**
	 * 取消实体编辑激活状态
	 * @ignore 生成方法时不对外公开
	 */
	_unActivateEdit: function() {
		/* 清理事件句柄 */
		if (this._sketchEditHandler != undefined) {
			this._sketchEditHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);
			this._sketchEditHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);
			this._sketchEditHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
		}
		this._editEntity = undefined;

		for (var i = 0; i < this._entities.length; i++) {
			var getById = this._viewer.entities.getById(this._entities[i]);
			if (getById) {
				getById.setIsEdit(false);
			}
		}

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


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

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

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

			/* 更改测试 */
			_self._openPropertyEditDialog(editProperty,
				//编辑回调
				function(params) {
					_self.updateEditEntityProperty(params);
				},
				//移除回调
				function() {
					_self._viewer.entities.remove(entity);
					_self._editEntity = undefined;
				}
			);
		}

		this._activeteNormalEdit(entity);
	},

	/**
	 * 激活编辑单实体
	 * @ignore 生成方法时不对外公开
	 * @param {Cesium.Entity} editEntity 编辑实体
	 */
	_activeteNormalEdit: function(editEntity) {
		let _self = this;

		/* 获取编辑类型 */
		let entityType = editEntity.getEntityType();
		/* 赋值可编辑对象 */
		this._editEntity = editEntity;

		/* 创建事件句柄 */
		if (this._sketchEditHandler === undefined) {
			this._sketchEditHandler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
		}
		/* 注册鼠标左键按下事件 */
		this._registerLeftDownEvent(this._sketchEditHandler, function(event) {
			const pickInfo = _self._viewer.scene.pick(event.position);
			console.log(pickInfo)

			if (!pickInfo) {
				return;
			}

			console.log("按下")

			// 如果点击空白区域，则不往下执行
			_self._viewer.scene.screenSpaceCameraController.enableRotate = false; // 将相机锁定，不然后续移动实体时相机也会动

			/* 注册鼠标移动事件 */
			_self._registerMouseMoveEvent(_self._sketchEditHandler, function(event) {
				console.log("移动")
				const position = event.endPosition; // event有startPosition与endPosition两个属性，即移动前后的位置信息：Cartesian2对象
				const cartesian = _self._viewer.scene.globe.pick(_self._viewer.camera.getPickRay(position), _self._viewer.scene); //将Cartesian2转为Cartesian3
				const selectedEntity = _self._editEntity; // 实体
				if (!selectedEntity) {
					return false;
				}

				//注意需要赋值三维坐标，// 更新实体位置为当前鼠标位置
				selectedEntity.position = cartesian;

			});
			/* 注册鼠标抬起事件 */
			_self._registerLeftUpEvent(_self._sketchEditHandler, function(event) {
				_self._sketchEditHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 解除viewer的MOUSE_MOVE事件监听器
				_self._sketchEditHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP); // 解除viewer的LEFT_UP事件监听器
				_self._viewer.scene.screenSpaceCameraController.enableRotate = true; // 取消相机锁定
				console.log("抬起")
			});
		});
	},

	/**
	 * 更新模型的属性
	 * @ignore 不公开方法
	 * @param {Object} params
	 */
	_updateModelProperty(params) {

		let model = params.model;
		this._editEntity.model.uri = model.url;

		this._editEntity.model.color = Cesium.Color.WHITE.withAlpha(model.alpha);

		this._editEntity.model.minimumPixelSize = model.minimumPixelSize;
		this._editEntity.model.maximumScale = model.maximumScale;

		this._editEntity.model.silhouetteSize = model.silhouetteSize;
		this._editEntity.model.silhouetteColor = new Cesium.Color.fromCssColorString(model.silhouetteColor);

		//弧度的航向分量。
		var heading = Cesium.Math.toRadians(model.heading);
		//弧度的螺距分量。
		var pitch = model.pitch;
		//滚动分量（以弧度为单位）
		var roll = model.roll;
		//HeadingPitchRoll旋转表示为航向，俯仰和滚动。围绕Z轴。节距是绕负y轴的旋转。滚动是关于正x轴。
		var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
		// this._editEntity.orientation = Cesium.Transforms.headingPitchRollQuaternion(this._editEntity.position, hpr); // 模型方向

		/* 重新关联实体的属性 */
		this._editEntity.setParams(params);
	},
})


/**
 * 属性编辑相关（UI）
 */
Object.assign(DrawPoint.prototype, {

	/**
	 * 打开属性编辑窗口
	 * @ignore
	 * @param {JSON} params 参数
	 * @param {Function} callEdit 编辑回调
	 * @param {Function} callRemove 移除回调
	 */
	_openPropertyEditDialog: function(params, callEdit, callRemove) {

		this._editPropertyDialogDomId = 'dialog-property-dom-point';
		this._registerDOMPropertyEdit = 'dialog-edit-property-point';

		/* 获取一个属性编辑组件 */
		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);
		}
	},
})

/**
 * 绘制类型
 */
DrawPoint.DrawType = Object.freeze({
	Model: 'model', //模型
	Label: 'label', //文字
	Point: 'point', //点
	Point2Label: 'point2Label', //点及文字
	Billboard: 'billboard', //广告牌
	Billboard2Label: 'billboard2Label', //广告牌及文字

})


export default DrawPoint;