From 5f383f661f3cba4f473827086255b06572caad7a Mon Sep 17 00:00:00 2001 From: zh <972939975@qq.com> Date: Thu, 28 Aug 2025 10:02:58 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B4=B4=E5=9C=B0svg=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E7=82=B9=E6=94=B9=E4=B8=BA=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Obj/Base/GroundSvg/index.js | 248 +++++++++++++++++++++----------- 1 file changed, 164 insertions(+), 84 deletions(-) diff --git a/src/Obj/Base/GroundSvg/index.js b/src/Obj/Base/GroundSvg/index.js index c5e94e2..d9ce395 100644 --- a/src/Obj/Base/GroundSvg/index.js +++ b/src/Obj/Base/GroundSvg/index.js @@ -1215,9 +1215,12 @@ class GroundSvg extends Base { * @param {boolean} status=false 状态 */ drag(status, cd) { - if (!this.#loaded || !this.sdk || !this.sdk.viewer) { + if (!this.#loaded || !this.sdk || !this.sdk.viewer || !this.entity || !this.entity.values || this.entity.values.length == 0) { return } + let greenImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA+0lEQVR4AZSTPQ7CMAyFk0jAFYCRCbgEbHAKBqRyKCoYOAVs5RLAQseKKxQkwntWVCltJdzK+bO/59ZW6kztGX6mi/F7dhiV0ydWzxH2B8ZquIkSAN47bzNAW2vtBKtY2G8ZIyPOMFUJxuX8DF+C8c+SwAonCSSr9SvxaCawogHrQl2aNwOPLKHWoa5N5O5woNZ575cdNBFKrQsdjgLaA7XSRK2gjWMJeVtA40MJOUvgxdHwDQYlZO5r/akRUTqoda/e4wo+xehqKbXSxKJ/3xlvL+oMYEUDgSTAaorBbY1V8yVpYIGb+G9kVtTFi3Vkh4XAFPZHxsjAVdkPAAD//0PYov0AAAAGSURBVAMA5pZjby819WUAAAAASUVORK5CYII=' + let redImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA1klEQVR4AZST0Q2CQBBEF0qhEfjDKvgwwaIk+kEV8oeFSCs4D4+gB4l7ZIfszc7OLXDkFl2zWSnchJcwB5DDlZHcfgwkvkowCmehENYghxuDZuU3AxUeYlvhX7RBu+iWCUSwc70wvlsdeixXwnN5do6tmaRkgiauJKwbDKqEhlhaYcAbjgvedYGBV3yow2A6rPjICQMOjk++V40Y9HvezfR5ZvaUvBNSo6OXCUzJRd2D4I0h9Gz/goiTuj2TsDNayW0zYJWZMQkH667199chh6uCRuVPvAEAAP//mBlPPAAAAAZJREFUAwAzdy+JgzpBHQAAAABJRU5ErkJggg==' + let yellowImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA8ElEQVR4AZyQMY7CQAxFbbe7W7IH2GrJJaCDU1AgwaFAUHAK6OASQAM9UAJtzLxRBikUKMwo1jjf//0oNnk518t/534uZtdTcbidC6fooxZmL3apBdwv7Ym6rV1kqCp/yUwftTDDk3TuZ0D40tJdR4jvCg/e5IkBVWoviQ3uXsWI8c+kNoBqFhhYM7dBbfLBC6yVLl3JPLDGhjN5gY1LzA2AM3c50uQUrJnKWjIPrJVaLjJ5gbWf1n6j6tNPQ2Bg4xK/WrtxCFiFavqsKkZiANT377ZPKv27woM3eZ4BCKS6ll0VmbNhNIo+amGGBy3VAwAA//9///lSAAAABklEQVQDAADzbcvdBag1AAAAAElFTkSuQmCC' this.ismove = false this._isdrag = status if (this.ScreenSpaceEventHandler) { @@ -1298,44 +1301,67 @@ class GroundSvg extends Base { angleH = bearing2 - bearingH if ((angleW > -360 && angleW < -90) || (angleW < 360 && angleW > 90)) { angleW = angleW + 180 - flag=true + flag = true } if ((angleH > -360 && angleH < -90) || (angleH < 360 && angleH > 90)) { angleH = angleH + 180 - flag2=true + flag2 = true } - if(flag && flag2) { - this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#ff0000') - } - else { - if(flag) { - this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#ff0000') - this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a') - } - else if(flag2) { - this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#ff0000') - this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a') - } - else { - this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#ff0000') - this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a') - } - } - + radiansW = (Math.PI / 180) * angleW radiansH = (Math.PI / 180) * angleH // 矩形高度 w = (Math.cos(radiansW) * distance) * 2 h = (Math.cos(radiansH) * distance) * 2 + + if(h<0) { + flag2 = !flag2 + } + if(w<0) { + flag = !flag + } + if (flag && flag2) { + // this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#ff0000') + this.pointEntityCollection.values[1].billboard.image = greenImg + this.pointEntityCollection.values[3].billboard.image = greenImg + this.pointEntityCollection.values[7].billboard.image = greenImg + this.pointEntityCollection.values[9].billboard.image = redImg + } + else { + if (flag) { + // this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a') + this.pointEntityCollection.values[1].billboard.image = greenImg + this.pointEntityCollection.values[3].billboard.image = redImg + this.pointEntityCollection.values[7].billboard.image = greenImg + this.pointEntityCollection.values[9].billboard.image = greenImg + } + else if (flag2) { + // this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a') + this.pointEntityCollection.values[1].billboard.image = greenImg + this.pointEntityCollection.values[3].billboard.image = greenImg + this.pointEntityCollection.values[7].billboard.image = redImg + this.pointEntityCollection.values[9].billboard.image = greenImg + } + else { + // this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a') + this.pointEntityCollection.values[1].billboard.image = redImg + this.pointEntityCollection.values[3].billboard.image = greenImg + this.pointEntityCollection.values[7].billboard.image = greenImg + this.pointEntityCollection.values[9].billboard.image = greenImg + } + } // scaleY值 this.scale.x = Math.abs(w) / 3.5 this.scale.y = Math.abs(h) / 3.5 @@ -1347,12 +1373,16 @@ class GroundSvg extends Base { if ((angleH > -360 && angleH < -90) || (angleH < 360 && angleH > 90)) { angleH = angleH + 180 - this.pointEntityCollection.values[2].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[8].point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pointEntityCollection.values[2].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[8].point.color = Cesium.Color.fromCssColorString('#ff0000') + this.pointEntityCollection.values[2].billboard.image = greenImg + this.pointEntityCollection.values[8].billboard.image = redImg } else { - this.pointEntityCollection.values[2].point.color = Cesium.Color.fromCssColorString('#ff0000') - this.pointEntityCollection.values[8].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[2].point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pointEntityCollection.values[8].point.color = Cesium.Color.fromCssColorString('#00ff0a') + this.pointEntityCollection.values[2].billboard.image = redImg + this.pointEntityCollection.values[8].billboard.image = greenImg } radiansH = (Math.PI / 180) * angleH @@ -1370,37 +1400,11 @@ class GroundSvg extends Base { if ((angleW > -360 && angleW < -90) || (angleW < 360 && angleW > 90)) { angleW = angleW + 180 - flag=true + flag = true } if ((angleH > -360 && angleH < -90) || (angleH < 360 && angleH > 90)) { angleH = angleH + 180 - flag2=true - } - if(flag && flag2) { - this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#ff0000') - this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a') - } - else { - if(flag) { - this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#ff0000') - this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a') - } - else if(flag2) { - this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#ff0000') - } - else { - this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#ff0000') - this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a') - } + flag2 = true } radiansW = (Math.PI / 180) * angleW @@ -1408,6 +1412,56 @@ class GroundSvg extends Base { // 矩形高度 w = (Math.cos(radiansW) * distance) * 2 h = (Math.cos(radiansH) * distance) * 2 + + if(h<0) { + flag2 = !flag2 + } + if(w<0) { + flag = !flag + } + + if (flag && flag2) { + // this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a') + this.pointEntityCollection.values[1].billboard.image = greenImg + this.pointEntityCollection.values[3].billboard.image = greenImg + this.pointEntityCollection.values[7].billboard.image = redImg + this.pointEntityCollection.values[9].billboard.image = greenImg + } + else { + if (flag) { + // this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a') + this.pointEntityCollection.values[1].billboard.image = redImg + this.pointEntityCollection.values[3].billboard.image = greenImg + this.pointEntityCollection.values[7].billboard.image = greenImg + this.pointEntityCollection.values[9].billboard.image = greenImg + } + else if (flag2) { + // this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#ff0000') + this.pointEntityCollection.values[1].billboard.image = greenImg + this.pointEntityCollection.values[3].billboard.image = greenImg + this.pointEntityCollection.values[7].billboard.image = greenImg + this.pointEntityCollection.values[9].billboard.image = redImg + } + else { + // this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a') + this.pointEntityCollection.values[1].billboard.image = greenImg + this.pointEntityCollection.values[3].billboard.image = redImg + this.pointEntityCollection.values[7].billboard.image = greenImg + this.pointEntityCollection.values[9].billboard.image = greenImg + } + } // scaleY值 this.scale.x = Math.abs(w) / 3.5 this.scale.y = Math.abs(h) / 3.5 @@ -1418,12 +1472,16 @@ class GroundSvg extends Base { if ((angleW > -360 && angleW < -90) || (angleW < 360 && angleW > 90)) { angleW = angleW + 180 - this.pointEntityCollection.values[4].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[6].point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pointEntityCollection.values[4].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[6].point.color = Cesium.Color.fromCssColorString('#ff0000') + this.pointEntityCollection.values[4].billboard.image = greenImg + this.pointEntityCollection.values[6].billboard.image = redImg } else { - this.pointEntityCollection.values[6].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[4].point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pointEntityCollection.values[6].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[4].point.color = Cesium.Color.fromCssColorString('#ff0000') + this.pointEntityCollection.values[6].billboard.image = greenImg + this.pointEntityCollection.values[4].billboard.image = redImg } radiansW = (Math.PI / 180) * angleW @@ -1454,12 +1512,16 @@ class GroundSvg extends Base { if ((angleW > -360 && angleW < -90) || (angleW < 360 && angleW > 90)) { angleW = angleW + 180 - this.pointEntityCollection.values[6].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[4].point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pointEntityCollection.values[6].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[4].point.color = Cesium.Color.fromCssColorString('#ff0000') + this.pointEntityCollection.values[6].billboard.image = greenImg + this.pointEntityCollection.values[4].billboard.image = redImg } else { - this.pointEntityCollection.values[4].point.color = Cesium.Color.fromCssColorString('#00ff0a') - this.pointEntityCollection.values[6].point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pointEntityCollection.values[4].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[6].point.color = Cesium.Color.fromCssColorString('#ff0000') + this.pointEntityCollection.values[4].billboard.image = greenImg + this.pointEntityCollection.values[6].billboard.image = redImg } radiansW = (Math.PI / 180) * angleW @@ -1524,18 +1586,22 @@ class GroundSvg extends Base { } for (let i = 0; i < this.pointEntityCollection.values.length; i++) { if (pickPoint && this.pointEntityCollection.values[i].id === pickPoint.id) { - pickPoint.point.color = Cesium.Color.fromCssColorString('#ffff00') + // pickPoint.point.color = Cesium.Color.fromCssColorString('#ffff00') + pickPoint.billboard.image = yellowImg } else { switch (this.pointEntityCollection.values[i].id) { case 'svg-control-points_5': - this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#ffff00') + // this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#ffff00') + this.pointEntityCollection.values[i].billboard.image = yellowImg break case 'svg-control-points_0': - this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#ff0000') + this.pointEntityCollection.values[i].billboard.image = redImg break default: - this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#00ff0a') + this.pointEntityCollection.values[i].billboard.image = greenImg } } } @@ -1550,7 +1616,8 @@ class GroundSvg extends Base { ) { YJ.Global.CameraController(this.sdk, false) this.pickPoint = pickedObject.primitive._id - this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ff0000') + this.pickPoint.billboard.image = redImg break } } @@ -1560,13 +1627,16 @@ class GroundSvg extends Base { YJ.Global.CameraController(this.sdk, true) switch (this.pickPoint.id) { case 'svg-control-points_4': - this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ffff00') + // this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ffff00') + this.pickPoint.billboard.image = yellowImg break case 'svg-control-points_9': - this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ff0000') + // this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ff0000') + this.pickPoint.billboard.image = redImg break default: - this.pickPoint.point.color = Cesium.Color.fromCssColorString('#00ff0a') + // this.pickPoint.point.color = Cesium.Color.fromCssColorString('#00ff0a') + this.pickPoint.billboard.image = greenImg } this.pickPoint = null } @@ -1605,16 +1675,19 @@ class GroundSvg extends Base { controlPoints[9] = turf.destination(point, wh, 0 + angle, options).geometry.coordinates this.controlPoints = controlPoints - if(!this.sdk || !this.sdk.viewer) { + if (!this.sdk || !this.sdk.viewer) { return } for (let i = 0; i < this.controlPoints.length; i++) { let color = '#00ff0a' + let img = greenImg if (i === 5) { color = '#ffff00' + img = yellowImg } if (i === 0) { color = '#ff0000' + img = redImg } let entity = this.sdk.viewer.entities.getOrCreateEntity('svg-control-points_' + i) entity.show = true @@ -1622,11 +1695,18 @@ class GroundSvg extends Base { entity.position = new Cesium.CallbackProperty(() => { return Cesium.Cartesian3.fromDegrees(...this.controlPoints[i]) }) - entity.point = new Cesium.PointGraphics({ - color: Cesium.Color.fromCssColorString(color), // 点的颜色 - pixelSize: 10, // 点的大小 + // entity.point = new Cesium.PointGraphics({ + // color: Cesium.Color.fromCssColorString(color), // 点的颜色 + // pixelSize: 10, // 点的大小 + // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + // scaleByDistance: new Cesium.NearFarScalar(0.0, 1.0, 1.0e10, 1.0), + // disableDepthTestDistance: Number.POSITIVE_INFINITY // 不应用深度测试 + // }) + entity.billboard = new Cesium.BillboardGraphics({ + image: img, + width: 10, + height: 10, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, - scaleByDistance: new Cesium.NearFarScalar(0.0, 1.0, 1.0e10, 1.0), disableDepthTestDistance: Number.POSITIVE_INFINITY // 不应用深度测试 }) this.pointEntityCollection.add(entity) @@ -1848,7 +1928,7 @@ class GroundSvg extends Base { }) this.hierarchys = [...hierarchys] - if (!this.entity) { + if (!this.entity || !this.entity.values || this.entity.values.length == 0) { return }