/* 引入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;