1963 lines
69 KiB
JavaScript
1963 lines
69 KiB
JavaScript
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 { legp } from '../../Element/datalist'
|
|
import { syncData } from '../../../Global/MultiViewportMode'
|
|
import { getGroundCover } from '../../../Global/global'
|
|
import MouseTip from '../../../MouseTip'
|
|
import { getFontList, getFontFamily, getFontFamilyName } from '../../Element/fontSelect'
|
|
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.<object>} 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: 1 }
|
|
this.options.mode = this.options.mode ? 1 : 0
|
|
this.options.billboard = options.billboard || {}
|
|
this.options.billboard.scale = this.options.billboard.scale || 1
|
|
this.options.billboard.near = this.options.billboard.near || this.options.billboard.near === 0 ? this.options.billboard.near : 2000
|
|
this.options.billboard.far = this.options.billboard.far || this.options.billboard.far === 0 ? this.options.billboard.far : 100000
|
|
this.options.billboard.scaleByDistance = this.options.billboard.scaleByDistance ? true : false
|
|
|
|
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.flipe = options.flipe || {}
|
|
this.options.flipe.x = this.options.flipe.x || false
|
|
this.options.flipe.y = this.options.flipe.y || false
|
|
this.options.heightMode =
|
|
options.heightMode || options.heightMode == 0 ? options.heightMode : 3
|
|
|
|
this.entity = {
|
|
id: this.options.id
|
|
}
|
|
this._positionEditing = false
|
|
this.Dialog = _Dialog
|
|
this._elms = {};
|
|
this._proj = this.sdk.proj
|
|
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 mode() {
|
|
return this.options.mode
|
|
}
|
|
set mode(v) {
|
|
this.options.mode = v ? 1 : 0
|
|
let modeData = [
|
|
{
|
|
name: '贴地',
|
|
value: '贴地',
|
|
key: 0
|
|
},
|
|
{
|
|
name: '立体',
|
|
value: '立体',
|
|
key: 1
|
|
}
|
|
]
|
|
for (let i = 0; i < modeData.length; i++) {
|
|
if (modeData[i].key === this.options.mode) {
|
|
this._elms.mode && this._elms.mode.forEach((item) => {
|
|
item.value = modeData[i].value
|
|
})
|
|
break
|
|
}
|
|
}
|
|
let elms = this._DialogObject._element.body.getElementsByClassName('row')
|
|
let elms2 = this._DialogObject._element.foot.getElementsByTagName('button')
|
|
let elms3 = this._DialogObject._element.foot.getElementsByTagName('h4')
|
|
for (let i = 0; i < elms.length; i++) {
|
|
let mode = elms[i].getAttribute('mode')
|
|
if (mode !== null) {
|
|
if (mode == this.options.mode) {
|
|
elms[i].style.display = 'flex'
|
|
}
|
|
else {
|
|
elms[i].style.display = 'none'
|
|
}
|
|
}
|
|
}
|
|
for (let i = 0; i < elms2.length; i++) {
|
|
let mode = elms2[i].getAttribute('mode')
|
|
if (mode !== null) {
|
|
if (mode == this.options.mode) {
|
|
elms2[i].style.display = 'block'
|
|
}
|
|
else {
|
|
elms2[i].style.display = 'none'
|
|
}
|
|
}
|
|
}
|
|
for (let i = 0; i < elms3.length; i++) {
|
|
let mode = elms3[i].getAttribute('mode')
|
|
if (mode !== null) {
|
|
if (mode == this.options.mode) {
|
|
elms3[i].style.display = 'block'
|
|
}
|
|
else {
|
|
elms3[i].style.display = 'none'
|
|
}
|
|
}
|
|
}
|
|
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');
|
|
|
|
if (this.mode) {
|
|
// canvas.width = img.width
|
|
// canvas.height = img.height;
|
|
// let billboardH = img.height * (128 / img.width)
|
|
|
|
// 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, 0, 0, img.width, img.height)
|
|
// this.entity.billboard.image = canvas
|
|
// this.entity.billboard.pixelOffset = { x: -128 * this.billboardScale * (this.flipeY ? (1-this.options.offset.x) : this.options.offset.x), y: -billboardH * this.billboardScale * (this.flipeX ? (1-this.options.offset.y) : this.options.offset.y) }
|
|
let canvas = this.entity.billboard.image.getValue()
|
|
let billboardH = canvas.height * (128 / canvas.width)
|
|
this.entity.billboard.pixelOffset = { x: -128 * this.billboardScale * this.options.offset.x, y: -billboardH * this.billboardScale * this.options.offset.y }
|
|
this.entity.billboard.show = true
|
|
this.labelShow && (this.entity.label.show = true)
|
|
this.entity.rectangle.show = false
|
|
}
|
|
else {
|
|
// 设置画布大小
|
|
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.entity.billboard.show = false
|
|
this.entity.label.show = false
|
|
this.entity.rectangle.show = true
|
|
}
|
|
}
|
|
}
|
|
|
|
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');
|
|
|
|
if (this.mode) {
|
|
// canvas.width = img.width
|
|
// canvas.height = img.height;
|
|
// let billboardH = img.height * (128 / img.width)
|
|
|
|
// 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, 0, 0, img.width, img.height)
|
|
// this.entity.billboard.image = canvas
|
|
// this.entity.billboard.pixelOffset = { x: -128 * this.billboardScale * (this.flipeY ? (1-this.options.offset.x) : this.options.offset.x), y: -billboardH * this.billboardScale * (this.flipeX ? (1-this.options.offset.y) : this.options.offset.y) }
|
|
let canvas = this.entity.billboard.image.getValue()
|
|
let billboardH = canvas.height * (128 / canvas.width)
|
|
this.entity.billboard.pixelOffset = { x: -128 * this.billboardScale * this.options.offset.x, y: -billboardH * this.billboardScale * this.options.offset.y }
|
|
this.entity.billboard.show = true
|
|
this.labelShow && (this.entity.label.show = true)
|
|
this.entity.rectangle.show = false
|
|
}
|
|
else {
|
|
// 设置画布大小
|
|
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.entity.billboard.show = false
|
|
this.entity.label.show = false
|
|
this.entity.rectangle.show = 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 billboardScale() {
|
|
return this.options.billboard.scale
|
|
}
|
|
set billboardScale(v) {
|
|
let billboardScale = Number(v.toFixed(2))
|
|
if (billboardScale > 99) {
|
|
billboardScale = 99
|
|
}
|
|
if (billboardScale < 0.1) {
|
|
billboardScale = 0.1
|
|
}
|
|
this.options.billboard.scale = billboardScale
|
|
this.renewPoint()
|
|
this._elms.billboardScale &&
|
|
this._elms.billboardScale.forEach(item => {
|
|
item.value = v
|
|
})
|
|
}
|
|
|
|
get billboardScaleByDistance() {
|
|
return this.options.billboard.scaleByDistance
|
|
}
|
|
set billboardScaleByDistance(v) {
|
|
this.options.billboard.scaleByDistance = v
|
|
this.renewPoint()
|
|
this._elms.billboardScaleByDistance &&
|
|
this._elms.billboardScaleByDistance.forEach(item => {
|
|
item.checked = v
|
|
})
|
|
}
|
|
|
|
get billboardNear() {
|
|
return this.options.billboard.near
|
|
}
|
|
set billboardNear(v) {
|
|
let near = v
|
|
if (near > this.billboardFar) {
|
|
near = this.billboardFar
|
|
}
|
|
this.options.billboard.near = near
|
|
this.renewPoint()
|
|
this._elms.billboardNear &&
|
|
this._elms.billboardNear.forEach(item => {
|
|
item.value = near
|
|
})
|
|
}
|
|
|
|
get billboardFar() {
|
|
return this.options.billboard.far
|
|
}
|
|
set billboardFar(v) {
|
|
let far = v
|
|
if (far < this.billboardNear) {
|
|
far = this.billboardNear
|
|
}
|
|
this.options.billboard.far = far
|
|
this.renewPoint()
|
|
this._elms.billboardFar &&
|
|
this._elms.billboardFar.forEach(item => {
|
|
item.value = far
|
|
})
|
|
}
|
|
|
|
|
|
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');
|
|
|
|
if (this.mode) {
|
|
// canvas.width = img.width
|
|
// canvas.height = img.height;
|
|
// let billboardH = img.height * (128 / img.width)
|
|
// 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, 0, 0, img.width, img.height)
|
|
// this.entity.billboard.image = canvas
|
|
// this.entity.billboard.pixelOffset = { x: -128 * this.billboardScale * (this.flipeY ? (1-this.options.offset.x) : this.options.offset.x), y: -billboardH * this.billboardScale * (this.flipeX ? (1-this.options.offset.y) : this.options.offset.y) }
|
|
// this.entity.billboard.show = true
|
|
// this.entity.rectangle.show = false
|
|
}
|
|
else {
|
|
// 设置画布大小
|
|
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.entity.billboard.show = false
|
|
this.entity.label.show = false
|
|
this.entity.rectangle.show = true
|
|
}
|
|
}
|
|
} 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');
|
|
|
|
if (this.mode) {
|
|
// canvas.width = img.width
|
|
// canvas.height = img.height;
|
|
// let billboardH = img.height * (128 / img.width)
|
|
// 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, 0, 0, img.width, img.height)
|
|
// this.entity.billboard.image = canvas
|
|
// this.entity.billboard.pixelOffset = { x: -128 * this.billboardScale * (this.flipeY ? (1-this.options.offset.x) : this.options.offset.x), y: -billboardH * this.billboardScale * (this.flipeX ? (1-this.options.offset.y) : this.options.offset.y) }
|
|
// this.entity.billboard.show = true
|
|
// this.entity.rectangle.show = false
|
|
}
|
|
else {
|
|
// 设置画布大小
|
|
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.entity.billboard.show = false
|
|
this.entity.label.show = false
|
|
this.entity.rectangle.show = true
|
|
}
|
|
|
|
// this.offset = {
|
|
// x: this.offset.x,
|
|
// y: Math.abs(this.offset.y - 1),
|
|
// }
|
|
}
|
|
} else {
|
|
console.error("参数必须为boolean")
|
|
}
|
|
}
|
|
|
|
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]
|
|
}
|
|
let heightElm
|
|
if (this._elms.height) {
|
|
heightElm = this._elms.height.getElementsByClassName('input-number')[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')
|
|
heightElm && (heightElm.className = 'input-number input-number-unit-1')
|
|
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')
|
|
heightElm && (heightElm.className = 'input-number input-number-unit-1')
|
|
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')
|
|
heightElm && (heightElm.className = 'input-number input-number-unit-1 disabled')
|
|
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')
|
|
heightElm && (heightElm.className = 'input-number input-number-unit-1 disabled')
|
|
heightMode = Cesium.HeightReference.NONE
|
|
heightModeName = '依附模型'
|
|
break
|
|
}
|
|
if (this.entity && this.entity.billboard) {
|
|
this.entity.billboard.heightReference = heightMode
|
|
}
|
|
this._elms.heightMode && (this._elms.heightMode.value = heightModeName)
|
|
}
|
|
|
|
get coordinate() {
|
|
return this.options.coordinate
|
|
}
|
|
set coordinate(v) {
|
|
this.options.coordinate = v
|
|
// let position = this._proj.convert(
|
|
// [
|
|
// {
|
|
// x: this.options.position.lng,
|
|
// y: this.options.position.lat,
|
|
// z: this.options.position.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
|
|
// })
|
|
}
|
|
|
|
get position() {
|
|
return this.options.position
|
|
}
|
|
|
|
set position(v) {
|
|
this.options.position = v
|
|
|
|
this.coordinate = this.options.coordinate
|
|
|
|
if (this._textToCenter) {
|
|
let point = turf.point([this.options.position.lng, this.options.position.lat])
|
|
let targetPoint = turf.destination(point, this._textToCenter.distance, this._textToCenter.angle, { units: 'kilometers' }).geometry.coordinates
|
|
this.getClampToHeight({ lng: targetPoint[0], lat: targetPoint[1] }).then((height) => {
|
|
let textPosition = [targetPoint[0], targetPoint[1], height]
|
|
this.options.text.position = { lng: targetPoint[0], lat: targetPoint[1], alt: height }
|
|
this.text && (this.text.position = textPosition)
|
|
})
|
|
}
|
|
|
|
this._elms.lng &&
|
|
this._elms.lng.forEach(item => {
|
|
item.value = this.options.position.lng
|
|
})
|
|
this._elms.lat &&
|
|
this._elms.lat.forEach(item => {
|
|
item.value = this.options.position.lat
|
|
})
|
|
|
|
if (this._elms.height) {
|
|
let heightElm = this._elms.height.getElementsByClassName('height')[0]
|
|
if (heightElm) {
|
|
switch (this._elms.heightMode.value) {
|
|
case '海拔高度':
|
|
heightElm.value = this.options.position.alt
|
|
break
|
|
case '相对地表':
|
|
if (this.sdk.viewer.scene.terrainProvider.availability) {
|
|
Cesium.sampleTerrainMostDetailed(
|
|
this.sdk.viewer.scene.terrainProvider,
|
|
[
|
|
Cesium.Cartographic.fromDegrees(
|
|
this.options.position.lng,
|
|
this.options.position.lat
|
|
)
|
|
]
|
|
).then(position => {
|
|
heightElm.value = Number(
|
|
(this.options.position.alt - position[0].height).toFixed(2)
|
|
)
|
|
this._elms.alt &&
|
|
this._elms.alt.forEach(item => {
|
|
item.value = this.options.position.alt
|
|
})
|
|
})
|
|
} else {
|
|
heightElm.value = Number(
|
|
Number(this.options.position.alt).toFixed(2)
|
|
)
|
|
this._elms.alt &&
|
|
this._elms.alt.forEach(item => {
|
|
item.value = this.options.position.alt
|
|
})
|
|
}
|
|
break
|
|
case '依附地表':
|
|
case '依附地表':
|
|
break
|
|
case '依附模型':
|
|
this.updateHeight()
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
get labelShow() {
|
|
return this.options.label.show
|
|
}
|
|
set labelShow(v) {
|
|
this.options.label.show = v
|
|
if (this.entity) {
|
|
if (this.mode == 1) {
|
|
this.entity.label.show = v
|
|
}
|
|
else {
|
|
this.entity.label.show = false
|
|
}
|
|
}
|
|
|
|
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
|
|
})
|
|
}
|
|
}
|
|
|
|
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 _this = this
|
|
let heightMode
|
|
let font = getFontFamily(this.labelFontFamily) || 'Helvetica'
|
|
switch (this.options.heightMode) {
|
|
case 2:
|
|
case '2':
|
|
heightMode = Cesium.HeightReference.CLAMP_TO_GROUND
|
|
break
|
|
}
|
|
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');
|
|
const canvas2 = document.createElement('canvas');
|
|
const ctx2 = canvas2.getContext('2d');
|
|
let width = img.width
|
|
let height = img.height
|
|
canvas2.width = width
|
|
canvas2.height = height;
|
|
ctx2.drawImage(img, 0, 0, width, height)
|
|
|
|
// 设置画布大小
|
|
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));
|
|
|
|
|
|
let billboardH = height * (128 / width)
|
|
|
|
this.entity = this.sdk.viewer.entities.add({
|
|
id: this.options.id,
|
|
show: this.options.show,
|
|
position: new Cesium.CallbackProperty(() => {
|
|
return Cesium.Cartesian3.fromDegrees(
|
|
this.options.position.lng,
|
|
this.options.position.lat,
|
|
this.options.position.alt || 0
|
|
)
|
|
}),
|
|
billboard: {
|
|
show: this.mode ? true : false,
|
|
image: canvas2,
|
|
scale: this.billboardScale,
|
|
disableDepthTestDistance: new Cesium.CallbackProperty(function () {
|
|
return getGroundCover() ? undefined : Number.POSITIVE_INFINITY
|
|
}, false),
|
|
heightReference: heightMode,
|
|
width: 128,
|
|
height: billboardH,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
|
verticalOrigin: Cesium.VerticalOrigin.TOP,
|
|
// pixelOffset: { x: -128 * this.billboardScale * (this.flipeY ? (1-this.options.offset.x) : this.options.offset.x), y: -billboardH * this.billboardScale * (this.flipeX ? (1-this.options.offset.y) : this.options.offset.y) }
|
|
pixelOffset: { x: -128 * this.billboardScale * this.options.offset.x, y: -billboardH * this.billboardScale * this.options.offset.y }
|
|
},
|
|
label: {
|
|
show: this.mode ? _this.options.label.show : false,
|
|
text: _this.options.label.text,
|
|
disableDepthTestDistance: new Cesium.CallbackProperty(function () {
|
|
return getGroundCover() ? undefined : Number.POSITIVE_INFINITY
|
|
}, false),
|
|
heightReference: heightMode,
|
|
font: _this.options.label.fontSize + 'px ' + font,
|
|
fillColor: Cesium.Color.fromCssColorString(_this.options.label.color),
|
|
// verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
|
|
pixelOffset: new Cesium.CallbackProperty(function () {
|
|
if (_this.options.show) {
|
|
return new Cesium.Cartesian2(
|
|
0,
|
|
-billboardH * _this.billboardScale -
|
|
_this.options.label.fontSize / 2 -
|
|
5
|
|
)
|
|
} else {
|
|
return new Cesium.Cartesian2(
|
|
0,
|
|
-_this.options.label.fontSize / 2 - 5
|
|
)
|
|
}
|
|
}, false),
|
|
outlineColor: Cesium.Color.BLACK,
|
|
outlineWidth: 1,
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE
|
|
},
|
|
rectangle: {
|
|
show: this.mode ? false : true,
|
|
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)
|
|
},
|
|
})
|
|
|
|
this.renewPoint()
|
|
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)
|
|
}
|
|
}
|
|
|
|
// 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 elms = contentElm.getElementsByClassName('row')
|
|
let elms2 = contentElm.getElementsByTagName('h4')
|
|
for (let i = 0; i < elms.length; i++) {
|
|
let mode = elms[i].getAttribute('mode')
|
|
if (mode !== null) {
|
|
if (mode == this.options.mode) {
|
|
elms[i].style.display = 'flex'
|
|
}
|
|
else {
|
|
elms[i].style.display = 'none'
|
|
}
|
|
}
|
|
}
|
|
for (let i = 0; i < elms2.length; i++) {
|
|
let mode = elms2[i].getAttribute('mode')
|
|
if (mode !== null) {
|
|
if (mode == this.options.mode) {
|
|
elms2[i].style.display = 'block'
|
|
}
|
|
else {
|
|
elms2[i].style.display = 'none'
|
|
}
|
|
}
|
|
}
|
|
|
|
// let lng = contentElm.getElementsByClassName("lng")[0]
|
|
// let lat = contentElm.getElementsByClassName("lat")[0]
|
|
// let alt = contentElm.getElementsByClassName("alt")[0]
|
|
// lng.value = this.options.position.lng
|
|
// lat.value = this.options.position.lat
|
|
// alt.value = this.options.position.alt
|
|
// this._elms.lng = [lng]
|
|
// this._elms.lat = [lat]
|
|
// this._elms.alt = [alt]
|
|
// lng.addEventListener('blur', (e) => {
|
|
// let value = e.target.value
|
|
// if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
|
|
// value = Number(value)
|
|
// if ((e.target.max) && value > Number(e.target.max)) {
|
|
// value = Number(e.target.max)
|
|
// }
|
|
// if ((e.target.min) && value < Number(e.target.min)) {
|
|
// value = Number(e.target.min)
|
|
// }
|
|
// if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
|
|
// value = Number(e.target.dataset.min)
|
|
// }
|
|
// }
|
|
// // this.position = {
|
|
// // lng: value,
|
|
// // lat: this.position.lat,
|
|
// // alt: this.position.alt
|
|
// // }
|
|
// this.options.position.lng = value
|
|
// this.coordinate = this.options.coordinate
|
|
// })
|
|
// lat.addEventListener('blur', (e) => {
|
|
// let value = e.target.value
|
|
// if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
|
|
// value = Number(value)
|
|
// if ((e.target.max) && value > Number(e.target.max)) {
|
|
// value = Number(e.target.max)
|
|
// }
|
|
// if ((e.target.min) && value < Number(e.target.min)) {
|
|
// value = Number(e.target.min)
|
|
// }
|
|
// if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
|
|
// value = Number(e.target.dataset.min)
|
|
// }
|
|
// }
|
|
// // this.position = {
|
|
// // lng: this.position.lng,
|
|
// // lat: value,
|
|
// // alt: this.position.alt
|
|
// // }
|
|
// this.options.position.lat = value
|
|
// this.coordinate = this.options.coordinate
|
|
// })
|
|
// alt.addEventListener('blur', (e) => {
|
|
// let value = e.target.value
|
|
// if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
|
|
// value = Number(value)
|
|
// if ((e.target.max) && value > Number(e.target.max)) {
|
|
// value = Number(e.target.max)
|
|
// }
|
|
// if ((e.target.min) && value < Number(e.target.min)) {
|
|
// value = Number(e.target.min)
|
|
// }
|
|
// if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
|
|
// value = Number(e.target.dataset.min)
|
|
// }
|
|
// }
|
|
// // this.position = {
|
|
// // lng: this.position.lng,
|
|
// // lat: this.position.lat,
|
|
// // alt: value
|
|
// // }
|
|
// this.options.position.alt = value
|
|
// this.coordinate = this.options.coordinate
|
|
// })
|
|
|
|
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)'
|
|
} //点击清空按钮事件回调
|
|
})
|
|
this._elms.labelColor = [colorPicker]
|
|
|
|
setTimeout(async () => {
|
|
let flipeOverXBtn = this._DialogObject._element.foot.getElementsByClassName('flipe-over-x')[0]
|
|
let flipeOverYBtn = this._DialogObject._element.foot.getElementsByClassName('flipe-over-y')[0]
|
|
flipeOverXBtn.setAttribute('mode', 0)
|
|
flipeOverYBtn.setAttribute('mode', 0)
|
|
if (this.options.mode) {
|
|
flipeOverXBtn.style.display = 'none'
|
|
flipeOverYBtn.style.display = 'none'
|
|
}
|
|
else {
|
|
flipeOverXBtn.style.display = 'block'
|
|
flipeOverYBtn.style.display = 'block'
|
|
}
|
|
let modeData = [
|
|
{
|
|
name: '贴地',
|
|
value: '贴地',
|
|
key: 0
|
|
},
|
|
{
|
|
name: '立体',
|
|
value: '立体',
|
|
key: 1
|
|
}
|
|
]
|
|
let modeDataLegpObject = legp(
|
|
this._DialogObject._element.content.getElementsByClassName(
|
|
'mode-box'
|
|
)[0],
|
|
'.mode'
|
|
)
|
|
if (modeDataLegpObject) {
|
|
modeDataLegpObject.legp_search(modeData)
|
|
let modeDataLegpElm = this._DialogObject._element.content
|
|
.getElementsByClassName('mode')[0]
|
|
.getElementsByTagName('input')[0]
|
|
modeDataLegpElm.value = this.mode
|
|
for (let i = 0; i < modeData.length; i++) {
|
|
if (modeData[i].key === this.mode) {
|
|
modeDataLegpElm.value = modeData[i].value
|
|
modeDataLegpObject.legp_searchActive(modeData[i].value)
|
|
break
|
|
}
|
|
}
|
|
modeDataLegpElm.addEventListener('input', () => {
|
|
for (let i = 0; i < modeData.length; i++) {
|
|
if (modeData[i].value === modeDataLegpElm.value) {
|
|
this.mode = modeData[i].key
|
|
break
|
|
}
|
|
}
|
|
})
|
|
this._elms.mode = [modeDataLegpElm]
|
|
}
|
|
|
|
|
|
let heightBoxElm = this._DialogObject._element.content.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.options.position.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.position.lng,
|
|
this.options.position.lat
|
|
)
|
|
]
|
|
).then(position => {
|
|
heightElm.value = Number(
|
|
(this.options.position.alt - Number(position[0].height.toFixed(2))).toFixed(2)
|
|
)
|
|
})
|
|
} else {
|
|
heightElm.value = Number(this.options.position.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.position, objectsToExclude).then(h => {
|
|
this.options.position.alt = Number(h.toFixed(2))
|
|
this.coordinate = this.options.coordinate
|
|
this._elms.alt &&
|
|
this._elms.alt.forEach(item => {
|
|
item.value = this.options.position.alt
|
|
})
|
|
heightElm.value = this.options.position.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.options.position.alt = Number(heightElm.value)
|
|
this.heightMode = 0
|
|
// this.position = this.options.position
|
|
break
|
|
case 1:
|
|
case '1':
|
|
if (this.sdk.viewer.scene.terrainProvider.availability) {
|
|
Cesium.sampleTerrainMostDetailed(
|
|
this.sdk.viewer.scene.terrainProvider,
|
|
[
|
|
Cesium.Cartographic.fromDegrees(
|
|
this.options.position.lng,
|
|
this.options.position.lat
|
|
)
|
|
]
|
|
).then(position => {
|
|
this.options.position.alt =
|
|
Number(heightElm.value) +
|
|
Number(position[0].height.toFixed(2))
|
|
// this.position = this.options.position
|
|
})
|
|
} else {
|
|
this.options.position.alt = Number(heightElm.value)
|
|
// this.position = this.options.position
|
|
}
|
|
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.position, objectsToExclude).then(h => {
|
|
this.options.position.alt = Number(h.toFixed(2))
|
|
// this.position = this.options.position
|
|
})
|
|
this.heightMode = 3
|
|
break
|
|
}
|
|
this.position = this.options.position
|
|
break
|
|
}
|
|
}
|
|
})
|
|
|
|
heightElm.addEventListener('blur', async () => {
|
|
switch (heightMode) {
|
|
case 0:
|
|
case '0':
|
|
this.options.position.alt = Number(
|
|
Number(heightElm.value).toFixed(2)
|
|
)
|
|
break
|
|
case 1:
|
|
case '1':
|
|
if (this.sdk.viewer.scene.terrainProvider.availability) {
|
|
let position = await Cesium.sampleTerrainMostDetailed(
|
|
this.sdk.viewer.scene.terrainProvider,
|
|
[
|
|
Cesium.Cartographic.fromDegrees(
|
|
this.options.position.lng,
|
|
this.options.position.lat
|
|
)
|
|
]
|
|
)
|
|
this.options.position.alt =
|
|
Number(heightElm.value) +
|
|
Number(position[0].height.toFixed(2))
|
|
} else {
|
|
this.options.position.alt = Number(heightElm.value)
|
|
|
|
}
|
|
break
|
|
case 2:
|
|
case '2':
|
|
break
|
|
}
|
|
this.position = this.options.position
|
|
})
|
|
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);
|
|
|
|
} 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 }
|
|
}
|
|
}
|
|
this.position = { ...this.previous.position }
|
|
}
|
|
}
|
|
|
|
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)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
async updateHeight() {
|
|
let height
|
|
let height2
|
|
let point1 = new Cesium.Cartesian3.fromDegrees(
|
|
this.options.position.lng,
|
|
this.options.position.lat,
|
|
0
|
|
)
|
|
let point2 = new Cesium.Cartesian3.fromDegrees(
|
|
this.options.position.lng,
|
|
this.options.position.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.position.lng,
|
|
this.options.position.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.position.alt = Number(Number(height).toFixed(2))
|
|
this._elms.alt &&
|
|
this._elms.alt.forEach(item => {
|
|
item.value = this.options.position.alt
|
|
})
|
|
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.position.alt
|
|
break
|
|
case '相对地表':
|
|
if (this.sdk.viewer.scene.terrainProvider.availability) {
|
|
Cesium.sampleTerrainMostDetailed(
|
|
this.sdk.viewer.scene.terrainProvider,
|
|
[
|
|
Cesium.Cartographic.fromDegrees(
|
|
this.options.position.lng,
|
|
this.options.position.lat
|
|
)
|
|
]
|
|
).then(position => {
|
|
heightElm.value = Number(
|
|
(this.options.position.alt - position[0].height).toFixed(2)
|
|
)
|
|
})
|
|
} else {
|
|
heightElm.value = this.options.position.alt
|
|
}
|
|
break
|
|
case '依附地表':
|
|
break
|
|
case '依附模型':
|
|
heightElm.value = this.options.position.alt
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// if (!this.entity.values) {
|
|
// this.entity.position = Cesium.Cartesian3.fromDegrees(
|
|
// this.options.position.lng,
|
|
// this.options.position.lat,
|
|
// this.options.position.alt
|
|
// )
|
|
// }
|
|
}
|
|
|
|
renewPoint() {
|
|
if (!this.entity.values && this.entity.billboard) {
|
|
let font = getFontFamily(this.labelFontFamily) || 'Helvetica'
|
|
this.entity.billboard.scale = this.billboardScale
|
|
if (this.billboardScaleByDistance) {
|
|
this.entity.billboard.scaleByDistance = new Cesium.NearFarScalar(
|
|
this.billboardNear,
|
|
1,
|
|
this.billboardFar,
|
|
0
|
|
)
|
|
this.entity.billboard.pixelOffsetScaleByDistance = new Cesium.NearFarScalar(
|
|
this.billboardNear,
|
|
1,
|
|
this.billboardFar,
|
|
0
|
|
)
|
|
this.entity.label.scaleByDistance = new Cesium.NearFarScalar(
|
|
this.billboardNear,
|
|
1,
|
|
this.billboardFar,
|
|
0
|
|
)
|
|
this.entity.label.pixelOffsetScaleByDistance = new Cesium.NearFarScalar(
|
|
this.billboardNear,
|
|
1,
|
|
this.billboardFar,
|
|
0
|
|
)
|
|
} else {
|
|
this.entity.billboard.scaleByDistance = undefined
|
|
this.entity.billboard.pixelOffsetScaleByDistance = undefined
|
|
this.entity.label.scaleByDistance = undefined
|
|
this.entity.label.pixelOffsetScaleByDistance = undefined
|
|
}
|
|
this.entity.label.font = this.options.label.fontSize + 'px ' + font
|
|
this.entity.label.fillColor = Cesium.Color.fromCssColorString(
|
|
this.options.label.color
|
|
)
|
|
let canvas = this.entity.billboard.image.getValue()
|
|
let billboardH = canvas.height * (128 / canvas.width)
|
|
this.entity.billboard.pixelOffset = { x: -128 * this.billboardScale * this.options.offset.x, y: -billboardH * this.billboardScale * this.options.offset.y }
|
|
// this.entity.billboard.pixelOffset = { x: -width * this.billboardScale * (this.flipeY ? (1 - this.options.offset.x) : this.options.offset.x), y: -height * this.billboardScale * (this.flipeX ? (1 - this.options.offset.y) : this.options.offset.y) }
|
|
}
|
|
}
|
|
|
|
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
|