/** * 点 */ import { getHost, getToken } from "../../../on"; import Dialog from '../../Element/Dialog' import EventBinding from '../../Element/Dialog/eventBinding' import cy_slider from '../../Element/cy_html_slider' import cy_tabs from '../../Element/cy_html_tabs' import richText from '../../Element/richText' import { html } from './_element' import Base from '../index' import MouseEvent from '../../../Event/index' import { addCluster, remove_entity_from_cluster } from '../../../Global/cluster/cluster' import CircleDiffuse from '../CircleDiffuse' import RadarScan from '../RadarScan' import { syncData } from '../../../Global/MultiViewportMode' import { getBillboardDefaultUrl, setBillboardDefaultUrl, getGroundCover } from '../../../Global/global' import { Proj } from '../../../Tools/proj' import { legp } from '../../Element/datalist' import { getFontList, getFontFamily, getFontFamilyName } from '../../Element/fontSelect' import MouseTip from '../../../MouseTip' import { setSplitDirection, syncSplitData, setActiveId, getState } from '../../../Global/SplitScreen' import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global' import { getGoodsList } from '../../../Tools/getGoodsList' class BillboardObject extends Base { #_postRenderEvent = null #_destroyMouseEvent = null #_billboardHeight = 0 /** * @constructor * @description 创建点标注 * @param sdk {object} sdk * @param options {object} 标注参数 * @param options.id {string} 标注id * @param {object} options.positions 位置 * @param {number} options.positions.lng 经度 * @param {number} options.positions.lat 纬度 * @param {number} options.positions.alt 高度 * @param {number} options.heightMode=3 高度模式(0:海拔高度;1:相对地表;2:依附地表; 3:依附模型) * @param [options.scaleByDistance=true] {boolean} 图标是否跟随视角变化进行字段缩放 * @param [options.show=true] {boolean} 标注整体的显示/隐藏 * @param [options.near=2000] {number} 近端可视距离 scaleByDistance为true时生效 * @param [options.far=100000] {number} 远端可视距离 scaleByDistance为true时生效 * @param options.billboard {object} 标注中图标的参数 * @param [options.billboard.show=true] {boolean} 标注中图标的显示与隐藏 * @param options.billboard.image {string} 图标路径 * @param options.billboard.defaultImage {string} 默认图标的唯一标识 * @param [options.billboard.scale=3] {number} 图标倍数 *@param options.label {object} 标注文字的参数 *@param [options.label.text] {string} 标注中文字 *@param [options.label.show=true] {boolean} 标注文字显示/隐藏 *@param [options.label.fontFamily=0] {number} 标注文字字体 0:黑体;1:思源黑体;2:庞门正道标题体;3:数黑体 *@param [options.label.fontSize=39] {number} 标注文字大小 单位px,微软雅黑 *@param [options.label.color=#00ffff] {string} 标注文字颜色 *@param _Dialog {object} 弹框事件 *@param _Dialog.confirmCallBack {function} 弹框确认时的回调 *@param _Dialog.instructSubmit(id,name,instruct) {function} 提交指令(ID, 名称,指令内容) *@param _Dialog.operatingPointSubmit(id,name,operatingPoint) {function} 设置操作点(ID, 名称,操作点内容) * */ constructor(sdk, options = {}, _Dialog = {}) { super(sdk, options) this.options.near = options.near || options.near === 0 ? options.near : 2000 this.options.far = options.far || options.far === 0 ? options.far : 100000 this.options.scaleByDistance = options.scaleByDistance || options.scaleByDistance === false ? options.scaleByDistance : true this.options.show = options.show || options.show === false ? options.show : true this.options.heightMode = options.heightMode || options.heightMode == 0 ? options.heightMode : 3 this.options.billboard = options.billboard = options.billboard || {} this.options.billboard.isSelect = options.billboard.isSelect || false this.options.billboard.show = options.billboard.show || options.billboard.show === false ? options.billboard.show : true this.options.billboard.image = options.billboard.image || getBillboardDefaultUrl(options.billboard.defaultImage) || this.getSourceRootPath() + '/img/A-ablu-blank.png' this.options.billboard.defaultImage = options.billboard.defaultImage this.options.billboard.scale = options.billboard.scale || options.billboard.scale === 0 ? options.billboard.scale : 3 options.label = options.label || {} this.options.label = options.label || {} this.options.label.text = options.label.text || this.options.name this.options.name = this.options.label.text this.options.label.show = options.label.show || options.label.show === false ? options.label.show : true this.options.label.fontFamily = options.label.fontFamily || 0 this.options.label.fontSize = options.label.fontSize || 39 this.options.label.color = options.label.color || '#00ffff' this.options.positions = options.positions = options.positions || {} this.options.positions.lng = Number( Number(options.positions.lng || 0).toFixed(8) ) this.options.positions.lat = Number( Number(options.positions.lat || 0).toFixed(8) ) this.options.positions.alt = Number( Number(options.positions.alt || 0).toFixed(2) ) this.#_billboardHeight = this.options.positions.alt // this.options.diffuseShow = options.diffuseShow || false // this.options.diffuseRadius = (options.diffuseRadius || options.diffuseRadius === 0) ? options.diffuseRadius : 10 // this.options.diffuseDuration = (options.diffuseDuration || options.diffuseDuration === 0) ? options.diffuseDuration : 2000 // this.options.diffuseColor = options.diffuseColor || "#FF0000" // this.options.scanShow = options.scanShow || false // this.options.scanRadius = (options.scanRadius || options.scanRadius === 0) ? options.scanRadius : 10 // this.options.scanDuration = (options.scanDuration || options.scanDuration === 0) ? options.scanDuration : 2000 // this.options.scanColor = options.scanColor || "#FF0000" this.options.instruct = options.instruct || '' this.options.operatingPoint = options.operatingPoint || '' this.options.attribute = options.attribute || {} this.options.attribute.link = this.options.attribute.link || {} this.options.attribute.link.content = this.options.attribute.link.content || [] this.options.attribute.vr = this.options.attribute.vr || {} this.options.attribute.vr.content = this.options.attribute.vr.content || [] this.options.attribute.camera = this.options.attribute.camera || {} this.options.attribute.camera.content = this.options.attribute.camera.content || [] this.options.attribute.ISC = this.options.attribute.ISC || {} this.options.attribute.ISC.content = this.options.attribute.ISC.content || [] this.options.attribute.goods = this.options.attribute.goods || {} this.options.attribute.goods.content = this.options.attribute.goods.content || [] this.options.attributeType = options.attributeType || 'richText' this.options.coordinate = options.coordinate || '' this.options.attributeBoxState = options.attributeBoxState || false this.operate = {} this._elms = {} this.previous = { positions: { ...this.options.positions } } this.options.attributePos = options.attributePos || { x: 60, y: 60, width: 200, height: 120 } this.entity this._proj = this.sdk.proj // // 验证物资 // let goodsContent = [] // if(options.attribute && options.attribute.goods && options.attribute.goods.content && Array.isArray(options.attribute.goods.content)) { // goodsContent = [...options.attribute.goods.content] // } // this.options.attribute.goods.content = [] // if (goodsContent.length > 0) { // getGoodsList().then((list)=>{ // for (let i = goodsContent.length-1; i >= 0; i--) { // let falg = false // for (let j = 0; j < list.length; j++) { // if (goodsContent[i].ID === list[j].ID) { // falg = true // break // } // } // if(!falg) { // goodsContent.splice(i, 1) // } // } // this.options.attribute.goods.content = [...goodsContent] // }) // } this.#_destroyMouseEvent = () => { this.attributeElm && (this.attributeElm.style.pointerEvents = 'unset') if(this.sdk && this.sdk.viewer && this.sdk.viewer._element) { this.sdk.viewer._element.onmousemove = null } document.removeEventListener('mouseup', this.#_destroyMouseEvent) document.removeEventListener('mouseleave', this.#_destroyMouseEvent) } this.#_postRenderEvent = () => { let siteInfoPosition = Cesium.Cartesian3.fromDegrees( this.options.positions.lng, this.options.positions.lat, this.#_billboardHeight ) if (this.attributeElm && this.entity) { let winpos = this.sdk.viewer.scene.cartesianToCanvasCoordinates( siteInfoPosition ) let pixelOffset = this.entity.label.pixelOffset.getValue() if (winpos) { let scale = getCurrentBillboardScale(this.entity, this.sdk.viewer.scene) let height = ((this.entity.billboard.height.getValue() * (this.options.billboard.scale || 0)) + this.options.label.fontSize) * (1 - (scale * scale)) let flag = false let lineElm = this.attributeElm.getElementsByClassName('billboard-attribute-box-line')[0] let leftTopElm = this.attributeElm.getElementsByClassName('left-top')[0] let rightTopElm = this.attributeElm.getElementsByClassName('right-top')[0] this.attributeElm.style.left = (winpos.x + this.options.attributePos.x).toFixed(0) + 'px' this.attributeElm.style.top = (winpos.y + pixelOffset.y - (this.options.label.show ? (this.options.label.fontSize / 2) : -(this.options.label.fontSize / 2)) - this.attributeElm.offsetHeight - this.options.attributePos.y + height).toFixed(0) + 'px' this.attributeElm.style.width = this.options.attributePos.width + 'px' this.attributeElm.style.height = this.options.attributePos.height + 'px' lineElm.style.zIndex = '-1' if (this.options.attributePos.x < -this.options.attributePos.width / 2) { flag = true lineElm.style.left = 'unset' lineElm.style.right = '0' leftTopElm.style.display = 'block' rightTopElm.style.display = 'none' } else { lineElm.style.left = '0' lineElm.style.right = 'unset' leftTopElm.style.display = 'none' rightTopElm.style.display = 'block' } let lineLength let lineAngleRad let lineAngle let x let y if (flag) { x = this.attributeElm.offsetWidth + this.options.attributePos.x y = this.options.attributePos.y ? this.options.attributePos.y : 0 } else { x = this.options.attributePos.x y = this.options.attributePos.y ? this.options.attributePos.y : 0 } lineLength = Math.sqrt((x * x) + (y * y)).toFixed(2); lineAngleRad = Math.atan(x / y); lineAngle = parseFloat((lineAngleRad * 180 / Math.PI).toFixed(2)); if (this.options.attributePos.y < 0) { lineAngle = lineAngle + 180 } // if(this.options.attributePos.y<-this.options.attributePos.height/2) { // lineElm.style.bottom = 'unset' // lineElm.style.top = '0' // } // else { // lineElm.style.bottom = -lineLength + 'px' // lineElm.style.top = 'unset' // } lineElm.style.height = lineLength + 'px' lineElm.style.transform = 'rotate(' + lineAngle + 'deg)' } } } function getCurrentBillboardScale(entity, scene) { // 获取相机到Billboard的距离 const distance = Cesium.Cartesian3.distance( scene.camera.positionWC, entity.position.getValue() ); // 获取缩放距离配置 const scaleByDistance = entity.billboard.scaleByDistance ? entity.billboard.scaleByDistance.getValue() : undefined; if (!scaleByDistance) { // 如果没有设置距离缩放,则使用基础缩放值 return 1.0; } // 解析缩放距离参数 [near, nearScale, far, farScale] const { near, nearValue, far, farValue } = scaleByDistance; if (distance <= near) { return nearValue; } else if (distance >= far) { return farValue; } else { // 计算中间距离的缩放值(线性插值) const t = (distance - near) / (far - near); return Cesium.Math.lerp(nearValue, farValue, t); } } this.sdk.addIncetance(this.options.id, this) BillboardObject.create(this) this.picking = true this.Dialog = _Dialog this._EventBinding = new EventBinding() // this.Dialog.instructSubmit = () => { // alert(6) // } } get type() { return 'BillboardObject' } static create(that) { let canvas let billboardH = 36 let heightMode let positions = that.options.positions that.originalOptions = that.deepCopyObj(that.options) let isGlf = false let superGif let index = 0 let font = getFontFamily(that.labelFontFamily) || 'Helvetica' let url = that.replaceHost(that.options.billboard.image, that.options.host) that._frameImages = [] if (url && url.endsWith('gif')) { isGlf = true switch (that.options.heightMode) { case 2: case '2': heightMode = Cesium.HeightReference.CLAMP_TO_GROUND break } let gifImg = document.createElement('img') gifImg.setAttribute('rel:animated_src', url) gifImg.setAttribute('rel:auto_play', '1') const imgDiv = document.createElement('div') imgDiv.appendChild(gifImg) let id = Cesium.createGuid() superGif = new SuperGif({ gif: gifImg }) that._superGif = superGif that._superGif.id = id // 自定义id,用于判断gif实例是否改变 superGif.load(function (status) { if (status == 404) { canvas = document.createElement('canvas') canvas.width = 0 canvas.height = 0 billboardH = 0 if (that.entity) { that.entity.billboard.imgWidth = 0 that.entity.billboard.imgHeight = 0 that.entity.billboard.image = canvas addCluster(that.sdk, that.entity) that.attributeBoxState && (that.attributeBoxState = true) } return } if (that._superGif.id != id) { return } let length = superGif.get_length() for (let i = 1; i <= length; i++) { superGif.move_to(i) that._frameImages.push(superGif.get_canvas().toDataURL()) } canvas = superGif.get_canvas() let width = canvas.width let height = canvas.height billboardH = height * (31 / width) if (that.entity) { that.entity.billboard.imgWidth = width that.entity.billboard.imgHeight = height that.entity.billboard.image = new Cesium.CallbackProperty(() => { let img = that._frameImages[index] index = index >= that._frameImages.length - 1 ? 0 : index + 1 return img }, false) addCluster(that.sdk, that.entity) that.attributeBoxState && (that.attributeBoxState = true) } }) } else { let image = new Image() image.src = url || that.getSourceRootPath() + '/img/A-ablu-blank.png' switch (that.options.heightMode) { case 2: case '2': heightMode = Cesium.HeightReference.CLAMP_TO_GROUND break } canvas = document.createElement('canvas') image.onload = function () { let ratio = image.width / image.height image.width = 100 image.height = 100 / ratio let width = image.width let height = image.height const ctx = canvas.getContext('2d', { willReadFrequently: true }) canvas.width = width canvas.height = height ctx.drawImage(image, 0, 0, width, height) billboardH = height * (31 / width) if (that.entity) { that.entity.billboard.imgWidth = width that.entity.billboard.imgHeight = height that.entity.billboard.image = canvas addCluster(that.sdk, that.entity) that.attributeBoxState && (that.attributeBoxState = true) } } image.onerror = function (err) { canvas.width = 0 canvas.height = 0 billboardH = 0 if (that.entity) { that.entity.billboard.imgWidth = 0 that.entity.billboard.imgHeight = 0 that.entity.billboard.image = canvas addCluster(that.sdk, that.entity) that.attributeBoxState && (that.attributeBoxState = true) } }; } that.entity = new Cesium.Entity({ show: that.options.show, id: that.options.id, position: Cesium.Cartesian3.fromDegrees( positions.lng, positions.lat, positions.alt ), billboard: { image: isGlf ? new Cesium.CallbackProperty(() => { let img = that._frameImages[index] index = index >= that._frameImages.length - 1 ? 0 : index + 1 return img }, false) : canvas, scale: that.options.billboard.scale, disableDepthTestDistance: new Cesium.CallbackProperty(function () { return getGroundCover() ? undefined : Number.POSITIVE_INFINITY }, false), heightReference: heightMode, color: that.options.billboard.show ? undefined : new Cesium.Color(1.0, 1.0, 1.0, 0), width: 31, height: new Cesium.CallbackProperty(function () { return billboardH }, false), verticalOrigin: Cesium.VerticalOrigin.BOTTOM // pixelOffset: new Cesium.CallbackProperty(function () { // return new Cesium.Cartesian2( // 0, // -(billboardH / 2) * that.options.billboard.scale // ) // }, false) }, label: { show: that.options.label.show, text: that.options.label.text, disableDepthTestDistance: new Cesium.CallbackProperty(function () { return getGroundCover() ? undefined : Number.POSITIVE_INFINITY }, false), heightReference: heightMode, font: that.options.label.fontSize + 'px ' + font, fillColor: Cesium.Color.fromCssColorString(that.options.label.color), // verticalOrigin : Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.CallbackProperty(function () { if (that.options.billboard.show) { return new Cesium.Cartesian2( 0, -billboardH * that.options.billboard.scale - that.options.label.fontSize / 2 - 5 ) } else { return new Cesium.Cartesian2( 0, -that.options.label.fontSize / 2 - 5 ) } }, false), outlineColor: Cesium.Color.BLACK, outlineWidth: 1, style: Cesium.LabelStyle.FILL_AND_OUTLINE } }) that.entity.billboard.imgWidth = 31 that.entity.billboard.imgHeight = 36 that.entity.position = Cesium.Cartesian3.fromDegrees( positions.lng, positions.lat, positions.alt ) if (that.options.heightMode == 3) { that.updateHeight() } that.renewPoint() // that.diffuseShow = that.options.diffuseShow // that.scanShow = that.options.scanShow syncData(that.sdk, that.options.id) if (that.options.show) { setSplitDirection(0, that.options.id) } if (that.options.billboard.isSelect) { that.selectBillboard() } } // 选中效果 selectBillboard() { let that = this this.sdk.viewer.screenSpaceEventHandler.setInputAction(function (click) { var pickedObject = that.sdk.viewer.scene.pick(click.position) if ( Cesium.defined(pickedObject) && pickedObject.id && pickedObject.id.id === 'airportBillboard' ) { if (that.entity.billboard) { // 如果点击的是Billboard,给它添加选中效果 that.entity.billboard.color = Cesium.Color.YELLOW // 改变颜色 } // 可以添加更多选中效果,例如边框等 } else { if (that.entity.billboard) { that.entity.billboard.color = Cesium.Color.WHITE } } }, Cesium.ScreenSpaceEventType.LEFT_CLICK) } get attributeSelect() { return [ { name: '富文本', value: '富文本', key: 'richText' }, { name: '链接', value: '链接', key: 'link' }, { name: 'IP摄像头', value: 'IP摄像头', key: 'camera' }, // { // name: 'ISC摄像头', // value: 'ISC摄像头', // key: 'isc' // }, // { // name: '传感器', // value: '传感器', // key: 'sensor' // }, { name: '全景图', value: '全景图', key: 'vr' }, { name: '物资', value: '物资', key: 'goods' } ] } get show() { return this.options.show } set show(v) { if (!this.isShowView) { this.options.show = v this.originalOptions.show = v } if (!this.showView || this.showView == 3) { this.entity && (this.entity.show = this.options.show) if (this.attributeBoxState && this.options.show) { this.attributeBoxState = this.options.show } else { // 关闭属性框 document.addEventListener('mouseup', this.#_destroyMouseEvent); document.addEventListener('mouseleave', this.#_destroyMouseEvent); if (this.attributeElm) { this.sdk.viewer._element.removeChild(this.attributeElm) this.attributeElm = null } this.sdk.viewer.scene.postRender.removeEventListener(this.#_postRenderEvent) } } else { this.entity && (this.entity.show = false) // 关闭属性框 document.addEventListener('mouseup', this.#_destroyMouseEvent); document.addEventListener('mouseleave', this.#_destroyMouseEvent); if (this.attributeElm) { this.sdk.viewer._element.removeChild(this.attributeElm) this.attributeElm = null } this.sdk.viewer.scene.postRender.removeEventListener(this.#_postRenderEvent) } syncData(this.sdk, this.options.id) syncSplitData(this.sdk, this.options.id) if (this._DialogObject && this._DialogObject.showBtn) { this._DialogObject.showBtn.checked = this.options.show } this.isShowView = false // if (v) { // if (this.diffuseShow) { // this.diffuseShow = true // } // if (this.scanShow) { // this.scanShow = true // } // } // else { // if (this.diffuse) { // this.diffuse.show = v // } // if (this.scan) { // this.scan.show = v // } // } } get heightMode() { return this.options.heightMode ? this.options.heightMode : 0 } set heightMode(v) { this.options.heightMode = v ? v : 0 this.options.heightMode = v || v == 0 ? v : 3 let heightMode let heightModeName = '' let altBoxElm if ( this._DialogObject && this._DialogObject._element && this._DialogObject._element.content ) { altBoxElm = this._DialogObject._element.content.getElementsByClassName( 'alt-box' )[0] } switch (this.options.heightMode) { case '0': case 0: altBoxElm && (altBoxElm.className = 'input-number input-number-unit-1 alt-box') this._elms.height && (this._elms.height.style.display = 'flex') heightMode = Cesium.HeightReference.NONE heightModeName = '海拔高度' break case '1': case 1: altBoxElm && (altBoxElm.className = 'input-number input-number-unit-1 alt-box') this._elms.height && (this._elms.height.style.display = 'flex') heightMode = Cesium.HeightReference.NONE heightModeName = '相对地表' break case '2': case 2: altBoxElm && (altBoxElm.className = 'input-number input-number-unit-1 alt-box disabled') heightModeName = '依附地表' altBoxElm && (altBoxElm.className = 'input-number input-number-unit-1 alt-box disabled') heightModeName = '依附地表' heightMode = Cesium.HeightReference.CLAMP_TO_GROUND this._elms.height && (this._elms.height.style.display = 'none') break case '3': case 3: altBoxElm && (altBoxElm.className = 'input-number input-number-unit-1 alt-box disabled') this._elms.height && (this._elms.height.style.display = 'none') heightMode = Cesium.HeightReference.NONE heightModeName = '依附模型' break } if (this.entity) { this.entity.billboard.heightReference = heightMode this.entity.label.heightReference = heightMode if(heightMode == Cesium.HeightReference.CLAMP_TO_GROUND) { if (this.sdk.viewer.scene.terrainProvider.availability) { Cesium.sampleTerrainMostDetailed( this.sdk.viewer.scene.terrainProvider, [ Cesium.Cartographic.fromDegrees( this.options.positions.lng, this.options.positions.lat ) ] ).then(position => { this.#_billboardHeight = position[0].height }) } else { this.#_billboardHeight = 0 } } else { this.#_billboardHeight = this.options.positions.alt } } this._elms.heightMode && (this._elms.heightMode.value = heightModeName) } get labelText() { return this.options.label.text } set labelText(v) { this.options.label.text = v this.options.name = v this.entity && (this.entity.label.text = v + '') this._elms.labelText && this._elms.labelText.forEach(item => { item.value = v }) } get lng() { return this.options.positions.lng } set lng(v) { this.options.positions.lng = Number(Number(v).toFixed(8)) // this.scan && (this.scan.lng = v) // this.diffuse && (this.diffuse.lng = v) this.renewPoint() this.coordinate = this.options.coordinate this._projConvert && this._projConvert() this._elms.lng && this._elms.lng.forEach(item => { item.value = v }) } get lat() { return this.options.positions.lat } set lat(v) { this.options.positions.lat = Number(Number(v).toFixed(8)) // this.scan && (this.scan.lat = v) // this.diffuse && (this.diffuse.lat = v) this.renewPoint() this.coordinate = this.options.coordinate this._projConvert && this._projConvert() this._elms.lat && this._elms.lat.forEach(item => { item.value = v }) } get alt() { return this.options.positions.alt } set alt(v) { this.options.positions.alt = Number(Number(v).toFixed(2)) this.#_billboardHeight = this.options.positions.alt // this.scan && (this.scan.alt = v) // this.diffuse && (this.diffuse.alt = v) this.renewPoint() this.coordinate = this.options.coordinate this._elms.alt && this._elms.alt.forEach(item => { item.value = this.options.positions.alt }) if (this._elms.height) { let heightElm = this._elms.height.getElementsByClassName('height')[0] if (heightElm) { switch (this._elms.heightMode.value) { case '海拔高度': heightElm.value = this.options.positions.alt break // case '相对高度': // this.getClampToHeight(this.options.positions).then(h => { // heightElm.value = Number( // (this.options.positions.alt - h).toFixed(2) // ) // }) // break case '相对地表': if (this.sdk.viewer.scene.terrainProvider.availability) { Cesium.sampleTerrainMostDetailed( this.sdk.viewer.scene.terrainProvider, [ Cesium.Cartographic.fromDegrees( this.options.positions.lng, this.options.positions.lat ) ] ).then(position => { heightElm.value = Number( (this.options.positions.alt - position[0].height).toFixed(2) ) }) } else { heightElm.value = Number( Number(this.options.positions.alt).toFixed(2) ) } break case '依附地表': case '依附地表': break case '依附模型': this.updateHeight() break } } } } get near() { return this.options.near } set near(v) { let near = v if (near > this.far) { near = this.far } this.options.near = near this.renewPoint() this._elms.near && this._elms.near.forEach(item => { item.value = near }) } get far() { return this.options.far } set far(v) { let far = v if (far < this.near) { far = this.near } this.options.far = far this.renewPoint() this._elms.far && this._elms.far.forEach(item => { item.value = far }) } get scaleByDistance() { return this.options.scaleByDistance } set scaleByDistance(v) { this.options.scaleByDistance = v this.renewPoint() this._elms.scaleByDistance && this._elms.scaleByDistance.forEach(item => { item.checked = v }) } get billboardShow() { return this.options.billboard.show } set billboardShow(v) { this.options.billboard.show = v this.entity && (this.entity.billboard.color = this.options.billboard.show ? undefined : new Cesium.Color(1.0, 1.0, 1.0, 0)) this._elms.billboardShow && this._elms.billboardShow.forEach(item => { item.value = v }) } get billboardImage() { let url = this.options.billboard.image if (url && !url.startsWith("http")) { //说明是本地的json,在磁盘中存在的 if (!url.includes(":")) { if (this.options.host) { let o = new URL(url, this.options.host) url = o.href } } } return url } set billboardImage(v) { let _this = this this.options.billboard.image = this.replaceHost(v, this.options.host) let url = this.options.billboard.image || getBillboardDefaultUrl(this.options.billboard.defaultImage) || this.getSourceRootPath() + '/img/A-ablu-blank.png' this._elms.billboardImage && this._elms.billboardImage.forEach(item => { item.src = url }) let isGlf = false let superGif if (_this.entity.billboard.image && _this.entity.billboard.image.getVa) { } if (url && url.endsWith('gif')) { isGlf = true let gifImg = document.createElement('img') gifImg.setAttribute('rel:animated_src', url) gifImg.setAttribute('rel:auto_play', '1') const imgDiv = document.createElement('div') imgDiv.appendChild(gifImg) let id = Cesium.createGuid() superGif = new SuperGif({ gif: gifImg }) this._superGif = superGif this._superGif.id = id let billboardH = 36 let index = 0 _this._frameImages = [] superGif.load(function (status) { if (status == 404) { let width = 31 let height = 36 canvas = document.createElement('canvas') canvas.width = 0 canvas.height = 0 billboardH = 0 _this.entity.billboard.imgWidth = 0 _this.entity.billboard.imgHeight = 0 _this.entity && (_this.entity.billboard.image = canvas) _this.entity.billboard.height = new Cesium.CallbackProperty(function () { return 0 }, false) _this.entity.label.pixelOffset = new Cesium.CallbackProperty(function () { return new Cesium.Cartesian2(0, 0) }, false) billboardH = height * (31 / width) return } if (_this._superGif.id != id) { return } let length = superGif.get_length() for (let i = 1; i <= length; i++) { superGif.move_to(i) _this._frameImages.push(superGif.get_canvas().toDataURL()) } const canvas = superGif.get_canvas() let width = canvas.width let height = canvas.height billboardH = height * (31 / width) _this.entity.billboard.imgWidth = width _this.entity.billboard.imgHeight = height _this.entity && (_this.entity.billboard.image = new Cesium.CallbackProperty(() => { let img = _this._frameImages[index] index = index >= _this._frameImages.length - 1 ? 0 : index + 1 return img }, false)) _this.entity.billboard.height = new Cesium.CallbackProperty(function () { return billboardH }, false) _this.entity.label.pixelOffset = new Cesium.CallbackProperty(function () { if (_this.options.billboard.show) { return new Cesium.Cartesian2( 0, -billboardH * _this.options.billboard.scale - _this.options.label.fontSize / 2 - 5 ) } else { return new Cesium.Cartesian2(0, -_this.options.label.fontSize / 2 - 5) } }, false) }) } else { let image = new Image() image.src = url let billboardH = 36 const canvas = document.createElement('canvas') image.onload = function () { let ratio = image.width / image.height image.width = 100 image.height = 100 / ratio let width = image.width let height = image.height const ctx = canvas.getContext('2d', { willReadFrequently: true }) canvas.width = width canvas.height = height ctx.drawImage(image, 0, 0, width, height) billboardH = height * (31 / width) _this.entity.billboard.imgWidth = width _this.entity.billboard.imgHeight = height _this.entity && (_this.entity.billboard.image = canvas) _this.entity.billboard.height = new Cesium.CallbackProperty(function () { return billboardH }, false) _this.entity.label.pixelOffset = new Cesium.CallbackProperty(function () { if (_this.options.billboard.show) { return new Cesium.Cartesian2( 0, -billboardH * _this.options.billboard.scale - _this.options.label.fontSize / 2 - 5 ) } else { return new Cesium.Cartesian2(0, -_this.options.label.fontSize / 2 - 5) } }, false) billboardH = height * (31 / width) } image.onerror = function (err) { let width = 31 let height = 36 canvas.width = 0 canvas.height = 0 billboardH = 0 _this.entity.billboard.imgWidth = 0 _this.entity.billboard.imgHeight = 0 _this.entity && (_this.entity.billboard.image = canvas) _this.entity.billboard.height = new Cesium.CallbackProperty(function () { return 0 }, false) _this.entity.label.pixelOffset = new Cesium.CallbackProperty(function () { return new Cesium.Cartesian2(0, 0) }, false) billboardH = height * (31 / width) }; } } get billboardScale() { return this.options.billboard.scale } set billboardScale(v) { this.options.billboard.scale = v this.renewPoint() this._elms.billboardScale && this._elms.billboardScale.forEach(item => { item.value = v }) } get labelShow() { return this.options.label.show } set labelShow(v) { this.options.label.show = v this.entity && (this.entity.label.show = v) this._elms.labelShow && this._elms.labelShow.forEach(item => { item.value = v }) } get labelFontFamily() { return this.options.label.fontFamily } set labelFontFamily(v) { this.options.label.fontFamily = v || 0 this.renewPoint() let name = getFontFamilyName(this.labelFontFamily) || '' this._elms.labelFontFamily && this._elms.labelFontFamily.forEach(item => { item.value = name }) } get labelFontSize() { return this.options.label.fontSize } set labelFontSize(v) { this.options.label.fontSize = v this.renewPoint() this._elms.labelFontSize && this._elms.labelFontSize.forEach(item => { item.value = v }) } get labelColor() { return this.options.label.color } set labelColor(v) { this.options.label.color = v || '#00ffff' this.renewPoint() if (this._elms.labelColor) { this._elms.labelColor.forEach((item, i) => { let colorPicker = new YJColorPicker({ el: item.el, size: 'mini', //颜色box类型 alpha: true, //是否开启透明度 defaultColor: this.options.label.color, disabled: false, //是否禁止打开颜色选择器 openPickerAni: 'opacity', //打开颜色选择器动画 sure: c => { this.labelColor = c }, //点击确认按钮事件回调 clear: () => { this.labelColor = 'rgba(0,255,255,1)' } //点击清空按钮事件回调 }) this._elms.labelColor[i] = colorPicker }) } } // get diffuseShow() { // return this.options.diffuseShow // } // set diffuseShow(v) { // this.options.diffuseShow = v // this._elms.diffuseShow && this._elms.diffuseShow.forEach((item) => { // item.checked = v // }) // if (v && this.scanShow) { // this.scanShow = false // } // if (this.diffuse) { // if (this.show) { // this.diffuse.show = this.options.diffuseShow // } // } // else { // this.diffuse = new CircleDiffuse(this.sdk, { show: this.diffuseShow, lng: this.lng, lat: this.lat, radius: this.diffuseRadius, duration: this.diffuseDuration, color: this.diffuseColor }) // } // } // get diffuseRadius() { // return this.options.diffuseRadius // } // set diffuseRadius(v) { // this.options.diffuseRadius = v // this._elms.diffuseRadius && this._elms.diffuseRadius.forEach((item) => { // item.value = v // }) // if (this.diffuse) { // this.diffuse.radius = this.options.diffuseRadius // } // } // get diffuseDuration() { // return this.options.diffuseDuration // } // set diffuseDuration(v) { // this.options.diffuseDuration = v // this._elms.diffuseDuration && this._elms.diffuseDuration.forEach((item) => { // item.value = v // }) // if (this.diffuse) { // this.diffuse.duration = this.options.diffuseDuration // } // } // get diffuseColor() { // return this.options.diffuseColor // } // set diffuseColor(v) { // this.options.diffuseColor = v // if (this._elms.diffuseColor) { // this._elms.diffuseColor.forEach((item, i) => { // let diffuseColorPicker = new YJColorPicker({ // el: item.el, // size: 'mini',//颜色box类型 // alpha: false,//是否开启透明度 // defaultColor: v, // disabled: false,//是否禁止打开颜色选择器 // openPickerAni: 'opacity',//打开颜色选择器动画 // sure: (c) => { // this.diffuseColor = c // },//点击确认按钮事件回调 // clear: () => { // this.diffuseColor = 'rgba(255,255,255,1)' // },//点击清空按钮事件回调 // }) // this._elms.diffuseColor[i] = diffuseColorPicker // }) // } // if (this.diffuse) { // this.diffuse.color = this.options.diffuseColor // } // } // get scanShow() { // return this.options.scanShow // } // set scanShow(v) { // this.options.scanShow = v // this._elms.scanShow && this._elms.scanShow.forEach((item) => { // item.checked = v // }) // if (v && this.diffuseShow) { // this.diffuseShow = false // } // if (this.scan) { // if (this.show) { // this.scan.show = this.options.scanShow // } // } // else { // this.scan = new RadarScan(this.sdk, { show: this.scanShow, lng: this.lng, lat: this.lat, radius: this.scanRadius, duration: this.scanDuration, color: this.scanColor }) // } // } // get scanRadius() { // return this.options.scanRadius // } // set scanRadius(v) { // this.options.scanRadius = v // this._elms.scanRadius && this._elms.scanRadius.forEach((item) => { // item.value = v // }) // if (this.scan) { // this.scan.radius = this.options.scanRadius // } // } // get scanDuration() { // return this.options.scanDuration // } // set scanDuration(v) { // this.options.scanDuration = v // this._elms.scanDuration && this._elms.scanDuration.forEach((item) => { // item.value = v // }) // if (this.scan) { // this.scan.duration = this.options.scanDuration // } // } // get scanColor() { // return this.options.scanColor // } // set scanColor(v) { // this.options.scanColor = v // if (this._elms.scanColor) { // this._elms.scanColor.forEach((item, i) => { // let scanColorPicker = new YJColorPicker({ // el: item.el, // size: 'mini',//颜色box类型 // alpha: false,//是否开启透明度 // defaultColor: v, // disabled: false,//是否禁止打开颜色选择器 // openPickerAni: 'opacity',//打开颜色选择器动画 // sure: (c) => { // this.scanColor = c // },//点击确认按钮事件回调 // clear: () => { // this.scanColor = 'rgba(255,255,255,1)' // },//点击清空按钮事件回调 // }) // this._elms.scanColor[i] = scanColorPicker // }) // } // if (this.scan) { // this.scan.color = this.options.scanColor // } // } get instruct() { return this.options.instruct } set instruct(v) { this.options.instruct = v this._elms.instruct && this._elms.instruct.forEach(item => { item.value = v }) } get operatingPoint() { return this.options.operatingPoint } set operatingPoint(v) { this.options.operatingPoint = v this._elms.operatingPoint && this._elms.operatingPoint.forEach(item => { item.value = v }) } get attributeType() { return this.options.attributeType } set attributeType(v) { this.options.attributeType = v this._elms.attributeType && this._elms.attributeType.forEach(item => { item.value = v }) let attributeContent = this._DialogObject._element.content.getElementsByClassName( 'attribute-content' ) for (let i = 0; i < attributeContent.length; i++) { if ( attributeContent[i].className.indexOf('attribute-content-' + v) > -1 ) { attributeContent[i].style.display = 'block' } else { attributeContent[i].style.display = 'none' } } } get attributeLink() { return this.options.attribute.link.content } set attributeLink(v) { this.options.attribute.link.content = v if ( !this._DialogObject || !this._DialogObject._element || !this._DialogObject._element.content || this._DialogObject._element.content.getElementsByClassName( 'attribute-content-link' ).length == 0 ) { return } let table = this._DialogObject._element.content .getElementsByClassName('attribute-content-link')[1] .getElementsByClassName('table')[0] let tableContent = table.getElementsByClassName('table-body')[0] tableContent.innerHTML = '' if (this.options.attribute.link.content.length > 0) { table.getElementsByClassName('table-empty')[0].style.display = 'none' } else { table.getElementsByClassName('table-empty')[0].style.display = 'flex' } for (let i = 0; i < this.options.attribute.link.content.length; i++) { let tr = `
` + this.options.attribute.link.content[i].name + `
` + this.options.attribute.link.content[i].url + `
` let trElm = document.createRange().createContextualFragment(tr) tableContent.appendChild(trElm) } let item = tableContent.getElementsByClassName('tr') let fun = { linkEdit: async index => { this.attributeLink = await this.options.attribute.link.content let table = this._DialogObject._element.content .getElementsByClassName('attribute-content-link')[1] .getElementsByClassName('table')[0] let tableContent = table.getElementsByClassName('table-body')[0] let item = tableContent.getElementsByClassName('tr') for (let i = 0; i < item.length; i++) { if (index === i) { let height = item[i].offsetHeight let html = `
` item[i].innerHTML = html let textareaElm = item[i].getElementsByClassName('link-edit')[0] textareaElm.style.height = height - 10 + 'px' let td = item[i].getElementsByClassName('td') td[0].getElementsByClassName( 'input' )[0].value = this.options.attribute.link.content[index].name td[1].getElementsByClassName( 'input' )[0].value = this.options.attribute.link.content[index].url let btn = item[i].getElementsByTagName('button') for (let n = 0; n < btn.length; n++) { if (!btn[n] || !btn[n].attributes) { continue } for (let m of btn[n].attributes) { if (m.name === '@click') { btn[n].addEventListener('click', e => { if (typeof fun[m.value] === 'function') { fun[m.value]( { name: td[0].getElementsByClassName('input')[0].value, url: td[1].getElementsByClassName('input')[0].value }, i ) } }) btn[n].attributes.removeNamedItem(m.name) break } } } break } } }, linkDelete: i => { this.options.attribute.link.content.splice(i, 1) this.attributeLink = this.options.attribute.link.content }, confirmEdit: (value, i) => { let name = value.name && value.name.replace(/\s/g, '') let url = value.url && value.url.replace(/\s/g, '') if (name && url) { this.options.attribute.link.content[i] = value } else { window.ELEMENT && window.ELEMENT.Message({ message: '名称或链接不能为空!', type: 'warning', duration: 1500 }) } this.attributeLink = this.options.attribute.link.content }, cancelEdit: () => { this.attributeLink = this.options.attribute.link.content }, fileSelect: (value, i) => { let fileElm = item[i].getElementsByClassName('file-select')[0] fileElm.click() fileElm.removeEventListener('change', fileSelect) fileElm.addEventListener('change', fileSelect) } } let fileSelect = event => { if (event.target.value) { let td = item[ event.target.getAttribute('index') ].getElementsByClassName('td') td[1].getElementsByClassName('input')[0].value = event.target.value event.target.value = null } } for (let i = 0; i < item.length; i++) { let btn = item[i].getElementsByTagName('button') for (let n = 0; n < btn.length; n++) { if (!btn[n] || !btn[n].attributes) { continue } for (let m of btn[n].attributes) { if (m.name === '@click') { btn[n].addEventListener('click', e => { if (typeof fun[m.value] === 'function') { fun[m.value](i) } }) btn[n].attributes.removeNamedItem(m.name) break } } } } } get attributeCamera() { return this.options.attribute.camera.content } set attributeCamera(v) { this.options.attribute.camera.content = v } get attributeISC() { return this.options.attribute.ISC.content } set attributeISC(v) { this.options.attribute.ISC.content = v } get attributeVr() { return this.options.attribute.vr.content } set attributeVr(v) { this.options.attribute.vr.content = v if ( !this._DialogObject || !this._DialogObject._element || !this._DialogObject._element.content || this._DialogObject._element.content.getElementsByClassName( 'attribute-content-vr' ).length == 0 ) { return } let table = this._DialogObject._element.content .getElementsByClassName('attribute-content-vr')[1] .getElementsByClassName('table')[0] let tableContent = table.getElementsByClassName('table-body')[0] tableContent.innerHTML = '' if (this.options.attribute.vr.content.length > 0) { table.getElementsByClassName('table-empty')[0].style.display = 'none' } else { table.getElementsByClassName('table-empty')[0].style.display = 'flex' } for (let i = 0; i < this.options.attribute.vr.content.length; i++) { let tr = `
` + this.options.attribute.vr.content[i].name + `
` + this.options.attribute.vr.content[i].url + `
` let trElm = document.createRange().createContextualFragment(tr) tableContent.appendChild(trElm) } let item = tableContent.getElementsByClassName('tr') let fun = { vrEdit: async index => { this.attributeVr = await this.options.attribute.vr.content let table = this._DialogObject._element.content .getElementsByClassName('attribute-content-vr')[1] .getElementsByClassName('table')[0] let tableContent = table.getElementsByClassName('table-body')[0] let item = tableContent.getElementsByClassName('tr') for (let i = 0; i < item.length; i++) { if (index === i) { let height = item[i].offsetHeight let html = `
` item[i].innerHTML = html let textareaElm = item[i].getElementsByClassName('link-edit')[0] textareaElm.style.height = height - 10 + 'px' let td = item[i].getElementsByClassName('td') td[0].getElementsByClassName( 'input' )[0].value = this.options.attribute.vr.content[index].name td[1].getElementsByClassName( 'input' )[0].value = this.options.attribute.vr.content[index].url let btn = item[i].getElementsByTagName('button') for (let n = 0; n < btn.length; n++) { if (!btn[n] || !btn[n].attributes) { continue } for (let m of btn[n].attributes) { if (m.name === '@click') { btn[n].addEventListener('click', e => { if (typeof fun[m.value] === 'function') { fun[m.value]( { name: td[0].getElementsByClassName('input')[0].value, url: td[1].getElementsByClassName('input')[0].value }, i ) } }) btn[n].attributes.removeNamedItem(m.name) break } } } break } } }, vrDelete: i => { this.options.attribute.vr.content.splice(i, 1) this.attributeVr = this.options.attribute.vr.content }, confirmEdit: (value, i) => { let name = value.name && value.name.replace(/\s/g, '') let url = value.url && value.url.replace(/\s/g, '') if (name && url) { this.options.attribute.vr.content[i] = value } else { window.ELEMENT && window.ELEMENT.Message({ message: '名称或链接不能为空!', type: 'warning', duration: 1500 }) } this.attributeVr = this.options.attribute.vr.content }, cancelEdit: () => { this.attributeVr = this.options.attribute.vr.content }, fileSelect: (value, i) => { let fileElm = item[i].getElementsByClassName('file-select')[0] fileElm.click() fileElm.removeEventListener('change', fileSelect) fileElm.addEventListener('change', fileSelect) } } let fileSelect = event => { if (event.target.value) { let td = item[ event.target.getAttribute('index') ].getElementsByClassName('td') td[1].getElementsByClassName('input')[0].value = event.target.value event.target.value = null } } for (let i = 0; i < item.length; i++) { let btn = item[i].getElementsByTagName('button') for (let n = 0; n < btn.length; n++) { if (!btn[n] || !btn[n].attributes) { continue } for (let m of btn[n].attributes) { if (m.name === '@click') { btn[n].addEventListener('click', e => { if (typeof fun[m.value] === 'function') { fun[m.value](i) } }) btn[n].attributes.removeNamedItem(m.name) break } } } } } get attributeGoods() { return this.options.attribute.goods.content } set attributeGoods(v) { this.options.attribute.goods.content = v } get billboardDefaultImage() { return ( getBillboardDefaultUrl(this.options.billboard.defaultImage) || this.getSourceRootPath() + '/img/A-ablu-blank.png' ) } set billboardDefaultImage(v) { let url = this.replaceHost(v, this.options.host) setBillboardDefaultUrl(url, this.options.billboard.defaultImage) this._elms.billboardDefaultImage && this._elms.billboardDefaultImage.forEach(item => { item.src = url }) } get coordinate() { return this.options.coordinate } set coordinate(v) { this.options.coordinate = v let position = this._proj.convert( [ { x: this.options.positions.lng, y: this.options.positions.lat, z: this.options.positions.alt } ], 'EPSG:4326', v ).points if ( this._DialogObject && this._DialogObject._element && this._DialogObject._element.content && position[0] ) { this._DialogObject._element.content.getElementsByClassName( 'convert-x' )[0].value = position[0].x this._DialogObject._element.content.getElementsByClassName( 'convert-y' )[0].value = position[0].y this._DialogObject._element.content.getElementsByClassName( 'convert-z' )[0].value = position[0].z } this._elms.coordinate && this._elms.coordinate.forEach(item => { item.value = v }) } /** * @description 编辑框 * @param state=false {boolean} 状态: true打开, false关闭 */ async edit(state = false) { let _this = this this.originalOptions = this.deepCopyObj(this.options) // let elms = this.sdk.viewer._container.getElementsByClassName('YJ-custom-base-dialog') // for (let i = elms.length - 1; i >= 0; i--) { // this.sdk.viewer._container.removeChild(elms[i]) // } if (this._DialogObject && this._DialogObject.close) { this._DialogObject.close() this._DialogObject = null } if (state) { this._DialogObject = await new Dialog( this.sdk, this.options, { title: '点属性', left: '180px', top: '100px', confirmCallBack: options => { this.labelText = this.labelText.trim() if (!this.labelText) { this.labelText = '未命名对象' } this.originalOptions = this.deepCopyObj(this.options) this._DialogObject.close() let cdoptions = this.deepCopyObj(this.options) cdoptions.host = '' this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(cdoptions) 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.positionEditing = false setTimeout(() => { this.reset() this.Dialog.closeCallBack && this.Dialog.closeCallBack() }, 0) }, showCallBack: show => { this.show = show this.Dialog.showCallBack && this.Dialog.showCallBack() }, translationalCallBack: () => { this.positionEditing = !this.positionEditing }, updateHeightCallBack: () => { this.updateHeight() } }, true ) this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' billboard-object' let contentElm = document.createElement('div') contentElm.innerHTML = html(this) this._DialogObject.contentAppChild(contentElm) this.attributeType = this.options.attributeType this.attributeCamera = this.options.attribute.camera.content this.attributeISC = this.options.attribute.ISC.content // let coordinateElm = contentElm.getElementsByClassName('coordinate-select')[0] // let option = '' // this._proj.epsg_map.forEach((value, key) => { // if (!this.options.coordinate) { // this.options.coordinate = key // this.originalOptions.coordinate = key // } // option += `` // }) // coordinateElm.innerHTML = option // this.coordinate = this.options.coordinate // 创建标签页 let tabsElm = new cy_tabs('point-object-edit-tabs', undefined, this.sdk) // 颜色组件 let colorPicker = new YJColorPicker({ el: contentElm.getElementsByClassName('labelColor')[0], size: 'mini', //颜色box类型 alpha: true, //是否开启透明度 defaultColor: this.labelColor, disabled: false, //是否禁止打开颜色选择器 openPickerAni: 'opacity', //打开颜色选择器动画 sure: color => { this.labelColor = color }, //点击确认按钮事件回调 clear: () => { this.labelColor = 'rgba(255,255,255,1)' } //点击清空按钮事件回调 }) // let diffuseColorPicker = new YJColorPicker({ // el: contentElm.getElementsByClassName("diffuseColor")[0], // size: 'mini',//颜色box类型 // alpha: false,//是否开启透明度 // defaultColor: this.diffuseColor, // disabled: false,//是否禁止打开颜色选择器 // openPickerAni: 'opacity',//打开颜色选择器动画 // sure: (color) => { // this.diffuseColor = color // },//点击确认按钮事件回调 // clear: () => { // this.diffuseColor = 'rgba(255,255,255,1)' // },//点击清空按钮事件回调 // }) // let scanColorPicker = new YJColorPicker({ // el: contentElm.getElementsByClassName("scanColor")[0], // size: 'mini',//颜色box类型 // alpha: false,//是否开启透明度 // defaultColor: this.scanColor, // disabled: false,//是否禁止打开颜色选择器 // openPickerAni: 'opacity',//打开颜色选择器动画 // sure: (color) => { // this.scanColor = color // },//点击确认按钮事件回调 // clear: () => { // this.scanColor = 'rgba(255,255,255,1)' // },//点击清空按钮事件回调 // }) let all_elm = contentElm.getElementsByTagName('*') this._EventBinding.on(this, all_elm) this._elms = this._EventBinding.element this._elms.labelColor = [colorPicker] // this._elms.diffuseColor = [diffuseColorPicker] // this._elms.scanColor = [scanColorPicker] setTimeout(async () => { this.attributeLink = this.options.attribute.link.content this.attributeVr = this.options.attribute.vr.content // this.attributeCamera = this.options.attribute.camera this.cameraSelect && this.cameraSelect() this.ISCSelect && this.ISCSelect() this.goodsSelect && this.goodsSelect() let col = document.createElement('div') col.className = 'col' col.style.flex = '0 0 110px' col.innerHTML = ` 属性框 ` let row = this._DialogObject._element.content.getElementsByClassName('attribute')[0].getElementsByClassName('row')[0] row.appendChild(col) let boxSwitch = col.getElementsByClassName('btn-switch')[0] boxSwitch.checked = this.attributeBoxState boxSwitch.addEventListener('change', (e) => { this.attributeBoxState = boxSwitch.checked }) let tagData = this.attributeSelect let attributeElm = this._DialogObject._element.content.getElementsByClassName( 'attribute-select-box' )[0] if (attributeElm) { let legpObject = legp(attributeElm, '.attribute-select') legpObject.legp_search(tagData) let attributeSelectElm = this._DialogObject._element.content .getElementsByClassName('attribute-select')[0] .getElementsByTagName('input')[0] for (let i = 0; i < tagData.length; i++) { if (tagData[i].key === this.options.attributeType) { attributeSelectElm.value = tagData[i].value legpObject.legp_searchActive(tagData[i].value) break } } attributeSelectElm.addEventListener('input', () => { for (let i = 0; i < tagData.length; i++) { if (tagData[i].value === attributeSelectElm.value) { this.attributeType = tagData[i].key break } } }) } let coordinateData = [] this.epsg_map.forEach((value, key) => { coordinateData.push({ name: `${value.name}(${value.epsg})`, value: key }) }) let coordinateDataLegpObject = legp( this._DialogObject._element.content.getElementsByClassName( 'coordinate-select-box' )[0], '.coordinate-select' ) if (coordinateDataLegpObject) { coordinateDataLegpObject.legp_search(coordinateData) let coordinateDataLegpElm = this._DialogObject._element.content .getElementsByClassName('coordinate-select')[0] .getElementsByTagName('input')[0] if (!this.coordinate) { this.coordinate = coordinateData[0].value } else { this.coordinate = this.coordinate } coordinateDataLegpElm.value = this.coordinate for (let i = 0; i < coordinateData.length; i++) { if (coordinateData[i].value === coordinateData.value) { coordinateDataLegpObject.legp_searchActive( coordinateData[i].value ) break } } coordinateDataLegpElm.addEventListener('input', () => { for (let i = 0; i < coordinateData.length; i++) { if (coordinateData[i].value === coordinateDataLegpElm.value) { this.coordinate = coordinateData[i].value break } } }) } let heightBoxElm = document.getElementsByClassName('height-box')[0] let heightElm = heightBoxElm.getElementsByClassName('height')[0] let heightModeData = [ { name: '海拔高度', value: '海拔高度', key: '0' }, { name: '相对地表', value: '相对地表', key: '1' }, { name: '依附地表', value: '依附地表', key: '2' }, { name: '依附模型', value: '依附模型', key: '3' } ] let heightMode = this.heightMode switch (heightMode) { case 0: case '0': heightElm.value = this.alt break case 1: case '1': if (this.sdk.viewer.scene.terrainProvider.availability) { Cesium.sampleTerrainMostDetailed( this.sdk.viewer.scene.terrainProvider, [ Cesium.Cartographic.fromDegrees( this.options.positions.lng, this.options.positions.lat ) ] ).then(position => { heightElm.value = Number( (this.alt - Number(position[0].height.toFixed(2))).toFixed(2) ) }) } else { heightElm.value = Number(this.alt.toFixed(2)) } break case 2: case '2': case 3: case '3': let objectsToExclude = [] for (let [key, value] of this.sdk.entityMap) { if (value.type === 'RadarScanStereoscopic' && value.entity) { objectsToExclude.push(value.entity) } } this.getClampToHeight(this.options.positions, objectsToExclude).then(h => { this.alt = Number(h.toFixed(2)) heightElm.value = this.alt }) break } let heightModeObject = legp( this._DialogObject._element.content.getElementsByClassName( 'height-mode-box' )[0], '.height-mode' ) if (heightModeObject) { heightModeObject.legp_search(heightModeData) let heightModeDataLegpElm = this._DialogObject._element.content .getElementsByClassName('height-mode')[0] .getElementsByTagName('input')[0] heightModeDataLegpElm.value = heightModeData[this.heightMode].value for (let i = 0; i < heightModeData.length; i++) { if (heightModeData[i].value == heightModeDataLegpElm.value) { heightModeObject.legp_searchActive(heightModeData[i].value) break } } heightModeDataLegpElm.addEventListener('input', () => { for (let i = 0; i < heightModeData.length; i++) { if (heightModeData[i].value === heightModeDataLegpElm.value) { heightMode = heightModeData[i].key switch (heightMode) { case 0: case '0': this.alt = Number(heightElm.value) heightBoxElm.style.display = 'flex' this.heightMode = 0 break case 1: case '1': if (this.sdk.viewer.scene.terrainProvider.availability) { Cesium.sampleTerrainMostDetailed( this.sdk.viewer.scene.terrainProvider, [ Cesium.Cartographic.fromDegrees( this.options.positions.lng, this.options.positions.lat ) ] ).then(position => { this.alt = Number(heightElm.value) + Number(position[0].height.toFixed(2)) }) } else { this.alt = Number(heightElm.value) } heightBoxElm.style.display = 'flex' this.heightMode = 1 break case 2: case '2': this.heightMode = 2 break case 3: case '3': let objectsToExclude = [] for (let [key, value] of this.sdk.entityMap) { if (value.type === 'RadarScanStereoscopic' && value.entity) { objectsToExclude.push(value.entity) } } this.getClampToHeight(this.options.positions, objectsToExclude).then(h => { this.alt = Number(h.toFixed(2)) }) this.heightMode = 3 break } break } } }) heightElm.addEventListener('input', () => { switch (heightMode) { case 0: case '0': this.options.positions.alt = Number( Number(heightElm.value).toFixed(2) ) break case 1: case '1': if (this.sdk.viewer.scene.terrainProvider.availability) { Cesium.sampleTerrainMostDetailed( this.sdk.viewer.scene.terrainProvider, [ Cesium.Cartographic.fromDegrees( this.options.positions.lng, this.options.positions.lat ) ] ).then(position => { this.alt = Number(heightElm.value) + Number(position[0].height.toFixed(2)) }) } else { this.alt = Number(heightElm.value) } break case 2: case '2': break } this.renewPoint() this.coordinate = this.options.coordinate this._elms.alt && this._elms.alt.forEach(item => { item.value = this.options.positions.alt }) }) this._elms.height = heightBoxElm this._elms.heightMode = heightModeDataLegpElm this.heightMode = this.heightMode } let fontData = getFontList() let fontObject = legp( this._DialogObject._element.content.getElementsByClassName( 'font-select-box' )[0], '.font-select' ) if (fontObject) { fontObject.legp_search(fontData) let fontDataLegpElm = this._DialogObject._element.content .getElementsByClassName('font-select')[0] .getElementsByTagName('input')[0] fontDataLegpElm.value = fontData[this.labelFontFamily].value for (let i = 0; i < fontData.length; i++) { if (fontData[i].value == fontDataLegpElm.value) { fontObject.legp_searchActive(fontData[i].value) break } } fontDataLegpElm.addEventListener('input', () => { for (let i = 0; i < fontData.length; i++) { if (fontData[i].value === fontDataLegpElm.value) { this.labelFontFamily = fontData[i].key break } } }) this._elms.labelFontFamily = [fontDataLegpElm] } }, 0) let lngEln = contentElm.getElementsByClassName('lng')[0] let latEln = contentElm.getElementsByClassName('lat')[0] lngEln.value = this.lng latEln.value = this.lat this._elms.lng.push(lngEln) this._elms.lat.push(latEln) let projCheckboxBoxElms = this._DialogObject._element.content.getElementsByClassName( 'YJ-custom-checkbox-box' ) let projCheckboxElms = this._DialogObject._element.content.getElementsByClassName( 'YJ-custom-checkbox' ) let projInputBoxElms = this._DialogObject._element.content.getElementsByClassName( 'proj-input-box' ) projCheckboxElms[0].checked = true projInputBoxElms[1].style.display = 'none' projInputBoxElms[2].style.display = 'none' projCheckboxBoxElms[0].addEventListener('click', () => { projCheckboxElms[0].checked = true projInputBoxElms[0].style.display = 'block' projCheckboxElms[1].checked = false projInputBoxElms[1].style.display = 'none' projCheckboxElms[2].checked = false projInputBoxElms[2].style.display = 'none' }) projCheckboxBoxElms[1].addEventListener('click', () => { projCheckboxElms[1].checked = true projInputBoxElms[1].style.display = 'block' projCheckboxElms[0].checked = false projInputBoxElms[0].style.display = 'none' projCheckboxElms[2].checked = false projInputBoxElms[2].style.display = 'none' }) projCheckboxBoxElms[2].addEventListener('click', () => { projCheckboxElms[2].checked = true projInputBoxElms[2].style.display = 'block' projCheckboxElms[0].checked = false projInputBoxElms[0].style.display = 'none' projCheckboxElms[1].checked = false projInputBoxElms[1].style.display = 'none' }) _this._projConvert = () => { if (!this._DialogObject || this._DialogObject.isDestroy) { return } let lng, lat, lngD, lngM, lngS, latD, latM, latS, lngDM, latDM, lngDMS, latDMS, lngdnArr1, lngdnArr2, latdnArr1, latdnArr2, lngdnsArr1, lngdnsArr2, lngdnsArr3, latdnsArr1, latdnsArr2, latdnsArr3 lng = _this.lng lat = _this.lat lngDM = _this._proj.degreesToDMS(lng, true) latDM = _this._proj.degreesToDMS(lat, true) lngdnArr1 = lngDM.split('°') lngdnArr2 = lngdnArr1[1].split("'") latdnArr1 = latDM.split('°') latdnArr2 = latdnArr1[1].split("'") contentElm.getElementsByClassName('lng-dm-d')[0].value = lngdnArr1[0] contentElm.getElementsByClassName('lng-dm-m')[0].value = lngdnArr2[0] contentElm.getElementsByClassName('lat-dm-d')[0].value = latdnArr1[0] contentElm.getElementsByClassName('lat-dm-m')[0].value = latdnArr2[0] lngDMS = _this._proj.degreesToDMS(lng) latDMS = _this._proj.degreesToDMS(lat) lngdnsArr1 = lngDMS.split('°') lngdnsArr2 = lngdnsArr1[1].split("'") lngdnsArr3 = lngdnsArr2[1].split('"') latdnsArr1 = latDMS.split('°') latdnsArr2 = latdnsArr1[1].split("'") latdnsArr3 = latdnsArr2[1].split('"') contentElm.getElementsByClassName('lng-dms-d')[0].value = lngdnsArr1[0] contentElm.getElementsByClassName('lng-dms-m')[0].value = lngdnsArr2[0] contentElm.getElementsByClassName('lng-dms-s')[0].value = lngdnsArr3[0] contentElm.getElementsByClassName('lat-dms-d')[0].value = latdnsArr1[0] contentElm.getElementsByClassName('lat-dms-m')[0].value = latdnsArr2[0] contentElm.getElementsByClassName('lat-dms-s')[0].value = latdnsArr3[0] } _this._projConvert() } else { // if (this._element_style) { // document.getElementsByTagName('head')[0].removeChild(this._element_style) // this._element_style = null // } // if (this._DialogObject && this._DialogObject.remove) { // this._DialogObject.remove() // this._DialogObject = null // } } } renewPoint() { let _this = this let font = getFontFamily(this.labelFontFamily) || 'Helvetica' if (this.entity) { this.entity.position = Cesium.Cartesian3.fromDegrees( this.options.positions.lng, this.options.positions.lat, this.options.positions.alt ) if (this.options.scaleByDistance) { this.entity.billboard.scaleByDistance = new Cesium.NearFarScalar( this.options.near, 1, this.options.far, 0 ) this.entity.billboard.pixelOffsetScaleByDistance = new Cesium.NearFarScalar( this.options.near, 1, this.options.far, 0 ) this.entity.label.scaleByDistance = new Cesium.NearFarScalar( this.options.near, 1, this.options.far, 0 ) this.entity.label.pixelOffsetScaleByDistance = new Cesium.NearFarScalar( this.options.near, 1, this.options.far, 0 ) } else { this.entity.billboard.scaleByDistance = undefined this.entity.billboard.pixelOffsetScaleByDistance = undefined this.entity.label.scaleByDistance = undefined this.entity.label.pixelOffsetScaleByDistance = undefined } // this.entity.billboard.pixelOffset = new Cesium.CallbackProperty( // function () { // let billboardH = // _this.entity.billboard.imgHeight * // (31 / _this.entity.billboard.imgWidth) // return new Cesium.Cartesian2( // 0, // -(billboardH / 2) * _this.options.billboard.scale // ) // }, // false // ) this.entity.label.pixelOffset = new Cesium.CallbackProperty(function () { if (_this.options.billboard.show) { let billboardH = _this.entity.billboard.imgHeight ? _this.entity.billboard.imgHeight * (31 / _this.entity.billboard.imgWidth) : 0 return new Cesium.Cartesian2( 0, -billboardH * _this.options.billboard.scale - _this.options.label.fontSize / 2 - 5 ) } else { return new Cesium.Cartesian2(0, -_this.options.label.fontSize / 2 - 5) } }, false) this.entity.label.font = this.options.label.fontSize + 'px ' + font this.entity.label.fillColor = Cesium.Color.fromCssColorString( this.options.label.color ) this.entity.billboard.scale = this.options.billboard.scale } } reset() { if (!this.entity) { return } this.options = this.deepCopyObj(this.originalOptions) this.near = this.originalOptions.near this.far = this.originalOptions.far this.scaleByDistance = this.originalOptions.scaleByDistance this.billboardShow = this.originalOptions.billboard.show this.billboardImage = this.originalOptions.billboard.image this.billboardScale = this.originalOptions.billboard.scale this.labelText = this.originalOptions.label.text this.labelShow = this.originalOptions.label.show this.labelFontSize = this.originalOptions.label.fontSize this.labelColor = this.originalOptions.label.color this.lng = this.originalOptions.positions.lng this.lat = this.originalOptions.positions.lat this.alt = this.originalOptions.positions.alt // this.diffuseShow = this.originalOptions.diffuseShow // this.diffuseRadius = this.originalOptions.diffuseRadius // this.diffuseDuration = this.originalOptions.diffuseDuration // this.diffuseColor = this.originalOptions.diffuseColor // this.scanShow = this.originalOptions.scanShow // this.scanRadius = this.originalOptions.scanRadius // this.scanDuration = this.originalOptions.scanDuration // this.scanColor = this.originalOptions.scanColor this.instruct = this.originalOptions.instruct this.operatingPoint = this.originalOptions.operatingPoint this.attributeLink = this.options.attribute.link.content this.attributeVr = this.options.attribute.vr.content this.attributeCamera = this.options.attribute.camera.content this.attributeGoods = this.options.attribute.goods.content this.attributeISC = this.options.attribute.ISC.content this.attributeBoxState = this.options.attributeBoxState this.cameraSelect && this.cameraSelect() this.goodsSelect && this.goodsSelect() } async remove() { await remove_entity_from_cluster(this.sdk.viewer, this.entity) this.entity = null this.attributeBoxState = false if (!this.sdk.viewer || !this.sdk.viewer.entities) { return } // if (this.diffuse) { // this.diffuse.remove() // this.diffuse = null // } // if (this.scan) { // this.scan.remove() // this.scan = null // } if (this._DialogObject && !this._DialogObject.isDestroy) { this._DialogObject.close() this._DialogObject = null } this.event && this.event.destroy() this.tip && this.tip.destroy() await this.sdk.removeIncetance(this.options.id) await syncData(this.sdk, this.options.id) // this.entity = null } // 点击弹框内图标切换 clickChangeImage() { this.Dialog.clickChangeImage && this.Dialog.clickChangeImage() } // 点击弹框内默认图标切换 clickChangeDefaultImage() { this.Dialog.clickChangeDefaultImage && this.Dialog.clickChangeDefaultImage() } instructSubmit() { this.Dialog.instructSubmit && this.Dialog.instructSubmit( this.options.id, this.options.label.text, this.instruct ) this.originalOptions.instruct = this.instruct } operatingPointSubmit() { this.Dialog.operatingPointSubmit && this.Dialog.operatingPointSubmit( this.options.id, this.options.label.text, this.operatingPoint ) this.originalOptions.operatingPoint = this.operatingPoint } _addLink() { // document.getElementsByClassName if ( this._DialogObject._element.content.getElementsByClassName('link_add')[0] .value ) { this.options.attribute.link.content.push({ name: '链接', url: this._DialogObject._element.content.getElementsByClassName( 'link_add' )[0].value }) this._DialogObject._element.content.getElementsByClassName( 'link_add' )[0].value = '' this.attributeLink = this.options.attribute.link.content } else { this.Dialog.clickAddLink && this.Dialog.clickAddLink() } } addAttributeLink(link) { this.options.attribute.link.content.push({ name: '链接', url: link }) this.attributeLink = this.options.attribute.link.content } _addRr() { if ( this._DialogObject._element.content.getElementsByClassName('vr_add')[0] .value ) { this.options.attribute.vr.content.push({ name: '全景图', url: this._DialogObject._element.content.getElementsByClassName( 'vr_add' )[0].value }) this._DialogObject._element.content.getElementsByClassName( 'vr_add' )[0].value = '' this.attributeVr = this.options.attribute.vr.content } else { this.Dialog.clickAddVr && this.Dialog.clickAddVr() } } addAttributeRr(vr) { this.options.attribute.vr.content.push({ name: '全景图', url: vr }) this.attributeVr = this.options.attribute.vr.content } /** * 打开富文本框 */ openRichTextEditor(e) { // var ue = UE.getEditor('app'); richText.open( this.options.id, this.options.name, this.options.richTextContent ) richText.primaryCallBack = content => { this.options.richTextContent = content } } async updateHeight() { if (!this.sdk || !this.sdk.viewer || !this.sdk.viewer.scene) { return } let height let height2 let point1 = new Cesium.Cartesian3.fromDegrees( this.options.positions.lng, this.options.positions.lat, 0 ) let point2 = new Cesium.Cartesian3.fromDegrees( this.options.positions.lng, this.options.positions.lat, 10000000000000 ) let objectsToExclude = [] for (let [key, value] of this.sdk.entityMap) { if (value.type === 'RadarScanStereoscopic' && value.entity) { objectsToExclude.push(value.entity) } } let updatedCartesians = await this.sdk.viewer.scene.clampToHeightMostDetailed([point1], objectsToExclude) if (updatedCartesians && updatedCartesians[0]) { height = this.cartesian3Towgs84(updatedCartesians[0], this.sdk.viewer).alt } let direction = Cesium.Cartesian3.subtract( point1, point2, new Cesium.Cartesian3() ) let c = Cesium.Cartesian3.normalize(direction, new Cesium.Cartesian3()) let ray = new Cesium.Ray(point2, c) let r = {} let pickedObjects = this.sdk.viewer.scene.drillPickFromRay(ray) for (let i = pickedObjects.length - 1; i >= 0; i--) { if (pickedObjects[i].position) { r = pickedObjects[i] break } } if (r && r.position) { height2 = this.cartesian3Towgs84(r.position, this.sdk.viewer).alt } let promise try { promise = await Cesium.sampleTerrainMostDetailed( this.sdk.viewer.terrainProvider, [ Cesium.Cartographic.fromDegrees( this.options.positions.lng, this.options.positions.lat ) ] ) } catch (error) { } if ((height2 === void 0 || height2 < promise[0].height) && promise) { height2 = promise[0].height } if (height === void 0 || height < height2) { height = height2 } if (height !== undefined) { this.options.positions.alt = Number(Number(height).toFixed(2)) this.#_billboardHeight = this.options.positions.alt this._elms.alt && this._elms.alt.forEach(item => { item.value = this.options.positions.alt }) // this.scan && (this.scan.alt = v) // this.diffuse && (this.diffuse.alt = v) this.renewPoint() this.coordinate = this.options.coordinate if (this._elms.height) { let heightElm = this._elms.height.getElementsByClassName('height')[0] if (heightElm) { switch (this._elms.heightMode.value) { case '海拔高度': heightElm.value = this.options.positions.alt this.#_billboardHeight = this.options.positions.alt break case '相对地表': if (this.sdk.viewer.scene.terrainProvider.availability) { Cesium.sampleTerrainMostDetailed( this.sdk.viewer.scene.terrainProvider, [ Cesium.Cartographic.fromDegrees( this.options.positions.lng, this.options.positions.lat ) ] ).then(position => { heightElm.value = Number( (this.options.positions.alt - position[0].height).toFixed(2) ) this.#_billboardHeight = this.options.positions.alt }) } else { heightElm.value = this.options.positions.alt this.#_billboardHeight = this.options.positions.alt } break case '依附地表': break case '依附模型': heightElm.value = this.options.positions.alt this.#_billboardHeight = this.options.positions.alt break } } } } } 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.positions) { position = { ...this.options.positions } } 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')) { let objectsToExclude = [] for (let [key, value] of this.sdk.entityMap) { if (value.type === 'RadarScanStereoscopic' && value.entity) { objectsToExclude.push(value.entity) } } position.alt = await this.getClampToHeight(position, objectsToExclude) } 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 objectsToExclude = [] for (let [key, value] of this.sdk.entityMap) { if (value.type === 'RadarScanStereoscopic' && value.entity) { objectsToExclude.push(value.entity) } } let height = await this.getClampToHeight(this.options.positions, objectsToExclude) this.sdk.viewer.camera.flyTo({ orientation: options.orientation, destination: Cesium.Cartesian3.fromDegrees( this.options.positions.lng, this.options.positions.lat, height + (options.height || 500) ) }) } } setPosition(v) { this.options.positions.lng = v.position.lng this.options.positions.lat = v.position.lat this.options.positions.alt = v.position.alt this.renewPoint() } /**@desc 打开平移功能 * * @memberOf Source * @param status {boolean} * * */ set positionEditing(status) { if (!this.sdk || !this.sdk.viewer || !this.entity) { return } this.operate.positionEditing = status this.event && this.event.destroy() this.event = new MouseEvent(this.sdk) if (status === true) { this.picking = false this.tip && this.tip.destroy() this.tip = new MouseTip('点击鼠标左键确认,右键取消', this.sdk) this.previous = { positions: { ...this.options.positions } } let moveEvent = (movement, cartesian) => { this.entity.position = new Cesium.CallbackProperty(function () { return cartesian }, false) this.tip.setPosition( cartesian, movement.endPosition.x, movement.endPosition.y ) } let leftEvent = (movement, cartesian) => { let positions = this.cartesian3Towgs84(cartesian, this.sdk.viewer) this.lng = positions.lng this.lat = positions.lat this.alt = positions.alt this.previous = { positions: { ...this.options.positions } } this.event.mouse_move(() => { }) this.event.mouse_left(() => { }) this.event.mouse_right(() => { }) this.event.gesture_pinck_start(() => { }) this.event.gesture_pinck_end(() => { }) this.entity.position = new Cesium.CallbackProperty(function () { return cartesian }, false) this.positionEditing = false } this.event.mouse_move(moveEvent) this.event.mouse_left(leftEvent) this.event.mouse_right((movement, cartesian) => { this.positionEditing = false }) this.event.gesture_pinck_start((movement, cartesian) => { let startTime = new Date() this.event.gesture_pinck_end(() => { let endTime = new Date() let pos = { position: { x: (movement.position1.x + movement.position2.x) / 2, y: (movement.position1.y + movement.position2.y) / 2 } } if (endTime - startTime >= 500) { // 长按取消 this.positionEditing = false } else { leftEvent(pos, cartesian) } }) }) } else { this.picking = true 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.event.destroy() this.event = null } this.tip && this.tip.destroy() this.lng = this.previous.positions.lng this.lat = this.previous.positions.lat this.alt = this.previous.positions.alt this.renewPoint() } } get positionEditing() { return this.operate.positionEditing } setDIV(options = { domid: '', x: 10, y: 10 }) { options.x = options.x || options.x === 0 ? options.x : 10 options.y = options.y || options.y === 0 ? options.y : 10 let siteInfoDom = document.getElementById(options.domid) let siteInfoPosition = Cesium.Cartesian3.fromDegrees( this.options.positions.lng, this.options.positions.lat ) this.sdk.viewer.scene.postRender.addEventListener(percentage => { //转换到屏幕坐标 if ( siteInfoDom.style.display === 'block' || siteInfoDom.style.display === '' ) { let winpos = this.sdk.viewer.scene.cartesianToCanvasCoordinates( siteInfoPosition ) if (winpos) { siteInfoDom.style.left = (winpos.x + options.x).toFixed(0) + 'px' siteInfoDom.style.top = (winpos.y + options.y).toFixed(0) + 'px' } } }) } async setCustomView(val) { if (val) { this.options.customView = val } else { let camera = this.sdk.viewer.camera let cameraPosition84 = this.cartesian3Towgs84( camera.position, this.sdk.viewer ) let position = { lng: 0, lat: 0 } let relativePosition = { ...cameraPosition84 } if (this.options.positions) { position = { ...this.options.positions } } 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')) { let objectsToExclude = [] for (let [key, value] of this.sdk.entityMap) { if (value.type === 'RadarScanStereoscopic' && value.entity) { objectsToExclude.push(value.entity) } } position.alt = await this.getClampToHeight(position, objectsToExclude) } relativePosition = { lng: cameraPosition84.lng - position.lng, lat: cameraPosition84.lat - position.lat, alt: cameraPosition84.alt - position.alt } this.options.customView = { orientation: { heading: Cesium.Math.toDegrees(camera.heading), pitch: Cesium.Math.toDegrees(camera.pitch), roll: Cesium.Math.toDegrees(camera.roll) }, relativePosition: relativePosition } this.originalOptions && (this.originalOptions.customView = this.options.customView) } } get attributeBoxState() { return this.options.attributeBoxState } set attributeBoxState(state) { state = state ? true : false this.options.attributeBoxState = state document.addEventListener('mouseup', this.#_destroyMouseEvent); document.addEventListener('mouseleave', this.#_destroyMouseEvent); if (this.attributeElm) { this.sdk.viewer._element.removeChild(this.attributeElm) this.attributeElm = null } this.sdk.viewer.scene.postRender.removeEventListener(this.#_postRenderEvent) if (state && this.sdk && this.sdk.viewer && this.sdk.viewer._element && this.show) { let attributeElm = document.createElement('div') this.attributeElm = attributeElm attributeElm.className = 'billboard-attribute-box' attributeElm.style.top = '0px' attributeElm.style.left = '0px' attributeElm.style.width = 0 attributeElm.style.height = 0 if(getState()) { attributeElm.style.display = 'none' } // attributeElm.innerHTML = this.options.richTextContent this.sdk.viewer._element.appendChild(attributeElm) let linkHtml = '' let goodsHtml = '' let richTextHtml = '' for (let i = 0; i < this.options.attribute.link.content.length; i++) { linkHtml += `` } if (this.options.attribute.goods && this.options.attribute.goods.content && this.options.attribute.goods.content.length > 0) { goodsHtml += `
序号
名称
数量
` for (let i = 0; i < this.options.attribute.goods.content.length; i++) { goodsHtml += `
${i + 1}
${this.options.attribute.goods.content[i].name}
${this.options.attribute.goods.content[i].cnt}
` } goodsHtml += `
` } if (this.options.richTextContent) { richTextHtml = ` ${this.options.richTextContent} ` } let boxHtml = ` ` if (!linkHtml && !goodsHtml && !richTextHtml) { boxHtml = boxHtml + '

暂无属性信息

' } else { boxHtml = boxHtml + ` ${richTextHtml} ${goodsHtml} ${linkHtml}
` } attributeElm.innerHTML = boxHtml if (attributeElm.getElementsByClassName('tabs')[0]) { let tabsElm = new cy_tabs(attributeElm.getElementsByClassName('tabs')[0], undefined, this.sdk) } let imgElm = attributeElm.getElementsByTagName('img') for (let i = 0; i < imgElm.length; i++) { if (!imgElm[i].style.width) { imgElm[i].style.width = '100%' } } this.sdk.viewer.scene.postRender.addEventListener(this.#_postRenderEvent) let leftOnmousedown = (e) => { if (this.options.attributePos.width < 200) { this.options.attributePos.width = 200 } if (this.options.attributePos.height < 120) { this.options.attributePos.height = 120 } let x = e.x let y = e.y let width = this.options.attributePos.width let height = this.options.attributePos.height let positionx = this.options.attributePos.x this.sdk.viewer._element.onmousemove = (e2) => { this.options.attributePos.width = width + (x - e2.x) this.options.attributePos.height = height + (y - e2.y) if (this.options.attributePos.width < 200) { this.options.attributePos.width = 200 } else { this.options.attributePos.x = positionx - (x - e2.x) } if (this.options.attributePos.height < 120) { this.options.attributePos.height = 120 } // this.options.attributePos.y = positiony + (y - e2.y) } document.addEventListener('mouseup', this.#_destroyMouseEvent); document.addEventListener('mouseleave', this.#_destroyMouseEvent); } let rightOnmousedown = (e) => { let x = e.x let y = e.y if (this.options.attributePos.width < 200) { this.options.attributePos.width = 200 } if (this.options.attributePos.height < 120) { this.options.attributePos.height = 120 } let width = this.options.attributePos.width let height = this.options.attributePos.height this.sdk.viewer._element.onmousemove = (e2) => { this.options.attributePos.width = width + (e2.x - x) this.options.attributePos.height = height + (y - e2.y) } document.addEventListener('mouseup', this.#_destroyMouseEvent); document.addEventListener('mouseleave', this.#_destroyMouseEvent); } // leftTopElm.onmousedown = (e) => { // console.log(1111111111) // if (this.options.attributePos.width < 200) { // this.options.attributePos.width = 200 // } // if (this.options.attributePos.height < 120) { // this.options.attributePos.height = 120 // } // let x = e.x // let y = e.y // let width = this.options.attributePos.width // let height = this.options.attributePos.height // let positionx = this.options.attributePos.x // this.sdk.viewer._element.onmousemove = (e2) => { // this.options.attributePos.width = width + (x - e2.x) // this.options.attributePos.height = height + (y - e2.y) // if (this.options.attributePos.width < 200) { // this.options.attributePos.width = 200 // } // else { // this.options.attributePos.x = positionx - (x - e2.x) // } // if (this.options.attributePos.height < 120) { // this.options.attributePos.height = 120 // } // // this.options.attributePos.y = positiony + (y - e2.y) // } // document.addEventListener('mouseup', this.#_destroyMouseEvent); // document.addEventListener('mouseleave', this.#_destroyMouseEvent); // } // rightTopElm.onmousedown = (e) => { // let x = e.x // let y = e.y // if (this.options.attributePos.width < 200) { // this.options.attributePos.width = 200 // } // if (this.options.attributePos.height < 120) { // this.options.attributePos.height = 120 // } // let width = this.options.attributePos.width // let height = this.options.attributePos.height // this.sdk.viewer._element.onmousemove = (e2) => { // this.options.attributePos.width = width + (e2.x - x) // this.options.attributePos.height = height + (y - e2.y) // } // document.addEventListener('mouseup', this.#_destroyMouseEvent); // document.addEventListener('mouseleave', this.#_destroyMouseEvent); // } attributeElm.onmousedown = (e) => { attributeElm.style.pointerEvents = 'none' if (e.target.className.indexOf('left-top') != -1) { leftOnmousedown(e) } else if (e.target.className.indexOf('right-top') != -1) { rightOnmousedown(e) } else { let x = e.x let y = e.y let oldX = this.options.attributePos.x let oldXY = this.options.attributePos.y let height = this.options.attributePos.height this.sdk.viewer._element.onmousemove = (e2) => { this.options.attributePos.x = oldX + (e2.x - x) this.options.attributePos.y = oldXY - (e2.y - y) } document.addEventListener('mouseup', this.#_destroyMouseEvent); document.addEventListener('mouseleave', this.#_destroyMouseEvent); } } } } } export default BillboardObject