贴地svg编辑点改为图标

This commit is contained in:
zh
2025-08-28 10:02:58 +08:00
parent ee38db98fb
commit 5f383f661f

View File

@ -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
}