import Dialog from '../../Element/Dialog'; import cy_slider from "../../Element/cy_html_slider"; import { html } from "./_element"; import EventBinding from '../../Element/Dialog/eventBinding'; import Base from "../index"; import MouseEvent from '../../../Event/index' import { syncData } from '../../../Global/MultiViewportMode' import MouseTip from '../../../MouseTip' import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen' import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global' class GroundImage extends Base { /** * @constructor * @param sdk * @description 贴地图片 * @param options {object} 属性 * @param options.id {string} 唯一标识 * @param options.show=true {boolean} 显示/隐藏 * @param options.name {string} 名称 * @param options.angle=0 {number} 旋转角度 * @param options.scale=1 {number} 比例 * @param options.flipe {object} 翻转 * @param options.flipe.x=false {boolean} 绕X轴翻转 * @param options.flipe.y=false {boolean} 绕Y轴翻转 * @param options.url {string} 图片地址 * @param {Array.} options.position 经纬度和高度的列表,值交替 [{lon,lat,alt},...] * @param _Dialog {object} 弹框事件 * @param _Dialog.confirmCallBack {function} 弹框确认时的回调 * */ constructor(sdk, options = {}, _Dialog = {}) { super(sdk, options); this.options.name = options.name || '未命名对象' this.options.show = (options.show || options.show === false) ? options.show : true this.options.url = options.url this.options.angle = options.angle || 0 this.options.scale = (options.scale || options.scale === 0) ? options.scale : 1 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 this.options.flipe.y = this.options.flipe.y || false this.entity = { id: this.options.id } this._positionEditing = false this.Dialog = _Dialog this._elms = {}; this.previous = { position: { ...this.options.position } } this._EventBinding = new EventBinding() this.event = new MouseEvent(this.sdk) this.sdk.addIncetance(this.options.id, this) this.create() } get offset() { return this.options.offset } 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() { return this.options.angle } set angle(v) { this.options.angle = v this._elms.angle && this._elms.angle.forEach((item) => { item.value = v }) } get scale() { return this.options.scale } set scale(v) { this.options.scale = v this._elms.scale && this._elms.scale.forEach((item) => { item.value = v }) } get flipeY() { return this.options.flipe.y } set flipeY(v) { if (typeof v === "boolean") { this.options.flipe.y = v if (!this.entity) { return } 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 && (this.entity.rectangle.material = new Cesium.ImageMaterialProperty({ image: canvas, transparent: true })) // this.offset = { // x: Math.abs(this.offset.x - 1), // y: this.offset.y, // } } } else { console.error("参数必须为boolean") } } get flipeX() { return this.options.flipe.x } set flipeX(v) { if (typeof v === "boolean") { this.options.flipe.x = v if (!this.entity) { return } 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 }) // this.offset = { // x: this.offset.x, // y: Math.abs(this.offset.y - 1), // } } } else { console.error("参数必须为boolean") } } async create() { // let gap = Math.abs(Math.cos(Math.PI/180 * this.options.position.lat)) * (0.0001*this.options.scale) // let fromDegreesArray = [ // 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', headers: { 'Content-Type': 'application/json', } }) if (response.ok) { // let data = await response.blob() // 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 * 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 = 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.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) } // 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.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.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) }, false), material: new Cesium.ImageMaterialProperty({ image: canvas, transparent: true }), rotation: new Cesium.CallbackProperty(() => { return Cesium.Math.toRadians(this.options.angle) }, false), stRotation: new Cesium.CallbackProperty(() => { return Cesium.Math.toRadians(this.options.angle) }, false) }, }) if (this.sdk.viewer._element.className === 'cesium-viewer 2d') { this.entity.rectangle.height = 0 } syncData(this.sdk, this.options.id) if (this.options.show) { setSplitDirection(0, this.options.id) } } // if (data.code === 200 || data.code === 0) { // this.$message({ // message: '添加成功!', // type: 'success', // duration: 1500 // }); // this.close() // // this.$emit('getBuildingList') // // this.$emit('onSubmitCallBack') // } } } // 编辑框 async edit(state) { let _this = this this.originalOptions = this.deepCopyObj(this.options) if (this._DialogObject && this._DialogObject.close) { this._DialogObject.close() this._DialogObject = null } if (state) { let anchorSetDialogObject let canvas let point let billboardAnchorPosition this._DialogObject = await new Dialog(this.sdk, this.originalOptions, { title: '军标属性', left: '180px', top: '100px', confirmCallBack: (options) => { this.name = this.name.trim() if (!this.name) { this.name = '未命名对象' } this.originalOptions = this.deepCopyObj(this.options) this._DialogObject.close() this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions) syncData(this.sdk, this.options.id) syncSplitData(this.sdk, this.options.id) }, resetCallBack: () => { this.reset() this.Dialog.resetCallBack && this.Dialog.resetCallBack() }, removeCallBack: () => { 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, // }); if (anchorSetDialogObject && anchorSetDialogObject.close) { anchorSetDialogObject.close() } this.Dialog.closeCallBack && this.Dialog.closeCallBack() YJ.Measure.SetMeasureStatus(false) this.positionEditing = false }, showCallBack: (show) => { this.show = show this.Dialog.showCallBack && this.Dialog.showCallBack() }, translationalCallBack: () => { this.positionEditing = !this.positionEditing }, addFootElm: [ { tagName: 'button', className: 'flipe-over-y', innerHTML: 'Y轴翻转', event: [ 'click', () => { this.flipeY = !this.flipeY } ] }, { tagName: 'button', className: 'flipe-over-x', innerHTML: 'X轴翻转', event: [ 'click', () => { this.flipeX = !this.flipeX } ] } ] }, true) this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' ground-image' let contentElm = document.createElement('div'); contentElm.innerHTML = html() this._DialogObject.contentAppChild(contentElm) let all_elm = contentElm.getElementsByTagName("*") this._EventBinding.on(this, all_elm) this._elms = this._EventBinding.element let anchorBtn = contentElm.getElementsByClassName('anchor')[0] anchorBtn.addEventListener('click', async () => { if (anchorSetDialogObject && anchorSetDialogObject.close) { anchorSetDialogObject.close() } document.body.addEventListener('mouseup', mouseupEvent) let DialogClientRect = _this._DialogObject._element.body.getBoundingClientRect() let _DialogObject = await new Dialog(this.sdk, this.originalOptions, { title: '锚点设置', left: (DialogClientRect.left + 80) + 'px', top: (DialogClientRect.top + 200) + 'px', confirmCallBack: (options) => { _this.offset = { x: billboardAnchorPosition.x, y: billboardAnchorPosition.y } _DialogObject.close() }, closeCallBack: () => { document.body.removeEventListener('mouseup', mouseupEvent) }, }, false) anchorSetDialogObject = _DialogObject _DialogObject._element.body.className = _DialogObject._element.body.className + ' anchor-point' let contentElm = document.createElement('div'); let image = new Image() image.src = this.replaceHost(this.options.url, this.options.host) image.onload = function () { let ratio = image.width / image.height canvas = document.createElement('canvas') let width = 150 let height = 150 / ratio const ctx = canvas.getContext('2d', { willReadFrequently: true }) canvas.width = width canvas.height = height; canvas.style.display = 'block'; ctx.drawImage(image, 0, 0, width, height) contentElm.appendChild(canvas) _DialogObject.contentAppChild(contentElm) point = document.createElement('span') point.className = 'point' contentElm.appendChild(point) billboardAnchorPosition = { x: _this.offset.x, y: _this.offset.y } point.style.top = `calc(${Number(billboardAnchorPosition.y) * 100}% - 6px)` point.style.left = `calc(${Number(billboardAnchorPosition.x) * 100}% - 6px)` canvas.addEventListener('click', (e) => { let x = e.offsetX let y = e.offsetY let anchor = { x: Number((x / canvas.width).toFixed(2)), y: Number((y / canvas.height).toFixed(2)) } if (anchor.x < 0) { anchor.x = 0 } if (anchor.x > 1) { anchor.x = 1 } if (anchor.y < 0) { anchor.y = 0 } if (anchor.y > 1) { anchor.y = 1 } billboardAnchorPosition = { x: anchor.x, y: anchor.y } point.style.top = `calc(${billboardAnchorPosition.y * 100}% - 5px)` point.style.left = `calc(${billboardAnchorPosition.x * 100}% - 5px)` }) point.addEventListener('mousedown', (e) => { _DialogObject._element.body.addEventListener('mousemove', mousemoveEvent) }) } }) function mousemoveEvent(e) { getDialogBodyElm(e.target) function getDialogBodyElm(elm) { if (!elm) { return } else if (elm === anchorSetDialogObject._element.body) { let x = e.x - elm.getBoundingClientRect().left let y = e.y - elm.getBoundingClientRect().top let anchor = { x: Number(((x - 42) / canvas.width).toFixed(2)), y: Number(((y - 71) / canvas.height).toFixed(2)) } if (anchor.x < 0) { anchor.x = 0 } if (anchor.x > 1) { anchor.x = 1 } if (anchor.y < 0) { anchor.y = 0 } if (anchor.y > 1) { anchor.y = 1 } billboardAnchorPosition = { x: anchor.x, y: anchor.y } point.style.top = `calc(${billboardAnchorPosition.y * 100}% - 5px)` point.style.left = `calc(${billboardAnchorPosition.x * 100}% - 5px)` } else { getDialogBodyElm(elm.offsetParent) } } } function mouseupEvent() { if (anchorSetDialogObject) { anchorSetDialogObject._element.body.removeEventListener('mousemove', mousemoveEvent) } } } else { if (this._DialogObject && this._DialogObject.remove) { this._DialogObject.remove() this._DialogObject = null } } } /**@desc 打开平移功能 * * @memberOf Source * @param status {boolean} * * */ set positionEditing(status) { if (!this.sdk || !this.sdk.viewer || !this.entity) { return } this._positionEditing = status 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 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, movement.endPosition.y ) }) this.event.mouse_left((movement, cartesian) => { 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.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 }) this.event.gesture_pinck_start((movement, cartesian) => { let startTime = new Date() this.event.gesture_pinck_end(() => { let endTime = new Date() if (endTime - startTime >= 500) { // 长按取消 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 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.positionEditing = false } }) }) } else { if (this.event) { this.event.mouse_move(() => { }) this.event.mouse_left(() => { }) this.event.mouse_right(() => { }) this.event.gesture_pinck_start(() => { }) this.event.gesture_pinck_end(() => { }) } this.tip && this.tip.destroy() 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 } } } get positionEditing() { return this._positionEditing } /** * 飞到 */ async flyTo(options = {}) { setActiveViewer(0) closeRotateAround(this.sdk) closeViewFollow(this.sdk) if (this.options.customView && this.options.customView.relativePosition && this.options.customView.orientation) { let orientation = { heading: Cesium.Math.toRadians(this.options.customView.orientation.heading || 0.0), pitch: Cesium.Math.toRadians(this.options.customView.orientation.pitch || -60.0), roll: Cesium.Math.toRadians(this.options.customView.orientation.roll || 0.0) } let lng = this.options.customView.relativePosition.lng let lat = this.options.customView.relativePosition.lat let alt = this.options.customView.relativePosition.alt let destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt) let position = { lng: 0, lat: 0 } if (this.options.position) { position = { ...this.options.position } } else if (this.options.position) { position = { ...this.options.position[0] } } else if (this.options.center) { position = { ...this.options.center } } else if (this.options.start) { position = { ...this.options.start } } else { if (this.options.hasOwnProperty('lng')) { position.lng = this.options.lng } if (this.options.hasOwnProperty('lat')) { position.lat = this.options.lat } if (this.options.hasOwnProperty('alt')) { position.alt = this.options.alt } } // 如果没有高度值,则获取紧贴高度计算 if (!position.hasOwnProperty('alt')) { position.alt = await this.getClampToHeight(position) } lng = this.options.customView.relativePosition.lng + position.lng lat = this.options.customView.relativePosition.lat + position.lat alt = this.options.customView.relativePosition.alt + position.alt destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt) this.sdk.viewer.camera.flyTo({ destination: destination, orientation: orientation }) } else { let gap = Math.abs(Math.cos(Math.PI / 180 * this.options.position.lat)) * (0.0001 * this.options.scale) let fromDegreesArray = [ [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.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()); let c = Cesium.Cartesian3.normalize(direction, direction); let ray = new Cesium.Ray(point1, c); let r = {} let pickedObjects = this.sdk.viewer.scene.drillPickFromRay(ray); for (let i = 0; i < pickedObjects.length; i++) { if (pickedObjects[i].position) { r = pickedObjects[i] break } } if (r && r.position) { height = this.cartesian3Towgs84(r.position, this.sdk.viewer).alt } else { try { var promise = await Cesium.sampleTerrainMostDetailed(this.sdk.viewer.terrainProvider, [Cesium.Cartographic.fromDegrees(position.lng, position.lat)]); height = promise[0].height } catch (error) { } } for (let i = 0; i < fromDegreesArray.length; i++) { let a = Cesium.Cartesian3.fromDegrees(...fromDegreesArray[i], height) positionArray.push(a.x, a.y, a.z) } let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray) this.sdk.viewer.camera.flyToBoundingSphere(BoundingSphere, { offset: options.orientation || { heading: Cesium.Math.toRadians(0.0), pitch: Cesium.Math.toRadians(-90.0), roll: Cesium.Math.toRadians(0.0) } }) } } reset() { if (!this.entity) { return } 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() { this.event && this.event.destroy() this.tip && this.tip.destroy() this.sdk.viewer.entities.remove(this.entity) this.entity = null if (this._DialogObject && !this._DialogObject.isDestroy) { this._DialogObject.close() this._DialogObject = null } await this.sdk.removeIncetance(this.options.id) await syncData(this.sdk, this.options.id) } setPosition(v) { this.options.position.lng = v.position.lng this.options.position.lat = v.position.lat this.options.position.alt = v.position.alt } } export default GroundImage