diff --git a/src/Global/SplitScreen/index.js b/src/Global/SplitScreen/index.js index 8df76aa..845b6ee 100644 --- a/src/Global/SplitScreen/index.js +++ b/src/Global/SplitScreen/index.js @@ -517,7 +517,7 @@ async function setSplitDirection(v, id, isoff = false, entityId) { thatD.textShow = thatP.textShow } if (thatP.label && thatP.labelShow) { - thatP.label.entity.show = true + thatP.labelShow = true } if (thatD.label) { thatD.label.options.ground = false diff --git a/src/Obj/Base/GroundImage/_element.js b/src/Obj/Base/GroundImage/_element.js index 7ca2e92..95acf9f 100644 --- a/src/Obj/Base/GroundImage/_element.js +++ b/src/Obj/Base/GroundImage/_element.js @@ -8,7 +8,7 @@ function html() {
- +
diff --git a/src/Obj/Base/GroundImage/index.js b/src/Obj/Base/GroundImage/index.js index 6cff1c7..df7f882 100644 --- a/src/Obj/Base/GroundImage/index.js +++ b/src/Obj/Base/GroundImage/index.js @@ -24,7 +24,7 @@ class GroundImage extends Base { * @param options.flipe.x=false {boolean} 绕X轴翻转 * @param options.flipe.y=false {boolean} 绕Y轴翻转 * @param options.url {string} 图片地址 - * @param {Array.} options.positions 经纬度和高度的列表，值交替 [{lon,lat,alt},...] + * @param {Array.} options.position 经纬度和高度的列表，值交替 [{lon,lat,alt},...] * @param _Dialog {object} 弹框事件 * @param _Dialog.confirmCallBack {function} 弹框确认时的回调 * */ @@ -35,8 +35,8 @@ class GroundImage extends Base { this.options.url = options.url this.options.angle = options.angle || 0 this.options.scale = (options.scale || options.scale === 0) ? options.scale : 1 - this.options.positions = options.positions - this.options.offset = { x: 0.5, y: 0.5 } + this.options.position = options.position + this.options.offset = options.offset || { x: 0.5, y: 0.5 } this.options.flipe = options.flipe || {} this.options.flipe.x = this.options.flipe.x || false @@ -49,7 +49,7 @@ class GroundImage extends Base { this.Dialog = _Dialog this._elms = {}; this.previous = { - positions: { ...this.options.positions } + position: { ...this.options.position } } this._EventBinding = new EventBinding() this.event = new MouseEvent(this.sdk) @@ -62,6 +62,32 @@ class GroundImage extends Base { } set offset(v) { this.options.offset = v + const img = new Image(); + img.crossOrigin = 'Anonymous'; + img.src = this.replaceHost(this.options.url, this.options.host); + img.onload = () => { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + // 设置画布大小 + canvas.width = img.width * 2; + canvas.height = img.height * 2; + + // 绘制图像 + if (this.flipeX) { + ctx.scale(1, -1); + ctx.translate(0, -canvas.height) + } + if (this.flipeY) { + ctx.scale(-1, 1); + ctx.translate(-canvas.width, 0); + } + ctx.drawImage(img, img.width - (img.width * this.options.offset.x), img.height - (img.height * this.options.offset.y)); + this.entity.rectangle.material = new Cesium.ImageMaterialProperty({ + image: canvas, + transparent: true + }) + } } get angle() { @@ -97,14 +123,15 @@ class GroundImage extends Base { } const img = new Image(); + img.crossOrigin = 'Anonymous'; img.src = this.replaceHost(this.options.url, this.options.host); img.onload = () => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 设置画布大小 - canvas.width = img.width; - canvas.height = img.height; + canvas.width = img.width * 2; + canvas.height = img.height * 2; // 绘制图像 if (this.flipeX) { @@ -115,7 +142,7 @@ class GroundImage extends Base { ctx.scale(-1, 1); ctx.translate(-canvas.width, 0); } - ctx.drawImage(img, 0, 0); + ctx.drawImage(img, img.width - (img.width * this.options.offset.x), img.height - (img.height * this.options.offset.y)); this.entity && (this.entity.rectangle.material = new Cesium.ImageMaterialProperty({ image: canvas, transparent: true @@ -140,14 +167,15 @@ class GroundImage extends Base { } const img = new Image(); + img.crossOrigin = 'Anonymous'; img.src = this.replaceHost(this.options.url, this.options.host); img.onload = () => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 设置画布大小 - canvas.width = img.width; - canvas.height = img.height; + canvas.width = img.width * 2; + canvas.height = img.height * 2; // 绘制图像 if (this.flipeX) { @@ -158,7 +186,7 @@ class GroundImage extends Base { ctx.scale(-1, 1); ctx.translate(-canvas.width, 0); } - ctx.drawImage(img, 0, 0); + ctx.drawImage(img, img.width - (img.width * this.options.offset.x), img.height - (img.height * this.options.offset.y)); this.entity.rectangle.material = new Cesium.ImageMaterialProperty({ image: canvas, transparent: true @@ -174,12 +202,12 @@ class GroundImage extends Base { } async create() { - // let gap = Math.abs(Math.cos(Math.PI/180 * this.options.positions.lat)) * (0.0001*this.options.scale) + // let gap = Math.abs(Math.cos(Math.PI/180 * this.options.position.lat)) * (0.0001*this.options.scale) // let fromDegreesArray = [ - // this.options.positions.lng - 0.05, this.options.positions.lat - 0.05, - // this.options.positions.lng + 0.05, this.options.positions.lat - 0.05, - // this.options.positions.lng + 0.05, this.options.positions.lat + 0.05, - // this.options.positions.lng - 0.05, this.options.positions.lat + 0.05, + // this.options.position.lng - 0.05, this.options.position.lat - 0.05, + // this.options.position.lng + 0.05, this.options.position.lat - 0.05, + // this.options.position.lng + 0.05, this.options.position.lat + 0.05, + // this.options.position.lng - 0.05, this.options.position.lat + 0.05, // ] let response = await fetch(this.replaceHost(this.options.url, this.options.host), { method: 'get', @@ -192,14 +220,15 @@ class GroundImage extends Base { // let arrayBuffer = await data.arrayBuffer() // const str = String.fromCharCode(...new Uint8Array(arrayBuffer)); const img = new Image(); + img.crossOrigin = 'Anonymous'; img.src = this.replaceHost(this.options.url, this.options.host); img.onload = () => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 设置画布大小 - canvas.width = img.width; - canvas.height = img.height; + canvas.width = img.width * 2; + canvas.height = img.height * 2; // 绘制图像 if (this.flipeX) { ctx.scale(1, -1); @@ -209,35 +238,45 @@ class GroundImage extends Base { ctx.scale(-1, 1); ctx.translate(-canvas.width, 0); } - ctx.drawImage(img, 0, 0); + ctx.drawImage(img, img.width - (img.width * this.options.offset.x), img.height - (img.height * this.options.offset.y)); this.entity = this.sdk.viewer.entities.add({ id: this.options.id, show: this.options.show, rectangle: { coordinates: new Cesium.CallbackProperty(() => { - let gap = Math.abs(Math.cos(Math.PI / 180 * this.options.positions.lat)) * (0.0001 * this.options.scale) + let gap = Math.abs(Math.cos(Math.PI / 180 * this.options.position.lat)) * (0.0001 * this.options.scale) let offset = { x: this.flipeY ? Math.abs(this.options.offset.x - 1) : this.options.offset.x, y: this.flipeX ? Math.abs(this.options.offset.y - 1) : this.options.offset.y, } offset = { lng: offset.x * ((0.0001 * this.options.scale) * 2), - lat: Math.abs(offset.y-1) * (gap * 2) + lat: Math.abs(offset.y - 1) * (gap * 2) } + // let point1 = [this.options.position.lng - offset.lng + 360, this.options.position.lat - offset.lat]; + // let point2 = [(this.options.position.lng - offset.lng) + ((0.0001 * this.options.scale) * 2) + 360, (this.options.position.lat - offset.lat) + (gap * 2)]; + // let midpoint = turf.point([point1[0]+point2[0]/2, point1[1]+point2[1]/2]); + // let rotatedPot = turf.transformRotate(midpoint, -Number(this.options.angle), {pivot: [this.options.position.lng, this.options.position.lat]}); + // console.log(midpoint.geometry.coordinates, rotatedPot.geometry.coordinates, this.options.position) + // let fromDegreesArray = [ + // rotatedPot.geometry.coordinates[0]-(0.0001 * this.options.scale), rotatedPot.geometry.coordinates[1]-(0.0001 * this.options.scale), + // rotatedPot.geometry.coordinates[0]+(0.0001 * this.options.scale), rotatedPot.geometry.coordinates[1]+(0.0001 * this.options.scale), + + // ] let fromDegreesArray = [ - this.options.positions.lng - offset.lng, this.options.positions.lat - offset.lat, - (this.options.positions.lng - offset.lng) + ((0.0001 * this.options.scale) * 2), (this.options.positions.lat - offset.lat) + (gap * 2), + // this.options.position.lng - offset.lng, this.options.position.lat - offset.lat, + // (this.options.position.lng - offset.lng) + ((0.0001 * this.options.scale) * 2), (this.options.position.lat - offset.lat) + (gap * 2), - // this.options.positions.lng - (0.0001 * this.options.scale), this.options.positions.lat - gap, - // // this.options.positions.lng + 0.05, this.options.positions.lat - 0.05, - // this.options.positions.lng + (0.0001 * this.options.scale), this.options.positions.lat + gap, - // // this.options.positions.lng - 0.05, this.options.positions.lat + 0.05, + this.options.position.lng - (0.0001 * this.options.scale), this.options.position.lat - gap, + // this.options.position.lng + 0.05, this.options.position.lat - 0.05, + this.options.position.lng + (0.0001 * this.options.scale), this.options.position.lat + gap, + // this.options.position.lng - 0.05, this.options.position.lat + 0.05, ] return Cesium.Rectangle.fromDegrees(...fromDegreesArray) @@ -281,7 +320,7 @@ class GroundImage extends Base { // 编辑框 async edit(state) { let _this = this - this.originalOptions = { ...this.options } + this.originalOptions = this.deepCopyObj(this.options) if (this._DialogObject && this._DialogObject.close) { this._DialogObject.close() this._DialogObject = null @@ -312,16 +351,19 @@ class GroundImage extends Base { this.Dialog.removeCallBack && this.Dialog.removeCallBack() }, closeCallBack: () => { + this.previous = null this.reset() // this.entity.style = new Cesium.Cesium3DTileStyle({ // color: "color('rgba(255,255,255," + this.newData.transparency + ")')", // show: true, // }); - this.positionEditing = false + if (anchorSetDialogObject && anchorSetDialogObject.close) { anchorSetDialogObject.close() } this.Dialog.closeCallBack && this.Dialog.closeCallBack() + YJ.Measure.SetMeasureStatus(false) + this.positionEditing = false }, showCallBack: (show) => { this.show = show @@ -491,17 +533,17 @@ class GroundImage extends Base { return } this._positionEditing = status - this.previous = { - positions: { ...this.options.positions } - } if (status === true) { + this.previous = { + position: { ...this.options.position } + } this.tip && this.tip.destroy() this.tip = new MouseTip('点击鼠标左键确认，右键取消', this.sdk) this.event.mouse_move((movement, cartesian) => { - let positions = this.cartesian3Towgs84(cartesian, this.sdk.viewer) - this.options.positions.lng = positions.lng - this.options.positions.lat = positions.lat - this.options.positions.alt = positions.alt + let position = this.cartesian3Towgs84(cartesian, this.sdk.viewer) + this.options.position.lng = position.lng + this.options.position.lat = position.lat + this.options.position.alt = position.alt this.tip.setPosition( cartesian, movement.endPosition.x, @@ -509,21 +551,22 @@ class GroundImage extends Base { ) }) this.event.mouse_left((movement, cartesian) => { - let positions = this.cartesian3Towgs84(cartesian, this.sdk.viewer) - this.options.positions.lng = positions.lng - this.options.positions.lat = positions.lat - this.options.positions.alt = positions.alt + let position = this.cartesian3Towgs84(cartesian, this.sdk.viewer) + this.options.position.lng = position.lng + this.options.position.lat = position.lat + this.options.position.alt = position.alt this.event.mouse_move(() => { }) this.event.mouse_left(() => { }) this.event.mouse_right(() => { }) this.event.gesture_pinck_start(() => { }) this.event.gesture_pinck_end(() => { }) + this.previous = null this.positionEditing = false }) this.event.mouse_right((movement, cartesian) => { - this.options.positions.lng = this.previous.positions.lng - this.options.positions.lat = this.previous.positions.lat - this.options.positions.alt = this.previous.positions.alt + this.options.position.lng = this.previous.position.lng + this.options.position.lat = this.previous.position.lat + this.options.position.alt = this.previous.position.alt this.positionEditing = false }) @@ -533,16 +576,16 @@ class GroundImage extends Base { let endTime = new Date() if (endTime - startTime >= 500) { // 长按取消 - this.options.positions.lng = this.previous.positions.lng - this.options.positions.lat = this.previous.positions.lat - this.options.positions.alt = this.previous.positions.alt + this.options.position.lng = this.previous.position.lng + this.options.position.lat = this.previous.position.lat + this.options.position.alt = this.previous.position.alt this.positionEditing = false } else { - let positions = this.cartesian3Towgs84(cartesian, this.sdk.viewer) - this.options.positions.lng = positions.lng - this.options.positions.lat = positions.lat - this.options.positions.alt = positions.alt + let position = this.cartesian3Towgs84(cartesian, this.sdk.viewer) + this.options.position.lng = position.lng + this.options.position.lat = position.lat + this.options.position.alt = position.alt this.event.mouse_move(() => { }) this.event.mouse_left(() => { }) this.event.mouse_right(() => { }) @@ -562,9 +605,17 @@ class GroundImage extends Base { this.event.gesture_pinck_end(() => { }) } this.tip && this.tip.destroy() - this.options.positions.lng = this.previous.positions.lng - this.options.positions.lat = this.previous.positions.lat - this.options.positions.alt = this.previous.positions.alt + if (!this.previous) { + this.previous = { + position: { ...this.options.position } + } + } + else { + this.options.position.lng = this.previous.position.lng + this.options.position.lat = this.previous.position.lat + this.options.position.alt = this.previous.position.alt + } + } } @@ -596,8 +647,8 @@ class GroundImage extends Base { if (this.options.position) { position = { ...this.options.position } } - else if (this.options.positions) { - position = { ...this.options.positions[0] } + else if (this.options.position) { + position = { ...this.options.position[0] } } else if (this.options.center) { position = { ...this.options.center } @@ -630,14 +681,14 @@ class GroundImage extends Base { }) } else { - let gap = Math.abs(Math.cos(Math.PI / 180 * this.options.positions.lat)) * (0.0001 * this.options.scale) + let gap = Math.abs(Math.cos(Math.PI / 180 * this.options.position.lat)) * (0.0001 * this.options.scale) let fromDegreesArray = [ - [this.options.positions.lng - (0.0001 * this.options.scale), this.options.positions.lat - gap], - [this.options.positions.lng + (0.0001 * this.options.scale), this.options.positions.lat + gap], + [this.options.position.lng - (0.0001 * this.options.scale), this.options.position.lat - gap], + [this.options.position.lng + (0.0001 * this.options.scale), this.options.position.lat + gap], ] let positionArray = [] let height = 0 - let position = this.options.positions + let position = this.options.position let point1 = Cesium.Cartesian3.fromDegrees(position.lng, position.lat, 0); let point2 = Cesium.Cartesian3.fromDegrees(position.lng, position.lat, 10000000); let direction = Cesium.Cartesian3.subtract(point2, point1, new Cesium.Cartesian3()); @@ -680,9 +731,14 @@ class GroundImage extends Base { if (!this.entity) { return } - this.name = this.originalOptions.name - this.angle = this.originalOptions.angle - this.scale = this.originalOptions.scale + this.options = this.deepCopyObj(this.originalOptions) + this.name = this.options.name + this.angle = this.options.angle + this.scale = this.options.scale + this.offset = this.options.offset + this.flipeX = this.options.flipe.x + this.flipeY = this.options.flipe.y + this.show = this.options.show } async remove() { @@ -699,9 +755,9 @@ class GroundImage extends Base { } setPosition(v) { - this.options.positions.lng = v.position.lng - this.options.positions.lat = v.position.lat - this.options.positions.alt = v.position.alt + this.options.position.lng = v.position.lng + this.options.position.lat = v.position.lat + this.options.position.alt = v.position.alt } }