diff --git a/src/Obj/Base/CurvelineObject/_element.js b/src/Obj/Base/CurvelineObject/_element.js index cc8b89a..24d6837 100644 --- a/src/Obj/Base/CurvelineObject/_element.js +++ b/src/Obj/Base/CurvelineObject/_element.js @@ -65,7 +65,7 @@ function html(that) { 线条颜色
-
+
线条宽度
@@ -73,7 +73,7 @@ function html(that) {
-
+
线条形式
@@ -83,7 +83,7 @@ function html(that) { 线段缓冲
-
+
缓冲宽度
@@ -91,21 +91,43 @@ function html(that) {
-
+
缓冲颜色
+
+
+ 动画顺向 + +
+
+ 流动速率 +
+ + +
+
+
+ 间距 +
+ + 倍 + +
+
+
首尾相连
-
+
-
+
+ ${labelStyleElm1()} diff --git a/src/Obj/Base/CurvelineObject/index.js b/src/Obj/Base/CurvelineObject/index.js index 0d61686..fc8b569 100644 --- a/src/Obj/Base/CurvelineObject/index.js +++ b/src/Obj/Base/CurvelineObject/index.js @@ -11,7 +11,7 @@ import LabelObject from '../LabelObject' import MouseEvent from '../../../Event/index' import MouseTip from '../../../MouseTip' import Controller from '../../../Controller/index' -import { syncData } from '../../../Global/MultiViewportMode' +import { syncData, get3DView } from '../../../Global/MultiViewportMode' import { legp } from '../../Element/datalist' import { getFontList, getFontFamilyName } from '../../Element/fontSelect' import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen' @@ -56,6 +56,10 @@ class CurvelineObject extends Base { this.options.type = options.type ? Number(options.type) : 0 this.options['nose-to-tail'] = options['nose-to-tail'] || false this.options.extend = options.extend || false + this.options.rotate = options.rotate || true + this.options.space = options.space || 1 + this.options.speed = options.speed || 10 + this.options.dashSize = options.dashSize || 0.03 this.options['length-unit'] = options['length-unit'] || '米' this.options['fit-length-unit'] = options['fit-length-unit'] || '米' this.options['words-name'] = options['words-name'] || '空间长度' @@ -146,7 +150,8 @@ class CurvelineObject extends Base { } set color(v) { this.options.color = v || '#ff0000' - this.entity.polyline.material = this.getMaterial(v, this.options.type) + // this.entity.polyline.material = this.getMaterial(v, this.options.type) + this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) if (this._elms.color) { this._elms.color.forEach((item, i) => { let colorPicker = new YJColorPicker({ @@ -167,6 +172,48 @@ class CurvelineObject extends Base { }) } } + get speed() { + return this.options.speed + } + + set speed(v) { + // this.options.speed = v + this.options.speed = v !== 0 ? Math.pow(v, -1) * 100 : 0 + this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) + } + get dashSize() { + return this.options.dashSize + } + + set dashSize(v) { + this.options.dashSize = v + this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) + } + + get rotate() { + return this.options.rotate + } + + set rotate(v) { + this.options.rotate = v + CurvelineObject.closeNodeEdit(this) + this._elms.rotate && + this._elms.rotate.forEach(item => { + item.checked = v + }) + + this.options.rotate = v + this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) + } + + get space() { + return this.options.space + } + + set space(v) { + this.options.space = v + this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) + } get length() { return this.options.length @@ -299,19 +346,82 @@ class CurvelineObject extends Base { set lineType(v) { let lineTypeData = [ { - name: '实线', + name: '实线', value: '实线', - key: 0 + key: 0, + icon: 'line' }, { - name: '虚线', + name: '虚线', value: '虚线', - key: 1 + key: 1, + icon: 'dash-line' }, { - name: '泛光', + name: '泛光', value: '泛光', - key: 2 + key: 2, + icon: 'light-line' + }, + { + name: '尾迹光线', + value: '尾迹光线', + key: 3, + icon: 'tail-line' + }, + { + name: '多尾迹光线', + value: '多尾迹光线', + key: 4, + icon: 'mult-tail-line' + }, + { + name: '流动虚线1', + value: '流动虚线1', + key: 5, + icon: 'flow-dash-line1' + }, + { + name: '流动虚线2', + value: '流动虚线2', + key: 6, + icon: 'flow-dash-line2' + }, + { + name: '流动箭头1', + value: '流动箭头1', + key: 7, + icon: 'pic-line1' + }, + { + name: '流动箭头2', + value: '流动箭头2', + key: 8, + icon: 'pic-line2' + }, + { + name: '流动箭头3', + value: '流动箭头3', + key: 9, + icon: 'pic-line3' + }, + { + name: '流动箭头4', + value: '流动箭头4', + key: 10, + icon: 'pic-line4' + }, + { + name: '流动箭头5', + value: '流动箭头5', + key: 11, + icon: 'pic-line5' + }, + { + name: '流动箭头6', + value: '流动箭头6', + key: 12, + icon: 'pic-line6' } ] this.options.type = Number(v) @@ -320,6 +430,18 @@ class CurvelineObject extends Base { this._elms.lineType && this._elms.lineType.forEach(item => { item.value = lineTypeData[i].value + if (2 < item.value && item.value < 13) {//贴图参数 + document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'flex') + } else { + document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'none') + } + if (2 < item.value && item.value < 5) {//尾迹参数 + document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'none') + document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'none') + } else { + document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'flex') + document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'flex') + } }) break } @@ -328,7 +450,9 @@ class CurvelineObject extends Base { this.entity.polyline && (this.entity.polyline.material = this.getMaterial( this.options.color, - this.options.type + this.options.type, + this.entity, + this.options )) } get noseToTail() { @@ -1212,6 +1336,16 @@ class CurvelineObject extends Base { zIndex: that.sdk._entityZIndex } }) + + that.entity.polyline.oriWidth = that.options.width + that.judgeLine(that.entity, that.options) + that.entity.polyline.material = that.getMaterial( + that.options.color, + that.options.type, + that.entity, + that.options + ) + that.sdk._entityZIndex++ CurvelineObject.createLabel(that) // that.entity.polyline.positionsLngLat = positions @@ -1252,7 +1386,130 @@ class CurvelineObject extends Base { let scene = that.sdk.viewer.scene } + judgeLine(entity, newParam) { + if (!entity.polyline.oriRepeat) { + let param = { + color: newParam.color, + image: this.getSourceRootPath() + `/img/arrow/1.png`, + space: newParam.space, + speed: newParam.speed + } + param.speed = newParam.rotate ? param.speed : 0 - param.speed + + const canvasEle = document.createElement('canvas'); + const ctx = canvasEle.getContext('2d') + const myImg = new Image() + // myImg.src = that.getSourceRootPath() + '/img/arrow/1.png' + myImg.src = param.image + let that = this + myImg.onload = function () { + canvasEle.width = myImg.width * (param.space + 1) + canvasEle.height = myImg.height + + let oriRepeat = that.getSceenLine(entity, param, canvasEle) + oriRepeat && (entity.polyline.oriRepeat = oriRepeat) + + + var positionProperty = entity.polyline.positions; + var positions = positionProperty.getValue(that.sdk.viewer.clock.currentTime); + + if (!Cesium.defined(positions)) { + return new Cesium.Cartesian2(1.0, 1.0); + // return 1.0; + } + + var distance = 0; + for (var i = 0; i < positions.length - 1; ++i) { + distance += Cesium.Cartesian3.distance(positions[i], positions[i + 1]); + } + + var repeatX = distance / entity.polyline.width.getValue(); + // 根据地图缩放程度调整repeatX + var cameraHeight = that.sdk.viewer.camera.positionCartographic.height; + var boundingSphere = new Cesium.BoundingSphere( + new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标 + 500000 // 半径（距离） + ); + + // 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率） + var drawingBufferWidth = that.sdk.viewer.canvas.clientWidth; + var drawingBufferHeight = that.sdk.viewer.canvas.clientHeight; + + // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小 + var groundResolution = that.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight) + repeatX *= groundResolution / cameraHeight / (param.space * (canvasEle.width / canvasEle.height * 5) + 1); + // if (entity.polyline.material.oriRepeat) { + + if (that.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) { + let speed = repeatX / entity.polyline.oriRepeat + entity.polyline.oriSpeed = speed + entity.polyline.oriRepeatX = repeatX + } else { + let sdk3d = get3DView() + let sdk3dEntity = sdk3d.viewer.entities.getById(that.options.id) + entity.polyline.oriSpeed = sdk3dEntity.polyline.oriSpeed + entity.polyline.oriRepeatX = sdk3dEntity.polyline.oriRepeatX + } + } + + } + } + /**获取当前满屏横线速度 */ + getSceenLine(entity, options, canvasEle) { + let point1 = new Cesium.Cartesian2(0, this.sdk.viewer.canvas.clientHeight) + let point2 = new Cesium.Cartesian2(this.sdk.viewer.canvas.clientWidth / 2, this.sdk.viewer.canvas.clientHeight) + // var cartesian1 = this.sdk.viewer.scene.pickPosition(point1) + // var cartesian2 = this.sdk.viewer.scene.pickPosition(point2) + + let ray = this.sdk.viewer.camera.getPickRay(point1); + let cartesian1 = this.sdk.viewer.scene.globe.pick(ray, this.sdk.viewer.scene); + + let ray2 = this.sdk.viewer.camera.getPickRay(point2); + let cartesian2 = this.sdk.viewer.scene.globe.pick(ray2, this.sdk.viewer.scene); + // if (!cartesian1 || !cartesian2) { + // let ray = this.sdk.viewer.camera.getPickRay(point1); + // cartesian1 = this.sdk.viewer.scene.globe.pick(ray, this.sdk.viewer.scene); + + // let ray2 = this.sdk.viewer.camera.getPickRay(point2); + // cartesian2 = this.sdk.viewer.scene.globe.pick(ray2, this.sdk.viewer.scene); + // } + if (cartesian1 && cartesian2) { + + + var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2); + + var repeatX = distance / entity.polyline.width.getValue(); + // 根据地图缩放程度调整repeatX + var cameraHeight = this.sdk.viewer.camera.positionCartographic.height; + var boundingSphere = new Cesium.BoundingSphere( + new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标 + 500000 // 半径（距离） + ); + + + // 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率） + var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth; + var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight; + + // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小 + var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight) + // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1); + if (groundResolution > 700) { + repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1); + } else { + repeatX = undefined; + } + + if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) { + return repeatX + } else { + let sdk3d = get3DView() + let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id) + return sdk3dEntity.polyline.oriRepeatX + } + } + } /** * 编辑框 * @param {boolean} state true打开，false关闭 @@ -1327,6 +1584,15 @@ class CurvelineObject extends Base { this.attributeType = this.options.attributeType // this.attributeCamera = this.options.attribute.camera.content // this.attributeGoods = this.options.attribute.goods.content + function tabClick(e) { + if (e === '2' || e === 2) {//点击线条样式 + if (2 < _this.options.type && _this.options.type < 13) {//贴图参数 + document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'flex') + } else { + document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'none') + } + } + } // 创建标签页 let tabsElm = new cy_tabs( @@ -1590,19 +1856,82 @@ class CurvelineObject extends Base { let lineTypeData = [ { - name: '实线', + name: '实线', value: '实线', - key: 0 + key: 0, + icon: 'line' }, { - name: '虚线', + name: '虚线', value: '虚线', - key: 1 + key: 1, + icon: 'dash-line' }, { - name: '泛光', + name: '泛光', value: '泛光', - key: 2 + key: 2, + icon: 'light-line' + }, + { + name: '尾迹光线', + value: '尾迹光线', + key: 3, + icon: 'tail-line' + }, + { + name: '多尾迹光线', + value: '多尾迹光线', + key: 4, + icon: 'mult-tail-line' + }, + { + name: '流动虚线1', + value: '流动虚线1', + key: 5, + icon: 'flow-dash-line1' + }, + { + name: '流动虚线2', + value: '流动虚线2', + key: 6, + icon: 'flow-dash-line2' + }, + { + name: '流动箭头1', + value: '流动箭头1', + key: 7, + icon: 'pic-line1' + }, + { + name: '流动箭头2', + value: '流动箭头2', + key: 8, + icon: 'pic-line2' + }, + { + name: '流动箭头3', + value: '流动箭头3', + key: 9, + icon: 'pic-line3' + }, + { + name: '流动箭头4', + value: '流动箭头4', + key: 10, + icon: 'pic-line4' + }, + { + name: '流动箭头5', + value: '流动箭头5', + key: 11, + icon: 'pic-line5' + }, + { + name: '流动箭头6', + value: '流动箭头6', + key: 12, + icon: 'pic-line6' } ] let lineTypeDataLegpObject = legp( @@ -1613,6 +1942,11 @@ class CurvelineObject extends Base { ) if (lineTypeDataLegpObject) { lineTypeDataLegpObject.legp_search(lineTypeData) + + let iActiveElm2 = document.createElement('i') + iActiveElm2.className = 'icon icon-active' + this._DialogObject._element.content.getElementsByClassName('input-select-line-type')[0].getElementsByClassName('cy_datalist')[0].appendChild(iActiveElm2) + let lineTypeDataLegpElm = this._DialogObject._element.content .getElementsByClassName('input-select-line-type')[0] .getElementsByTagName('input')[0] @@ -1621,6 +1955,7 @@ class CurvelineObject extends Base { if (lineTypeData[i].key === this.options.type) { lineTypeDataLegpObject.legp_searchActive(lineTypeData[i].value) lineTypeDataLegpElm.value = lineTypeData[i].value + iActiveElm2.className = `icon icon-active ${lineTypeData[i].icon}` break } } @@ -1628,6 +1963,21 @@ class CurvelineObject extends Base { for (let i = 0; i < lineTypeData.length; i++) { if (lineTypeData[i].value === lineTypeDataLegpElm.value) { this.lineType = lineTypeData[i].key + iActiveElm2.className = `icon icon-active ${lineTypeData[i].icon}` + + //控制参数显隐 + if (2 < this.lineType && this.lineType < 13) {//贴图参数 + document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'flex') + } else { + document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'none') + } + if (2 < this.lineType && this.lineType < 5) {//尾迹参数 + document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'none') + document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'none') + } else { + document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'flex') + document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'flex') + } break } } @@ -2111,6 +2461,10 @@ class CurvelineObject extends Base { this.attributeVr = this.options.attribute.vr.content this.attributeCamera = this.options.attribute.camera.content this.attributeGoods = this.options.attribute.goods.content + this.rotate = this.originalOptions.rotate + this.speed = this.originalOptions.speed + this.dashSize = this.originalOptions.dashSize + this.space = this.originalOptions.space this.cameraSelect && this.cameraSelect() this.goodsSelect && this.goodsSelect()