Compare commits
203 Commits
22a05c2c8c
...
develop
| Author | SHA1 | Date | |
|---|---|---|---|
| 5f383f661f | |||
| ee38db98fb | |||
| d334518da7 | |||
| 8f41d5907a | |||
| 9866588986 | |||
| 5ab4a3b925 | |||
| 2604512f47 | |||
| 0bb1e5bd54 | |||
| 5d6679d919 | |||
| 41c132e506 | |||
| 09f760b10a | |||
| b0619e1b31 | |||
| 43a4fca804 | |||
| 53e692f6ca | |||
| dd1855002f | |||
| d1dd920fd2 | |||
| a69034a18e | |||
| 7fc4f14756 | |||
| feff8c3a76 | |||
| 58b8c6a897 | |||
| 349c91f8df | |||
| 92ef4a68fd | |||
| 623a220cbf | |||
| e8258d96d0 | |||
| d0a682f233 | |||
| 65441ddff4 | |||
| 7f3b04eb08 | |||
| 9289d08f24 | |||
| f9a3ffb359 | |||
| f5d915bd58 | |||
| 91cc200917 | |||
| 0c4c956868 | |||
| 838f39ba40 | |||
| 077170f2d4 | |||
| a1e33d907d | |||
| 57a9ccacbd | |||
| 0eef08ce45 | |||
| 0f9ad0a0f0 | |||
| c6f3138e25 | |||
| 819166bae0 | |||
| 159ade36f0 | |||
| f8443b7f62 | |||
| 7feab0786a | |||
| 5ceaa3b649 | |||
| 9f216b7257 | |||
| 4247327bfa | |||
| 1856bc85e3 | |||
| dff3739a0f | |||
| 53d2f06918 | |||
| cb2741862a | |||
| ce065fb845 | |||
| f37f95d646 | |||
| 6117e74a44 | |||
| ec41c867d4 | |||
| a7a743a394 | |||
| fb2681fdbe | |||
| 427b38a6c3 | |||
| b5e21fec3c | |||
| 1a1aa9f6a5 | |||
| 1229226e8f | |||
| 979a285295 | |||
| 18cec0d742 | |||
| 1ea59d0f8a | |||
| 2d1bc61cca | |||
| 5f6211a01d | |||
| 97c0d13a88 | |||
| 8618508d3f | |||
| dd213e8337 | |||
| a293246c07 | |||
| 9d1c25e8ef | |||
| c08dfb0f85 | |||
| 15460702f9 | |||
| 2c27391058 | |||
| 80869050e1 | |||
| 8025a298a2 | |||
| 0f518ef6cb | |||
| 1af43bb6a9 | |||
| ea80fe325c | |||
| e8e1e320b3 | |||
| 4f0c0ca76d | |||
| 2aade7eef9 | |||
| 71988d8833 | |||
| dd1c7acde1 | |||
| b2d307b308 | |||
| 4f57ac3d9e | |||
| 3d0493e0dd | |||
| 4d35b29526 | |||
| e342fa1d80 | |||
| 8eb1bd98cc | |||
| 644c0d2e28 | |||
| e51357efa7 | |||
| 379a560fbc | |||
| a4cd365c83 | |||
| 3358221da9 | |||
| f1e0ac166e | |||
| 3fab8ea031 | |||
| de4aead219 | |||
| ef2c158727 | |||
| 9ecb3c7269 | |||
| 1936a142b1 | |||
| a9594ccec2 | |||
| 23420762ca | |||
| 04ccdc73ca | |||
| 2e301cd0fc | |||
| d1bcba6a13 | |||
| 6729b60806 | |||
| 7be9a6a41d | |||
| 25a7c967bb | |||
| 713f03284b | |||
| 08bdd515a9 | |||
| eec0ca44c0 | |||
| 9f35d752c2 | |||
| 22f9693957 | |||
| e022aa5ef1 | |||
| 4411c9d17d | |||
| b4f7e7ad8f | |||
| d7ecd6d865 | |||
| a6fb1af6f9 | |||
| d17b038388 | |||
| fff8041faa | |||
| 20ae03cc5e | |||
| ebaa10a79b | |||
| b7e0249757 | |||
| 67540c1808 | |||
| a888969c5d | |||
| 6bd3778ad9 | |||
| 0007343353 | |||
| e6da82c76c | |||
| d8962ff3cc | |||
| 7958e40494 | |||
| 00f1a40e2a | |||
| e38dd4d029 | |||
| 656a21a6dd | |||
| bdc7e58263 | |||
| d47ab3715d | |||
| 20a9388579 | |||
| ef3a682724 | |||
| 4954b51176 | |||
| 01e2422444 | |||
| 7a00e78145 | |||
| e2657ce0a8 | |||
| 76f4b707a6 | |||
| 01d82c16c9 | |||
| 8afd3138f4 | |||
| 3bbc71065a | |||
| 53ba8cb014 | |||
| 829d1a59f7 | |||
| 8ca3576c3e | |||
| a79c09b45d | |||
| f2a198ddaf | |||
| 72fc510167 | |||
| 552c086d3a | |||
| 603421ea87 | |||
| 9e0a43a75f | |||
| 60378db79d | |||
| 7b583f761b | |||
| 50b0866520 | |||
| 01b07a6fa2 | |||
| 3b5b026d43 | |||
| 8b00dcd56e | |||
| 294e38ed31 | |||
| 4bf05f109e | |||
| 6917b19ae8 | |||
| b3749b2a16 | |||
| 314f2a58b5 | |||
| 32066bbf99 | |||
| 6a71f41a19 | |||
| 3eadec9b11 | |||
| ea7feea226 | |||
| 05c69c034e | |||
| a82a8abf65 | |||
| 2fd421e637 | |||
| 6e2efbe544 | |||
| a43c71d94e | |||
| 12fcb9fed7 | |||
| f24a95ab32 | |||
| c03cd63532 | |||
| 1b712424d8 | |||
| 51f7ef9864 | |||
| 040049236d | |||
| 2db5eafabf | |||
| c843b025fc | |||
| 53b4eb03e5 | |||
| e242427228 | |||
| ff60cc4f65 | |||
| e45b67298a | |||
| 579b76dc0e | |||
| b0ae9c7042 | |||
| 11812253e6 | |||
| 399725ed06 | |||
| 574538e7bb | |||
| 45f2d6f4eb | |||
| ff4f823a27 | |||
| c6aa99792f | |||
| 16942a2e63 | |||
| dd003aa00d | |||
| ea94efb65f | |||
| fa3325580c | |||
| 0cf59afffd | |||
| 5431efa2c5 | |||
| 2b6edf70b9 | |||
| a35b959ec2 | |||
| 484fe70e16 |
@ -1,5 +1,5 @@
|
||||
class BaseDialog {
|
||||
constructor(container, options = {}) {
|
||||
constructor(container, options = {}, only = true) {
|
||||
this.container = container
|
||||
this.options = { ...options }
|
||||
this.options.ismove = true
|
||||
@ -9,11 +9,13 @@ class BaseDialog {
|
||||
this.closeCallBack = options.closeCallBack
|
||||
this._element = {}
|
||||
this._element_style = undefined
|
||||
this.only = only
|
||||
}
|
||||
|
||||
async init() {
|
||||
|
||||
if (this.only) {
|
||||
this.closeAll()
|
||||
}
|
||||
DialogAll.push(this)
|
||||
this.isDestroy = false
|
||||
// body
|
||||
@ -49,6 +51,15 @@ class BaseDialog {
|
||||
<button class="close">关闭</button>
|
||||
`
|
||||
this._element.body.appendChild(this._element.foot)
|
||||
let curtain = await document.createElement('div')
|
||||
curtain.style.position = 'absolute'
|
||||
curtain.style.top = '0'
|
||||
curtain.style.left = '0'
|
||||
curtain.style.width = '100%'
|
||||
curtain.style.height = '100%'
|
||||
curtain.style.backdropFilter = 'blur(2px)'
|
||||
curtain.style.zIndex = '-999999'
|
||||
this._element.body.appendChild(curtain)
|
||||
|
||||
// 关闭
|
||||
let closeBtnsBox = this._element.body.getElementsByClassName('close-box')[0];
|
||||
@ -187,6 +198,14 @@ class BaseDialog {
|
||||
_this._element.body.style.bottom = 'unset'
|
||||
_this._element.body.style.right = 'unset'
|
||||
}
|
||||
|
||||
//鼠标抬起事件
|
||||
document.onmouseup = function (e) {
|
||||
window.onmousemove = null
|
||||
}
|
||||
window.ondragend = function (e) {
|
||||
window.onmousemove = null
|
||||
}
|
||||
}
|
||||
|
||||
//鼠标抬起事件
|
||||
|
||||
@ -59,12 +59,17 @@ export default class DrawAttackArrow extends Draw {
|
||||
return
|
||||
}
|
||||
into = '3D'
|
||||
let pos84 = this.cartesian3Towgs84(cartesian, this.viewer)
|
||||
let lastPos84 = cache_positions[cache_positions.length - 1]
|
||||
if(lastPos84 && (lastPos84.lng === pos84.lng && lastPos84.lat === pos84.lat)) {
|
||||
return
|
||||
}
|
||||
if (!this.entityHasCreated) {
|
||||
let polyline_id = DrawAttackArrow.create_arrow_polygon(this)
|
||||
this.points_ids.push(polyline_id)
|
||||
}
|
||||
this.points_ids.push(this.create_point(cartesian))
|
||||
cache_positions.push(this.cartesian3Towgs84(cartesian, this.viewer))
|
||||
cache_positions.push(pos84)
|
||||
isMove = false
|
||||
})
|
||||
this.event.mouse_right((movement, cartesian) => {
|
||||
|
||||
@ -49,7 +49,7 @@ export default class DrawCircle extends Draw {
|
||||
if (clickNum === 2) {
|
||||
radius_points = cache_points.concat(cartesian)
|
||||
endpoint = this.cartesian3Towgs84(cartesian, this.viewer)
|
||||
radius = this.computeDistance([center, endpoint])
|
||||
radius = this.computeDistance2([center, endpoint])
|
||||
positions = this.createCircle(center, radius)
|
||||
this.end()
|
||||
cb(null, { center, radius: Number(radius) })
|
||||
@ -74,7 +74,7 @@ export default class DrawCircle extends Draw {
|
||||
if (clickNum) {
|
||||
radius_points = cache_points.concat(cartesian)
|
||||
endpoint = this.cartesian3Towgs84(cartesian, this.viewer)
|
||||
radius = this.computeDistance([center, endpoint])
|
||||
radius = this.computeDistance2([center, endpoint])
|
||||
positions = this.createCircle(center, radius)
|
||||
}
|
||||
|
||||
@ -108,7 +108,7 @@ export default class DrawCircle extends Draw {
|
||||
if (clickNum === 2) {
|
||||
radius_points = cache_points.concat(cartesian)
|
||||
endpoint = this.cartesian3Towgs84(cartesian, this.viewer)
|
||||
radius = this.computeDistance([center, endpoint])
|
||||
radius = this.computeDistance2([center, endpoint])
|
||||
positions = this.createCircle(center, radius)
|
||||
this.end()
|
||||
cb(null, { center, radius: Number(radius) })
|
||||
@ -136,7 +136,7 @@ export default class DrawCircle extends Draw {
|
||||
if (clickNum === 2) {
|
||||
radius_points = cache_points.concat(cartesian)
|
||||
endpoint = this.cartesian3Towgs84(cartesian, this.viewer)
|
||||
radius = this.computeDistance([center, endpoint])
|
||||
radius = this.computeDistance2([center, endpoint])
|
||||
positions = this.createCircle(center, radius)
|
||||
this.end()
|
||||
cb(null, { center, radius: Number(radius) })
|
||||
@ -161,7 +161,7 @@ export default class DrawCircle extends Draw {
|
||||
if (clickNum) {
|
||||
radius_points = cache_points.concat(cartesian)
|
||||
endpoint = this.cartesian3Towgs84(cartesian, this.viewer)
|
||||
radius = this.computeDistance([center, endpoint])
|
||||
radius = this.computeDistance2([center, endpoint])
|
||||
positions = this.createCircle(center, radius)
|
||||
}
|
||||
|
||||
@ -195,7 +195,7 @@ export default class DrawCircle extends Draw {
|
||||
if (clickNum === 2) {
|
||||
radius_points = cache_points.concat(cartesian)
|
||||
endpoint = this.cartesian3Towgs84(cartesian, this.viewer)
|
||||
radius = this.computeDistance([center, endpoint])
|
||||
radius = this.computeDistance2([center, endpoint])
|
||||
positions = this.createCircle(center, radius)
|
||||
this.end()
|
||||
cb(null, { center, radius: Number(radius) })
|
||||
|
||||
@ -13,6 +13,7 @@ class DrawPolygon extends Draw {
|
||||
* */
|
||||
constructor(sdk, options = {}) {
|
||||
super(sdk, options)
|
||||
this.color = options.color || 'rgba(255,0,0,0.5)'
|
||||
this.polygonHasCreated = false
|
||||
}
|
||||
|
||||
@ -34,8 +35,8 @@ class DrawPolygon extends Draw {
|
||||
positions: new Cesium.CallbackProperty((e) => {
|
||||
return that.positions.concat(that.positions[0])
|
||||
}),
|
||||
width: 2,
|
||||
material: Cesium.Color.fromCssColorString('#c1c505').withAlpha(0.5),
|
||||
width: 3,
|
||||
material: Cesium.Color.fromCssColorString(that.color).withAlpha(1),
|
||||
clampToGround: true,
|
||||
zIndex: 99999999
|
||||
},
|
||||
|
||||
317
src/Draw/drawThreeRect.js
Normal file
317
src/Draw/drawThreeRect.js
Normal file
@ -0,0 +1,317 @@
|
||||
import MouseTip from '../MouseTip'
|
||||
import MouseEvent from '../Event'
|
||||
import Draw from './draw'
|
||||
|
||||
/**
|
||||
* @extends Draw*/
|
||||
class DrawThreeRect extends Draw {
|
||||
/**
|
||||
* @constructor
|
||||
* @param [options] {object} 三点矩形属性
|
||||
* @param [options.color=rgba(185,14,14,0.58)] {object} 线属性
|
||||
|
||||
* */
|
||||
constructor(sdk, options = {}) {
|
||||
super(sdk, options)
|
||||
this.polygonHasCreated = false
|
||||
this.rectObject = []
|
||||
}
|
||||
|
||||
static create_polygon(that, viewer = that.viewer) {
|
||||
that.polygonHasCreated = true
|
||||
let id = that.randomString()
|
||||
viewer.entities.add(
|
||||
new Cesium.Entity({
|
||||
id: id,
|
||||
polygon: {
|
||||
classificationType: Cesium.ClassificationType.BOTH,
|
||||
hierarchy: new Cesium.CallbackProperty((e) => {
|
||||
return new Cesium.PolygonHierarchy(that.positions)
|
||||
}),
|
||||
material: Cesium.Color.fromCssColorString(that.color),
|
||||
zIndex: 99999999
|
||||
},
|
||||
polyline: {
|
||||
positions: new Cesium.CallbackProperty((e) => {
|
||||
return that.positions.concat(that.positions[0])
|
||||
}),
|
||||
width: 2,
|
||||
material: Cesium.Color.fromCssColorString('#c1c505').withAlpha(0.5),
|
||||
clampToGround: true,
|
||||
zIndex: 99999999
|
||||
},
|
||||
})
|
||||
)
|
||||
return id
|
||||
}
|
||||
computedLastPoint(arr) {
|
||||
const start = arr[0];
|
||||
const end = arr[1];
|
||||
// 计算点到线的距离
|
||||
const directionVector = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3());
|
||||
const pointToStart = Cesium.Cartesian3.subtract(arr[2], start, new Cesium.Cartesian3());
|
||||
const projectionLength = Cesium.Cartesian3.dot(pointToStart, directionVector) / Cesium.Cartesian3.magnitudeSquared(directionVector);
|
||||
const projectionVector = Cesium.Cartesian3.multiplyByScalar(directionVector, projectionLength, new Cesium.Cartesian3());
|
||||
const projectionPoint = Cesium.Cartesian3.add(start, projectionVector, new Cesium.Cartesian3());
|
||||
const distance = Cesium.Cartesian3.distance(arr[2], projectionPoint)
|
||||
|
||||
const perp = Cesium.Cartesian3.subtract(arr[2], projectionPoint, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(perp, perp);
|
||||
// 生成偏移向量
|
||||
const offset = Cesium.Cartesian3.multiplyByScalar(perp, distance, new Cesium.Cartesian3());
|
||||
let threePoint = Cesium.Cartesian3.add(end, offset, new Cesium.Cartesian3())
|
||||
let lastPoint = Cesium.Cartesian3.add(start, offset, new Cesium.Cartesian3())
|
||||
return [{ ...threePoint }, { ...lastPoint }]
|
||||
}
|
||||
/**
|
||||
* @desc 开始动态绘制面
|
||||
* @method start
|
||||
* @param cb {function} 回调函数
|
||||
* @memberOf DrawPolygon
|
||||
* @example draw.start((err,positions)=>{
|
||||
*
|
||||
* })
|
||||
* */
|
||||
start(cb) {
|
||||
if (YJ.Measure.GetMeasureStatus()) {
|
||||
cb('上一次测量未结束')
|
||||
} else {
|
||||
this.polygonHasCreated = false
|
||||
super.start()
|
||||
YJ.Measure.SetMeasureStatus(true)
|
||||
let into
|
||||
this.tip = new MouseTip('左键确定,右键结束;CTRL+右键撤销', this.sdk)
|
||||
this.event = new MouseEvent(this.sdk)
|
||||
let cnt = 0
|
||||
this.positions = []
|
||||
this.positionsLine = []
|
||||
this.points_ids = [] //存放左键点击时临时添加的point的id
|
||||
let cache_positions = []
|
||||
let cache_84_position = []
|
||||
this.event.mouse_left((movement, cartesian) => {
|
||||
if (into === '2D') {
|
||||
return
|
||||
}
|
||||
into = '3D'
|
||||
cnt++
|
||||
this.positions = cache_positions.concat({ ...cartesian })
|
||||
this.tip.setPosition(
|
||||
cartesian,
|
||||
movement.position.x,
|
||||
movement.position.y
|
||||
)
|
||||
if (!this.polygonHasCreated) {
|
||||
let polyline_id = DrawThreeRect.create_polygon(this)
|
||||
this.points_ids.push(polyline_id)
|
||||
}
|
||||
cache_positions.push(cartesian)
|
||||
cache_84_position.push(this.cartesian3Towgs84(cartesian, this.viewer))
|
||||
this.points_ids.push(this.create_point(cartesian))
|
||||
if (cnt == 3) {
|
||||
this.end()
|
||||
cb(null, this.rectObject)
|
||||
}
|
||||
})
|
||||
this.event.mouse_right((movement, cartesian) => {
|
||||
if (into === '2D') {
|
||||
return
|
||||
}
|
||||
// let positions = []
|
||||
// console.log(cache_positions)
|
||||
// cache_positions.forEach((item) => {
|
||||
// let p = this.cartesian3Towgs84(item)
|
||||
// console.log(item)
|
||||
// positions.push(p)
|
||||
// })
|
||||
this.end()
|
||||
cb('取消', '')
|
||||
})
|
||||
this.event.mouse_move((movement, cartesian) => {
|
||||
if (into === '2D') {
|
||||
return
|
||||
}
|
||||
|
||||
// this.positions = cache_positions.concat({ ...cartesian })
|
||||
this.tip.setPosition(
|
||||
cartesian,
|
||||
movement.endPosition.x,
|
||||
movement.endPosition.y
|
||||
)
|
||||
|
||||
if (cnt == 2) {
|
||||
let arr = JSON.parse(JSON.stringify(cache_positions))
|
||||
let arr1 = arr.concat({ ...cartesian })
|
||||
let pointArr = this.computedLastPoint(arr1)
|
||||
arr = arr.concat(pointArr)
|
||||
this.positions = arr
|
||||
let arr_84 = arr.map(item => {
|
||||
return this.cartesian3Towgs84(item, this.viewer)
|
||||
})
|
||||
this.rectObject = arr_84
|
||||
}
|
||||
})
|
||||
this.event.mouse_right_keyboard_ctrl((movement, cartesian) => {
|
||||
if (into === '2D') {
|
||||
return
|
||||
}
|
||||
if (this.points_ids.length > 1) {
|
||||
this.remove_entity(this.points_ids.pop()) //移除point
|
||||
cache_positions.pop()
|
||||
cache_84_position.pop()
|
||||
}
|
||||
})
|
||||
|
||||
this.event.gesture_pinck_start_keyboard_ctrl(() => {
|
||||
if (into === '2D') {
|
||||
return
|
||||
}
|
||||
if (this.points_ids.length > 1) {
|
||||
this.remove_entity(this.points_ids.pop()) //移除point
|
||||
cache_positions.pop()
|
||||
cache_84_position.pop()
|
||||
this.positions = cache_positions.concat(cartesian)
|
||||
}
|
||||
})
|
||||
|
||||
this.event.gesture_pinck_start((movement, cartesian) => {
|
||||
if (into === '2D') {
|
||||
return
|
||||
}
|
||||
let startTime = new Date()
|
||||
this.event.gesture_pinck_end(() => {
|
||||
let endTime = new Date()
|
||||
if (endTime - startTime >= 500) {
|
||||
cb(null, cache_84_position)
|
||||
this.end()
|
||||
}
|
||||
else {
|
||||
this.tip.setPosition(
|
||||
cartesian,
|
||||
(movement.position1.x + movement.position2.x) / 2,
|
||||
(movement.position1.y + movement.position2.y) / 2
|
||||
)
|
||||
if (!this.polygonHasCreated) {
|
||||
let polyline_id = DrawThreeRect.create_polygon(this)
|
||||
this.points_ids.push(polyline_id)
|
||||
}
|
||||
cache_positions.push(cartesian)
|
||||
cache_84_position.push(this.cartesian3Towgs84(cartesian, this.viewer))
|
||||
this.points_ids.push(this.create_point(cartesian))
|
||||
this.positions = cache_positions.concat(cartesian)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
if (!this._is2D && this._sdk2D) {
|
||||
this.event2D = new MouseEvent(this._sdk2D)
|
||||
this.event2D.mouse_left((movement, cartesian) => {
|
||||
if (into === '3D') {
|
||||
return
|
||||
}
|
||||
into = '2D'
|
||||
cnt++
|
||||
this.positions = cache_positions.concat({ ...cartesian })
|
||||
this.tip.setPosition(
|
||||
cartesian,
|
||||
movement.position.x + this.viewer.canvas.width,
|
||||
movement.position.y
|
||||
)
|
||||
if (!this.polygonHasCreated) {
|
||||
let polyline_id = DrawThreeRect.create_polygon(this, this._sdk2D.viewer)
|
||||
this.points_ids.push(polyline_id)
|
||||
}
|
||||
cache_positions.push(cartesian)
|
||||
cache_84_position.push(this.cartesian3Towgs84(cartesian, this.viewer))
|
||||
this.points_ids.push(this.create_point(cartesian, this._sdk2D.viewer))
|
||||
if (cnt == 3) {
|
||||
this.end()
|
||||
cb(null, this.rectObject)
|
||||
}
|
||||
})
|
||||
this.event2D.mouse_right((movement, cartesian) => {
|
||||
if (into === '3D') {
|
||||
return
|
||||
}
|
||||
this.end()
|
||||
cb('取消', '')
|
||||
})
|
||||
this.event2D.mouse_move((movement, cartesian) => {
|
||||
if (into === '3D') {
|
||||
return
|
||||
}
|
||||
// this.positions = cache_positions.concat({ ...cartesian })
|
||||
this.tip.setPosition(
|
||||
cartesian,
|
||||
movement.endPosition.x + this.viewer.canvas.width,
|
||||
movement.endPosition.y
|
||||
)
|
||||
|
||||
if (cnt == 2) {
|
||||
let arr = JSON.parse(JSON.stringify(cache_positions))
|
||||
let arr1 = arr.concat({ ...cartesian })
|
||||
let pointArr = this.computedLastPoint(arr1)
|
||||
arr = arr.concat(pointArr)
|
||||
this.positions = arr
|
||||
let arr_84 = arr.map(item => {
|
||||
return this.cartesian3Towgs84(item, this.viewer)
|
||||
})
|
||||
this.rectObject = arr_84
|
||||
}
|
||||
})
|
||||
this.event2D.mouse_right_keyboard_ctrl((movement, cartesian) => {
|
||||
if (into === '3D') {
|
||||
return
|
||||
}
|
||||
if (this.points_ids.length > 1) {
|
||||
this.remove_entity(this.points_ids.pop()) //移除point
|
||||
cache_positions.pop()
|
||||
cache_84_position.pop()
|
||||
}
|
||||
})
|
||||
|
||||
this.event2D.gesture_pinck_start_keyboard_ctrl(() => {
|
||||
if (into === '3D') {
|
||||
return
|
||||
}
|
||||
if (this.points_ids.length > 1) {
|
||||
this.remove_entity(this.points_ids.pop()) //移除point
|
||||
cache_positions.pop()
|
||||
cache_84_position.pop()
|
||||
this.positions = cache_positions.concat(cartesian)
|
||||
}
|
||||
})
|
||||
|
||||
this.event2D.gesture_pinck_start((movement, cartesian) => {
|
||||
if (into === '3D') {
|
||||
return
|
||||
}
|
||||
let startTime = new Date()
|
||||
this.event2D.gesture_pinck_end(() => {
|
||||
let endTime = new Date()
|
||||
if (endTime - startTime >= 500) {
|
||||
cb(null, cache_84_position)
|
||||
this.end()
|
||||
}
|
||||
else {
|
||||
this.tip.setPosition(
|
||||
cartesian,
|
||||
((movement.position1.x + movement.position2.x) / 2) + this.viewer.canvas.width,
|
||||
(movement.position1.y + movement.position2.y) / 2
|
||||
)
|
||||
if (!this.polygonHasCreated) {
|
||||
let polyline_id = DrawThreeRect.create_polygon(this, this._sdk2D.viewer)
|
||||
this.points_ids.push(polyline_id)
|
||||
}
|
||||
cache_positions.push(cartesian)
|
||||
cache_84_position.push(this.cartesian3Towgs84(cartesian, this.viewer))
|
||||
this.points_ids.push(this.create_point(cartesian, this._sdk2D.viewer))
|
||||
this.positions = cache_positions.concat(cartesian)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default DrawThreeRect
|
||||
@ -72,14 +72,43 @@ function openLeftClick(sdk, cb) {
|
||||
click = true
|
||||
}, 600);
|
||||
if (!YJ.Measure.GetMeasureStatus() && cartesian) {
|
||||
let flag = false
|
||||
for (let i = leftClickCallbackMap.size - 1; i >= 0; i--) {
|
||||
let key = Array.from(leftClickCallbackMap.keys())[i]
|
||||
let obj = leftClickCallbackMap.get(key)
|
||||
if (obj) {
|
||||
const pick = sdk.viewer.scene.pick(movement.position)
|
||||
if (pick) {
|
||||
if (pick.id) {
|
||||
let entityId
|
||||
// 矢量
|
||||
if (pick.id.type && pick.id.type === 'vector' && pick.id.parentId) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.parentId)
|
||||
if (obj.that.picking && obj.that.geojson) {
|
||||
for (let i = 0; i < obj.that.geojson.features.length; i++) {
|
||||
if (obj.that.geojson.features[i].id === pick.id._id) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.geojson.features[i].id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (typeof pick.id.id == 'string') {
|
||||
let array = pick.id.id.split('-')
|
||||
array.splice(array.length - 1, 1)
|
||||
entityId = array.join('-')
|
||||
}
|
||||
|
||||
if (obj.that) {
|
||||
// 是否为多边形
|
||||
if (pick.id.properties && pick.id.properties.id && leftClickCallbackMap.has(pick.id.properties.id._value)) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.properties.id._value)
|
||||
if (obj.that.picking) {
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.id.properties.id._value,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
else if (leftClickCallbackMap.has(pick.id.id)) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.id)
|
||||
if (obj.that.type === 'PolygonObject') {
|
||||
// 是否可点击y
|
||||
if (obj.that.picking) {
|
||||
@ -103,8 +132,7 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
flag = true
|
||||
break
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -129,8 +157,7 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
flag = true
|
||||
break
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -153,8 +180,7 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
flag = true
|
||||
break
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -179,8 +205,7 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
flag = true
|
||||
break
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -200,8 +225,7 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
flag = true
|
||||
break
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
@ -224,57 +248,18 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
flag = true
|
||||
break
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!flag) {
|
||||
const pick = sdk.viewer.scene.pick(movement.position)
|
||||
if (pick) {
|
||||
if (pick.id) {
|
||||
let entityId
|
||||
// 矢量
|
||||
if (pick.id.type && pick.id.type === 'vector' && pick.id.parentId) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.parentId)
|
||||
if (obj.that.picking && obj.that.geojson) {
|
||||
for (let i = 0; i < obj.that.geojson.features.length; i++) {
|
||||
if (obj.that.geojson.features[i].id === pick.id._id) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.geojson.features[i].id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (typeof pick.id.id == 'string') {
|
||||
let array = pick.id.id.split('-')
|
||||
array.splice(array.length - 1, 1)
|
||||
entityId = array.join('-')
|
||||
}
|
||||
|
||||
if (pick.id.properties && pick.id.properties.id && leftClickCallbackMap.has(pick.id.properties.id._value)) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.properties.id._value)
|
||||
if (obj.that.picking) {
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.id.properties.id._value,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
}
|
||||
}
|
||||
else if (leftClickCallbackMap.has(pick.id.id)) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.id)
|
||||
if (obj.that.picking) {
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.id.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
else if (entityId && leftClickCallbackMap.has(entityId)) {
|
||||
@ -284,6 +269,7 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
entityId,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
else if (pick.primitive) {
|
||||
@ -293,6 +279,7 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
pick.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -341,6 +328,159 @@ function openLeftClick(sdk, cb) {
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = leftClickCallbackMap.size - 1; i >= 0; i--) {
|
||||
let key = Array.from(leftClickCallbackMap.keys())[i]
|
||||
let obj = leftClickCallbackMap.get(key)
|
||||
if (obj) {
|
||||
if (obj.that && obj.that.show && (obj.that.entity && obj.that.entity.show)) {
|
||||
// 是否为多边形
|
||||
if (obj.that.type === 'PolygonObject') {
|
||||
// 是否可点击y
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 3) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let polyPos = []
|
||||
for (let i = 0; i < obj.that.options.positions.length; i++) {
|
||||
polyPos.push([
|
||||
obj.that.options.positions[i].lng,
|
||||
obj.that.options.positions[i].lat
|
||||
])
|
||||
}
|
||||
polyPos.push([
|
||||
obj.that.options.positions[0].lng,
|
||||
obj.that.options.positions[0].lat
|
||||
])
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 聚集地
|
||||
else if (obj.that.type === 'AssembleObject') {
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 3) {
|
||||
let positions = obj.that.computeAssemble(obj.that.options.positions, true)
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let polyPos = []
|
||||
for (let i = 0; i < positions.length; i += 2) {
|
||||
polyPos.push([
|
||||
positions[i],
|
||||
positions[i + 1]
|
||||
])
|
||||
}
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 单箭头
|
||||
else if (obj.that.type === 'AttackArrowObject') {
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 3) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let positions = obj.that.computeAttackArrow(obj.that.options.positions)
|
||||
let polyPos = []
|
||||
for (let m = 0; m < positions.length; m++) {
|
||||
let pos84 = cartesian3Towgs84(positions[m], sdk.viewer)
|
||||
polyPos.push([pos84.lng, pos84.lat])
|
||||
}
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 双箭头
|
||||
else if (obj.that.type === 'PincerArrowObject') {
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 5) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let positions = obj.that.computePincerArrow(obj.that.options.positions)
|
||||
let polyPos = []
|
||||
for (let m = 0; m < positions.length; m++) {
|
||||
let pos84 = cartesian3Towgs84(positions[m], sdk.viewer)
|
||||
polyPos.push([pos84.lng, pos84.lat])
|
||||
}
|
||||
let pos84_0 = cartesian3Towgs84(positions[0], sdk.viewer)
|
||||
polyPos.push([pos84_0.lng, pos84_0.lat])
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 圆
|
||||
else if (obj.that.type === 'CircleObject') {
|
||||
if (obj.that.picking) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
if (obj.that.options.center && obj.that.options.radius) {
|
||||
let center = [obj.that.options.center.lng, obj.that.options.center.lat];
|
||||
let radius = obj.that.options.radius / 1000;
|
||||
let options = { steps: 360, units: 'kilometers' };
|
||||
let circle = turf.circle(center, radius, options);
|
||||
let contain = turf.booleanPointInPolygon(pt, circle);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// 扇形
|
||||
else if (obj.that.type === 'SectorObject') {
|
||||
if (obj.that.picking) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
if (obj.that.options.center && obj.that.options.radius && obj.that.options.startAngle && obj.that.options.endAngle) {
|
||||
let positions = obj.that.calSector(obj.that.options.center, obj.that.options.radius, obj.that.options.startAngle, obj.that.options.endAngle, undefined, true)
|
||||
let polyPos = []
|
||||
for (let m = 0; m < positions.length; m++) {
|
||||
polyPos.push([positions[m].lng, positions[m].lat])
|
||||
}
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
109
src/Global/Contour/_element.js
Normal file
109
src/Global/Contour/_element.js
Normal file
@ -0,0 +1,109 @@
|
||||
function html() {
|
||||
return `
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<span class="label">等高线</span>
|
||||
<input class="btn-switch show" type="checkbox">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">等高距</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input equal-height-distance" type="number" title="" min="1" max="1000">
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 60px;">
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 157px;">
|
||||
<span class="label">选中线颜色</span>
|
||||
<div class="active-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<span class="label">计曲线</span>
|
||||
<input class="btn-switch index-contour-switch" type="checkbox">
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px;">
|
||||
<span class="label">计曲线颜色</span>
|
||||
<div class="index-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">计曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input index-contour-width" type="number" title="" step="0.1" min="1" max="10">
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<span class="label">首曲线</span>
|
||||
<input class="btn-switch intermediate-contour-switch" type="checkbox">
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px;">
|
||||
<span class="label">首曲线颜色</span>
|
||||
<div class="intermediate-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">首曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input intermediate-contour-width" type="number" step="0.1" title="" min="1" max="10">
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<span class="label">间曲线</span>
|
||||
<input class="btn-switch halfInterval-contour-switch" type="checkbox">
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px;">
|
||||
<span class="label">间曲线颜色</span>
|
||||
<div class="halfInterval-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">间曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input halfInterval-contour-width" type="number" title="" min="1" max="10">
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<span class="label">助曲线</span>
|
||||
<input class="btn-switch supplementary-contour-switch" type="checkbox">
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px;">
|
||||
<span class="label">助曲线颜色</span>
|
||||
<div class="supplementary-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">助曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input supplementary-contour-width" type="number" title="" min="1" max="10">
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
export { html }
|
||||
@ -3,12 +3,35 @@
|
||||
*/
|
||||
import Dialog from "../../Obj/Element/Dialog";
|
||||
import Tools from "../../Tools";
|
||||
import { flyTo } from '../global'
|
||||
import YJColorPicker from "../../Obj/Element/yj-color-picker";
|
||||
|
||||
import { html } from "./_element";
|
||||
|
||||
let _DialogObject = null;
|
||||
let material = null;
|
||||
let handler = null;
|
||||
let activeHeightElm = null;
|
||||
let tools
|
||||
let _sdk
|
||||
let secondaryLinesCount = 19
|
||||
let show = false
|
||||
let equalHeightDistance = 10
|
||||
let activeColor = '#ffd000'
|
||||
let indexContourShow = true
|
||||
let indexContourWidth = 2.5
|
||||
let indexContourColor = '#43cf7c'
|
||||
let intermediateContourShow = true
|
||||
let intermediateContourWidth = 1.8
|
||||
let intermediateContourColor = '#ff0000'
|
||||
let halfIntervalContourShow = false
|
||||
let halfIntervalContourWidth = 1.0
|
||||
let halfIntervalContourColor = '#64b6d9'
|
||||
let supplementaryContourShow = false
|
||||
let supplementaryContourWidth = 1.0
|
||||
let supplementaryContourColor = '#d084d1'
|
||||
|
||||
|
||||
activeHeightElm = document.createElement('div')
|
||||
activeHeightElm.className = 'YJ-customize-active-height-elm'
|
||||
activeHeightElm.style.position = 'absolute'
|
||||
@ -20,7 +43,39 @@ activeHeightElm.style.textAlign = 'center'
|
||||
activeHeightElm.style.pointerEvents = 'none'
|
||||
activeHeightElm.style.color = '#ff0000'
|
||||
activeHeightElm.style.display = 'none'
|
||||
|
||||
|
||||
|
||||
function accordingToCameraHeight() {
|
||||
if (_sdk) {
|
||||
const camera = _sdk.viewer.camera;
|
||||
const position = camera.positionCartographic;
|
||||
|
||||
// 计算相机高度(相对于椭球面)
|
||||
let cameraHeight = Cesium.Math.toDegrees(position.height);
|
||||
if (cameraHeight < 1000000) {
|
||||
if (!_sdk.viewer.scene.globe.material && show === true) {
|
||||
showContour(_sdk)
|
||||
}
|
||||
// if (material) {
|
||||
// if (cameraHeight > 450000) {
|
||||
// material.uniforms.supplementaryContourShow = false
|
||||
// }
|
||||
// else if (supplementaryContourShow) {
|
||||
// material.uniforms.supplementaryContourShow = true
|
||||
// }
|
||||
// }
|
||||
}
|
||||
else {
|
||||
hideContour(_sdk)
|
||||
}
|
||||
// console.log(cameraHeight)
|
||||
}
|
||||
|
||||
}
|
||||
async function dialog(sdk) {
|
||||
_sdk = sdk
|
||||
|
||||
if (!sdk || _DialogObject) {
|
||||
return
|
||||
}
|
||||
@ -28,13 +83,12 @@ async function dialog(sdk) {
|
||||
createMaterial()
|
||||
}
|
||||
if (!tools) {
|
||||
tools = new Tools()
|
||||
tools = new Tools(sdk)
|
||||
}
|
||||
|
||||
_DialogObject = await new Dialog(sdk, {}, {
|
||||
title: "等高线", left: '180px',
|
||||
title: "全局等高线", left: '180px',
|
||||
top: '100px',
|
||||
confirmCallBack: options => { },
|
||||
closeCallBack: () => {
|
||||
_DialogObject = null
|
||||
}
|
||||
@ -43,63 +97,292 @@ async function dialog(sdk) {
|
||||
_DialogObject._element.body.className =
|
||||
_DialogObject._element.body.className + ' contour'
|
||||
let contentElm = document.createElement('div')
|
||||
contentElm.innerHTML = `
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">高差</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input gap" type="number" title="" min="0" max="1000">
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px;">
|
||||
<span class="label">主线颜色</span>
|
||||
<div class="primary-lice-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">次线条数</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input gap2" type="number" title="" min="0" max="10">
|
||||
<span class="unit"></span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px;">
|
||||
<span class="label">次线颜色</span>
|
||||
<div class="secondary-lice-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col">
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<span class="label">开关</span>
|
||||
<input class="btn-switch" type="checkbox">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
`
|
||||
contentElm.innerHTML = `
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<span class="label">开关</span>
|
||||
<input class="btn-switch" type="checkbox">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
contentElm.innerHTML = html(this)
|
||||
|
||||
_DialogObject.contentAppChild(contentElm)
|
||||
|
||||
contentElm.getElementsByClassName('btn-switch')[0].addEventListener('change', (e) => {
|
||||
sdk.viewer.scene.postRender.removeEventListener(accordingToCameraHeight)
|
||||
sdk.viewer.scene.postRender.addEventListener(accordingToCameraHeight)
|
||||
|
||||
// 显示
|
||||
let showBtn = contentElm.getElementsByClassName('show')[0]
|
||||
showBtn.checked = show
|
||||
showBtn.addEventListener('change', (e) => {
|
||||
if (e.target.checked) {
|
||||
show = true
|
||||
let height = sdk.viewer.camera.positionCartographic.height
|
||||
if (height > 16360) {
|
||||
let cartographic = sdk.viewer.camera.positionCartographic
|
||||
let options = {
|
||||
position: {
|
||||
lng: Cesium.Math.toDegrees(cartographic.longitude),
|
||||
lat: Cesium.Math.toDegrees(cartographic.latitude),
|
||||
alt: 16360,
|
||||
},
|
||||
}
|
||||
flyTo(sdk, options, 0.5)
|
||||
}
|
||||
showContour(sdk)
|
||||
} else {
|
||||
show = false
|
||||
hideContour(sdk)
|
||||
}
|
||||
})
|
||||
// 等高距
|
||||
let equalHeightDistanceInput = contentElm.getElementsByClassName('equal-height-distance')[0]
|
||||
equalHeightDistanceInput.value = equalHeightDistance
|
||||
equalHeightDistanceInput.addEventListener('blur', (e) => {
|
||||
let value = initInputValue(e)
|
||||
equalHeightDistance = value
|
||||
equalHeightDistanceInput.value = value
|
||||
if (material) {
|
||||
material.uniforms.spacing = equalHeightDistance * 5
|
||||
}
|
||||
})
|
||||
|
||||
// 选中颜色
|
||||
// let activeColorPicker = new YJColorPicker({
|
||||
// el: contentElm.getElementsByClassName('active-color')[0],
|
||||
// size: "mini",
|
||||
// isLog: false,
|
||||
// alpha: true, //是否开启透明度
|
||||
// disabled: false, //是否禁止打开颜色选择器
|
||||
// predefineColor: true, // 预定义颜色
|
||||
// defaultColor: '#ffffff',
|
||||
// sure: color => {
|
||||
// activeColor = color
|
||||
// if (material) {
|
||||
// material.uniforms.activeColor = Cesium.Color.fromCssColorString(activeColor)
|
||||
// }
|
||||
// },
|
||||
// clear: () => {
|
||||
// activeColor = 'rgba(255,255,255,1)'
|
||||
// if (material) {
|
||||
// material.uniforms.activeColor = Cesium.Color.fromCssColorString(activeColor)
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
let activeColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName('active-color')[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: activeColor,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: color => {
|
||||
activeColor = color
|
||||
if (material) {
|
||||
material.uniforms.activeColor = Cesium.Color.fromCssColorString(activeColor)
|
||||
}
|
||||
},
|
||||
clear: () => {
|
||||
activeColor = 'rgba(255,255,255,1)'
|
||||
if (material) {
|
||||
material.uniforms.activeColor = Cesium.Color.fromCssColorString(activeColor)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 计曲线开关
|
||||
let indexContourSwitch = contentElm.getElementsByClassName('index-contour-switch')[0]
|
||||
indexContourSwitch.checked = indexContourShow
|
||||
indexContourSwitch.addEventListener('change', (e) => {
|
||||
indexContourShow = e.target.checked
|
||||
if (material) {
|
||||
material.uniforms.indexContourShow = indexContourShow
|
||||
}
|
||||
})
|
||||
// 计曲线颜色
|
||||
let indexContourColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName('index-contour-color')[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: indexContourColor,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: color => {
|
||||
indexContourColor = color
|
||||
if (material) {
|
||||
material.uniforms.indexContourColor = Cesium.Color.fromCssColorString(indexContourColor)
|
||||
}
|
||||
},
|
||||
clear: () => {
|
||||
indexContourColor = 'rgba(255,255,255,1)'
|
||||
if (material) {
|
||||
material.uniforms.indexContourColor = Cesium.Color.fromCssColorString(indexContourColor)
|
||||
}
|
||||
}
|
||||
})
|
||||
// 计曲线宽度
|
||||
let indexContourWidthInput = contentElm.getElementsByClassName('index-contour-width')[0]
|
||||
indexContourWidthInput.value = indexContourWidth
|
||||
indexContourWidthInput.addEventListener('blur', (e) => {
|
||||
let value = initInputValue(e)
|
||||
indexContourWidth = value
|
||||
indexContourWidthInput.value = value
|
||||
if (material) {
|
||||
material.uniforms.indexContourWidth = indexContourWidth
|
||||
}
|
||||
})
|
||||
|
||||
// 首曲线开关
|
||||
let intermediateContourSwitch = contentElm.getElementsByClassName('intermediate-contour-switch')[0]
|
||||
intermediateContourSwitch.checked = intermediateContourShow
|
||||
intermediateContourSwitch.addEventListener('change', (e) => {
|
||||
intermediateContourShow = e.target.checked
|
||||
if (material) {
|
||||
material.uniforms.intermediateContourShow = intermediateContourShow
|
||||
}
|
||||
})
|
||||
// 首曲线颜色
|
||||
let intermediateContourColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName('intermediate-contour-color')[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: intermediateContourColor,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: color => {
|
||||
intermediateContourColor = color
|
||||
if (material) {
|
||||
material.uniforms.intermediateContourColor = Cesium.Color.fromCssColorString(intermediateContourColor)
|
||||
}
|
||||
},
|
||||
clear: () => {
|
||||
intermediateContourColor = 'rgba(255,255,255,1)'
|
||||
if (material) {
|
||||
material.uniforms.intermediateContourColor = Cesium.Color.fromCssColorString(intermediateContourColor)
|
||||
}
|
||||
}
|
||||
})
|
||||
// 首曲线宽度
|
||||
let intermediateContourWidthInput = contentElm.getElementsByClassName('intermediate-contour-width')[0]
|
||||
intermediateContourWidthInput.value = intermediateContourWidth
|
||||
intermediateContourWidthInput.addEventListener('blur', (e) => {
|
||||
let value = initInputValue(e)
|
||||
intermediateContourWidth = value
|
||||
intermediateContourWidthInput.value = value
|
||||
if (material) {
|
||||
material.uniforms.intermediateContourWidth = intermediateContourWidth
|
||||
}
|
||||
})
|
||||
|
||||
// 间曲线开关
|
||||
let halfIntervalContourSwitch = contentElm.getElementsByClassName('halfInterval-contour-switch')[0]
|
||||
halfIntervalContourSwitch.checked = halfIntervalContourShow
|
||||
halfIntervalContourSwitch.addEventListener('change', (e) => {
|
||||
halfIntervalContourShow = e.target.checked
|
||||
if (material) {
|
||||
material.uniforms.halfIntervalContourShow = halfIntervalContourShow
|
||||
}
|
||||
})
|
||||
// 间曲线颜色
|
||||
let halfIntervalContourColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName('halfInterval-contour-color')[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: halfIntervalContourColor,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: color => {
|
||||
halfIntervalContourColor = color
|
||||
if (material) {
|
||||
material.uniforms.halfIntervalContourColor = Cesium.Color.fromCssColorString(halfIntervalContourColor)
|
||||
}
|
||||
},
|
||||
clear: () => {
|
||||
halfIntervalContourColor = 'rgba(255,255,255,1)'
|
||||
if (material) {
|
||||
material.uniforms.halfIntervalContourColor = Cesium.Color.fromCssColorString(halfIntervalContourColor)
|
||||
}
|
||||
}
|
||||
})
|
||||
// 间曲线宽度
|
||||
let halfIntervalContourWidthInput = contentElm.getElementsByClassName('halfInterval-contour-width')[0]
|
||||
halfIntervalContourWidthInput.value = halfIntervalContourWidth
|
||||
halfIntervalContourWidthInput.addEventListener('blur', (e) => {
|
||||
let value = initInputValue(e)
|
||||
halfIntervalContourWidth = value
|
||||
halfIntervalContourWidthInput.value = value
|
||||
if (material) {
|
||||
material.uniforms.halfIntervalContourWidth = halfIntervalContourWidth
|
||||
}
|
||||
})
|
||||
|
||||
// 助曲线开关
|
||||
let supplementaryContourSwitch = contentElm.getElementsByClassName('supplementary-contour-switch')[0]
|
||||
supplementaryContourSwitch.checked = supplementaryContourShow
|
||||
supplementaryContourSwitch.addEventListener('change', (e) => {
|
||||
supplementaryContourShow = e.target.checked
|
||||
if (material) {
|
||||
material.uniforms.supplementaryContourShow = supplementaryContourShow
|
||||
}
|
||||
})
|
||||
// 助曲线颜色
|
||||
let supplementaryContourColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName('supplementary-contour-color')[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: supplementaryContourColor,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: color => {
|
||||
supplementaryContourColor = color
|
||||
if (material) {
|
||||
material.uniforms.supplementaryContourColor = Cesium.Color.fromCssColorString(supplementaryContourColor)
|
||||
}
|
||||
},
|
||||
clear: () => {
|
||||
supplementaryContourColor = 'rgba(255,255,255,1)'
|
||||
if (material) {
|
||||
material.uniforms.supplementaryContourColor = Cesium.Color.fromCssColorString(supplementaryContourColor)
|
||||
}
|
||||
}
|
||||
})
|
||||
// 助曲线宽度
|
||||
let supplementaryContourWidthInput = contentElm.getElementsByClassName('supplementary-contour-width')[0]
|
||||
supplementaryContourWidthInput.value = supplementaryContourWidth
|
||||
supplementaryContourWidthInput.addEventListener('blur', (e) => {
|
||||
let value = initInputValue(e)
|
||||
supplementaryContourWidth = value
|
||||
supplementaryContourWidthInput.value = value
|
||||
if (material) {
|
||||
material.uniforms.supplementaryContourWidth = supplementaryContourWidth
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function initInputValue(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)
|
||||
}
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function showContour(sdk) {
|
||||
const camera = sdk.viewer.camera;
|
||||
const position = camera.positionCartographic;
|
||||
// 计算相机高度(相对于椭球面)
|
||||
let cameraHeight = Cesium.Math.toDegrees(position.height);
|
||||
if (cameraHeight > 1000000) {
|
||||
return
|
||||
}
|
||||
if (handler) {
|
||||
handler.destroy()
|
||||
}
|
||||
@ -123,11 +406,16 @@ async function dialog(sdk) {
|
||||
activeHeightElm.style.left = movement.endPosition.x - 50 + left + 'px'
|
||||
activeHeightElm.style.top = movement.endPosition.y - 40 + top + 'px'
|
||||
activeHeightElm.style.display = 'block'
|
||||
// let pos = sdk.viewer.scene.clampToHeight(cartesian)
|
||||
let pos84 = tools.cartesian3Towgs84(cartesian, sdk.viewer)
|
||||
// pos84.alt = height
|
||||
let mainContourHeight = Math.floor(pos84.alt / material.uniforms.spacing) * material.uniforms.spacing
|
||||
let gap = pos84.alt - mainContourHeight
|
||||
let gap2 = material.uniforms.spacing / (material.uniforms.secondaryLinesCount + 1)
|
||||
let activeHeight = Math.floor(gap / gap2) * gap2 + mainContourHeight
|
||||
if (pos84.alt < 0) {
|
||||
pos84.alt = 0
|
||||
}
|
||||
if ((pos84.alt - activeHeight) > gap2 / 2) {
|
||||
activeHeight = activeHeight + gap2
|
||||
}
|
||||
@ -140,7 +428,8 @@ async function dialog(sdk) {
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||||
sdk.viewer.scene.globe.material = material;
|
||||
} else {
|
||||
}
|
||||
function hideContour(sdk) {
|
||||
if (handler) {
|
||||
handler.destroy()
|
||||
handler = null
|
||||
@ -151,17 +440,31 @@ async function dialog(sdk) {
|
||||
}
|
||||
sdk.viewer.scene.globe.material = null;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function createMaterial() {
|
||||
Cesium.Material._materialCache._materials.ElevationContour.fabric.source = `
|
||||
uniform vec4 color;
|
||||
uniform vec4 secondaryLinesColor;
|
||||
uniform float spacing;
|
||||
uniform float width;
|
||||
uniform float secondaryLinesWidth;
|
||||
uniform vec4 activeColor; // 选中颜色
|
||||
uniform float spacing; // 等高距
|
||||
|
||||
// 计曲线
|
||||
uniform bool indexContourShow;
|
||||
uniform float indexContourWidth;
|
||||
uniform vec4 indexContourColor;
|
||||
// 首曲线
|
||||
uniform bool intermediateContourShow;
|
||||
uniform float intermediateContourWidth;
|
||||
uniform vec4 intermediateContourColor;
|
||||
// 间曲线
|
||||
uniform bool halfIntervalContourShow;
|
||||
uniform float halfIntervalContourWidth;
|
||||
uniform vec4 halfIntervalContourColor;
|
||||
// 助曲线
|
||||
uniform bool supplementaryContourShow;
|
||||
uniform float supplementaryContourWidth;
|
||||
uniform vec4 supplementaryContourColor;
|
||||
|
||||
uniform float mouseHeight;
|
||||
|
||||
uniform float secondaryLinesCount; // 0=无次线, 1=1条次线, 2=2条次线...
|
||||
|
||||
czm_material czm_getMaterial(czm_materialInput materialInput)
|
||||
@ -175,18 +478,32 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
|
||||
#if (__VERSION__ == 300 || defined(GL_OES_standard_derivatives))
|
||||
float dxc = abs(dFdx(materialInput.height));
|
||||
float dyc = abs(dFdy(materialInput.height));
|
||||
float dFMain = max(dxc, dyc) * czm_pixelRatio * width;
|
||||
float dFMain = max(dxc, dyc) * czm_pixelRatio * indexContourWidth;
|
||||
#else
|
||||
float dFMain = czm_pixelRatio * width;
|
||||
float dFMain = czm_pixelRatio * indexContourWidth;
|
||||
#endif
|
||||
|
||||
bool isMainContour = distanceToMainContour < dFMain;
|
||||
bool isSecondaryContour = false;
|
||||
float dFSecondary = 0.0;
|
||||
float secondarySpacing = 0.0;
|
||||
bool isHalfInterval = false;
|
||||
bool isIntermediate= false;
|
||||
|
||||
// 计算当前高度所属的等高线高度
|
||||
float mainContourHeight = floor(materialInput.height / spacing) * spacing;
|
||||
float secondaryContourHeight = floor(materialInput.height / spacing * (secondaryLinesCount + 1.0)) * spacing / (secondaryLinesCount + 1.0);
|
||||
|
||||
// 计算次线在两条主等高线之间的相对位置
|
||||
float relativeHeight = materialInput.height - mainContourHeight;
|
||||
float normalizedPosition = relativeHeight / spacing;
|
||||
|
||||
// 计算次线索引(从主等高线开始计数)
|
||||
float lineIndex = floor(normalizedPosition * (secondaryLinesCount + 1.0));
|
||||
|
||||
// 只有当存在次线时才计算次线
|
||||
if(secondaryLinesCount > 0.0) {
|
||||
float secondaryLinesWidth = supplementaryContourWidth;
|
||||
secondarySpacing = spacing / (secondaryLinesCount + 1.0);
|
||||
float distanceToSecondaryContour = mod(materialInput.height, secondarySpacing);
|
||||
|
||||
@ -194,6 +511,28 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
|
||||
float minDistanceToMain = min(distanceToMainContour, spacing - distanceToMainContour);
|
||||
bool notCloseToMain = minDistanceToMain > dFMain * 2.0; // 2倍线宽缓冲
|
||||
|
||||
|
||||
if (lineIndex > 0.0 && lineIndex < secondaryLinesCount) {
|
||||
// 使用mod函数检查余数是否接近0(考虑浮点数精度问题)
|
||||
isHalfInterval = abs(mod(lineIndex, 2.0)) < 0.01;
|
||||
if(isHalfInterval) {
|
||||
secondaryLinesWidth = halfIntervalContourWidth;
|
||||
}
|
||||
// 使用mod函数检查余数是否接近0(考虑浮点数精度问题)
|
||||
isIntermediate = abs(mod(lineIndex, 4.0)) < 0.01;
|
||||
if(isIntermediate) {
|
||||
secondaryLinesWidth = intermediateContourWidth;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#if (__VERSION__ == 300 || defined(GL_OES_standard_derivatives))
|
||||
dFSecondary = max(dxc, dyc) * czm_pixelRatio * secondaryLinesWidth;
|
||||
#else
|
||||
@ -203,10 +542,6 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
|
||||
isSecondaryContour = (distanceToSecondaryContour < dFSecondary) && notCloseToMain;
|
||||
}
|
||||
|
||||
// 计算当前高度所属的等高线高度
|
||||
float mainContourHeight = floor(materialInput.height / spacing) * spacing;
|
||||
float secondaryContourHeight = floor(materialInput.height / spacing * (secondaryLinesCount + 1.0)) * spacing / (secondaryLinesCount + 1.0);
|
||||
|
||||
// 高亮判断
|
||||
bool shouldHighlight = false;
|
||||
if(isMainContour && abs(mainContourHeight - mouseHeight) < 0.5 * (spacing/(secondaryLinesCount+1.0))) {
|
||||
@ -218,15 +553,41 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
|
||||
// 颜色输出
|
||||
vec4 outColor;
|
||||
if(shouldHighlight) {
|
||||
outColor = vec4(1.0, 0.0, 0.0, 1.0);
|
||||
outColor = czm_gammaCorrect(vec4(activeColor.rgb, activeColor.a));
|
||||
} else if(isMainContour) {
|
||||
outColor = czm_gammaCorrect(vec4(color.rgb, color.a));
|
||||
float a = indexContourColor.a;
|
||||
if(!indexContourShow) {
|
||||
a = 0.0;
|
||||
}
|
||||
outColor = czm_gammaCorrect(vec4(indexContourColor.rgb, a));
|
||||
} else if(isSecondaryContour) {
|
||||
outColor = czm_gammaCorrect(vec4(secondaryLinesColor.rgb, secondaryLinesColor.a));
|
||||
float a = supplementaryContourColor.a;
|
||||
if(!supplementaryContourShow) {
|
||||
a = 0.0;
|
||||
}
|
||||
outColor = czm_gammaCorrect(vec4(supplementaryContourColor.rgb, a));
|
||||
if(isHalfInterval) {
|
||||
float a = halfIntervalContourColor.a;
|
||||
if(!halfIntervalContourShow) {
|
||||
a = 0.0;
|
||||
}
|
||||
outColor = czm_gammaCorrect(vec4(halfIntervalContourColor.rgb, a));
|
||||
}
|
||||
if(isIntermediate) {
|
||||
float a = intermediateContourColor.a;
|
||||
if(!intermediateContourShow) {
|
||||
a = 0.0;
|
||||
}
|
||||
outColor = czm_gammaCorrect(vec4(intermediateContourColor.rgb, a));
|
||||
}
|
||||
} else {
|
||||
outColor = vec4(0.0);
|
||||
}
|
||||
|
||||
if(materialInput.height<0.0) {
|
||||
outColor = vec4(0.0);
|
||||
}
|
||||
|
||||
material.diffuse = outColor.rgb;
|
||||
material.alpha = outColor.a;
|
||||
return material;
|
||||
@ -237,14 +598,25 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
|
||||
fabric: {
|
||||
type: "ElevationContour",
|
||||
uniforms: {
|
||||
width: 2,
|
||||
secondaryLinesWidth: 1, // 次级线宽度
|
||||
spacing: 200,
|
||||
color: Cesium.Color.fromCssColorString('#ffd000'),
|
||||
secondaryLinesColor: Cesium.Color.fromCssColorString('#0dff00').withAlpha(0.5),
|
||||
spacing: 10 * 5,
|
||||
activeColor: Cesium.Color.fromCssColorString(activeColor),
|
||||
mouseHeight: -100000,
|
||||
mousePosition: new Cesium.Cartesian3(0, 0, 0),
|
||||
secondaryLinesCount: 3
|
||||
secondaryLinesCount: secondaryLinesCount,
|
||||
cameraHeight: 0,
|
||||
|
||||
indexContourShow: indexContourShow,
|
||||
indexContourWidth: indexContourWidth,
|
||||
indexContourColor: Cesium.Color.fromCssColorString(indexContourColor),
|
||||
intermediateContourShow: intermediateContourShow,
|
||||
intermediateContourWidth: intermediateContourWidth,
|
||||
intermediateContourColor: Cesium.Color.fromCssColorString(intermediateContourColor),
|
||||
halfIntervalContourShow: halfIntervalContourShow,
|
||||
halfIntervalContourWidth: halfIntervalContourWidth,
|
||||
halfIntervalContourColor: Cesium.Color.fromCssColorString(halfIntervalContourColor),
|
||||
supplementaryContourShow: supplementaryContourShow,
|
||||
supplementaryContourWidth: supplementaryContourWidth,
|
||||
supplementaryContourColor: Cesium.Color.fromCssColorString(supplementaryContourColor),
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
@ -135,6 +135,7 @@ const open = async (sdk, options = {}, _Dialog = {}) => {
|
||||
pitch: viewer.camera.pitch,
|
||||
roll: viewer.camera.roll
|
||||
}
|
||||
tools.message({text: '操作成功'})
|
||||
})
|
||||
|
||||
let totalTimeElm = contentElm.querySelector("input[name='totalTime']")
|
||||
|
||||
@ -101,6 +101,7 @@ function getFlagFromKeyboard(key) {
|
||||
*/
|
||||
function keyDown(event) {
|
||||
let _viewer = this
|
||||
|
||||
// 判断是否有输入框聚焦
|
||||
function isInputFocused() {
|
||||
const activeElement = document.activeElement;
|
||||
@ -164,33 +165,52 @@ function keyUp(event) {
|
||||
* @return {*}
|
||||
*/
|
||||
function keyboardMapRoamingRender(_viewer) {
|
||||
if(!_viewer.scene.screenSpaceCameraController.enableTilt) {
|
||||
if(!_viewer || !_viewer.scene || !_viewer.scene.screenSpaceCameraController.enableTilt) {
|
||||
return
|
||||
}
|
||||
let camera = _viewer.camera;
|
||||
let ellipsoid = _viewer.scene.globe.ellipsoid;
|
||||
let cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
|
||||
let cameraHeight2 = camera.positionCartographic.height;
|
||||
|
||||
|
||||
// 根据相机高度设置移动距离,比默认距离移动效果更好
|
||||
let moveRate = cameraHeight / 20.0;
|
||||
let rotationRate = moveRate / 500000 / Cesium.Math.toDegrees(camera.pitch);
|
||||
let moveRate2 = cameraHeight2 / 100.0;
|
||||
|
||||
if (flags.moveForward) {
|
||||
// camera.moveForward(moveRate);
|
||||
if(_viewer.scene.mode == 2) {
|
||||
camera.moveUp(moveRate2);
|
||||
}
|
||||
else {
|
||||
camera.rotate(camera.right, -rotationRate);
|
||||
}
|
||||
}
|
||||
if (flags.moveBackward) {
|
||||
// camera.moveBackward(moveRate);
|
||||
if(_viewer.scene.mode == 2) {
|
||||
camera.moveDown(moveRate2);
|
||||
}
|
||||
else {
|
||||
camera.rotate(camera.right, rotationRate);
|
||||
}
|
||||
}
|
||||
if (flags.moveLeft) {
|
||||
// camera.moveLeft(moveRate);
|
||||
if(_viewer.scene.mode == 2) {
|
||||
camera.moveLeft(moveRate2);
|
||||
}
|
||||
else {
|
||||
camera.rotate(camera.up, -rotationRate);
|
||||
}
|
||||
}
|
||||
if (flags.moveRight) {
|
||||
// camera.moveRight(moveRate);
|
||||
if(_viewer.scene.mode == 2) {
|
||||
camera.moveRight(moveRate2);
|
||||
}
|
||||
else {
|
||||
camera.rotate(camera.up, rotationRate);
|
||||
}
|
||||
}
|
||||
if (flags.moveUp) {
|
||||
camera.moveUp(moveRate);
|
||||
}
|
||||
|
||||
@ -263,7 +263,7 @@ async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
|
||||
updateCanvas()
|
||||
}
|
||||
})
|
||||
let borderColorPicker = new ewPlugins('colorpicker', {
|
||||
let borderColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName('border-color')[0],
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: false, //是否开启透明度
|
||||
@ -564,7 +564,7 @@ async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
|
||||
|
||||
function changeMapBorderColor(color) {
|
||||
border.color = color || '#000000'
|
||||
new ewPlugins('colorpicker', {
|
||||
new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName('border-color')[0],
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: false, //是否开启透明度
|
||||
@ -1420,11 +1420,11 @@ async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
|
||||
const url = URL.createObjectURL(blob);
|
||||
let downloadElement = document.createElement('a');
|
||||
downloadElement.href = url;
|
||||
downloadElement.download = `高清出图-${getDateTimeString()}.jpg`;
|
||||
downloadElement.download = `高清出图-${getDateTimeString()}.png`;
|
||||
document.body.appendChild(downloadElement);
|
||||
downloadElement.click();
|
||||
document.body.removeChild(downloadElement);
|
||||
}, 'image/jpeg', 0.95);
|
||||
}, 'image/png', 0.95);
|
||||
exporting = false;
|
||||
exportBtn.innerHTML = '打印';
|
||||
// canvas2.toBlob(function (blob) {
|
||||
|
||||
@ -124,7 +124,7 @@ function syncViewer() {
|
||||
if (height > 9000000) {
|
||||
height = 9000000
|
||||
}
|
||||
if (height < 100000) {
|
||||
if (height < 400000) {
|
||||
this.entity.billboard.show = true
|
||||
this.entity.rectangle.show = false
|
||||
}
|
||||
|
||||
@ -4,18 +4,38 @@
|
||||
import Tools from "../../Tools";
|
||||
import { getCoordinateSystem } from "../../Global/global";
|
||||
import MouseEvent from '../../Event/index'
|
||||
import { getSdk as get2DSdk } from '../../Global/MultiViewportMode'
|
||||
import { getSdk as getSplitScreenSdk } from "../../Global/SplitScreen";
|
||||
|
||||
let event
|
||||
let event2
|
||||
let MouseCoordinateElm
|
||||
let requestAnimationFrameEventId
|
||||
let tmovement
|
||||
let targetSdk
|
||||
let sdkD
|
||||
|
||||
const MouseCoordinate = (sdk, status) => {
|
||||
if (!sdk || !sdk.viewer) {
|
||||
return
|
||||
}
|
||||
targetSdk = sdk
|
||||
sdkD = get2DSdk().sdkD
|
||||
if(!sdkD) {
|
||||
sdkD = getSplitScreenSdk().sdkD
|
||||
}
|
||||
|
||||
let tools = new Tools(sdk)
|
||||
if (status) {
|
||||
if (event) {
|
||||
event.destroy()
|
||||
}
|
||||
if (event2) {
|
||||
event2.destroy()
|
||||
event2 = undefined
|
||||
}
|
||||
event = new MouseEvent(sdk)
|
||||
tmovement = null
|
||||
let position = {
|
||||
x: '',
|
||||
y: '',
|
||||
@ -40,22 +60,60 @@ const MouseCoordinate = (sdk, status) => {
|
||||
contentElm.style['background-size'] = `200% 200%`;
|
||||
MouseCoordinateElm = contentElm
|
||||
}
|
||||
sdk.viewer._element.appendChild(contentElm)
|
||||
let tmovement
|
||||
sdk.viewer.container.appendChild(contentElm)
|
||||
|
||||
event.mouse_move((movement, cartesian) => {
|
||||
tmovement = { ...movement }
|
||||
targetSdk = sdk
|
||||
tmovement = { ...movement.endPosition }
|
||||
})
|
||||
|
||||
const getPosition = () => {
|
||||
if(!tmovement) {
|
||||
if (!targetSdk) {
|
||||
return
|
||||
}
|
||||
let canvas = sdk.viewer._element.getElementsByTagName('canvas')[0]
|
||||
let left = tmovement.endPosition.x;
|
||||
let top = tmovement.endPosition.y;
|
||||
let cartesian = event.getcartesian(tmovement)
|
||||
contentElm.style['background-position-x'] = `${-canvas.width + left + 4}px`;
|
||||
contentElm.style['background-position-y'] = `${-canvas.height + top - 2}px`;
|
||||
sdkD = get2DSdk().sdkD
|
||||
if(!sdkD) {
|
||||
sdkD = getSplitScreenSdk().sdkD
|
||||
}
|
||||
if (!event2 && sdkD) {
|
||||
event2 = new MouseEvent(sdkD)
|
||||
event2.mouse_move((movement, cartesian) => {
|
||||
targetSdk = sdkD
|
||||
tmovement = { x: movement.endPosition.x, y: movement.endPosition.y }
|
||||
})
|
||||
}
|
||||
if (!tmovement) {
|
||||
return
|
||||
}
|
||||
let left = tmovement.x;
|
||||
let top = tmovement.y;
|
||||
let cartesian
|
||||
if (targetSdk.viewer.scene.mode === 2) {
|
||||
left = left + canvas.width
|
||||
cartesian = targetSdk.viewer.camera.pickEllipsoid(tmovement, targetSdk.viewer.scene.globe.ellipsoid)
|
||||
}
|
||||
else {
|
||||
cartesian = targetSdk.viewer.scene.pickPosition(tmovement)
|
||||
if (!cartesian) {
|
||||
const ray = targetSdk.viewer.camera.getPickRay(position); //相交的射线
|
||||
let pickedObjects = targetSdk.viewer.scene.drillPickFromRay(ray, 10);
|
||||
let result = {}
|
||||
for (let i = 0; i < pickedObjects.length; i++) {
|
||||
if (pickedObjects[i].position) {
|
||||
result = pickedObjects[i]
|
||||
break
|
||||
}
|
||||
}
|
||||
cartesian = result.position
|
||||
if (!cartesian) {
|
||||
cartesian = targetSdk.viewer.scene.globe.pick(ray, targetSdk.viewer.scene);
|
||||
}
|
||||
}
|
||||
}
|
||||
contentElm.style['background-position-x'] = `${-sdk.viewer.container.clientWidth + left + 4}px`;
|
||||
|
||||
contentElm.style['background-position-y'] = `${-sdk.viewer.container.clientHeight + top - 2}px`;
|
||||
// this.entity.position = cartesian
|
||||
if (cartesian) {
|
||||
let degrees = tools.cartesian3Towgs84(cartesian, sdk.viewer)
|
||||
@ -97,10 +155,13 @@ const MouseCoordinate = (sdk, status) => {
|
||||
else {
|
||||
if (event) {
|
||||
event.destroy()
|
||||
event = undefined
|
||||
}
|
||||
if (event2) {
|
||||
event2.destroy()
|
||||
event2 = undefined
|
||||
}
|
||||
if (MouseCoordinateElm) {
|
||||
sdk.viewer._element.removeChild(MouseCoordinateElm)
|
||||
sdk.viewer.container.removeChild(MouseCoordinateElm)
|
||||
MouseCoordinateElm = undefined
|
||||
}
|
||||
if (requestAnimationFrameEventId) {
|
||||
|
||||
718
src/Global/MultiViewportMode/ClickCallback/index.js
Normal file
718
src/Global/MultiViewportMode/ClickCallback/index.js
Normal file
@ -0,0 +1,718 @@
|
||||
/**
|
||||
* @name: click
|
||||
* @author: Administrator
|
||||
* @date: 2023-05-28 11:05
|
||||
* @description:click
|
||||
* @update: 2023-05-28 11:05
|
||||
*/
|
||||
let leftClickHandler = null
|
||||
let rightClickHandler = null
|
||||
let MoveHandler = null
|
||||
let leftClickCallbackMap = new Map()
|
||||
let rightClickCallbackMap = new Map()
|
||||
let MoveCallbackMap = new Map()
|
||||
let selectedFeature;
|
||||
|
||||
|
||||
function cartesian3Towgs84(cartesian, viewer) {
|
||||
var ellipsoid = viewer.scene.globe.ellipsoid
|
||||
var cartesian3 = new Cesium.Cartesian3(
|
||||
cartesian.x,
|
||||
cartesian.y,
|
||||
cartesian.z
|
||||
)
|
||||
var cartographic = ellipsoid.cartesianToCartographic(cartesian3)
|
||||
var lat = Cesium.Math.toDegrees(cartographic.latitude)
|
||||
var lng = Cesium.Math.toDegrees(cartographic.longitude)
|
||||
var alt = cartographic.height < 0 ? 0 : cartographic.height
|
||||
return {
|
||||
lng: lng,
|
||||
lat: lat,
|
||||
alt: alt,
|
||||
}
|
||||
}
|
||||
|
||||
function getcartesian(sdk, movement) {
|
||||
if (movement.endPosition) {
|
||||
movement.endPosition.y -= 2
|
||||
}
|
||||
let position = movement.position || movement.endPosition
|
||||
// 获取世界坐标系地表坐标,考虑地形,不包括模型,倾斜摄影模型表面;
|
||||
let cartesian = sdk.viewer.scene.pickPosition(position)
|
||||
if (!cartesian) {
|
||||
const ray = sdk.viewer.camera.getPickRay(position); //相交的射线
|
||||
cartesian = sdk.viewer.scene.globe.pick(ray, sdk.viewer.scene);
|
||||
}
|
||||
return cartesian
|
||||
}
|
||||
|
||||
function openLeftClick(sdk, cb) {
|
||||
if (!sdk || !sdk.viewer) {
|
||||
return
|
||||
}
|
||||
let click = true
|
||||
leftClickHandler = new Cesium.ScreenSpaceEventHandler(sdk.viewer.canvas)
|
||||
leftClickHandler.setInputAction((movement) => {
|
||||
let cartesian = sdk.viewer.scene.pickPosition(movement.position)
|
||||
if (!cartesian) {
|
||||
const ray = sdk.viewer.camera.getPickRay(movement.position); //相交的射线
|
||||
cartesian = sdk.viewer.scene.globe.pick(ray, sdk.viewer.scene);
|
||||
}
|
||||
if (!cartesian) {
|
||||
return
|
||||
}
|
||||
|
||||
let pos84 = cartesian3Towgs84(cartesian, sdk.viewer)
|
||||
|
||||
cb && cb(pos84)
|
||||
|
||||
if (click) {
|
||||
click = false
|
||||
setTimeout(() => {
|
||||
click = true
|
||||
}, 600);
|
||||
if (!YJ.Measure.GetMeasureStatus() && cartesian) {
|
||||
const pick = sdk.viewer.scene.pick(movement.position)
|
||||
if (pick) {
|
||||
if (pick.id) {
|
||||
let entityId
|
||||
// 矢量
|
||||
if (pick.id.type && pick.id.type === 'vector' && pick.id.parentId) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.parentId)
|
||||
if (obj.that.picking && obj.that.geojson) {
|
||||
for (let i = 0; i < obj.that.geojson.features.length; i++) {
|
||||
if (obj.that.geojson.features[i].id === pick.id._id) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.geojson.features[i].id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (typeof pick.id.id == 'string') {
|
||||
let array = pick.id.id.split('-')
|
||||
array.splice(array.length - 1, 1)
|
||||
entityId = array.join('-')
|
||||
}
|
||||
|
||||
if (pick.id.properties && pick.id.properties.id && leftClickCallbackMap.has(pick.id.properties.id._value)) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.properties.id._value)
|
||||
if (obj.that.picking) {
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.id.properties.id._value,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
else if (leftClickCallbackMap.has(pick.id.id)) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.id)
|
||||
if (obj.that.type === 'PolygonObject') {
|
||||
// 是否可点击y
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 3) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let polyPos = []
|
||||
for (let i = 0; i < obj.that.options.positions.length; i++) {
|
||||
polyPos.push([
|
||||
obj.that.options.positions[i].lng,
|
||||
obj.that.options.positions[i].lat
|
||||
])
|
||||
}
|
||||
polyPos.push([
|
||||
obj.that.options.positions[0].lng,
|
||||
obj.that.options.positions[0].lat
|
||||
])
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 聚集地
|
||||
else if (obj.that.type === 'AssembleObject') {
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 3) {
|
||||
let positions = obj.that.computeAssemble(obj.that.options.positions, true)
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let polyPos = []
|
||||
for (let i = 0; i < positions.length; i += 2) {
|
||||
polyPos.push([
|
||||
positions[i],
|
||||
positions[i + 1]
|
||||
])
|
||||
}
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 单箭头
|
||||
else if (obj.that.type === 'AttackArrowObject') {
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 3) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let positions = obj.that.computeAttackArrow(obj.that.options.positions)
|
||||
let polyPos = []
|
||||
for (let m = 0; m < positions.length; m++) {
|
||||
let pos84 = cartesian3Towgs84(positions[m], sdk.viewer)
|
||||
polyPos.push([pos84.lng, pos84.lat])
|
||||
}
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 双箭头
|
||||
else if (obj.that.type === 'PincerArrowObject') {
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 5) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let positions = obj.that.computePincerArrow(obj.that.options.positions)
|
||||
let polyPos = []
|
||||
for (let m = 0; m < positions.length; m++) {
|
||||
let pos84 = cartesian3Towgs84(positions[m], sdk.viewer)
|
||||
polyPos.push([pos84.lng, pos84.lat])
|
||||
}
|
||||
let pos84_0 = cartesian3Towgs84(positions[0], sdk.viewer)
|
||||
polyPos.push([pos84_0.lng, pos84_0.lat])
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 圆
|
||||
else if (obj.that.type === 'CircleObject') {
|
||||
if (obj.that.picking) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
if (obj.that.options.center && obj.that.options.radius) {
|
||||
let center = [obj.that.options.center.lng, obj.that.options.center.lat];
|
||||
let radius = obj.that.options.radius / 1000;
|
||||
let options = { steps: 360, units: 'kilometers' };
|
||||
let circle = turf.circle(center, radius, options);
|
||||
let contain = turf.booleanPointInPolygon(pt, circle);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// 扇形
|
||||
else if (obj.that.type === 'SectorObject') {
|
||||
if (obj.that.picking) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
if (obj.that.options.center && obj.that.options.radius && obj.that.options.startAngle && obj.that.options.endAngle) {
|
||||
let positions = obj.that.calSector(obj.that.options.center, obj.that.options.radius, obj.that.options.startAngle, obj.that.options.endAngle, undefined, true)
|
||||
let polyPos = []
|
||||
for (let m = 0; m < positions.length; m++) {
|
||||
polyPos.push([positions[m].lng, positions[m].lat])
|
||||
}
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
if (obj.that.picking) {
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.id.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
else if (entityId && leftClickCallbackMap.has(entityId)) {
|
||||
let obj = leftClickCallbackMap.get(entityId)
|
||||
if (obj.that.picking) {
|
||||
obj.callback(
|
||||
movement,
|
||||
entityId,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
else if (pick.primitive) {
|
||||
if (typeof pick.id == 'string' && leftClickCallbackMap.has(pick.id)) {
|
||||
let obj = leftClickCallbackMap.get(pick.id)
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (pick.primitive && pick.primitive.id) {
|
||||
if (leftClickCallbackMap.has(pick.primitive.id)) {
|
||||
let obj = leftClickCallbackMap.get(pick.primitive.id)
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.type === 'bim') {
|
||||
if (YJ.Global.getBimPickStatus(sdk)) {
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.primitive,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
}
|
||||
}
|
||||
else {
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.primitive.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (pick.content && (!pick.primitive || !pick.primitive.id)) {
|
||||
if (leftClickCallbackMap.has(pick.content.tileset.id)) {
|
||||
let obj = leftClickCallbackMap.get(pick.content.tileset.id)
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.type === 'bim') {
|
||||
if (YJ.Global.getBimPickStatus(sdk)) {
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.content.tileset,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
}
|
||||
}
|
||||
else {
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.content.tileset.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = leftClickCallbackMap.size - 1; i >= 0; i--) {
|
||||
let key = Array.from(leftClickCallbackMap.keys())[i]
|
||||
let obj = leftClickCallbackMap.get(key)
|
||||
if (obj) {
|
||||
if (obj.that && obj.that.show && (obj.that.entity && obj.that.entity.show)) {
|
||||
// 是否为多边形
|
||||
if (obj.that.type === 'PolygonObject') {
|
||||
// 是否可点击y
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 3) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let polyPos = []
|
||||
for (let i = 0; i < obj.that.options.positions.length; i++) {
|
||||
polyPos.push([
|
||||
obj.that.options.positions[i].lng,
|
||||
obj.that.options.positions[i].lat
|
||||
])
|
||||
}
|
||||
polyPos.push([
|
||||
obj.that.options.positions[0].lng,
|
||||
obj.that.options.positions[0].lat
|
||||
])
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 聚集地
|
||||
else if (obj.that.type === 'AssembleObject') {
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 3) {
|
||||
let positions = obj.that.computeAssemble(obj.that.options.positions, true)
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let polyPos = []
|
||||
for (let i = 0; i < positions.length; i += 2) {
|
||||
polyPos.push([
|
||||
positions[i],
|
||||
positions[i + 1]
|
||||
])
|
||||
}
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 单箭头
|
||||
else if (obj.that.type === 'AttackArrowObject') {
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 3) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let positions = obj.that.computeAttackArrow(obj.that.options.positions)
|
||||
let polyPos = []
|
||||
for (let m = 0; m < positions.length; m++) {
|
||||
let pos84 = cartesian3Towgs84(positions[m], sdk.viewer)
|
||||
polyPos.push([pos84.lng, pos84.lat])
|
||||
}
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 双箭头
|
||||
else if (obj.that.type === 'PincerArrowObject') {
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 5) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let positions = obj.that.computePincerArrow(obj.that.options.positions)
|
||||
let polyPos = []
|
||||
for (let m = 0; m < positions.length; m++) {
|
||||
let pos84 = cartesian3Towgs84(positions[m], sdk.viewer)
|
||||
polyPos.push([pos84.lng, pos84.lat])
|
||||
}
|
||||
let pos84_0 = cartesian3Towgs84(positions[0], sdk.viewer)
|
||||
polyPos.push([pos84_0.lng, pos84_0.lat])
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 圆
|
||||
else if (obj.that.type === 'CircleObject') {
|
||||
if (obj.that.picking) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
if (obj.that.options.center && obj.that.options.radius) {
|
||||
let center = [obj.that.options.center.lng, obj.that.options.center.lat];
|
||||
let radius = obj.that.options.radius / 1000;
|
||||
let options = { steps: 360, units: 'kilometers' };
|
||||
let circle = turf.circle(center, radius, options);
|
||||
let contain = turf.booleanPointInPolygon(pt, circle);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// 扇形
|
||||
else if (obj.that.type === 'SectorObject') {
|
||||
if (obj.that.picking) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
if (obj.that.options.center && obj.that.options.radius && obj.that.options.startAngle && obj.that.options.endAngle) {
|
||||
let positions = obj.that.calSector(obj.that.options.center, obj.that.options.radius, obj.that.options.startAngle, obj.that.options.endAngle, undefined, true)
|
||||
let polyPos = []
|
||||
for (let m = 0; m < positions.length; m++) {
|
||||
polyPos.push([positions[m].lng, positions[m].lat])
|
||||
}
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// if (click) {
|
||||
// click = false
|
||||
// setTimeout(() => {
|
||||
// click = true
|
||||
// }, 300);
|
||||
// if (!YJ.Measure.GetMeasureStatus()) {
|
||||
|
||||
// }
|
||||
// }
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||||
|
||||
// leftClickHandler.setInputAction(function (movement) {
|
||||
// const feature = sdk.viewer.scene.pick(movement.endPosition);
|
||||
// // unselectFeature(selectedFeature);
|
||||
// if (selectedFeature) {
|
||||
// selectedFeature.color = Cesium.Color.WHITE;
|
||||
// }
|
||||
// selectedFeature = feature
|
||||
// if (feature) {
|
||||
// feature.color = Cesium.Color.YELLOW;
|
||||
// }
|
||||
// }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
function closeLeftClick(sdk) {
|
||||
leftClickHandler.destroy() //关闭事件句柄
|
||||
leftClickHandler = null
|
||||
// }
|
||||
}
|
||||
|
||||
function openRightClick(sdk) {
|
||||
if (!sdk || !sdk.viewer) {
|
||||
return
|
||||
}
|
||||
rightClickHandler = new Cesium.ScreenSpaceEventHandler(sdk.viewer.canvas)
|
||||
rightClickHandler.setInputAction((movement) => {
|
||||
if (!YJ.Measure.GetMeasureStatus()) {
|
||||
const pick = sdk.viewer.scene.pick(movement.position)
|
||||
if (pick && pick.id) {
|
||||
let id
|
||||
if (pick.id.type && pick.id.type === 'vector' && pick.id.parentId) {
|
||||
let obj = rightClickCallbackMap.get(pick.id.parentId)
|
||||
if (obj.that.picking && obj.that.geojson) {
|
||||
for (let i = 0; i < obj.that.geojson.features.length; i++) {
|
||||
if (obj.that.geojson.features[i].id === pick.id._id) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.geojson.features[i].id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (typeof pick.id === 'string') {
|
||||
id = pick.id
|
||||
}
|
||||
else {
|
||||
id = pick.id.id
|
||||
}
|
||||
if (rightClickCallbackMap.has(id)) {
|
||||
let obj = rightClickCallbackMap.get(id)
|
||||
if (obj.that.picking) {
|
||||
let cartesian = getcartesian(sdk, movement)
|
||||
if (!cartesian) {
|
||||
return
|
||||
}
|
||||
obj.callback(
|
||||
movement,
|
||||
id,
|
||||
cartesian3Towgs84(cartesian, sdk.viewer), obj.that)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (pick && pick.content) {
|
||||
if (rightClickCallbackMap.has(pick.content.tileset.id)) {
|
||||
let obj = rightClickCallbackMap.get(pick.content.tileset.id)
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.type === 'bim') {
|
||||
if (YJ.Global.getBimPickStatus(sdk)) {
|
||||
let cartesian = getcartesian(sdk, movement)
|
||||
if (!cartesian) {
|
||||
return
|
||||
}
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.getProperty('id'),
|
||||
cartesian3Towgs84(cartesian, sdk.viewer), obj.that)
|
||||
}
|
||||
}
|
||||
else {
|
||||
let cartesian = getcartesian(sdk, movement)
|
||||
if (!cartesian) {
|
||||
return
|
||||
}
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.content.tileset.id,
|
||||
cartesian3Towgs84(cartesian, sdk.viewer), obj.that)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
|
||||
}
|
||||
|
||||
function closeRightClick() {
|
||||
if (rightClickHandler) {
|
||||
rightClickHandler.destroy() //关闭事件句柄
|
||||
rightClickHandler = null
|
||||
}
|
||||
}
|
||||
|
||||
function openMove(sdk) {
|
||||
MoveHandler = new Cesium.ScreenSpaceEventHandler(sdk.viewer.canvas)
|
||||
MoveHandler.setInputAction(function (movement) {
|
||||
const pick = sdk.viewer.scene.pick(movement.endPosition);
|
||||
// unselectFeature(selectedFeature);
|
||||
// if (selectedFeature) {
|
||||
// let color = '#fff'
|
||||
// let state = selectedFeature.getProperty('state')
|
||||
// switch (state) {
|
||||
// case '0':
|
||||
// color = '#fff'
|
||||
// break;
|
||||
// case '1':
|
||||
// color = '#f00'
|
||||
// break;
|
||||
// case '2':
|
||||
// color = '#0f0'
|
||||
// break;
|
||||
// case '3':
|
||||
// color = '#00f'
|
||||
// break;
|
||||
// default:
|
||||
// }
|
||||
// selectedFeature.color = Cesium.Color.fromCssColorString(color).withAlpha(selectedFeature.tileset.transparency)
|
||||
// }
|
||||
// if (pick && pick.id) { }
|
||||
// if (pick && pick.content) {
|
||||
// if (MoveCallbackMap.has(pick.content.tileset.id)) {
|
||||
// let obj = MoveCallbackMap.get(pick.content.tileset.id)
|
||||
// if (obj.that.picking) {
|
||||
// if (obj.that.type === 'bim') {
|
||||
// if (YJ.Global.getBimPickStatus(sdk)) {
|
||||
// selectedFeature = pick
|
||||
// pick.color = Cesium.Color.YELLOW;
|
||||
// }
|
||||
// else {
|
||||
// selectedFeature = null
|
||||
// }
|
||||
// }
|
||||
// else {
|
||||
// selectedFeature = pick
|
||||
// pick.color = Cesium.Color.YELLOW;
|
||||
// }
|
||||
// }
|
||||
// else {
|
||||
// selectedFeature = null
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||||
}
|
||||
|
||||
function closeMove() {
|
||||
if (MoveHandler) {
|
||||
MoveHandler.destroy() //关闭事件句柄
|
||||
MoveHandler = null
|
||||
}
|
||||
}
|
||||
|
||||
/*注册左键回调*/
|
||||
function regLeftClickCallback(id, callback, that) {
|
||||
|
||||
leftClickCallbackMap.set(id, { callback, that })
|
||||
}/*取消左键回调*/
|
||||
function unRegLeftClickCallback(id,) {
|
||||
leftClickCallbackMap.delete(id,)
|
||||
}
|
||||
|
||||
/*注册右键回调*/
|
||||
function regRightClickCallback(id, callback, that) {
|
||||
rightClickCallbackMap.set(id, { callback, that })
|
||||
}/*取消右键回调*/
|
||||
function unRegRightClickCallback(id,) {
|
||||
rightClickCallbackMap.delete(id,)
|
||||
}
|
||||
|
||||
/*注册左键回调*/
|
||||
function regMoveCallback(id, callback, that) {
|
||||
MoveCallbackMap.set(id, { callback, that })
|
||||
}/*取消左键回调*/
|
||||
function unregMoveCallback(id,) {
|
||||
MoveCallbackMap.delete(id,)
|
||||
}
|
||||
|
||||
function getLeftClickState() {
|
||||
if (leftClickHandler) {
|
||||
return true
|
||||
}
|
||||
else {
|
||||
false
|
||||
}
|
||||
}
|
||||
|
||||
function getRightClickState() {
|
||||
if (rightClickHandler) {
|
||||
return true
|
||||
}
|
||||
else {
|
||||
false
|
||||
}
|
||||
}
|
||||
|
||||
function getMoveState() {
|
||||
if (MoveHandler) {
|
||||
return true
|
||||
}
|
||||
else {
|
||||
false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export { openLeftClick, closeLeftClick, regLeftClickCallback, unRegLeftClickCallback, openRightClick, closeRightClick, regRightClickCallback, unRegRightClickCallback, openMove, closeMove, regMoveCallback, unregMoveCallback, getLeftClickState, getRightClickState, getMoveState }
|
||||
@ -7,6 +7,9 @@ import { CesiumContainer } from '../global'
|
||||
import { off as offSplitScreen } from "../SplitScreen";
|
||||
import { FlwStatusSwitch, JwwStatusSwitch, getFlwStatus, getJwwStatus } from "../global"
|
||||
import { SheetIndexStatusSwitch, getStatus } from '../SheetIndex'
|
||||
import { getLeftClickState, getRightClickState, getMoveState } from "../../Global/ClickCallback"
|
||||
import { openLeftClick, openRightClick, openMove } from "./ClickCallback"
|
||||
|
||||
|
||||
let sdk2D
|
||||
let sdk3D
|
||||
@ -32,6 +35,16 @@ async function init(sdk) {
|
||||
})
|
||||
sdk2.viewer.scene.mode = Cesium.SceneMode.SCENE2D
|
||||
sdk2D = await sdk2
|
||||
if(getLeftClickState()) {
|
||||
openLeftClick(sdk2D)
|
||||
}
|
||||
if(getRightClickState()) {
|
||||
openRightClick(sdk2D)
|
||||
}
|
||||
if(getMoveState()) {
|
||||
openMove(sdk2D)
|
||||
}
|
||||
|
||||
// window.sdk2D = sdk2D
|
||||
solveBug()
|
||||
syncObject = { sdks: [sdk, sdk2], tools }
|
||||
@ -49,7 +62,16 @@ async function init(sdk) {
|
||||
sdk2D.viewer.imageryLayers.removeAll()
|
||||
for (let i = 0; i < imageryLayers.length; i++) {
|
||||
let entity = sdk2D.viewer.imageryLayers.addImageryProvider(imageryLayers[i].imageryProvider, imageryLayers[i]._layerIndex)
|
||||
if(imageryLayers[i]._id) {
|
||||
entity._id = imageryLayers[i]._id
|
||||
}
|
||||
entity.show = imageryLayers[i].show
|
||||
entity.alpha = imageryLayers[i].alpha
|
||||
if (imageryLayers[i]._objectState) {
|
||||
if (imageryLayers[i]._showView == 3) {
|
||||
entity.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
// sdk.viewer.entities.collectionChanged.addEventListener(syncEntities)
|
||||
// sdk.viewer.dataSources.dataSourceAdded.addEventListener(syncDataSources)
|
||||
@ -61,6 +83,12 @@ async function init(sdk) {
|
||||
JwwStatusSwitch(sdk2, true)
|
||||
}
|
||||
|
||||
sdk.entityMap.forEach((item, key) => {
|
||||
if (item.showView == 2) {
|
||||
item.showView = 2
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
async function on(sdk) {
|
||||
if (sdk2D) {
|
||||
@ -94,6 +122,11 @@ function off(sdk) {
|
||||
activeViewer = null
|
||||
syncObject = {}
|
||||
}
|
||||
sdk.entityMap.forEach((item, key) => {
|
||||
if (item.showView) {
|
||||
item.show = item.show
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function syncData2(sdk, id, entityId) {
|
||||
@ -119,8 +152,17 @@ async function syncData2(sdk, id, entityId) {
|
||||
options.heightMode = 0
|
||||
options.height = 0
|
||||
}
|
||||
if (!that.type || (that.type !== 'tileset' && that.type !== 'bim' && that.type !== 'glb' && that.type !== 'layer')) {
|
||||
let newObject = await new that.constructor(sdk2D, options)
|
||||
|
||||
if (!that.type || (that.type !== 'tileset' && that.type !== 'bim' && that.type !== 'glb' && that.type !== 'layer' && that.type !== 'wallStereoscopic')) {
|
||||
if (that.showView == 3) {
|
||||
options.show = false
|
||||
}
|
||||
let callback
|
||||
if(that.type === 'TextBox') {
|
||||
callback = that.callback
|
||||
}
|
||||
|
||||
let newObject = await new that.constructor(sdk2D, options, callback)
|
||||
newObject.onClick = that.onClick
|
||||
newObject.onRightClick = that.onRightClick
|
||||
newObject.onMouseMove = that.onMouseMove
|
||||
@ -207,8 +249,19 @@ async function syncData2(sdk, id, entityId) {
|
||||
obj.options.heightReference = 1
|
||||
}
|
||||
let options = syncObject.tools.deepCopyObj(obj.options)
|
||||
if (!obj.type || (obj.type !== 'tileset' && obj.type !== 'bim' && obj.type !== 'glb' && obj.type !== 'layer')) {
|
||||
let target = await new obj.constructor(sdk2D, options)
|
||||
if (!obj.type || (obj.type !== 'tileset' && obj.type !== 'bim' && obj.type !== 'glb' && obj.type !== 'layer' && obj.type !== 'wallStereoscopic')) {
|
||||
if (obj.showView == 3) {
|
||||
options.show = false
|
||||
}
|
||||
let target = await sdk2D.entityMap.get(options.id)
|
||||
if(target) {
|
||||
await target.remove()
|
||||
}
|
||||
let callback
|
||||
if(obj.type === 'TextBox') {
|
||||
callback = obj.callback
|
||||
}
|
||||
target = await new obj.constructor(sdk2D, options, callback)
|
||||
target.onClick = obj.onClick
|
||||
target.onRightClick = obj.onRightClick
|
||||
target.onMouseMove = obj.onMouseMove
|
||||
@ -401,12 +454,26 @@ function syncImageryLayerRemoved(layer, index) {
|
||||
sdk2D.viewer.imageryLayers.remove(layer2d)
|
||||
}
|
||||
function syncImageryLayerShownOrHidden(layer, index, state) {
|
||||
return
|
||||
let layer2d = sdk2D.viewer.imageryLayers._layers[index]
|
||||
let layer3d = sdk3D.viewer.imageryLayers._layers[index]
|
||||
console.log('layer2d', layer2d, sdk2D, layer3d)
|
||||
|
||||
if (!layer2d) {
|
||||
return
|
||||
}
|
||||
if (layer3d._objectState) {
|
||||
if (!layer3d._showView || layer3d._showView == 2) {
|
||||
layer2d.show = true
|
||||
}
|
||||
if (layer3d._showView == 3) {
|
||||
layer2d.show = false
|
||||
}
|
||||
}
|
||||
else {
|
||||
layer2d.show = state
|
||||
}
|
||||
}
|
||||
|
||||
async function syncPrimitives(primitive) {
|
||||
if (!sdk3D) {
|
||||
@ -535,6 +602,7 @@ function syncViewer() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
function get2DView() {
|
||||
return sdk2D
|
||||
}
|
||||
|
||||
@ -72,14 +72,43 @@ function openLeftClick(sdk, cb) {
|
||||
click = true
|
||||
}, 600);
|
||||
if (!YJ.Measure.GetMeasureStatus() && cartesian) {
|
||||
let flag = false
|
||||
for (let i = leftClickCallbackMap.size - 1; i >= 0; i--) {
|
||||
let key = Array.from(leftClickCallbackMap.keys())[i]
|
||||
let obj = leftClickCallbackMap.get(key)
|
||||
if (obj) {
|
||||
const pick = sdk.viewer.scene.pick(movement.position)
|
||||
if (pick) {
|
||||
if (pick.id) {
|
||||
let entityId
|
||||
// 矢量
|
||||
if (pick.id.type && pick.id.type === 'vector' && pick.id.parentId) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.parentId)
|
||||
if (obj.that.picking && obj.that.geojson) {
|
||||
for (let i = 0; i < obj.that.geojson.features.length; i++) {
|
||||
if (obj.that.geojson.features[i].id === pick.id._id) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.geojson.features[i].id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (typeof pick.id.id == 'string') {
|
||||
let array = pick.id.id.split('-')
|
||||
array.splice(array.length - 1, 1)
|
||||
entityId = array.join('-')
|
||||
}
|
||||
|
||||
if (obj.that) {
|
||||
// 是否为多边形
|
||||
if (pick.id.properties && pick.id.properties.id && leftClickCallbackMap.has(pick.id.properties.id._value)) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.properties.id._value)
|
||||
if (obj.that.picking) {
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.id.properties.id._value,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
else if (leftClickCallbackMap.has(pick.id.id)) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.id)
|
||||
if (obj.that.type === 'PolygonObject') {
|
||||
// 是否可点击y
|
||||
if (obj.that.picking) {
|
||||
@ -103,8 +132,7 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
flag = true
|
||||
break
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -129,8 +157,7 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
flag = true
|
||||
break
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -153,8 +180,7 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
flag = true
|
||||
break
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -179,8 +205,7 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
flag = true
|
||||
break
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -200,8 +225,7 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
flag = true
|
||||
break
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
@ -224,57 +248,18 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
flag = true
|
||||
break
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!flag) {
|
||||
const pick = sdk.viewer.scene.pick(movement.position)
|
||||
if (pick) {
|
||||
if (pick.id) {
|
||||
let entityId
|
||||
// 矢量
|
||||
if (pick.id.type && pick.id.type === 'vector' && pick.id.parentId) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.parentId)
|
||||
if (obj.that.picking && obj.that.geojson) {
|
||||
for (let i = 0; i < obj.that.geojson.features.length; i++) {
|
||||
if (obj.that.geojson.features[i].id === pick.id._id) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.geojson.features[i].id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (typeof pick.id.id == 'string') {
|
||||
let array = pick.id.id.split('-')
|
||||
array.splice(array.length - 1, 1)
|
||||
entityId = array.join('-')
|
||||
}
|
||||
|
||||
if (pick.id.properties && pick.id.properties.id && leftClickCallbackMap.has(pick.id.properties.id._value)) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.properties.id._value)
|
||||
if (obj.that.picking) {
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.id.properties.id._value,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
}
|
||||
}
|
||||
else if (leftClickCallbackMap.has(pick.id.id)) {
|
||||
let obj = leftClickCallbackMap.get(pick.id.id)
|
||||
if (obj.that.picking) {
|
||||
obj.callback(
|
||||
movement,
|
||||
pick.id.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
else if (entityId && leftClickCallbackMap.has(entityId)) {
|
||||
@ -284,6 +269,7 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
entityId,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
else if (pick.primitive) {
|
||||
@ -293,6 +279,7 @@ function openLeftClick(sdk, cb) {
|
||||
movement,
|
||||
pick.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -341,6 +328,159 @@ function openLeftClick(sdk, cb) {
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = leftClickCallbackMap.size - 1; i >= 0; i--) {
|
||||
let key = Array.from(leftClickCallbackMap.keys())[i]
|
||||
let obj = leftClickCallbackMap.get(key)
|
||||
if (obj) {
|
||||
if (obj.that && obj.that.show && (obj.that.entity && obj.that.entity.show)) {
|
||||
// 是否为多边形
|
||||
if (obj.that.type === 'PolygonObject') {
|
||||
// 是否可点击y
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 3) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let polyPos = []
|
||||
for (let i = 0; i < obj.that.options.positions.length; i++) {
|
||||
polyPos.push([
|
||||
obj.that.options.positions[i].lng,
|
||||
obj.that.options.positions[i].lat
|
||||
])
|
||||
}
|
||||
polyPos.push([
|
||||
obj.that.options.positions[0].lng,
|
||||
obj.that.options.positions[0].lat
|
||||
])
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 聚集地
|
||||
else if (obj.that.type === 'AssembleObject') {
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 3) {
|
||||
let positions = obj.that.computeAssemble(obj.that.options.positions, true)
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let polyPos = []
|
||||
for (let i = 0; i < positions.length; i += 2) {
|
||||
polyPos.push([
|
||||
positions[i],
|
||||
positions[i + 1]
|
||||
])
|
||||
}
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 单箭头
|
||||
else if (obj.that.type === 'AttackArrowObject') {
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 3) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let positions = obj.that.computeAttackArrow(obj.that.options.positions)
|
||||
let polyPos = []
|
||||
for (let m = 0; m < positions.length; m++) {
|
||||
let pos84 = cartesian3Towgs84(positions[m], sdk.viewer)
|
||||
polyPos.push([pos84.lng, pos84.lat])
|
||||
}
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 双箭头
|
||||
else if (obj.that.type === 'PincerArrowObject') {
|
||||
if (obj.that.picking) {
|
||||
if (obj.that.options.positions && obj.that.options.positions.length >= 5) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
let positions = obj.that.computePincerArrow(obj.that.options.positions)
|
||||
let polyPos = []
|
||||
for (let m = 0; m < positions.length; m++) {
|
||||
let pos84 = cartesian3Towgs84(positions[m], sdk.viewer)
|
||||
polyPos.push([pos84.lng, pos84.lat])
|
||||
}
|
||||
let pos84_0 = cartesian3Towgs84(positions[0], sdk.viewer)
|
||||
polyPos.push([pos84_0.lng, pos84_0.lat])
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 圆
|
||||
else if (obj.that.type === 'CircleObject') {
|
||||
if (obj.that.picking) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
if (obj.that.options.center && obj.that.options.radius) {
|
||||
let center = [obj.that.options.center.lng, obj.that.options.center.lat];
|
||||
let radius = obj.that.options.radius / 1000;
|
||||
let options = { steps: 360, units: 'kilometers' };
|
||||
let circle = turf.circle(center, radius, options);
|
||||
let contain = turf.booleanPointInPolygon(pt, circle);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// 扇形
|
||||
else if (obj.that.type === 'SectorObject') {
|
||||
if (obj.that.picking) {
|
||||
let pt = turf.point([pos84.lng, pos84.lat]);
|
||||
if (obj.that.options.center && obj.that.options.radius && obj.that.options.startAngle && obj.that.options.endAngle) {
|
||||
let positions = obj.that.calSector(obj.that.options.center, obj.that.options.radius, obj.that.options.startAngle, obj.that.options.endAngle, undefined, true)
|
||||
let polyPos = []
|
||||
for (let m = 0; m < positions.length; m++) {
|
||||
polyPos.push([positions[m].lng, positions[m].lat])
|
||||
}
|
||||
let poly = turf.polygon([polyPos]);
|
||||
let contain = turf.booleanPointInPolygon(pt, poly);
|
||||
if (contain) {
|
||||
obj.callback(
|
||||
movement,
|
||||
obj.that.options.id,
|
||||
cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -102,11 +102,20 @@ function off() {
|
||||
let leftCanvas = leftBox.getElementsByTagName('canvas')[0]
|
||||
leftBox.style.width = '100%'
|
||||
leftCanvas.style.width = '100%'
|
||||
let billboardAttributeBoxs = sdkP.viewer._element.getElementsByClassName('billboard-attribute-box')
|
||||
for (let i = 0; i < billboardAttributeBoxs.length; i++) {
|
||||
billboardAttributeBoxs[i].style.display = 'block'
|
||||
}
|
||||
sdkP = null
|
||||
}
|
||||
|
||||
|
||||
async function init(sdk) {
|
||||
let billboardAttributeBoxs = sdk.viewer._element.getElementsByClassName('billboard-attribute-box')
|
||||
for (let i = 0; i < billboardAttributeBoxs.length; i++) {
|
||||
billboardAttributeBoxs[i].style.display = 'none'
|
||||
}
|
||||
|
||||
sdk.entityMap.forEach((item, key) => {
|
||||
if (item.type && item.type == 'TrajectoryMotion' && item.viewFollow) {
|
||||
item.viewFollow = false
|
||||
@ -137,10 +146,8 @@ async function init(sdk) {
|
||||
rightElm.style.position = 'absolute'
|
||||
rightElm.style.right = 'calc(50% - 50px)'
|
||||
|
||||
if (!activeIds || activeIds.length == 0) {
|
||||
leftElm.style.display = 'none'
|
||||
rightElm.style.display = 'none'
|
||||
}
|
||||
|
||||
sdk.viewer._element.appendChild(leftElm)
|
||||
sdk.viewer._element.appendChild(rightElm)
|
||||
@ -149,6 +156,12 @@ async function init(sdk) {
|
||||
let right = 0
|
||||
if (activeIds) {
|
||||
for (let i = 0; i < activeIds.length; i++) {
|
||||
let thatP = sdk.entityMap.get(activeIds[i])
|
||||
if (!thatP || (thatP.type === 'terrain' || !thatP.show) || thatP.type === 'TextBox') {
|
||||
continue
|
||||
}
|
||||
leftElm.style.display = 'unset'
|
||||
rightElm.style.display = 'unset'
|
||||
let status = statusMap.get(activeIds[i])
|
||||
if (status) {
|
||||
if (status.P) {
|
||||
@ -278,7 +291,7 @@ async function init(sdk) {
|
||||
sdk.viewer.scene.preRender.addEventListener(syncViewer, syncObject)
|
||||
|
||||
// sdk.viewer.imageryLayers.layerAdded.addEventListener(syncImageryLayerAdded);
|
||||
// sdk.viewer.imageryLayers.layerMoved.addEventListener(syncImageryLayerMoved);
|
||||
sdk.viewer.imageryLayers.layerMoved.addEventListener(syncImageryLayerMoved);
|
||||
// sdk.viewer.imageryLayers.layerRemoved.addEventListener(syncImageryLayerRemoved);
|
||||
// sdk.viewer.imageryLayers.layerShownOrHidden.addEventListener(syncImageryLayerShownOrHidden);
|
||||
|
||||
@ -517,7 +530,7 @@ async function setSplitDirection(v, id, isoff = false, entityId) {
|
||||
thatD.textShow = thatP.textShow
|
||||
}
|
||||
if (thatP.label && thatP.labelShow) {
|
||||
thatP.label.entity.show = true
|
||||
thatP.labelShow = true
|
||||
}
|
||||
if (thatD.label) {
|
||||
thatD.label.options.ground = false
|
||||
@ -711,6 +724,9 @@ async function setSplitDirection(v, id, isoff = false, entityId) {
|
||||
status.P = true
|
||||
status.D = true
|
||||
options.show = true
|
||||
if(thatP.type==='layer') {
|
||||
options.layer_index = thatP.layer_index
|
||||
}
|
||||
target = await new thatP.constructor(sdkD, options)
|
||||
if (thatP.onClick) {
|
||||
target.onClick = thatP.onClick
|
||||
@ -794,6 +810,9 @@ async function setSplitDirection(v, id, isoff = false, entityId) {
|
||||
status.P = false
|
||||
status.D = true
|
||||
options.show = true
|
||||
if(thatP.type==='layer') {
|
||||
options.layer_index = thatP.layer_index
|
||||
}
|
||||
target = await new thatP.constructor(sdkD, options)
|
||||
if (thatP.onClick) {
|
||||
target.onClick = thatP.onClick
|
||||
@ -905,7 +924,7 @@ async function setSplitDirection(v, id, isoff = false, entityId) {
|
||||
}
|
||||
if (thatP.type === 'GroundSvg' && thatP.text) {
|
||||
thatP.text.show = thatP.textShow
|
||||
target.textShow = false
|
||||
target && (target.textShow = false)
|
||||
}
|
||||
if (thatP.label && thatP.labelShow) {
|
||||
thatP.label.entity.show = true
|
||||
@ -1033,7 +1052,13 @@ function syncImageryLayerAdded(layer, index) {
|
||||
sdkD.viewer.imageryLayers.addImageryProvider(layer.imageryProvider, index)
|
||||
}
|
||||
function syncImageryLayerMoved(layer, newindxe, oldindex) {
|
||||
let layerD = sdkD.viewer.imageryLayers._layers[oldindex]
|
||||
let layerD
|
||||
for (let i = 0; i < sdkD.viewer.imageryLayers._layers.length; i++) {
|
||||
if (sdkD.viewer.imageryLayers._layers[i]._id === layer._id) {
|
||||
layerD = sdkD.viewer.imageryLayers._layers[i]
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!layerD) {
|
||||
return
|
||||
}
|
||||
@ -1042,13 +1067,15 @@ function syncImageryLayerMoved(layer, newindxe, oldindex) {
|
||||
sdkD.viewer.imageryLayers.lowerToBottom(layerD)
|
||||
}
|
||||
// 移到最高层
|
||||
else if (newindxe === sdk.viewer.imageryLayers._layers.length - 1) {
|
||||
else if (newindxe === sdkD.viewer.imageryLayers._layers.length - 1) {
|
||||
sdkD.viewer.imageryLayers.raiseToTop(layerD)
|
||||
}
|
||||
else {
|
||||
if (newindxe < oldindex) {
|
||||
if(newindxe<sdkD.viewer.imageryLayers._layers.length-1) {
|
||||
sdkD.viewer.imageryLayers.lower(layerD)
|
||||
}
|
||||
}
|
||||
else {
|
||||
sdkD.viewer.imageryLayers.raise(layerD)
|
||||
}
|
||||
@ -1267,6 +1294,8 @@ function setActiveId(ids = []) {
|
||||
}
|
||||
else {
|
||||
if (leftElm && rightElm) {
|
||||
leftElm.style.display = 'none'
|
||||
rightElm.style.display = 'none'
|
||||
let left = 0
|
||||
let right = 0
|
||||
for (let i = 0; i < activeIds.length; i++) {
|
||||
@ -1284,10 +1313,8 @@ function setActiveId(ids = []) {
|
||||
|
||||
|
||||
let thatP = sdkP.entityMap.get(activeIds[i])
|
||||
let thatD = sdkD.entityMap.get(activeIds[i])
|
||||
if (!thatP || (thatP.type === 'terrain' || !thatP.show)) {
|
||||
leftElm.style.display = 'none'
|
||||
rightElm.style.display = 'none'
|
||||
// let thatD = sdkD.entityMap.get(activeIds[i])
|
||||
if (!thatP || (thatP.type === 'terrain' || !thatP.show) || thatP.type === 'TextBox') {
|
||||
continue
|
||||
}
|
||||
leftElm.style.display = 'unset'
|
||||
|
||||
56
src/Global/efflect/Sunshine/_element.js
Normal file
56
src/Global/efflect/Sunshine/_element.js
Normal file
@ -0,0 +1,56 @@
|
||||
function html() {
|
||||
return `
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">播放倍数</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="0.01" max="999999" step="10" @model="speed">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">阴影柔和度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="0" max="1" step="0.1" @model="darkness">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">阴影优化</span>
|
||||
<input class="btn-switch" type="checkbox" @model="softShadow">
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 56px;">日期选择</span>
|
||||
<input class="sunshine-date" type="text" placeholder="YYYY-MM-DD" @model="time">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="timeline-container">
|
||||
<div class="timeline" id="timeline">
|
||||
<div class="progress" id="progress">
|
||||
<div class="handle" id="handle"></div>
|
||||
<div class="current-time" id="currentTime">00:00:00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-marks">
|
||||
</div>
|
||||
<button id="timePause">暂停</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
`
|
||||
}
|
||||
|
||||
export { html }
|
||||
135
src/Global/efflect/Sunshine/eventBinding.js
Normal file
135
src/Global/efflect/Sunshine/eventBinding.js
Normal file
@ -0,0 +1,135 @@
|
||||
class EventBinding {
|
||||
constructor() {
|
||||
this.element = {}
|
||||
}
|
||||
static event = {}
|
||||
|
||||
getEvent(name) {
|
||||
return EventBinding.event[name]
|
||||
}
|
||||
|
||||
getEventAll() {
|
||||
return EventBinding.event
|
||||
}
|
||||
|
||||
setEvent(name, event) {
|
||||
EventBinding.event[name] = event
|
||||
}
|
||||
|
||||
on(that, elements) {
|
||||
this.element = {}
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
if (!elements[i] || !elements[i].attributes) {
|
||||
continue;
|
||||
}
|
||||
let Event = {
|
||||
'input': [],
|
||||
'change': [],
|
||||
'blur': [],
|
||||
'click': []
|
||||
}
|
||||
let isEvent = false
|
||||
let removeName = []
|
||||
for (let m of elements[i].attributes) {
|
||||
switch (m.name) {
|
||||
case '@model': {
|
||||
isEvent = true
|
||||
if (elements[i].type == 'checkbox') {
|
||||
Event.change.push((e) => { that[m.value] = e.target.checked })
|
||||
elements[i].checked = that[m.value]
|
||||
}
|
||||
else {
|
||||
if (elements[i].type == 'number') {
|
||||
Event.input.push((e) => {
|
||||
if (e.target.value || e.target.value === 0) {
|
||||
let value = e.target.value
|
||||
value = Number(value)
|
||||
if (e.data != '.' && (e.data != '-' || e.target.value)) {
|
||||
if (((!e.target.max) && (!e.target.min)) || ((value <= Number(e.target.max)) && value >= Number(e.target.min))) {
|
||||
// that[m.value] = value
|
||||
value = 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)
|
||||
// }
|
||||
that[m.value] = value
|
||||
}
|
||||
}
|
||||
})
|
||||
Event.blur.push((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)
|
||||
}
|
||||
}
|
||||
that[m.value] = value
|
||||
})
|
||||
}
|
||||
else {
|
||||
Event.input.push((e) => {
|
||||
that[m.value] = e.target.value
|
||||
})
|
||||
}
|
||||
if (elements[i].nodeName == 'IMG') {
|
||||
elements[i].src = that[m.value]
|
||||
}
|
||||
else {
|
||||
elements[i].value = that[m.value]
|
||||
}
|
||||
}
|
||||
if (this.element[m.value]) {
|
||||
this.element[m.value].push(elements[i])
|
||||
}
|
||||
else {
|
||||
this.element[m.value] = [elements[i]]
|
||||
}
|
||||
removeName.push(m.name)
|
||||
break;
|
||||
}
|
||||
case '@click': {
|
||||
isEvent = true
|
||||
Event.click.push((e) => {
|
||||
if (typeof (that[m.value]) === 'function') {
|
||||
that[m.value](e)
|
||||
}
|
||||
})
|
||||
removeName.push(m.name)
|
||||
break;
|
||||
}
|
||||
}
|
||||
// elements[i].attributes[m] = undefined
|
||||
}
|
||||
for (let n = 0; n < removeName.length; n++) {
|
||||
elements[i].attributes.removeNamedItem(removeName[n])
|
||||
}
|
||||
|
||||
if (isEvent) {
|
||||
for (let key in Event) {
|
||||
if (Event[key].length > 0) {
|
||||
elements[i].addEventListener(key, (e) => {
|
||||
for (let t = 0; t < Event[key].length; t++) {
|
||||
Event[key][t](e)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default EventBinding;
|
||||
249
src/Global/efflect/Sunshine/index.js
Normal file
249
src/Global/efflect/Sunshine/index.js
Normal file
@ -0,0 +1,249 @@
|
||||
/**
|
||||
* @description 水面
|
||||
*/
|
||||
import Dialog from '../../../Obj/Element/Dialog';
|
||||
import { html } from "./_element";
|
||||
import EventBinding from './eventBinding';
|
||||
import { syncData } from '../../MultiViewportMode'
|
||||
import Tools from '../../../Tools'
|
||||
import TimeLine from './TimeLine'
|
||||
import { setSplitDirection, syncSplitData, setActiveId } from '../../SplitScreen'
|
||||
|
||||
export default class Sunshine {
|
||||
/**
|
||||
* @constructor
|
||||
* @param sdk
|
||||
* @description 光照
|
||||
* @param options {object} 光照属性
|
||||
* @param options.time=当前时间 {string} 当前时间
|
||||
* @param options.speed=1000 {number} 速度倍速
|
||||
* @param options.darkness=0.3 {number} 阴影不透明度--越大越不透明
|
||||
* @param options.softShadow=false {boolean} 阴影优化--true/false}
|
||||
* @param Dialog {object} 弹框对象
|
||||
* @param Dialog.confirmCallBack {function} 弹框确认时的回调
|
||||
* */
|
||||
constructor(sdk, options = {}, _Dialog = {}) {
|
||||
this.viewer = sdk.viewer
|
||||
this.options = { ...options }
|
||||
this.sdk = { ...sdk }
|
||||
this.options.time = options.time || new Date()
|
||||
this.options.speed = options.speed || 1000
|
||||
this.options.darkness = options.darkness || 0.4
|
||||
this.options.softShadow = options.softShadow || true
|
||||
this.options.show = options.show === true ? true : false
|
||||
this.Dialog = _Dialog
|
||||
this.timeLine
|
||||
this._EventBinding = new EventBinding()
|
||||
this._elms = {};
|
||||
Sunshine.start(this)
|
||||
}
|
||||
|
||||
|
||||
static start(that) {
|
||||
that.viewer.scene.globe.enableLighting = true
|
||||
that.viewer.shadows = true
|
||||
that.viewer.scene.globe.enableLighting = true;
|
||||
|
||||
that.viewer.terrainShadows = Cesium.ShadowMode.RECEIVE_ONLY
|
||||
that.viewer.shadowMap.darkness = 1.0 - that.options.darkness //阴影透明度--越大越透明
|
||||
|
||||
const now = new Date();
|
||||
now.setHours(0, 0, 0, 0); // 设置为当天0点
|
||||
that.viewer.clock.currentTime = Cesium.JulianDate.fromDate(now);
|
||||
that.viewer.clock.multiplier = that.options.speed;
|
||||
that.viewer.shadowMap.softShadows = that.options.softShadow;
|
||||
that.viewer.shadowMap.cascadesEnabled = true
|
||||
that.viewer.shadowMap.size = 2048;
|
||||
that.viewer.shadowMap.numberOfCascades = 4; // 增加级联层数(默认3层)
|
||||
that.viewer.shadowMap.maximumDistance = 5000; // 扩大阴影渲染距离
|
||||
const lightCamera = that.viewer.shadowMap._lightCamera;
|
||||
lightCamera.frustum.near = 0.1; // 缩小近平面距离
|
||||
lightCamera.frustum.far = 10000; // 扩大远平面距离
|
||||
that.viewer.shadowMap.normalOffset = true; // 避免深度冲突导致的阴影闪烁
|
||||
|
||||
that.edit(true)
|
||||
}
|
||||
get darkness() {
|
||||
return this.options.darkness
|
||||
}
|
||||
set darkness(v) {
|
||||
this.options.darkness = v
|
||||
this.viewer.shadowMap.darkness = 1.0 - this.options.darkness
|
||||
this._elms.darkness &&
|
||||
this._elms.darkness.forEach(item => {
|
||||
item.value = v
|
||||
})
|
||||
}
|
||||
|
||||
get speed() {
|
||||
return this.options.speed
|
||||
}
|
||||
set speed(v) {
|
||||
this.options.speed = v
|
||||
this._elms.speed &&
|
||||
this._elms.speed.forEach(item => {
|
||||
item.value = v
|
||||
})
|
||||
this.viewer.clock.multiplier = this.options.speed;
|
||||
this.timeLine.setSpeed(v)
|
||||
}
|
||||
get softShadow() {
|
||||
return this.options.softShadow
|
||||
}
|
||||
set softShadow(v) {
|
||||
this.options.softShadow = v
|
||||
this.viewer.shadowMap.softShadows = this.options.softShadow;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 编辑框
|
||||
* @param state=false {boolean} 状态: true打开, false关闭
|
||||
*/
|
||||
async edit(state = false) {
|
||||
let tools = new Tools()
|
||||
this.originalOptions = tools.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) {
|
||||
let _this = this
|
||||
this._DialogObject = await new Dialog(this.sdk, this.originalOptions, {
|
||||
title: '光照属性', left: '180px', top: '100px',
|
||||
// confirmCallBack: (options) => {
|
||||
// this.originalOptions = tools.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)
|
||||
// this.remove()
|
||||
// },
|
||||
resetCallBack: () => {
|
||||
this.reset()
|
||||
this.Dialog.resetCallBack && this.Dialog.resetCallBack()
|
||||
},
|
||||
// removeCallBack: () => {
|
||||
// this.Dialog.removeCallBack && this.Dialog.removeCallBack()
|
||||
// },
|
||||
closeCallBack: () => {
|
||||
this.reset()
|
||||
_this.remove()
|
||||
// this.entity.style = new Cesium.Cesium3DTileStyle({
|
||||
// color: "color('rgba(255,255,255," + this.newData.transparency + ")')",
|
||||
// show: true,
|
||||
// });
|
||||
this.Dialog.closeCallBack && this.Dialog.closeCallBack()
|
||||
},
|
||||
showCallBack: (show) => {
|
||||
this.show = show
|
||||
this.Dialog.showCallBack && this.Dialog.showCallBack()
|
||||
}
|
||||
}, true)
|
||||
this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' sun-shine-surface'
|
||||
let contentElm = document.createElement('div');
|
||||
contentElm.innerHTML = html()
|
||||
this._DialogObject.contentAppChild(contentElm)
|
||||
|
||||
//时间轴
|
||||
let _that = this
|
||||
this.timeLine = new TimeLine(this.sdk, this.options.speed)
|
||||
// this.timeLine.setSpeed(1000)
|
||||
this.timeLine.moveComplay(item => {
|
||||
let timeData = _that.time + " " + item
|
||||
_that.viewer.clock.currentTime = Cesium.JulianDate.fromDate(new Date(timeData));
|
||||
_that.viewer.scene.requestRender();
|
||||
|
||||
|
||||
})
|
||||
let jeDateObject
|
||||
let printDateElm = contentElm.getElementsByClassName('sunshine-date')[0]
|
||||
let text
|
||||
|
||||
jeDateObject = jeDate(printDateElm, {
|
||||
format: "YYYY-MM-DD",
|
||||
isinitVal: true,
|
||||
isClear: false,
|
||||
donefun: function (obj) {
|
||||
this.time = obj.val
|
||||
|
||||
const now = new Date();
|
||||
let timeData = now.setHours(0, 0, 0, 0); // 设置为当天0点
|
||||
_that.viewer.clock.currentTime = Cesium.JulianDate.fromDate(new Date(timeData));
|
||||
|
||||
_that.timeLine.updateTime(timeData)
|
||||
}
|
||||
});
|
||||
if (this.time) {
|
||||
jeDateObject.setValue(this.time)
|
||||
}
|
||||
else {
|
||||
jeDateObject.nowBtn && jeDateObject.nowBtn()
|
||||
this.time = jeDateObject.getValue()
|
||||
}
|
||||
|
||||
let all_elm = contentElm.getElementsByTagName("*")
|
||||
this._EventBinding.on(this, all_elm)
|
||||
this._elms = this._EventBinding.element
|
||||
this._elms.color = [jeDateObject]
|
||||
} 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
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
reset() {
|
||||
if (!this.viewer.entities.getById(this.options.id)) {
|
||||
return
|
||||
}
|
||||
this.time = this.originalOptions.time
|
||||
this.speed = this.originalOptions.speed
|
||||
this.darkness = this.originalOptions.darkness
|
||||
}
|
||||
|
||||
/**
|
||||
* 飞到对应实体
|
||||
*/
|
||||
async flyTo(options = {}) {
|
||||
}
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
async remove() {
|
||||
|
||||
this.viewer.scene.globe.enableLighting = false
|
||||
this.viewer.shadows = false
|
||||
this.viewer.clock.multiplier = 1.0
|
||||
this.viewer.clock.currentTime = Cesium.JulianDate.fromDate(new Date());
|
||||
this.entity = null
|
||||
this.timeLine.clear()
|
||||
|
||||
this.viewer.shadowMap.cascadesEnabled = false
|
||||
this.viewer.shadowMap.size = 1024;
|
||||
this.viewer.shadowMap.numberOfCascades = 3; // 增加级联层数(默认3层)
|
||||
const lightCamera = this.viewer.shadowMap._lightCamera;
|
||||
this.viewer.shadowMap.normalOffset = false; // 避免深度冲突导致的阴影闪烁
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
flicker() { }
|
||||
}
|
||||
|
||||
171
src/Global/efflect/Sunshine/timeLIne.js
Normal file
171
src/Global/efflect/Sunshine/timeLIne.js
Normal file
@ -0,0 +1,171 @@
|
||||
export default class TimeLine {
|
||||
constructor(sdk, speed) {
|
||||
this.sdk = { ...sdk };
|
||||
this.progress = document.getElementById('progress');
|
||||
this.handle = document.getElementById('handle');
|
||||
// this.timeline = document.getElementById('timeline');
|
||||
this.timeline = document.getElementsByClassName('timeline-container')[0];
|
||||
this.currentTime = document.getElementById('currentTime');
|
||||
this.timelineCon = document.getElementsByClassName('timeline-container')[0];
|
||||
this.speed = speed;
|
||||
this.animationId;
|
||||
this.startTime = performance.now();
|
||||
this.manualPosition = null;
|
||||
this.isDragging = false;
|
||||
this.pauseed = false;
|
||||
this.time = '';
|
||||
this.update = this.update.bind(this);
|
||||
|
||||
TimeLine.init(this)
|
||||
}
|
||||
static init(that) {
|
||||
for (let i = 0; i <= 24; i++) {
|
||||
if (i % 6 === 0) {
|
||||
const label = document.createElement('div');
|
||||
label.className = 'time-mark';
|
||||
label.textContent = `${i}:00`;
|
||||
label.style.left = `${(i / 24) * 100}%`;
|
||||
document.getElementsByClassName('time-marks')[0].appendChild(label)
|
||||
}
|
||||
}
|
||||
that.startTime = performance.now() - ((that.manualPosition || 0) * 86400 * 1000 / that.speed);
|
||||
|
||||
that.timeline.addEventListener('mousedown', (e) => {
|
||||
if (e.srcElement.className === 'handle') {
|
||||
that.isDragging = true;
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
that.timeline.addEventListener('mousemove', (e) => {
|
||||
if (!that.isDragging) return;
|
||||
|
||||
const rect = that.timeline.getBoundingClientRect();
|
||||
let pos = (e.clientX - rect.left) / rect.width;
|
||||
pos = Math.max(0, Math.min(1, pos));
|
||||
|
||||
that.manualPosition = pos;
|
||||
that.progress.style.width = `${pos * 100}%`;
|
||||
|
||||
const seconds = pos * 86400;
|
||||
that.currentTime.textContent = that.formatTime(seconds);
|
||||
});
|
||||
that.update();
|
||||
|
||||
document.getElementById('timePause').addEventListener('click', function () {
|
||||
that.pauseed = !that.pauseed;
|
||||
if (that.pauseed) {//暂停
|
||||
that.pausedTime = performance.now(); // 记录暂停时刻
|
||||
document.getElementById('timePause').textContent = '播放';
|
||||
that.animationId && cancelAnimationFrame(that.animationId);
|
||||
that.sdk.viewer.clock.shouldAnimate = false
|
||||
} else {//播放
|
||||
let now = performance.now()
|
||||
const pausedDuration = now - that.pausedTime;
|
||||
document.getElementById('timePause').textContent = '暂停';
|
||||
that.manualPosition = null
|
||||
that.startTime += pausedDuration; // 补偿暂停期间的时间差
|
||||
|
||||
if (that.changeDate) {//切换日期后让时间从0开始
|
||||
if (that.changeDateGrag) {
|
||||
that.changeDateGrag = undefined
|
||||
} else {
|
||||
that.startTime = now
|
||||
}
|
||||
that.changeDate = undefined
|
||||
}
|
||||
that.sdk.viewer.clock.shouldAnimate = true
|
||||
that.update(); // 重启动画循环
|
||||
}
|
||||
});
|
||||
}
|
||||
moveComplay(func) {
|
||||
let that = this
|
||||
// that.timeline.addEventListener('mouseup', () => {
|
||||
document.addEventListener('mouseup', () => {
|
||||
if (that.isDragging) {
|
||||
that.isDragging = false;
|
||||
if (that.manualPosition !== null) {
|
||||
// that.sdk.viewer.clock.shouldAnimate = true
|
||||
that.startTime = performance.now() - (that.manualPosition * 86400 * 1000 / that.speed);
|
||||
that.manualPosition = null;
|
||||
that.changeDate && (that.changeDateGrag = true)
|
||||
if (!that.pauseed) {
|
||||
that.update()
|
||||
func(that.time)
|
||||
} else {
|
||||
that.pausedTime = performance.now(); // 记录暂停时刻
|
||||
func(that.currentTime.textContent)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
formatTime(seconds) {
|
||||
const hrs = Math.floor(seconds / 3600).toString().padStart(2, '0');
|
||||
const mins = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
|
||||
const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
|
||||
return `${hrs}:${mins}:${secs}`;
|
||||
}
|
||||
|
||||
update() {
|
||||
if (this.manualPosition !== null) return;
|
||||
if (this.changeDate) {//切换日期后让时间从0开始
|
||||
this.startTime = performance.now()
|
||||
}
|
||||
let elapsed = (performance.now() - this.startTime) * this.speed;
|
||||
// if (this.elapsed) {
|
||||
// elapsed = elapsed + this.elapsed
|
||||
// this.elapsed = undefined
|
||||
// }
|
||||
const totalSeconds = elapsed / 1000;//秒
|
||||
const daySeconds = totalSeconds % 86400;//天
|
||||
const percentage = daySeconds / 86400;
|
||||
|
||||
this.progress.style.width = `${percentage * 100}%`;
|
||||
this.time = this.formatTime(daySeconds)
|
||||
this.currentTime.textContent = this.time;
|
||||
if (!this.pauseed) {
|
||||
this.animationId && cancelAnimationFrame(this.animationId);
|
||||
this.animationId = requestAnimationFrame(this.update);
|
||||
}
|
||||
}
|
||||
setSpeed(v) {
|
||||
let now = performance.now()
|
||||
if (!this.pauseed) {
|
||||
const currentProgress = this.manualPosition ??
|
||||
(performance.now() - this.startTime) * this.speed / (86400 * 1000);
|
||||
this.speed = v;
|
||||
this.startTime = performance.now() - (currentProgress * 86400 * 1000 / this.speed);
|
||||
|
||||
} else {
|
||||
let pausedDuration = now - this.pausedTime;
|
||||
this.startTime += pausedDuration; // 补偿暂停期间的时间差
|
||||
const currentProgress = this.manualPosition ??
|
||||
(now - this.startTime) * this.speed / (86400 * 1000);
|
||||
this.speed = v;
|
||||
this.startTime = now - (currentProgress * 86400 * 1000 / this.speed);
|
||||
|
||||
this.pausedTime = now; // 记录切换speed暂停时刻
|
||||
// this.speed = v;
|
||||
}
|
||||
this.manualPosition = null;
|
||||
|
||||
// this.update();
|
||||
|
||||
}
|
||||
updateTime() {
|
||||
this.manualPosition = null;
|
||||
this.startTime = performance.now() - ((this.manualPosition || 0) * 86400 * 1000 / this.speed);
|
||||
this.pauseed && (this.changeDate = true)
|
||||
this.changeDateGrag = undefined
|
||||
this.update();
|
||||
}
|
||||
clear() {
|
||||
this.animationId && cancelAnimationFrame(this.animationId);
|
||||
this.progress.style.width = '0%';
|
||||
this.currentTime.textContent = '00:00:00';
|
||||
}
|
||||
|
||||
}
|
||||
@ -14,6 +14,7 @@ import { getTheme, setTheme } from "../Obj/Element/theme";
|
||||
import { setActiveViewer as setMultiViewportActiveViewer } from './MultiViewportMode'
|
||||
import { setActiveViewer as setSplitActiveViewer, getSdk } from './SplitScreen'
|
||||
import { updateCluster } from './cluster/cluster'
|
||||
import { getHost } from "../on";
|
||||
|
||||
let coordinateSystem = 'EPSG:4326'
|
||||
let _cartesian
|
||||
@ -28,7 +29,7 @@ function getCurrentView(sdk) {
|
||||
// heading: viewer.camera.heading,
|
||||
// pitch: viewer.camera.pitch,
|
||||
// roll: viewer.camera.roll,
|
||||
position: tools.cartesian3Towgs84(viewer.camera.position, viewer),
|
||||
position: tools.cartesian3Towgs84(viewer.camera._positionWC, viewer),
|
||||
orientation: {
|
||||
heading: Cesium.Math.toDegrees(viewer.camera.heading),
|
||||
pitch: Cesium.Math.toDegrees(viewer.camera.pitch),
|
||||
@ -110,7 +111,7 @@ function CesiumContainer(sdk, options) {
|
||||
}
|
||||
containerObject[sdk.viewer._element.className] || (containerObject[sdk.viewer._element.className] = {})
|
||||
containerObject[sdk.viewer._element.className].event && containerObject[sdk.viewer._element.className].event.destroy()
|
||||
let tools = new Tools()
|
||||
let tools = new Tools(sdk)
|
||||
let element = sdk.viewer._element
|
||||
let proj = sdk.proj
|
||||
for (let key in options) {
|
||||
@ -173,15 +174,28 @@ function CesiumContainer(sdk, options) {
|
||||
}
|
||||
let event = new MouseEvent(sdk)
|
||||
containerObject[sdk.viewer._element.className].event = event
|
||||
let lastPickTime = 0;
|
||||
let timeoutEvent
|
||||
event.mouse_move((movement, cartesian) => {
|
||||
_cartesian = cartesian
|
||||
// const now = Date.now();
|
||||
// if (now - lastPickTime < 500) {
|
||||
// clearTimeout(timeoutEvent)
|
||||
// timeoutEvent = setTimeout(() => {
|
||||
// update()
|
||||
// }, 500);
|
||||
// return
|
||||
// }
|
||||
// lastPickTime = now;
|
||||
update()
|
||||
})
|
||||
function update() {
|
||||
async function update() {
|
||||
if (!_cartesian) {
|
||||
return
|
||||
}
|
||||
// let pos = sdk.viewer.scene.clampToHeight(_cartesian)
|
||||
let position = tools.cartesian3Towgs84(_cartesian, sdk.viewer)
|
||||
// position.alt = height
|
||||
if (coordinateSystem === 'EPSG:4326') {
|
||||
infoElm.innerHTML = `
|
||||
<span>经度:</span><span>${Number(position.lng.toFixed(6))}° </span>
|
||||
@ -244,6 +258,16 @@ function setBillboardDefaultUrl(url, name) {
|
||||
else {
|
||||
name = 'billboard_default_url'
|
||||
}
|
||||
let host = getHost()
|
||||
if (!url.startsWith("http")) {
|
||||
//说明是本地的json,在磁盘中存在的
|
||||
if (!url.includes(":")) {
|
||||
if (host) {
|
||||
let o = new URL(url, host)
|
||||
url = o.href
|
||||
}
|
||||
}
|
||||
}
|
||||
localStorage.setItem(name, url);
|
||||
}
|
||||
/*获取广告牌默认图标*/
|
||||
|
||||
@ -92,12 +92,12 @@ function MouseRightMenu(sdk, status, callBack) {
|
||||
entityId = entityId.parentId
|
||||
}
|
||||
let addedMenu = ''
|
||||
let that = sdk.entityMap.get(entityId)
|
||||
let that = sdk.entityMap.get(entityId+'')
|
||||
if (!that && entityId) {
|
||||
let array = entityId.split('-')
|
||||
let array = (entityId+'').split('-')
|
||||
array.splice(array.length - 1, 1)
|
||||
entityId = array.join('-')
|
||||
that = sdk.entityMap.get(entityId)
|
||||
that = sdk.entityMap.get(entityId+'')
|
||||
}
|
||||
|
||||
if (that && that.picking) {
|
||||
@ -121,6 +121,9 @@ function MouseRightMenu(sdk, status, callBack) {
|
||||
<ul class="base" style="list-style: none;padding: 0;margin: 0;font-size: 12px;">
|
||||
<li style="padding: 3px 10px;cursor: pointer;">绕鼠标点旋转</li>
|
||||
</ul>
|
||||
<ul class="base" style="list-style: none;padding: 0;margin: 0;font-size: 12px;">
|
||||
<li style="padding: 3px 10px;cursor: pointer;">文本框</li>
|
||||
</ul>
|
||||
${addedMenu}
|
||||
`
|
||||
_element.appendChild(menuElm)
|
||||
@ -173,6 +176,10 @@ function MouseRightMenu(sdk, status, callBack) {
|
||||
// that.edit(true)
|
||||
// this.attribute(entityId)
|
||||
break
|
||||
case '文本框':
|
||||
object.position = position
|
||||
key = 'textBox'
|
||||
break
|
||||
}
|
||||
eventListener[sdk.div_id].callBack(key, object)
|
||||
_element.removeChild(menuElm)
|
||||
|
||||
@ -73,7 +73,7 @@ import { dialog as ContourDialog } from '../Global/Contour'
|
||||
import { on as SplitScreenOn, off as SplitScreenOff, setActiveId as SplitScreenSetActiveId, getSdk } from '../Global/SplitScreen'
|
||||
import LocateCurrent from '../Obj/Base/LocateCurrent'
|
||||
|
||||
import { Clear as AnalysisClear } from '../Obj/Analysis/clear'
|
||||
import { AnalysisClear, SectionClear } from '../Obj/Analysis/clear'
|
||||
import CutFillAnalysis from '../Obj/Analysis/CutFill'
|
||||
import Submerge from '../Obj/Analysis/Submerge'
|
||||
import ViewShed from '../Obj/Analysis/ViewShed'
|
||||
@ -100,6 +100,7 @@ import MeasureAngle from '../Measure/MeasureAngle'
|
||||
import MeasureAzimuth from '../Measure/MeasureAzimuth'
|
||||
import DrawPolyline from '../Draw/drawPolyline'
|
||||
import DrawPolygon from '../Draw/drawPolygon'
|
||||
import DrawThreeRect from '../Draw/drawThreeRect'
|
||||
import DrawPoint from '../Draw/drawPoint'
|
||||
import DrawCircle from '../Draw/drawCircle'
|
||||
import DrawElliptic from '../Draw/drawElliptic'
|
||||
@ -157,7 +158,7 @@ import WaterSurface from '../Obj/Base/WaterSurface'
|
||||
// import ItineraryMove from '../Obj/Base/ItineraryMove'
|
||||
import TrajectoryMotion from '../Obj/Base/TrajectoryMotion'
|
||||
import TrajectoryMotionObject from '../Obj/Base/TrajectoryMotionObject'
|
||||
import Road from '../Obj/Base/Road'
|
||||
// import Road from '../Obj/Base/Road'
|
||||
import Graffiti from '../Obj/Base/Graffiti'
|
||||
import GroundImage from '../Obj/Base/GroundImage'
|
||||
import GroundSvg from '../Obj/Base/GroundSvg'
|
||||
@ -183,6 +184,11 @@ import Dialog from '../Obj/Element/Dialog'
|
||||
import newAirLine from '../Obj/AirLine/pointRoute.js'
|
||||
import Frustum from '../Obj/AirLine/frustum'
|
||||
import DrawTakeOff from '../Obj/AirLine/DrawTakeOff'
|
||||
import FlowLine from '../Obj/Base/FlowLine'
|
||||
import Sunshine from '../Global/efflect/Sunshine'
|
||||
import Road2 from '../Obj/Base/RoadObject'
|
||||
import TextBox from '../Obj/Base/TextBox'
|
||||
import BatchModel from '../Obj/Base/BatchModel'
|
||||
|
||||
const YJEarthismeasuring = Symbol('测量状态')
|
||||
const screenRecord = Symbol('录屏对象')
|
||||
@ -234,7 +240,7 @@ if (!window.YJ) {
|
||||
Model2,
|
||||
TrajectoryMotion,
|
||||
TrajectoryMotionObject,
|
||||
Road,
|
||||
// Road,
|
||||
Graffiti,
|
||||
GroundImage,
|
||||
GroundSvg,
|
||||
@ -253,7 +259,11 @@ if (!window.YJ) {
|
||||
newAirLine,
|
||||
FRUSTUN: Frustum,
|
||||
// GenerateRoute
|
||||
Dialog
|
||||
Dialog,
|
||||
FlowLine,
|
||||
Road2,
|
||||
TextBox,
|
||||
BatchModel
|
||||
},
|
||||
YJEarth,
|
||||
Tools,
|
||||
@ -292,7 +302,7 @@ if (!window.YJ) {
|
||||
cease: FlyRoamCease
|
||||
},
|
||||
flyTo,
|
||||
efflect: { rain, snow, fog, nightVision, skyStarry, illumination },
|
||||
efflect: { rain, snow, fog, nightVision, skyStarry, illumination, Sunshine },
|
||||
CameraController,
|
||||
CesiumContainer,
|
||||
setBillboardDefaultUrl,
|
||||
@ -371,6 +381,7 @@ if (!window.YJ) {
|
||||
DrawAssemble,
|
||||
DrawSector,
|
||||
DrawTakeOff,
|
||||
DrawThreeRect
|
||||
},
|
||||
// 分析
|
||||
Analysis: {
|
||||
@ -387,7 +398,9 @@ if (!window.YJ) {
|
||||
Section,
|
||||
TerrainExcavation,
|
||||
Flat,
|
||||
Analyses: []
|
||||
AnalysesResults: [],
|
||||
SectionResults: [],
|
||||
ClearSection: SectionClear
|
||||
},
|
||||
CoordTransform,
|
||||
RoutePlanningArrays: [],
|
||||
|
||||
@ -48,7 +48,7 @@ class MeasureDistance extends Measure {
|
||||
}
|
||||
|
||||
async computeDisByTowPoint(p1, p2) {
|
||||
let d = this.computeDistance([p1, p2])
|
||||
let d = this.computeDistance2([p1, p2])
|
||||
let meters = 10
|
||||
let createLabel = (distance) => {
|
||||
if(this._isDestroy) {
|
||||
@ -80,7 +80,7 @@ class MeasureDistance extends Measure {
|
||||
let l = arr.length - 1
|
||||
arr.forEach((item, index) => {
|
||||
if (index !== l) {
|
||||
let d1 = this.computeDistance([item.position, arr[index + 1].position])
|
||||
let d1 = this.computeDistance2([item.position, arr[index + 1].position])
|
||||
let d2 = Math.abs(item.position.alt - arr[index + 1].position.alt)
|
||||
let d3 = Math.sqrt(d1 * d1 + d2 * d2)
|
||||
total_length += d3
|
||||
@ -91,7 +91,7 @@ class MeasureDistance extends Measure {
|
||||
|
||||
|
||||
//暂时固定取20个点
|
||||
if (d > 20) {//大于20m时,固定取20个点
|
||||
if (d > 2) {//大于20m时,固定取20个点
|
||||
meters = d / 20
|
||||
await start(meters)
|
||||
} else if (d < 1) {
|
||||
@ -106,8 +106,8 @@ class MeasureDistance extends Measure {
|
||||
|
||||
|
||||
async sampleHeight(p1, index) {
|
||||
let p2 = await this.sampleHeightMostDetailed([p1])
|
||||
p1.alt = p2[0].height
|
||||
let height = await this.getClampToHeight(p1, [...this.sdk.viewer.entities.values])
|
||||
p1.alt = height
|
||||
return {position: p1, index}
|
||||
}
|
||||
|
||||
@ -131,7 +131,7 @@ class MeasureDistance extends Measure {
|
||||
let l = this.clampPositions.length - 1
|
||||
this.clampPositions.forEach((item, index) => {
|
||||
if (index !== l) {
|
||||
let d1 = this.computeDistance([item.position, this.clampPositions[index + 1].position])
|
||||
let d1 = this.computeDistance2([item.position, this.clampPositions[index + 1].position])
|
||||
let d2 = Math.abs(item.position.alt - this.clampPositions[index + 1].position.alt)
|
||||
let d3 = Math.sqrt(d1 * d1 + d2 * d2)
|
||||
total_length += d3
|
||||
@ -270,7 +270,7 @@ class MeasureDistance extends Measure {
|
||||
// if (this.cachePositions.length) {
|
||||
// let cur_point = this.cartesian3Towgs84(car, this.viewer)
|
||||
// let pre_p = this.cartesian3Towgs84(this.cachePositions[this.cachePositions.length - 1], this.viewer)
|
||||
// let cur_len = this.computeDistance([cur_point, pre_p])
|
||||
// let cur_len = this.computeDistance2([cur_point, pre_p])
|
||||
// let text = "当前投影距离:" + cur_len + " 米"
|
||||
// // this.tip.set_text(text)
|
||||
// }
|
||||
|
||||
@ -47,7 +47,7 @@ class MeasureDistance extends Measure {
|
||||
}
|
||||
|
||||
async computeDisByTowPoint(p1, p2) {
|
||||
let d = this.computeDistance([p1, p2])
|
||||
let d = this.computeDistance2([p1, p2])
|
||||
let meters = 10
|
||||
let createLabel = (distance) => {
|
||||
let label = this.getLabel("贴地距离:" + distance.toFixed(2) + "米")
|
||||
@ -84,7 +84,7 @@ class MeasureDistance extends Measure {
|
||||
let l = arr.length - 1
|
||||
arr.forEach((item, index) => {
|
||||
if (index !== l) {
|
||||
let d1 = this.computeDistance([item.position, arr[index + 1].position])
|
||||
let d1 = this.computeDistance2([item.position, arr[index + 1].position])
|
||||
let d2 = Math.abs(item.position.alt - arr[index + 1].position.alt)
|
||||
let d3 = Math.sqrt(d1 * d1 + d2 * d2)
|
||||
total_length += d3
|
||||
@ -135,7 +135,7 @@ class MeasureDistance extends Measure {
|
||||
let l = this.clampPositions.length - 1
|
||||
this.clampPositions.forEach((item, index) => {
|
||||
if (index !== l) {
|
||||
let d1 = this.computeDistance([item.position, this.clampPositions[index + 1].position])
|
||||
let d1 = this.computeDistance2([item.position, this.clampPositions[index + 1].position])
|
||||
let d2 = Math.abs(item.position.alt - this.clampPositions[index + 1].position.alt)
|
||||
let d3 = Math.sqrt(d1 * d1 + d2 * d2)
|
||||
total_length += d3
|
||||
@ -231,7 +231,7 @@ class MeasureDistance extends Measure {
|
||||
if (this.ids.length !== 0) {
|
||||
let cur_point = this.cartesian3Towgs84(car, this.viewer)
|
||||
let pre_p = this.cartesian3Towgs84(this.cachePositions[this.cachePositions.length - 1], this.viewer)
|
||||
let cur_len = this.computeDistance([cur_point, pre_p])
|
||||
let cur_len = this.computeDistance2([cur_point, pre_p])
|
||||
let text = "投影距离:" + cur_len + " 米"
|
||||
this.ids.push(MeasureDistance.create_point(car, {label: this.getLabel(text)}, this))
|
||||
this.cachePositions.push(car)
|
||||
@ -250,7 +250,7 @@ class MeasureDistance extends Measure {
|
||||
if (this.cachePositions.length) {
|
||||
let cur_point = this.cartesian3Towgs84(car, this.viewer)
|
||||
let pre_p = this.cartesian3Towgs84(this.cachePositions[this.cachePositions.length - 1], this.viewer)
|
||||
let cur_len = this.computeDistance([cur_point, pre_p])
|
||||
let cur_len = this.computeDistance2([cur_point, pre_p])
|
||||
let text = "当前投影距离:" + cur_len + " 米"
|
||||
this.tip.set_text(text)
|
||||
}
|
||||
@ -280,7 +280,7 @@ class MeasureDistance extends Measure {
|
||||
}
|
||||
|
||||
computeAngle(start, end) {
|
||||
let d1 = this.computeDistance([start, end])
|
||||
let d1 = this.computeDistance2([start, end])
|
||||
let d2 = Math.abs(start.alt - end.alt)
|
||||
let d3 = Math.sqrt(d1 * d1 + d2 * d2)
|
||||
let cosAlpha = d1 / d3
|
||||
|
||||
@ -128,7 +128,7 @@ class MeasureHeight extends Measure {
|
||||
this.positions[1] = Cesium.Cartesian3.fromDegrees(this.firstpoint.lng, this.firstpoint.lat, cur_point.alt)
|
||||
this.positions[2] = cartesian
|
||||
this.position = this.positions[1]
|
||||
this.circleRadius = this.computeDistance([this.firstpoint, cur_point])
|
||||
this.circleRadius = this.computeDistance2([this.firstpoint, cur_point])
|
||||
this.height = Number((cur_point.alt - this.firstpoint.alt).toFixed(2))
|
||||
this.text = "相对高度:" + this.height + " 米"
|
||||
this.tip.set_text("左键完成,右键取消;半径:" + this.circleRadius + " 米")
|
||||
@ -145,7 +145,7 @@ class MeasureHeight extends Measure {
|
||||
this.positions[1] = Cesium.Cartesian3.fromDegrees(this.firstpoint.lng, this.firstpoint.lat, cur_point.alt)
|
||||
this.positions[2] = cartesian
|
||||
this.position = this.positions[1]
|
||||
this.circleRadius = this.computeDistance([this.firstpoint, cur_point])
|
||||
this.circleRadius = this.computeDistance2([this.firstpoint, cur_point])
|
||||
this.height = Number((cur_point.alt - this.firstpoint.alt).toFixed(2))
|
||||
this.text = "相对高度:" + this.height + " 米"
|
||||
this.tip.set_text("左键完成,右键取消;半径:" + this.circleRadius + " 米")
|
||||
|
||||
@ -73,7 +73,7 @@ class MeasureProjectionDistance extends Measure {
|
||||
let l = this.clampPositions.length - 1
|
||||
this.clampPositions.forEach((item, index) => {
|
||||
if (index !== l) {
|
||||
let d1 = this.computeDistance([item.position, this.clampPositions[index + 1].position])
|
||||
let d1 = this.computeDistance2([item.position, this.clampPositions[index + 1].position])
|
||||
let d2 = Math.abs(item.position.alt - this.clampPositions[index + 1].position.alt)
|
||||
let d3 = Math.sqrt(d1 * d1 + d2 * d2)
|
||||
total_length += d3
|
||||
@ -174,7 +174,7 @@ class MeasureProjectionDistance extends Measure {
|
||||
if (this.ids.length !== 0) {
|
||||
let cur_point = this.cartesian3Towgs84(car, this.viewer)
|
||||
let pre_p = this.cartesian3Towgs84(this.cachePositions[this.cachePositions.length - 1], this.viewer)
|
||||
let cur_len = this.computeDistance([cur_point, pre_p])
|
||||
let cur_len = this.computeDistance2([cur_point, pre_p])
|
||||
let text = "投影距离:" + cur_len + " 米"
|
||||
this.ids.push(MeasureProjectionDistance.create_point(car, {label: this.getLabel(text)}, this))
|
||||
this.cachePositions.push(car)
|
||||
@ -215,7 +215,7 @@ class MeasureProjectionDistance extends Measure {
|
||||
if (this.cachePositions.length) {
|
||||
let cur_point = this.cartesian3Towgs84(car, this.viewer)
|
||||
let pre_p = this.cartesian3Towgs84(this.cachePositions[this.cachePositions.length - 1], this.viewer)
|
||||
let cur_len = this.computeDistance([cur_point, pre_p])
|
||||
let cur_len = this.computeDistance2([cur_point, pre_p])
|
||||
let text = "当前投影距离:" + cur_len + " 米"
|
||||
this.tip.set_text(text)
|
||||
}
|
||||
|
||||
@ -75,7 +75,7 @@ class MeasureSlopeDistance extends Measure {
|
||||
let l = this.clampPositions.length - 1
|
||||
this.clampPositions.forEach((item, index) => {
|
||||
if (index !== l) {
|
||||
let d1 = this.computeDistance([item.position, this.clampPositions[index + 1].position])
|
||||
let d1 = this.computeDistance2([item.position, this.clampPositions[index + 1].position])
|
||||
let d2 = Math.abs(item.position.alt - this.clampPositions[index + 1].position.alt)
|
||||
let d3 = Math.sqrt(d1 * d1 + d2 * d2)
|
||||
total_length += d3
|
||||
@ -235,7 +235,7 @@ class MeasureSlopeDistance extends Measure {
|
||||
if (this.cachePositions.length) {
|
||||
let cur_point = this.cartesian3Towgs84(cartesian, this.viewer)
|
||||
let pre_p = this.cartesian3Towgs84(this.cachePositions[this.cachePositions.length - 1], this.viewer)
|
||||
let d1 = this.computeDistance([pre_p, cur_point])
|
||||
let d1 = this.computeDistance2([pre_p, cur_point])
|
||||
let d2 = Math.abs(pre_p.alt - cur_point.alt)
|
||||
let d3 = Math.sqrt(d1 * d1 + d2 * d2)
|
||||
let cosAlpha = d1 / d3
|
||||
@ -276,7 +276,7 @@ class MeasureSlopeDistance extends Measure {
|
||||
}
|
||||
|
||||
computeAngle(start, end) {
|
||||
let d1 = this.computeDistance([start, end])
|
||||
let d1 = this.computeDistance2([start, end])
|
||||
let d2 = Math.abs(start.alt - end.alt)
|
||||
let d3 = Math.sqrt(d1 * d1 + d2 * d2)
|
||||
let cosAlpha = d1 / d3
|
||||
|
||||
@ -27,7 +27,7 @@ class MeasureTriangle extends Measure {
|
||||
cal_distance(positions) {
|
||||
let p1 = this.cartesian3Towgs84(positions[0], this.viewer)
|
||||
let p2 = this.cartesian3Towgs84(positions[1], this.viewer)
|
||||
let dis = this.computeDistance([p1, p2])
|
||||
let dis = this.computeDistance2([p1, p2])
|
||||
p1.alt = p1.alt.toFixed(2)
|
||||
p2.alt = p2.alt.toFixed(2)
|
||||
if (p1.alt === p2.alt) {//水平边
|
||||
@ -128,10 +128,10 @@ class MeasureTriangle extends Measure {
|
||||
let positions2 = this.id_map.get(id2).positions
|
||||
let p1 = this.cartesian3Towgs84(positions1[0], this.viewer)
|
||||
let p2 = this.cartesian3Towgs84(positions1[1], this.viewer)
|
||||
let shuiping = this.computeDistance([p2, p1])
|
||||
let shuiping = this.computeDistance2([p2, p1])
|
||||
let p3 = this.cartesian3Towgs84(positions2[0], this.viewer)
|
||||
let p4 = this.cartesian3Towgs84(positions2[1], this.viewer)
|
||||
let d = this.computeDistance([p3, p4])
|
||||
let d = this.computeDistance2([p3, p4])
|
||||
let h = Math.abs(p3.alt - p4.alt)
|
||||
let x = Math.sqrt(Math.pow(h, 2) + Math.pow(d, 2))
|
||||
if (shuiping == 0.00) {
|
||||
|
||||
@ -35,7 +35,7 @@ class CircleViewShed extends Tools {
|
||||
this.Dialog = _Dialog
|
||||
this._EventBinding = new EventBinding()
|
||||
this.html = null
|
||||
YJ.Analysis.Analyses.push(this)
|
||||
YJ.Analysis.AnalysesResults.push(this)
|
||||
CircleViewShed.edit(this)
|
||||
// CircleViewShed.create(this)
|
||||
}
|
||||
|
||||
@ -44,9 +44,14 @@ class ContourAnalysis {
|
||||
"#2F0000",
|
||||
]; //等高线赋值颜色,内含default值
|
||||
this.countorLineList = Cesium.defaultValue(options.countorLineList, []);
|
||||
YJ.Analysis.Analyses.push(this)
|
||||
YJ.Analysis.AnalysesResults.push(this)
|
||||
this.createNewLine();
|
||||
}
|
||||
|
||||
get type() {
|
||||
return 'ContourAnalysis'
|
||||
}
|
||||
|
||||
createNewLine() {
|
||||
ContourAnalysis.interpolatePoint(this);
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@ class CutFillAnalysis {
|
||||
}
|
||||
this.entities = []
|
||||
this.Draw = new DrawPolygon(this.sdk)
|
||||
YJ.Analysis.Analyses.push(this)
|
||||
YJ.Analysis.AnalysesResults.push(this)
|
||||
CutFillAnalysis.EditBox(this)
|
||||
}
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ class Profile extends Draw {
|
||||
super(sdk)
|
||||
this.viewer = sdk.viewer;
|
||||
this.Dialog = _Dialog
|
||||
YJ.Analysis.Analyses.push(this)
|
||||
YJ.Analysis.AnalysesResults.push(this)
|
||||
Profile.create(this)
|
||||
}
|
||||
static create(that) {
|
||||
|
||||
@ -15,7 +15,7 @@ class Section extends Tools {
|
||||
this.tiles3d = tiles3d
|
||||
this.options = { ...options }
|
||||
this.options.regionsType = this.options.regionsType || false
|
||||
// YJ.Analysis.Analyses.push(this)
|
||||
YJ.Analysis.SectionResults.push(this)
|
||||
this.Planes = []
|
||||
Section.start(this)
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@ class SlopeAspect extends Tools {
|
||||
this.result = []; //存储创建的坡度分析结果,primitive集合
|
||||
this.handler = undefined;
|
||||
this.toolTip = "";
|
||||
YJ.Analysis.Analyses.push(this)
|
||||
YJ.Analysis.AnalysesResults.push(this)
|
||||
this.Draw = new DrawPolygon(this.sdk)
|
||||
// this.createNew4Distance()
|
||||
this.createNew4Num(50)
|
||||
|
||||
@ -26,7 +26,7 @@ class Submerge extends Tools {
|
||||
this.status = true
|
||||
this.area = 0
|
||||
this._elms = {};
|
||||
YJ.Analysis.Analyses.push(this)
|
||||
YJ.Analysis.AnalysesResults.push(this)
|
||||
Submerge.EditBox(this)
|
||||
// Submerge.create(this)
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@ class ViewShedStage extends Tools {
|
||||
this.Dialog = _Dialog
|
||||
this._EventBinding = new EventBinding()
|
||||
this.html = null
|
||||
YJ.Analysis.Analyses.push(this)
|
||||
YJ.Analysis.AnalysesResults.push(this)
|
||||
ViewShedStage.edit(this)
|
||||
// ViewShedStage.edit(this)
|
||||
// this.update();
|
||||
|
||||
@ -50,7 +50,7 @@ class ViewShedStage extends Tools {
|
||||
this.ids = []
|
||||
this.Dialog = _Dialog
|
||||
this.html = null
|
||||
YJ.Analysis.Analyses.push(this)
|
||||
YJ.Analysis.AnalysesResults.push(this)
|
||||
ViewShedStage.create(this)
|
||||
// ViewShedStage.edit(this)
|
||||
// this.update();
|
||||
|
||||
@ -38,7 +38,7 @@ class ViewShedStage extends Tools {
|
||||
this.viewpointPrimitive = null
|
||||
this.Dialog = _Dialog
|
||||
this.html = null
|
||||
YJ.Analysis.Analyses.push(this)
|
||||
YJ.Analysis.AnalysesResults.push(this)
|
||||
ViewShedStage.create(this)
|
||||
}
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ class VisibilityAnalysis extends Tools {
|
||||
this.viewPointHeight = options.viewPointHeight
|
||||
this.Dialog = _Dialog
|
||||
this._EventBinding = new EventBinding()
|
||||
YJ.Analysis.Analyses.push(this)
|
||||
YJ.Analysis.AnalysesResults.push(this)
|
||||
VisibilityAnalysis.edit(this)
|
||||
}
|
||||
|
||||
@ -63,11 +63,15 @@ class VisibilityAnalysis extends Tools {
|
||||
that.tip.set_text("左键创建视角终点,右键结束通视分析")
|
||||
if (!that.resultObject.viewPoint) {
|
||||
let pos84 = that.cartesian3Towgs84(cartesian, that.viewer)
|
||||
let positions = await Cesium.sampleTerrainMostDetailed(
|
||||
let positions
|
||||
if(that.sdk.viewer.terrainProvider.availability)
|
||||
{
|
||||
positions = await Cesium.sampleTerrainMostDetailed(
|
||||
that.sdk.viewer.terrainProvider,
|
||||
[Cesium.Cartographic.fromDegrees(pos84.lng, pos84.lat)]
|
||||
);
|
||||
if (positions[0].height > pos84.alt) {
|
||||
}
|
||||
if (positions && positions[0].height > pos84.alt) {
|
||||
pos84.alt = positions[0].height
|
||||
}
|
||||
pos84.alt = pos84.alt + that.viewPointHeight
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
function Clear() {
|
||||
YJ.Analysis.Analyses.forEach(m => {
|
||||
function AnalysisClear() {
|
||||
YJ.Analysis.AnalysesResults.forEach(m => {
|
||||
m.destroy()
|
||||
})
|
||||
// YJ.Analysis.Analyses = []
|
||||
// YJ.Analysis.AnalysesResults = []
|
||||
}
|
||||
|
||||
export {Clear}
|
||||
function SectionClear() {
|
||||
YJ.Analysis.SectionResults.forEach(m => {
|
||||
m.destroy()
|
||||
})
|
||||
}
|
||||
|
||||
export {AnalysisClear, SectionClear}
|
||||
@ -50,7 +50,7 @@ class Test extends Tools {
|
||||
this.ids = []
|
||||
this.Dialog = _Dialog
|
||||
this.html = null
|
||||
YJ.Analysis.Analyses.push(this)
|
||||
YJ.Analysis.AnalysesResults.push(this)
|
||||
Test.create(this)
|
||||
// Test.edit(this)
|
||||
// this.update();
|
||||
|
||||
@ -62,7 +62,7 @@ class PolygonObject extends Base {
|
||||
lineWidth: (options.label.lineWidth || options.label.lineWidth === 0) ? options.label.lineWidth : 4,
|
||||
pixelOffset: (options.label.pixelOffset || options.label.pixelOffset === 0) ? options.label.pixelOffset : 20,
|
||||
backgroundColor: options.label.backgroundColor || ['#42c6ef', '#42c6ef'],
|
||||
lineColor: options.label.lineColor || '#fff000',
|
||||
lineColor: options.label.lineColor || '#00ffff80',
|
||||
scaleByDistance: options.label.scaleByDistance || false,
|
||||
near: (options.label.near || options.label.near === 0) ? options.label.near : 2000,
|
||||
far: (options.label.far || options.label.far === 0) ? options.label.far : 100000,
|
||||
@ -105,7 +105,7 @@ class PolygonObject extends Base {
|
||||
this.entity.polygon.material = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -218,7 +218,7 @@ class PolygonObject extends Base {
|
||||
this.entity.polyline.material = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.lineColor) {
|
||||
this._elms.lineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -292,7 +292,7 @@ class PolygonObject extends Base {
|
||||
}
|
||||
set labelShow(v) {
|
||||
this.options.label.show = v
|
||||
if (this.show) {
|
||||
if (this.show && !this.showView || this.showView == 3) {
|
||||
this.label.show = v
|
||||
}
|
||||
else {
|
||||
@ -311,7 +311,7 @@ class PolygonObject extends Base {
|
||||
this.label.color = v
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -411,7 +411,7 @@ class PolygonObject extends Base {
|
||||
this.label.lineColor = v
|
||||
if (this._elms.labelLineColor) {
|
||||
this._elms.labelLineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -438,7 +438,7 @@ class PolygonObject extends Base {
|
||||
this.label.backgroundColor = [v, this.label.backgroundColor[1]]
|
||||
if (this._elms.labelBackgroundColorStart) {
|
||||
this._elms.labelBackgroundColorStart.forEach((item, i) => {
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -464,7 +464,7 @@ class PolygonObject extends Base {
|
||||
this.label.backgroundColor = [this.label.backgroundColor[0], v]
|
||||
if (this._elms.labelBackgroundColorEnd) {
|
||||
this._elms.labelBackgroundColorEnd.forEach((item, i) => {
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1013,7 +1013,7 @@ class PolygonObject extends Base {
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs('polygon-object-edit-tabs', undefined, this.sdk)
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1027,7 +1027,7 @@ class PolygonObject extends Base {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let linecolorPicker = new ewPlugins('colorpicker', {
|
||||
let linecolorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("lineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1041,7 +1041,7 @@ class PolygonObject extends Base {
|
||||
this.lineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1055,7 +1055,7 @@ class PolygonObject extends Base {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelLineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1069,7 +1069,7 @@ class PolygonObject extends Base {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorStart")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1083,7 +1083,7 @@ class PolygonObject extends Base {
|
||||
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
},
|
||||
})
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorEnd")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
|
||||
@ -24,7 +24,7 @@ class AssembleObject extends Base {
|
||||
* @param options {object} 属性
|
||||
* @param options.show=true {boolean} 显示/隐藏
|
||||
* @param options.name {string} 名称
|
||||
* @param options.color="#36c4ff" {string} 颜色
|
||||
* @param options.color="#ff000080" {string} 颜色
|
||||
* @param options.height {number} 高度
|
||||
* @param options.heightMode=2{number} 高度模式(0:海拔高度;1:相对地表;2:依附模式)
|
||||
* @param {Array.<object>} options.positions 坐标数组 [{lon,lat,alt},...]
|
||||
@ -34,13 +34,13 @@ class AssembleObject extends Base {
|
||||
constructor(sdk, options = {}, _Dialog = {}) {
|
||||
super(sdk, options);
|
||||
this.options.name = options.name || '未命名对象'
|
||||
this.options.color = options.color || "#36c4ff"
|
||||
this.options.color = options.color || "#ff000080"
|
||||
this.options.show = (options.show || options.show === false) ? options.show : true
|
||||
this.options.heightMode = (options.heightMode || options.heightMode == 0) ? options.heightMode : 2
|
||||
this.options.positions = options.positions || []
|
||||
this.options.line = options.line || {}
|
||||
this.options.line.width = this.options.line.width || 2
|
||||
this.options.line.color = this.options.line.color || 'rgba(155, 155, 124, 0.89)'
|
||||
this.options.line.width = ((this.options.line.width || this.options.line.width === 0) ? this.options.line.width : 3)
|
||||
this.options.line.color = this.options.line.color || 'rgba(255, 0, 0, 1)'
|
||||
this.options['area-unit'] = options['area-unit'] || '平方米'
|
||||
this.entity
|
||||
this.event = new MouseEvent(this.sdk)
|
||||
@ -57,8 +57,8 @@ class AssembleObject extends Base {
|
||||
color: options.label.color || '#ffffff',
|
||||
lineWidth: (options.label.lineWidth || options.label.lineWidth === 0) ? options.label.lineWidth : 4,
|
||||
pixelOffset: (options.label.pixelOffset || options.label.pixelOffset === 0) ? options.label.pixelOffset : 20,
|
||||
backgroundColor: options.label.backgroundColor || ['#42c6ef', '#42c6ef'],
|
||||
lineColor: options.label.lineColor || '#fff000',
|
||||
backgroundColor: options.label.backgroundColor || ['#00ffff80', '#00ffff80'],
|
||||
lineColor: options.label.lineColor || '#00ffff80',
|
||||
scaleByDistance: options.label.scaleByDistance || false,
|
||||
near: (options.label.near || options.label.near === 0) ? options.label.near : 2000,
|
||||
far: (options.label.far || options.label.far === 0) ? options.label.far : 100000,
|
||||
@ -106,31 +106,31 @@ class AssembleObject extends Base {
|
||||
return this.options.color
|
||||
}
|
||||
set color(v) {
|
||||
this.options.color = v
|
||||
this.options.color = v || 'rgba(255, 0, 0, 0.5)'
|
||||
if (!this.sdk || !this.sdk.viewer || !this.entity || !this.entity.polygon) {
|
||||
return
|
||||
}
|
||||
let material = Cesium.Color.fromCssColorString(v)
|
||||
let material = Cesium.Color.fromCssColorString(this.options.color)
|
||||
if (this.sdk.viewer.scene.mode === 2) {
|
||||
material = new Cesium.CustomColorMaterialSource({
|
||||
color: v
|
||||
color: this.options.color
|
||||
})
|
||||
}
|
||||
this.entity.polygon.material = material
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: v,
|
||||
defaultColor: this.options.color,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (c) => {
|
||||
this.color = c
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
this.color = 'rgba(255,0,0,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.color[i] = colorPicker
|
||||
@ -238,25 +238,25 @@ class AssembleObject extends Base {
|
||||
return this.options.line.color
|
||||
}
|
||||
set lineColor(v) {
|
||||
this.options.line.color = v
|
||||
this.options.line.color = v || 'rgba(255, 0, 0, 0.5)'
|
||||
if (!this.sdk || !this.sdk.viewer || !this.entity || !this.entity.polyline) {
|
||||
return
|
||||
}
|
||||
this.entity.polyline.material = Cesium.Color.fromCssColorString(v)
|
||||
this.entity.polyline.material = Cesium.Color.fromCssColorString(this.options.line.color)
|
||||
if (this._elms.lineColor) {
|
||||
this._elms.lineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: v,
|
||||
defaultColor: this.options.line.color,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (c) => {
|
||||
this.lineColor = c
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.lineColor = 'rgba(255,255,255,1)'
|
||||
this.lineColor = 'rgba(255,0,0,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.lineColor[i] = lineColorPicker
|
||||
@ -268,10 +268,10 @@ class AssembleObject extends Base {
|
||||
return this.options.line.width
|
||||
}
|
||||
set lineWidth(v) {
|
||||
this.options.line.width = v
|
||||
this.entity.polyline.width = v
|
||||
this.options.line.width = ((v || v === 0) ? v : 3)
|
||||
this.entity.polyline.width = this.options.line.width
|
||||
this._elms.lineColor && this._elms.lineColor.forEach((item) => {
|
||||
item.value = v
|
||||
item.value = this.options.line.width
|
||||
})
|
||||
}
|
||||
|
||||
@ -319,7 +319,7 @@ class AssembleObject extends Base {
|
||||
}
|
||||
set labelShow(v) {
|
||||
this.options.label.show = v
|
||||
if (this.show) {
|
||||
if (this.show && !this.showView || this.showView == 3) {
|
||||
this.label.show = v
|
||||
}
|
||||
else {
|
||||
@ -353,7 +353,7 @@ class AssembleObject extends Base {
|
||||
this.label.color = v
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -453,7 +453,7 @@ class AssembleObject extends Base {
|
||||
this.label.lineColor = v
|
||||
if (this._elms.labelLineColor) {
|
||||
this._elms.labelLineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -464,7 +464,7 @@ class AssembleObject extends Base {
|
||||
this.labelLineColor = color
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
this.labelLineColor = 'rgba(0,255,255,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.labelLineColor[i] = lineColorPicker
|
||||
@ -480,7 +480,7 @@ class AssembleObject extends Base {
|
||||
this.label.backgroundColor = [v, this.label.backgroundColor[1]]
|
||||
if (this._elms.labelBackgroundColorStart) {
|
||||
this._elms.labelBackgroundColorStart.forEach((item, i) => {
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -506,7 +506,7 @@ class AssembleObject extends Base {
|
||||
this.label.backgroundColor = [this.label.backgroundColor[0], v]
|
||||
if (this._elms.labelBackgroundColorEnd) {
|
||||
this._elms.labelBackgroundColorEnd.forEach((item, i) => {
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1171,7 +1171,7 @@ class AssembleObject extends Base {
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs('assemble-object-edit-tabs', undefined, this.sdk)
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1185,7 +1185,7 @@ class AssembleObject extends Base {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let linecolorPicker = new ewPlugins('colorpicker', {
|
||||
let linecolorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("lineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1199,7 +1199,7 @@ class AssembleObject extends Base {
|
||||
this.lineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1213,7 +1213,7 @@ class AssembleObject extends Base {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labellineColorPicker = new ewPlugins('colorpicker', {
|
||||
let labellineColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelLineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1227,7 +1227,7 @@ class AssembleObject extends Base {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorStart")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1241,7 +1241,7 @@ class AssembleObject extends Base {
|
||||
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
},
|
||||
})
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorEnd")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
|
||||
@ -24,7 +24,7 @@ class AttackArrowObject extends Base {
|
||||
* @param options {object} 属性
|
||||
* @param options.show=true {boolean} 显示/隐藏
|
||||
* @param options.name {string} 名称
|
||||
* @param options.color="#36c4ff" {string} 颜色
|
||||
* @param options.color="#ff000080" {string} 颜色
|
||||
* @param options.height {number} 高度
|
||||
* @param options.heightMode=2{number} 高度模式(0:海拔高度;1:相对地表;2:依附模式)
|
||||
* @param {Array.<object>} options.positions 坐标数组 [{lon,lat,alt},...]
|
||||
@ -34,13 +34,13 @@ class AttackArrowObject extends Base {
|
||||
constructor(sdk, options = {}, _Dialog = {}) {
|
||||
super(sdk, options);
|
||||
this.options.name = options.name || '未命名对象'
|
||||
this.options.color = options.color || "#36c4ff"
|
||||
this.options.color = options.color || "#ff000080"
|
||||
this.options.show = (options.show || options.show === false) ? options.show : true
|
||||
this.options.positions = options.positions || []
|
||||
this.options.heightMode = (options.heightMode || options.heightMode == 0) ? options.heightMode : 2
|
||||
this.options.line = options.line || {}
|
||||
this.options.line.width = this.options.line.width || 2
|
||||
this.options.line.color = this.options.line.color || 'rgba(155, 155, 124, 0.89)'
|
||||
this.options.line.width = ((this.options.line.width || this.options.line.width === 0) ? this.options.line.width : 3)
|
||||
this.options.line.color = this.options.line.color || 'rgba(255, 0, 0, 1)'
|
||||
this.options['area-unit'] = options['area-unit'] || '平方米'
|
||||
this.entity
|
||||
this.event = new MouseEvent(this.sdk)
|
||||
@ -61,8 +61,8 @@ class AttackArrowObject extends Base {
|
||||
color: options.label.color || '#ffffff',
|
||||
lineWidth: (options.label.lineWidth || options.label.lineWidth === 0) ? options.label.lineWidth : 4,
|
||||
pixelOffset: (options.label.pixelOffset || options.label.pixelOffset === 0) ? options.label.pixelOffset : 20,
|
||||
backgroundColor: options.label.backgroundColor || ['#42c6ef', '#42c6ef'],
|
||||
lineColor: options.label.lineColor || '#fff000',
|
||||
backgroundColor: options.label.backgroundColor || ['#00ffff80', '#00ffff80'],
|
||||
lineColor: options.label.lineColor || '#00ffff80',
|
||||
scaleByDistance: options.label.scaleByDistance || false,
|
||||
near: (options.label.near || options.label.near === 0) ? options.label.near : 2000,
|
||||
far: (options.label.far || options.label.far === 0) ? options.label.far : 100000,
|
||||
@ -110,31 +110,31 @@ class AttackArrowObject extends Base {
|
||||
return this.options.color
|
||||
}
|
||||
set color(v) {
|
||||
this.options.color = v
|
||||
this.options.color = v || 'rgba(255, 0, 0, 0.5)'
|
||||
if (!this.sdk || !this.sdk.viewer || !this.entity || !this.entity.polygon) {
|
||||
return
|
||||
}
|
||||
let material = Cesium.Color.fromCssColorString(v)
|
||||
let material = Cesium.Color.fromCssColorString(this.options.color)
|
||||
if (this.sdk.viewer.scene.mode === 2) {
|
||||
material = new Cesium.CustomColorMaterialSource({
|
||||
color: v
|
||||
color: this.options.color
|
||||
})
|
||||
}
|
||||
this.entity.polygon.material = material
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: v,
|
||||
defaultColor: this.options.color,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (c) => {
|
||||
this.color = c
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
this.color = 'rgba(255,0,0,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.color[i] = colorPicker
|
||||
@ -243,25 +243,25 @@ class AttackArrowObject extends Base {
|
||||
return this.options.line.color
|
||||
}
|
||||
set lineColor(v) {
|
||||
this.options.line.color = v
|
||||
this.options.line.color = v || 'rgba(255, 0, 0, 0.5)'
|
||||
if (!this.sdk || !this.sdk.viewer || !this.entity || !this.entity.polyline) {
|
||||
return
|
||||
}
|
||||
this.entity.polyline.material = Cesium.Color.fromCssColorString(v)
|
||||
this.entity.polyline.material = Cesium.Color.fromCssColorString(this.options.line.color)
|
||||
if (this._elms.lineColor) {
|
||||
this._elms.lineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: v,
|
||||
defaultColor: this.options.line.color,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (c) => {
|
||||
this.lineColor = c
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.lineColor = 'rgba(255,255,255,1)'
|
||||
this.lineColor = 'rgba(255,0,0,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.lineColor[i] = lineColorPicker
|
||||
@ -273,8 +273,8 @@ class AttackArrowObject extends Base {
|
||||
return this.options.line.width
|
||||
}
|
||||
set lineWidth(v) {
|
||||
this.options.line.width = v
|
||||
this.entity.polyline.width = v
|
||||
this.options.line.width = ((v || v === 0) ? v : 3)
|
||||
this.entity.polyline.width = this.options.line.width
|
||||
this._elms.lineColor && this._elms.lineColor.forEach((item) => {
|
||||
item.value = v
|
||||
})
|
||||
@ -324,7 +324,7 @@ class AttackArrowObject extends Base {
|
||||
}
|
||||
set labelShow(v) {
|
||||
this.options.label.show = v
|
||||
if (this.show) {
|
||||
if (this.show && !this.showView || this.showView == 3) {
|
||||
this.label.show = v
|
||||
}
|
||||
else {
|
||||
@ -358,7 +358,7 @@ class AttackArrowObject extends Base {
|
||||
this.label.color = v
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -458,7 +458,7 @@ class AttackArrowObject extends Base {
|
||||
this.label.lineColor = v
|
||||
if (this._elms.labelLineColor) {
|
||||
this._elms.labelLineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -469,7 +469,7 @@ class AttackArrowObject extends Base {
|
||||
this.labelLineColor = color
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
this.labelLineColor = 'rgba(0,255,255,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.labelLineColor[i] = lineColorPicker
|
||||
@ -485,7 +485,7 @@ class AttackArrowObject extends Base {
|
||||
this.label.backgroundColor = [v, this.label.backgroundColor[1]]
|
||||
if (this._elms.labelBackgroundColorStart) {
|
||||
this._elms.labelBackgroundColorStart.forEach((item, i) => {
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -511,7 +511,7 @@ class AttackArrowObject extends Base {
|
||||
this.label.backgroundColor = [this.label.backgroundColor[0], v]
|
||||
if (this._elms.labelBackgroundColorEnd) {
|
||||
this._elms.labelBackgroundColorEnd.forEach((item, i) => {
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1182,7 +1182,7 @@ class AttackArrowObject extends Base {
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs('attack-arrow-object-edit-tabs', undefined, this.sdk)
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1196,7 +1196,7 @@ class AttackArrowObject extends Base {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let linecolorPicker = new ewPlugins('colorpicker', {
|
||||
let linecolorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("lineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1210,7 +1210,7 @@ class AttackArrowObject extends Base {
|
||||
this.lineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1224,7 +1224,7 @@ class AttackArrowObject extends Base {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labellineColorPicker = new ewPlugins('colorpicker', {
|
||||
let labellineColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelLineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1238,7 +1238,7 @@ class AttackArrowObject extends Base {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorStart")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1252,7 +1252,7 @@ class AttackArrowObject extends Base {
|
||||
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
},
|
||||
})
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorEnd")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
|
||||
@ -33,6 +33,7 @@ class ArcgisLayer extends BaseLayer {
|
||||
} else {
|
||||
this.entity = this.sdk.viewer.imageryLayers.addImageryProvider(imageryProvider,)
|
||||
}
|
||||
this.entity._id = this.options.id
|
||||
for (let i = 0; i < this.sdk.viewer.imageryLayers._layers.length; i++) {
|
||||
if (this.sdk.viewer.imageryLayers._layers[i]._imageryProvider && this.sdk.viewer.imageryLayers._layers[i]._imageryProvider._type && (this.sdk.viewer.imageryLayers._layers[i]._imageryProvider._type === 'flw' || this.sdk.viewer.imageryLayers._layers[i]._imageryProvider._type === 'jww')) {
|
||||
let layer = this.sdk.viewer.imageryLayers._layers[i]
|
||||
|
||||
@ -30,6 +30,7 @@ class GdImagery extends BaseLayer {
|
||||
} else {
|
||||
this.entity = this.sdk.viewer.imageryLayers.addImageryProvider(gdLayer,)
|
||||
}
|
||||
this.entity._id = this.options.id
|
||||
for (let i = 0; i < this.sdk.viewer.imageryLayers._layers.length; i++) {
|
||||
if (this.sdk.viewer.imageryLayers._layers[i]._imageryProvider && this.sdk.viewer.imageryLayers._layers[i]._imageryProvider._type && (this.sdk.viewer.imageryLayers._layers[i]._imageryProvider._type === 'flw' || this.sdk.viewer.imageryLayers._layers[i]._imageryProvider._type === 'jww')) {
|
||||
let layer = this.sdk.viewer.imageryLayers._layers[i]
|
||||
|
||||
@ -126,6 +126,7 @@ class Layer extends BaseLayer {
|
||||
this.entity =
|
||||
this.sdk.viewer.scene.imageryLayers.addImageryProvider(layer,)
|
||||
}
|
||||
this.entity._id = this.options.id
|
||||
for (let i = 0; i < this.sdk.viewer.imageryLayers._layers.length; i++) {
|
||||
if (this.sdk.viewer.imageryLayers._layers[i]._imageryProvider && this.sdk.viewer.imageryLayers._layers[i]._imageryProvider._type && (this.sdk.viewer.imageryLayers._layers[i]._imageryProvider._type === 'flw' || this.sdk.viewer.imageryLayers._layers[i]._imageryProvider._type === 'jww')) {
|
||||
let layer = this.sdk.viewer.imageryLayers._layers[i]
|
||||
|
||||
@ -37,6 +37,7 @@ class Layer3rdparty extends BaseLayer {
|
||||
this.entity =
|
||||
this.sdk.viewer.scene.imageryLayers.addImageryProvider(layer,)
|
||||
}
|
||||
this.entity._id = this.options.id
|
||||
for (let i = 0; i < this.sdk.viewer.imageryLayers._layers.length; i++) {
|
||||
if (this.sdk.viewer.imageryLayers._layers[i]._imageryProvider && this.sdk.viewer.imageryLayers._layers[i]._imageryProvider._type && (this.sdk.viewer.imageryLayers._layers[i]._imageryProvider._type === 'flw' || this.sdk.viewer.imageryLayers._layers[i]._imageryProvider._type === 'jww')) {
|
||||
let layer = this.sdk.viewer.imageryLayers._layers[i]
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
import Dialog from '../../../Element/Dialog';
|
||||
import CoordTransform from "../../../../transform/CoordTransform";
|
||||
import BaseSource from "../index";
|
||||
import { syncData } from '../../../../Global/MultiViewportMode'
|
||||
import { syncData, get2DView } from '../../../../Global/MultiViewportMode'
|
||||
import { setSplitDirection, syncSplitData } from '../../../../Global/SplitScreen'
|
||||
import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../../Global/global'
|
||||
|
||||
@ -28,11 +28,11 @@ class BaseLayer extends BaseSource {
|
||||
}
|
||||
|
||||
get layerIndex() {
|
||||
return this.entity._layerIndex
|
||||
return this.entity ? this.entity._layerIndex : undefined
|
||||
}
|
||||
|
||||
get layer_index() {
|
||||
return this.entity._layerIndex
|
||||
return this.entity ? this.entity._layerIndex : undefined
|
||||
}
|
||||
|
||||
get brightness() {
|
||||
@ -244,8 +244,19 @@ class BaseLayer extends BaseSource {
|
||||
this.originalOptions = this.deepCopyObj(this.options)
|
||||
this._DialogObject.close()
|
||||
this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions)
|
||||
syncData(this.sdk, this.options.id)
|
||||
// syncData(this.sdk, this.options.id)
|
||||
syncSplitData(this.sdk, this.options.id)
|
||||
let sdk2D = get2DView()
|
||||
if (sdk2D && sdk2D != this.sdk) {
|
||||
for(let i=0;i<sdk2D.viewer.imageryLayers._layers.length;i++) {
|
||||
let layer = sdk2D.viewer.imageryLayers._layers[i]
|
||||
if(layer._id && layer._id == this.options.id) {
|
||||
layer.alpha = this.options.alpha
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
closeCallBack: () => {
|
||||
this.reset()
|
||||
|
||||
@ -56,7 +56,7 @@ function html(that) {
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">视野缩放</span>
|
||||
<span class="label" style="flex: 0 0 60px;">固定大小</span>
|
||||
<input class="btn-switch" type="checkbox" @model="scaleByDistance">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -100,8 +100,8 @@ class Model extends BaseModel {
|
||||
color: options.label.color || '#ffffff',
|
||||
lineWidth: (options.label.lineWidth || options.label.lineWidth === 0) ? options.label.lineWidth : 4,
|
||||
pixelOffset: (options.label.pixelOffset || options.label.pixelOffset === 0) ? options.label.pixelOffset : 20,
|
||||
backgroundColor: options.label.backgroundColor || ['#42c6ef', '#42c6ef'],
|
||||
lineColor: options.label.lineColor || '#fff000',
|
||||
backgroundColor: options.label.backgroundColor || ['#00ffff80', '#00ffff80'],
|
||||
lineColor: options.label.lineColor || '#00ffff80',
|
||||
scaleByDistance: options.label.scaleByDistance || false,
|
||||
near: (options.label.near || options.label.near === 0) ? options.label.near : 2000,
|
||||
far: (options.label.far || options.label.far === 0) ? options.label.far : 100000,
|
||||
@ -145,15 +145,7 @@ class Model extends BaseModel {
|
||||
if (!this.sdk || !this.sdk.viewer || !this.sdk.viewer.scene) {
|
||||
return
|
||||
}
|
||||
if (!url.startsWith("http")) {
|
||||
//说明是本地的json,在磁盘中存在的
|
||||
if (!url.includes(":")) {
|
||||
if (this.options.host) {
|
||||
let o = new URL(url, this.options.host)
|
||||
url = o.href
|
||||
}
|
||||
}
|
||||
}
|
||||
url = this.replaceHost(url, this.options.host)
|
||||
// this.handler = new Cesium.ScreenSpaceEventHandler(
|
||||
// this.sdk.viewer.canvas
|
||||
// )
|
||||
@ -447,7 +439,7 @@ class Model extends BaseModel {
|
||||
this.entity.color = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -645,7 +637,7 @@ class Model extends BaseModel {
|
||||
|
||||
set labelShow(v) {
|
||||
this.options.label.show = v
|
||||
if (this.show) {
|
||||
if (this.show && !this.showView || this.showView == 3) {
|
||||
this.label && (this.label.show = v)
|
||||
}
|
||||
else {
|
||||
@ -679,7 +671,7 @@ class Model extends BaseModel {
|
||||
this.label && (this.label.color = v)
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -780,7 +772,7 @@ class Model extends BaseModel {
|
||||
this.label && (this.label.lineColor = v)
|
||||
if (this._elms.labelLineColor) {
|
||||
this._elms.labelLineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -791,7 +783,7 @@ class Model extends BaseModel {
|
||||
this.labelLineColor = color
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
this.labelLineColor = 'rgba(0,255,255,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.labelLineColor[i] = lineColorPicker
|
||||
@ -807,7 +799,7 @@ class Model extends BaseModel {
|
||||
this.label && (this.label.backgroundColor = [v, this.label.backgroundColor[1]])
|
||||
if (this._elms.labelBackgroundColorStart) {
|
||||
this._elms.labelBackgroundColorStart.forEach((item, i) => {
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -833,7 +825,7 @@ class Model extends BaseModel {
|
||||
this.label && (this.label.backgroundColor = [this.label.backgroundColor[0], v])
|
||||
if (this._elms.labelBackgroundColorEnd) {
|
||||
this._elms.labelBackgroundColorEnd.forEach((item, i) => {
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1336,7 +1328,9 @@ class Model extends BaseModel {
|
||||
this.name = this.options.name || '未命名对象'
|
||||
this.originalOptions = this.deepCopyObj(this.options)
|
||||
this._DialogObject.close()
|
||||
this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions)
|
||||
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)
|
||||
},
|
||||
@ -1425,7 +1419,7 @@ class Model extends BaseModel {
|
||||
}
|
||||
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1439,7 +1433,7 @@ class Model extends BaseModel {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1453,7 +1447,7 @@ class Model extends BaseModel {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelLineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1467,7 +1461,7 @@ class Model extends BaseModel {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorStart")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1481,7 +1475,7 @@ class Model extends BaseModel {
|
||||
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
},
|
||||
})
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorEnd")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
|
||||
@ -381,7 +381,7 @@ class Model2 extends BaseModel {
|
||||
this.entity.color = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -583,7 +583,7 @@ class Model2 extends BaseModel {
|
||||
this.label.color = v
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -676,7 +676,7 @@ class Model2 extends BaseModel {
|
||||
this.label.lineColor = v
|
||||
if (this._elms.lineColor) {
|
||||
this._elms.lineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -704,7 +704,7 @@ class Model2 extends BaseModel {
|
||||
this.label.backgroundColor = [v, this.labelBackgroundColorEnd]
|
||||
if (this._elms.labelBackgroundColorStart) {
|
||||
this._elms.labelBackgroundColorStart.forEach((item, i) => {
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -732,7 +732,7 @@ class Model2 extends BaseModel {
|
||||
this.label.backgroundColor = [this.labelBackgroundColorStart, v]
|
||||
if (this._elms.labelBackgroundColorEnd) {
|
||||
this._elms.labelBackgroundColorEnd.forEach((item, i) => {
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1098,7 +1098,7 @@ class Model2 extends BaseModel {
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs('model-edit-tabs', undefined, this.sdk)
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1112,7 +1112,7 @@ class Model2 extends BaseModel {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("label_color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1126,7 +1126,7 @@ class Model2 extends BaseModel {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("line_color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1140,7 +1140,7 @@ class Model2 extends BaseModel {
|
||||
this.lineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorStart")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1154,7 +1154,7 @@ class Model2 extends BaseModel {
|
||||
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
},
|
||||
})
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorEnd")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
|
||||
@ -78,6 +78,11 @@ class BaseTerrain extends BaseSource {
|
||||
close() {
|
||||
this.sdk.viewer.scene.terrainProvider =
|
||||
new Cesium.EllipsoidTerrainProvider({})
|
||||
for (let i = 0; i < YJ.Analysis.AnalysesResults.length; i++) {
|
||||
if (YJ.Analysis.AnalysesResults[i].type === 'ContourAnalysis') {
|
||||
YJ.Analysis.AnalysesResults[i].destroy()
|
||||
}
|
||||
}
|
||||
syncSplitData(this.sdk, this.options.id)
|
||||
|
||||
clearTimeout(this.#updateModelTimeout)
|
||||
@ -247,7 +252,9 @@ class BaseTerrain extends BaseSource {
|
||||
}
|
||||
this.originalOptions = this.deepCopyObj(this.options)
|
||||
this._DialogObject.close()
|
||||
this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions)
|
||||
let cdoptions = this.deepCopyObj(this.options)
|
||||
cdoptions.host = ''
|
||||
this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(cdoptions)
|
||||
},
|
||||
// resetCallBack: () => {
|
||||
// this.name = this.originalOptions.name
|
||||
|
||||
24
src/Obj/Base/BatchModel/_element.js
Normal file
24
src/Obj/Base/BatchModel/_element.js
Normal file
@ -0,0 +1,24 @@
|
||||
function html() {
|
||||
return `
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col add-type-box">
|
||||
<span class="label" style="flex: 0 0 56px;">添加方式</span>
|
||||
<div class="add-type"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">间距</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="1" max="99999" @model="spacing">
|
||||
<span class="unit">米</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
`
|
||||
}
|
||||
|
||||
export { html }
|
||||
229
src/Obj/Base/BatchModel/_element_拓展.js
Normal file
229
src/Obj/Base/BatchModel/_element_拓展.js
Normal file
@ -0,0 +1,229 @@
|
||||
import { attributeElm } from '../../Element/elm_html'
|
||||
|
||||
function html(that) {
|
||||
return `
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">颜色</span>
|
||||
<div class="color"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div style="width: 46%;">
|
||||
<div class="row add-type-box">
|
||||
<div class="lable-left-line">添加方式
|
||||
<div class="input input-select add-type" style="margin-left: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 50%;">
|
||||
<div class="row" style="margin-bottom: 5px;">
|
||||
<div class="col">
|
||||
<span class="label">朝向偏移</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="0" max="360" @model="deviation">
|
||||
<span class="unit">°</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4>模型间隔</h4>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;">
|
||||
<input type="checkbox" class="YJ-custom-checkbox">
|
||||
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">自定义距离</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;">
|
||||
<input type="checkbox" class="YJ-custom-checkbox">
|
||||
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">固定距离</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">模型间隔</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="0" max="360" @model="spacing">
|
||||
<span class="unit">米</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4>线型选择</h4>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;">
|
||||
<input type="checkbox" class="YJ-custom-checkbox">
|
||||
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">折线</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;">
|
||||
<input type="checkbox" class="YJ-custom-checkbox">
|
||||
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">曲线</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">线条数量</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="0" max="360" @model="lineNum">
|
||||
<span class="unit">条</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">线条间隔</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="0" max="360" @model="lineSpacing">
|
||||
<span class="unit">米</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;">
|
||||
<input type="checkbox" class="YJ-custom-checkbox">
|
||||
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">随机采样</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">随机数量</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="0" max="360" @model="lineNum">
|
||||
<span class="unit">个</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;">
|
||||
<input type="checkbox" class="YJ-custom-checkbox">
|
||||
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">网格采样</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">首边间隔</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="0" max="360" @model="fistLineSpacing">
|
||||
<span class="unit">米</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">次边间隔</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="0" max="360" @model="secondLineSpacing">
|
||||
<span class="unit">米</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="row">
|
||||
<DIV-cy-tabs id="point-object-edit-tabs">
|
||||
<DIV-cy-tab-pane label="空间信息">
|
||||
<div class="row">
|
||||
<div class="col height-mode-box">
|
||||
<span class="label" style="flex: 0 0 56px;">高度模式</span>
|
||||
<div class="height-mode"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="width: 46%;">
|
||||
<div class="row add-type-box">
|
||||
<div class="lable-left-line">缩放
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;">
|
||||
<input type="checkbox" class="YJ-custom-checkbox">
|
||||
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">是否等比例缩放</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DIV-cy-tab-pane>
|
||||
<DIV-cy-tab-pane label="标注风格">
|
||||
<div>
|
||||
<div class="row" style="margin-bottom: 10px;">
|
||||
<div class="col">
|
||||
<span class="label">新增模型风格设置</span>
|
||||
<button @click="openRichTextEditor">初始风格</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button @click="openRichTextEditor">当前风格</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="margin-bottom: 10px;">
|
||||
<div class="col" style="flex: 0 0 80px;">
|
||||
<span class="label" style="flex: none;">显隐</span>
|
||||
<input class="btn-switch" type="checkbox" @model="billboardShow">
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 90px;">
|
||||
<span class="label" style="flex: none;">图标</span>
|
||||
<div class="image-box" @click="clickChangeImage">
|
||||
<img class="image" src="" alt="" @model="billboardImage">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 90px;">
|
||||
<span class="label" style="flex: none;">默认图标</span>
|
||||
<div class="image-box" @click="clickChangeDefaultImage">
|
||||
<img class="image" src="" alt="" @model="billboardDefaultImage">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">图标倍数</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="0.1" max="99" @model="billboardScale">
|
||||
<span class="unit">倍</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4>文字设置</h4>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 80px;">
|
||||
<span class="label" style="flex: none;">显隐</span>
|
||||
<input class="btn-switch" type="checkbox" @model="labelShow">
|
||||
</div>
|
||||
<div class="col font-select-box">
|
||||
<span class="label" style="flex: none;">字体选择</span>
|
||||
<div class="input input-select font-select"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">文字大小</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="1" max="99" @model="labelFontSize" style="width: 70px;">
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">文字颜色</span>
|
||||
<div class="labelColor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DIV-cy-tab-pane>
|
||||
</DIV-cy-tabs>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
`
|
||||
}
|
||||
|
||||
export { html }
|
||||
92
src/Obj/Base/BatchModel/eventBinding.js
Normal file
92
src/Obj/Base/BatchModel/eventBinding.js
Normal file
@ -0,0 +1,92 @@
|
||||
class eventBinding {
|
||||
constructor() {
|
||||
this.element = {}
|
||||
}
|
||||
static event = {}
|
||||
|
||||
getEvent(name) {
|
||||
return eventBinding.event[name]
|
||||
}
|
||||
|
||||
getEventAll() {
|
||||
return eventBinding.event
|
||||
}
|
||||
|
||||
setEvent(name, event) {
|
||||
eventBinding.event[name] = event
|
||||
}
|
||||
|
||||
on(that, elements) {
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
let Event = []
|
||||
let isEvent = false
|
||||
let removeName = []
|
||||
if (!elements[i] || !elements[i].attributes) {
|
||||
continue;
|
||||
}
|
||||
for (let m of elements[i].attributes) {
|
||||
switch (m.name) {
|
||||
case '@model': {
|
||||
isEvent = true
|
||||
if (elements[i].type == 'checkbox') {
|
||||
Event.push((e) => { that[m.value] = e.target.checked })
|
||||
elements[i].checked = that[m.value]
|
||||
}
|
||||
else {
|
||||
Event.push((e) => {
|
||||
let value = e.target.value
|
||||
if (e.target.type == 'number') {
|
||||
value = Number(value)
|
||||
}
|
||||
that[m.value] = value
|
||||
})
|
||||
if (elements[i].nodeName == 'IMG') {
|
||||
elements[i].src = that[m.value]
|
||||
}
|
||||
else {
|
||||
elements[i].value = that[m.value]
|
||||
}
|
||||
}
|
||||
if (this.element[m.value]) {
|
||||
this.element[m.value].push(elements[i])
|
||||
}
|
||||
else {
|
||||
this.element[m.value] = [elements[i]]
|
||||
}
|
||||
removeName.push(m.name)
|
||||
break;
|
||||
}
|
||||
case '@click': {
|
||||
elements[i].addEventListener('click', (e) => {
|
||||
if (typeof (that.Dialog[m.value]) === 'function') {
|
||||
that.Dialog[m.value](e)
|
||||
}
|
||||
});
|
||||
removeName.push(m.name)
|
||||
// elements[i].attributes.removeNamedItem(m.name)
|
||||
break;
|
||||
}
|
||||
}
|
||||
// elements[i].attributes[m] = undefined
|
||||
}
|
||||
for (let n = 0; n < removeName.length; n++) {
|
||||
elements[i].attributes.removeNamedItem(removeName[n])
|
||||
}
|
||||
|
||||
if (isEvent) {
|
||||
let ventType = 'input'
|
||||
if (elements[i].tagName != 'INPUT' || elements[i].type == 'checkbox') {
|
||||
ventType = 'change'
|
||||
}
|
||||
elements[i].addEventListener(ventType, (e) => {
|
||||
for (let t = 0; t < Event.length; t++) {
|
||||
Event[t](e)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const EventBinding = new eventBinding();
|
||||
export default EventBinding;
|
||||
725
src/Obj/Base/BatchModel/index.js
Normal file
725
src/Obj/Base/BatchModel/index.js
Normal file
@ -0,0 +1,725 @@
|
||||
/**
|
||||
* @description 批量模型
|
||||
*/
|
||||
import Dialog from '../../Element/Dialog';
|
||||
import { html } from "./_element";
|
||||
import EventBinding from '../../Element/Dialog/eventBinding';
|
||||
import Base from "../index";
|
||||
import Tools from "../../../Tools";
|
||||
import { syncData } from '../../../Global/MultiViewportMode'
|
||||
import Model from '../BaseSource/BaseModel/Model'
|
||||
import { legp } from '../../Element/datalist'
|
||||
|
||||
import DrawPolyline from '../../../Draw/drawPolyline'
|
||||
import DrawPolygon from '../../../Draw/drawPolygon'
|
||||
import DrawThreeRect from '../../../Draw/drawThreeRect'
|
||||
import DrawPoint from '../../../Draw/drawPoint'
|
||||
import { setActiveViewer, closeRotateAround, closeViewFollow, CesiumContainer } from '../../../Global/global'
|
||||
|
||||
import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen'
|
||||
|
||||
class BatchModel extends Base {
|
||||
/**
|
||||
* @constructor
|
||||
* @param sdk
|
||||
* @description 批量模型
|
||||
* @param options {object} 批量模型属性
|
||||
* @param options.name=未命名对象 {string} 名称
|
||||
* @param options.type=polygon {string} 线类型(line,polygon)
|
||||
* @param options.url=polygon {string} 线类型(line,polygon,point)
|
||||
* @param options.spacing= {number} 间距
|
||||
* @param options.show=true {boolean}
|
||||
* @param Dialog {object} 弹框对象
|
||||
* @param Dialog.confirmCallBack {function} 弹框确认时的回调
|
||||
* */
|
||||
constructor(sdk, options = {}, callback = null, _Dialog = {}) {
|
||||
super(sdk, options);
|
||||
this.viewer = this.sdk.viewer
|
||||
this.options.name = options.name || '批量模型'
|
||||
this.options.type = options.type || '面'
|
||||
this.options.url = options.url || ''
|
||||
this.options.spacing = options.spacing * 1 || 50
|
||||
this.options.positions = options.positions || []
|
||||
this.options.show = (options.show || options.show === false) ? options.show : true
|
||||
this.callback = callback
|
||||
this.Dialog = _Dialog
|
||||
this._EventBinding = new EventBinding()
|
||||
this._elms = {};
|
||||
this.pointArr = []
|
||||
// this.sdk.addIncetance(this.options.id, this)
|
||||
let tools = new Tools(sdk)
|
||||
// BatchModel.computeDis(this)
|
||||
// if (this.options.positions.length > 0 || this.options.positions.lng) {
|
||||
if (this.options.spacing < 0 || options.spacing * 1 === 0) {
|
||||
tools.message({ type: 'warning', text: '请输入正确的间距!' })
|
||||
return;
|
||||
}
|
||||
if ((options.type && options.spacing != undefined) || options.type == '点') {
|
||||
// BatchModel.computeDis(this)
|
||||
|
||||
let Draw
|
||||
console.log('kkkkk')
|
||||
switch (options.type) {
|
||||
case '点':
|
||||
Draw = new DrawPoint(this.sdk)
|
||||
break;
|
||||
case '线':
|
||||
Draw = new DrawPolyline(this.sdk)
|
||||
break;
|
||||
case '面':
|
||||
Draw = new DrawThreeRect(this.sdk)
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
Draw && Draw.start((a, positions) => {
|
||||
this.options.positions = positions;
|
||||
console.log('uuuuuu')
|
||||
//判断范围是否过大
|
||||
if (positions.length != 0 || positions.lng) {
|
||||
if (options.type == '面') {
|
||||
let posi = positions.map(v => {
|
||||
return Cesium.Cartesian3.fromDegrees(v.lng, v.lat)
|
||||
})
|
||||
let dis1 = Cesium.Cartesian3.distance(posi[0], posi[1])
|
||||
let dis2 = Cesium.Cartesian3.distance(posi[1], posi[2])
|
||||
let num1 = dis1 / this.options.spacing
|
||||
let num2 = dis2 / this.options.spacing
|
||||
if (num1 * num2 > 100) {
|
||||
tools.message({ type: 'warning', text: '数量大于100,请重新绘制' })
|
||||
return;
|
||||
}
|
||||
} else if (options.type == '线') {
|
||||
let posi = positions.map(v => {
|
||||
return Cesium.Cartesian3.fromDegrees(v.lng, v.lat)
|
||||
})
|
||||
let dis = 0
|
||||
for (let i = 0; i < posi.length - 2; i++) {
|
||||
dis += Cesium.Cartesian3.distance(posi[i], posi[i + 1])
|
||||
}
|
||||
if (dis / this.options.spacing > 100) {
|
||||
tools.message({ type: 'warning', text: '数量大于100,请重新绘制' })
|
||||
return;
|
||||
}
|
||||
}
|
||||
// this.callback(this.options);
|
||||
(this.options.positions.length || this.options.positions.lng) && BatchModel.computeDis(this)
|
||||
}
|
||||
})
|
||||
|
||||
} else {
|
||||
this.edit(true)
|
||||
}
|
||||
}
|
||||
|
||||
// 计算距离
|
||||
static async computeDis(that) {
|
||||
let fromDegreesArray = []
|
||||
let arr
|
||||
let posiArr = []
|
||||
let array = []
|
||||
if (that.options.type == '面') {
|
||||
if (that.options.positions.length != 0) {
|
||||
that.options.positions.forEach(item => {
|
||||
fromDegreesArray.push(item.lng, item.lat)
|
||||
})
|
||||
// arr = that.generateInterpolatedPoints(Cesium.Cartesian3.fromDegreesArray(fromDegreesArray), that.options.spacing)
|
||||
arr = await that.computedArea(Cesium.Cartesian3.fromDegreesArray(fromDegreesArray), that.options.spacing)
|
||||
array[0] = arr
|
||||
array[1] = that.calculateRoadAngle(Cesium.Cartesian3.fromDegreesArray(fromDegreesArray)[0], Cesium.Cartesian3.fromDegreesArray(fromDegreesArray)[3])
|
||||
arr.forEach((item, index) => {
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(
|
||||
item // Cartesian3对象 {x, y, z}
|
||||
);
|
||||
const longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
||||
const latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
||||
const height = cartographic.height;
|
||||
posiArr.push({
|
||||
lng: longitude,
|
||||
lat: latitude,
|
||||
alt: height
|
||||
})
|
||||
})
|
||||
}
|
||||
} else if (that.options.type == '线') {
|
||||
if (that.options.positions.length != 0) {
|
||||
that.options.positions.forEach(item => {
|
||||
fromDegreesArray.push(item.lng, item.lat)
|
||||
})
|
||||
array = await that.linePoint(Cesium.Cartesian3.fromDegreesArray(fromDegreesArray), that.options.spacing)
|
||||
arr = array[0]
|
||||
that.pointArr = arr
|
||||
arr.forEach((item, index) => {
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(
|
||||
item // Cartesian3对象 {x, y, z}
|
||||
);
|
||||
const longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
||||
const latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
||||
const height = cartographic.height;
|
||||
posiArr.push({
|
||||
lng: longitude,
|
||||
lat: latitude,
|
||||
alt: height
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
} else if (that.options.type == '点') {
|
||||
if (that.options.positions.lng) {
|
||||
let height = await that.getClampToHeight({ lng: that.options.positions.lng, lat: that.options.positions.lat })
|
||||
posiArr = [{ lng: that.options.positions.lng, lat: that.options.positions.lat, alt: height }]
|
||||
// posiArr = [that.options.positions]
|
||||
that.pointArr = posiArr
|
||||
}
|
||||
|
||||
}
|
||||
let params = {
|
||||
type: that.options.type,
|
||||
positions: posiArr,
|
||||
rotate: that.options.type == '点' ? undefined : array[1]
|
||||
}
|
||||
that.callback(params)
|
||||
// posiArr.forEach((item, index) => {
|
||||
// let model = new Model(that.sdk, {
|
||||
// id: 'model' + index,
|
||||
// show: that.options.show,
|
||||
// url: that.options.url,
|
||||
// position: item,
|
||||
// rotate: that.options.type == '点' ? undefined : { x: 0, y: 0, z: array[1] && (array[1][index] || array[1]) }
|
||||
// })
|
||||
// that.pointArr.push(model)
|
||||
// })
|
||||
}
|
||||
async linePoint(polygonPositions, spacing) {
|
||||
let boundaryPoints = [];
|
||||
let boundaryAngle = [];
|
||||
for (let i = 0; i < polygonPositions.length - 1; i++) {
|
||||
|
||||
const start = polygonPositions[i];
|
||||
const end = polygonPositions[(i + 1) % polygonPositions.length];
|
||||
const segmentLength = Cesium.Cartesian3.distance(start, end);
|
||||
const segments = Math.ceil(segmentLength / spacing);
|
||||
|
||||
for (let j = 0; j <= segments; j++) {
|
||||
const ratio = j / segments;
|
||||
let point = Cesium.Cartesian3.lerp(
|
||||
start, end, ratio, new Cesium.Cartesian3()
|
||||
);
|
||||
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(
|
||||
point // Cartesian3对象 {x, y, z}
|
||||
);
|
||||
const longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
||||
const latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
||||
|
||||
|
||||
let height = await this.getClampToHeight({ lng: longitude, lat: latitude })
|
||||
point = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
|
||||
|
||||
boundaryPoints.push(point);
|
||||
if (j != segments || i == polygonPositions.length - 2) {
|
||||
boundaryAngle.push(this.calculateRoadAngle(start, end))
|
||||
}
|
||||
}
|
||||
}
|
||||
return [[...new Set(boundaryPoints
|
||||
.map(p => `${p.x},${p.y},${p.z}`))]
|
||||
.map(str => {
|
||||
const [x, y, z] = str.split(',').map(Number);
|
||||
return new Cesium.Cartesian3(x, y, z);
|
||||
}), boundaryAngle];
|
||||
}
|
||||
calculateRoadAngle(startPoint, endPoint) {
|
||||
const normal = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(startPoint);
|
||||
const enuMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(startPoint, undefined, normal);
|
||||
const inverseMatrix = Cesium.Matrix4.inverse(enuMatrix, new Cesium.Matrix4());
|
||||
|
||||
const localEnd = Cesium.Matrix4.multiplyByPoint(inverseMatrix, endPoint, new Cesium.Cartesian3());
|
||||
const horizontalVec = new Cesium.Cartesian2(localEnd.x, localEnd.y);
|
||||
Cesium.Cartesian2.normalize(horizontalVec, horizontalVec);
|
||||
|
||||
const north = new Cesium.Cartesian2(1, 0);
|
||||
|
||||
let angle = Cesium.Cartesian2.angleBetween(north, horizontalVec);
|
||||
angle = Cesium.Math.toDegrees(angle)
|
||||
const cross = Cesium.Cartesian2.cross(north, horizontalVec, new Cesium.Cartesian2());
|
||||
// return cross < 0 ? angle : - angle;
|
||||
return cross < 0 ? -angle : angle;
|
||||
}
|
||||
generateInterpolatedPoints(polygonPositions, spacing) {
|
||||
// 1. 边界点插值
|
||||
const boundaryPoints = [];
|
||||
|
||||
for (let i = 0; i < polygonPositions.length; i++) {
|
||||
|
||||
const start = polygonPositions[i];
|
||||
const end = polygonPositions[(i + 1) % polygonPositions.length];
|
||||
const segmentLength = Cesium.Cartesian3.distance(start, end);
|
||||
const segments = Math.ceil(segmentLength / spacing);
|
||||
|
||||
for (let j = 0; j <= segments; j++) {
|
||||
const ratio = j / segments;
|
||||
const point = Cesium.Cartesian3.lerp(
|
||||
start, end, ratio, new Cesium.Cartesian3()
|
||||
);
|
||||
boundaryPoints.push(point);
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 内部网格生成
|
||||
const extent = this.computePolygonExtent(polygonPositions);
|
||||
let result = this.createGridFromBBox(extent, this.options.spacing)
|
||||
// const extent = Cesium.Rectangle.fromCartesianArray(polygonPositions);
|
||||
|
||||
const gridPoints = [];
|
||||
// const polygon = new Cesium.PolygonHierarchy(polygonPositions);
|
||||
var polygon = []
|
||||
this.options.positions.forEach(item => {
|
||||
polygon.push([item.lng, item.lat])
|
||||
})
|
||||
polygon.push(polygon[0])
|
||||
for (let x = extent.west; x <= extent.east; x += result.lonStep) {
|
||||
for (let y = extent.south; y <= extent.north; y += result.latStep) {
|
||||
const position = Cesium.Cartesian3.fromDegrees(x, y);
|
||||
const point = turf.point([x, y]);
|
||||
const polygonTurf = turf.polygon([polygon]);
|
||||
const isInside = turf.booleanPointInPolygon(point, polygonTurf);
|
||||
isInside && gridPoints.push(position)
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 合并结果并去重
|
||||
// return [...new Set([...boundaryPoints, ...gridPoints]
|
||||
return [...new Set([...gridPoints]
|
||||
.map(p => `${p.x},${p.y},${p.z}`))]
|
||||
.map(str => {
|
||||
const [x, y, z] = str.split(',').map(Number);
|
||||
return new Cesium.Cartesian3(x, y, z);
|
||||
});
|
||||
}
|
||||
|
||||
createGridFromBBox(bbox, spacing) {
|
||||
const earthRadius = 6378137; // WGS84椭球体长半轴
|
||||
// 计算经度方向网格数
|
||||
const lonDistance = Cesium.Cartesian3.distance(
|
||||
Cesium.Cartesian3.fromDegrees(bbox.west, (bbox.south + bbox.north) / 2, 0),
|
||||
Cesium.Cartesian3.fromDegrees(bbox.east, (bbox.south + bbox.north) / 2, 0)
|
||||
);
|
||||
const lonCount = Math.ceil(lonDistance / spacing);
|
||||
|
||||
// 计算纬度方向网格数
|
||||
const latDistance = Cesium.Cartesian3.distance(
|
||||
Cesium.Cartesian3.fromDegrees((bbox.west + bbox.east) / 2, bbox.south, 0),
|
||||
Cesium.Cartesian3.fromDegrees((bbox.west + bbox.east) / 2, bbox.north, 0)
|
||||
);
|
||||
const latCount = Math.ceil(latDistance / spacing);
|
||||
// 生成网格线
|
||||
const lonStep = (bbox.east - bbox.west) / lonCount;
|
||||
const latStep = (bbox.north - bbox.south) / latCount;
|
||||
return { lonStep, latStep }
|
||||
}
|
||||
|
||||
computePolygonExtent(positions) {
|
||||
// 计算多边形经纬度范围
|
||||
const cartographics = positions.map(p =>
|
||||
Cesium.Cartographic.fromCartesian(p));
|
||||
const lons = cartographics.map(c => Cesium.Math.toDegrees(c.longitude));
|
||||
const lats = cartographics.map(c => Cesium.Math.toDegrees(c.latitude));
|
||||
return {
|
||||
west: Math.min(...lons),
|
||||
east: Math.max(...lons),
|
||||
south: Math.min(...lats),
|
||||
north: Math.max(...lats)
|
||||
};
|
||||
}
|
||||
async computedArea(polygonPositions, spacing) {
|
||||
let dis12 = Cesium.Cartesian3.distance(polygonPositions[0], polygonPositions[1]);
|
||||
let dis23 = Cesium.Cartesian3.distance(polygonPositions[1], polygonPositions[2]);
|
||||
let vec12 = Cesium.Cartesian3.subtract(polygonPositions[1], polygonPositions[0], new Cesium.Cartesian3());
|
||||
let vec23 = Cesium.Cartesian3.subtract(polygonPositions[2], polygonPositions[1], new Cesium.Cartesian3());
|
||||
|
||||
let num12 = Math.ceil(dis12 / spacing);
|
||||
let num23 = Math.ceil(dis23 / spacing);
|
||||
|
||||
let line1 = []
|
||||
for (let i = 0; i < num12; i++) {
|
||||
line1.push(await this.calculatePointB(polygonPositions[0], polygonPositions[1], i * spacing))
|
||||
}
|
||||
let line2 = []
|
||||
for (let i = 0; i < num12; i++) {
|
||||
line2.push(await this.calculatePointB(polygonPositions[3], polygonPositions[2], i * spacing))
|
||||
}
|
||||
|
||||
let allPoints = []
|
||||
for (let i = 0; i < line1.length; i++) {
|
||||
for (let j = 0; j < num23; j++) {
|
||||
allPoints.push(await this.calculatePointB(line1[i], line2[i], j * spacing))
|
||||
}
|
||||
}
|
||||
return allPoints
|
||||
}
|
||||
async calculatePointB(pointA, pointC, distance) {
|
||||
// 将输入坐标转换为Cartesian3类型
|
||||
// const pointA = Cesium.Cartesian3.fromDegrees(a.longitude, a.latitude, a.height);
|
||||
// const pointC = Cesium.Cartesian3.fromDegrees(c.longitude, c.latitude, c.height);
|
||||
|
||||
// 计算向量AC
|
||||
const vectorAC = Cesium.Cartesian3.subtract(pointC, pointA, new Cesium.Cartesian3());
|
||||
|
||||
// 计算向量AC的长度
|
||||
const lengthAC = Cesium.Cartesian3.magnitude(vectorAC);
|
||||
|
||||
// 归一化向量AC
|
||||
const unitVector = Cesium.Cartesian3.normalize(vectorAC, new Cesium.Cartesian3());
|
||||
|
||||
// 计算点B坐标
|
||||
const scaledVector = Cesium.Cartesian3.multiplyByScalar(unitVector, distance, new Cesium.Cartesian3());
|
||||
const pointB = Cesium.Cartesian3.add(pointA, scaledVector, new Cesium.Cartesian3());
|
||||
|
||||
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(
|
||||
pointB // Cartesian3对象 {x, y, z}
|
||||
);
|
||||
const longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
||||
const latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
||||
|
||||
|
||||
let height = await this.getClampToHeight({ lng: longitude, lat: latitude })
|
||||
let point = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
|
||||
// 转换回经纬度
|
||||
// const cartographic = Cesium.Cartographic.fromCartesian(pointB);
|
||||
// return {
|
||||
// longitude: Cesium.Math.toDegrees(cartographic.longitude),
|
||||
// latitude: Cesium.Math.toDegrees(cartographic.latitude),
|
||||
// height: cartographic.height
|
||||
// };
|
||||
// return pointB
|
||||
return point
|
||||
}
|
||||
get show() {
|
||||
return this.options.show
|
||||
}
|
||||
|
||||
set show(v) {
|
||||
this.options.show = v
|
||||
for (let i = 0; i < this.pointArr.length; i++) {
|
||||
this.pointArr[i].show = v
|
||||
}
|
||||
}
|
||||
get type() {
|
||||
return this.options.type
|
||||
}
|
||||
|
||||
set type(v) {
|
||||
this.options.type = v
|
||||
this._elms.type &&
|
||||
this._elms.type.forEach(item => {
|
||||
item.value = v
|
||||
})
|
||||
}
|
||||
get spacing() {
|
||||
return this.options.spacing
|
||||
}
|
||||
|
||||
set spacing(v) {
|
||||
this.options.spacing = v
|
||||
this._elms.spacing &&
|
||||
this._elms.spacing.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.originalOptions, {
|
||||
title: '默认模型参数设置', left: '180px', top: '100px',
|
||||
confirmCallBack: (options) => {
|
||||
this.name = this.name.trim()
|
||||
if (!this.name) {
|
||||
// this.name = '未命名对象'
|
||||
this.name = '飞线'
|
||||
}
|
||||
|
||||
let Draw
|
||||
switch (this.options.type) {
|
||||
case '点':
|
||||
Draw = new DrawPoint(this.sdk)
|
||||
break;
|
||||
case '线':
|
||||
Draw = new DrawPolyline(this.sdk)
|
||||
break;
|
||||
case '面':
|
||||
Draw = new DrawThreeRect(this.sdk)
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
Draw && Draw.start((a, positions) => {
|
||||
this.options.positions = positions;
|
||||
// this.callback(this.options);
|
||||
(this.options.positions.length || this.options.positions.lng) && BatchModel.computeDis(this)
|
||||
})
|
||||
|
||||
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()
|
||||
// console.log('22222')
|
||||
// this.Dialog.resetCallBack && this.Dialog.resetCallBack()
|
||||
// },
|
||||
// removeCallBack: () => {
|
||||
// console.log('33333')
|
||||
// this.Dialog.removeCallBack && this.Dialog.removeCallBack()
|
||||
// },
|
||||
closeCallBack: () => {
|
||||
this.reset()
|
||||
// this.entity.style = new Cesium.Cesium3DTileStyle({
|
||||
// color: "color('rgba(255,255,255," + this.newData.transparency + ")')",
|
||||
// show: true,
|
||||
// });
|
||||
this.Dialog.closeCallBack && this.Dialog.closeCallBack()
|
||||
},
|
||||
addFootElm: [
|
||||
{
|
||||
tagName: 'button',
|
||||
className: 'flipe-over-y',
|
||||
innerHTML: '重置',
|
||||
event: [
|
||||
'click',
|
||||
() => {
|
||||
this.reset()
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
// showCallBack: (show) => {
|
||||
// this.show = show
|
||||
// this.Dialog.showCallBack && this.Dialog.showCallBack()
|
||||
// }
|
||||
}, true)
|
||||
this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' flow-line-surface'
|
||||
let contentElm = document.createElement('div');
|
||||
contentElm.innerHTML = html()
|
||||
this._DialogObject.contentAppChild(contentElm)
|
||||
// 颜色组件
|
||||
// let waterColorPicker = new YJColorPicker({
|
||||
// el: contentElm.getElementsByClassName("flowLine-color")[0],
|
||||
// size: 'mini',//颜色box类型
|
||||
// alpha: true,//是否开启透明度
|
||||
// defaultColor: this.color,
|
||||
// disabled: false,//是否禁止打开颜色选择器
|
||||
// openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
// sure: (color) => {
|
||||
// this.color = color
|
||||
// },//点击确认按钮事件回调
|
||||
// clear: () => {
|
||||
// this.color = 'rgba(255,255,255,1)'
|
||||
// },//点击清空按钮事件回调
|
||||
// })
|
||||
|
||||
let all_elm = contentElm.getElementsByTagName("*")
|
||||
this._EventBinding.on(this, all_elm)
|
||||
this._elms = this._EventBinding.element
|
||||
|
||||
let nameData = [
|
||||
{
|
||||
name: '点',
|
||||
value: '点',
|
||||
},
|
||||
{
|
||||
name: '线',
|
||||
value: '线',
|
||||
},
|
||||
{
|
||||
name: '面',
|
||||
value: '面',
|
||||
}
|
||||
]
|
||||
|
||||
let nameDataLegpObject = legp(
|
||||
this._DialogObject._element.content.getElementsByClassName(
|
||||
'add-type-box'
|
||||
)[0],
|
||||
'.add-type'
|
||||
)
|
||||
if (nameDataLegpObject) {
|
||||
nameDataLegpObject.legp_search(nameData)
|
||||
let nameDataLegpElm = this._DialogObject._element.content
|
||||
.getElementsByClassName('add-type')[0]
|
||||
.getElementsByTagName('input')[0]
|
||||
this._elms.type = [nameDataLegpElm]
|
||||
nameDataLegpElm.value = this.options.type
|
||||
for (let i = 0; i < nameData.length; i++) {
|
||||
if (nameData[i].value === nameDataLegpElm.value) {
|
||||
nameDataLegpObject.legp_searchActive(nameData[i].value)
|
||||
break
|
||||
}
|
||||
}
|
||||
nameDataLegpElm.addEventListener('input', () => {
|
||||
for (let i = 0; i < nameData.length; i++) {
|
||||
if (nameData[i].value === nameDataLegpElm.value) {
|
||||
this.type = nameData[i].value
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// this._elms.color = [waterColorPicker]
|
||||
} 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
|
||||
// }
|
||||
}
|
||||
}
|
||||
drawArea() {
|
||||
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.name = this.originalOptions.name
|
||||
this.type = this.originalOptions.type
|
||||
this.spacing = this.originalOptions.spacing
|
||||
this.show = this.originalOptions.show
|
||||
this.options.spacing = this.originalOptions.spacing
|
||||
}
|
||||
|
||||
/**
|
||||
* 飞到对应实体
|
||||
*/
|
||||
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[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 positionArray = []
|
||||
if (this.options.positions.length > 0) {
|
||||
for (let i = 0; i < this.options.positions.length; i++) {
|
||||
let a = Cesium.Cartesian3.fromDegrees(
|
||||
this.options.positions[i].lng,
|
||||
this.options.positions[i].lat,
|
||||
this.options.positions[i].alt
|
||||
)
|
||||
positionArray.push(a.x, a.y, a.z)
|
||||
}
|
||||
let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray)
|
||||
this.viewer.camera.flyToBoundingSphere(BoundingSphere, {
|
||||
offset: {
|
||||
heading: Cesium.Math.toRadians(0.0),
|
||||
pitch: Cesium.Math.toRadians(-20.0),
|
||||
roll: Cesium.Math.toRadians(0.0)
|
||||
}
|
||||
})
|
||||
} else if (this.options.positions.lng) {
|
||||
let orientation = {
|
||||
heading: Cesium.Math.toRadians(0.0),
|
||||
pitch: Cesium.Math.toRadians(-60.0),
|
||||
roll: Cesium.Math.toRadians(0.0)
|
||||
}
|
||||
this.sdk.viewer.camera.flyTo({
|
||||
destination: Cesium.Cartesian3.fromDegrees(this.options.positions.lng, this.options.positions.lat, this.options.positions.alt + 100),
|
||||
// orientation: orientation
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
async remove() {
|
||||
for (let i = 0; i < this.pointArr.length; i++) {
|
||||
this.pointArr[i].remove()
|
||||
}
|
||||
|
||||
this.pointArr = []
|
||||
this.positions = []
|
||||
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)
|
||||
}
|
||||
|
||||
flicker() { }
|
||||
}
|
||||
|
||||
export default BatchModel
|
||||
@ -29,7 +29,8 @@ import MouseTip from '../../../MouseTip'
|
||||
import {
|
||||
setSplitDirection,
|
||||
syncSplitData,
|
||||
setActiveId
|
||||
setActiveId,
|
||||
getState
|
||||
} from '../../../Global/SplitScreen'
|
||||
import {
|
||||
setActiveViewer,
|
||||
@ -40,6 +41,11 @@ import {
|
||||
import { getGoodsList } from '../../../Tools/getGoodsList'
|
||||
|
||||
class BillboardObject extends Base {
|
||||
#_postRenderEvent = null
|
||||
#_destroyMouseEvent = null
|
||||
#_billboardHeight = 0
|
||||
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @description 创建点标注
|
||||
@ -63,9 +69,9 @@ class BillboardObject extends Base {
|
||||
*@param options.label {object} 标注文字的参数
|
||||
*@param [options.label.text] {string} 标注中文字
|
||||
*@param [options.label.show=true] {boolean} 标注文字显示/隐藏
|
||||
*@param [options.label.fontFamily=0] {number} 标注文字字体 0:思源黑体;1:庞门正道标题体;2:数黑体
|
||||
*@param [options.label.fontFamily=0] {number} 标注文字字体 0:黑体;1:思源黑体;2:庞门正道标题体;3:数黑体
|
||||
*@param [options.label.fontSize=39] {number} 标注文字大小 单位px,微软雅黑
|
||||
*@param [options.label.color=#07f8e4] {string} 标注文字颜色
|
||||
*@param [options.label.color=#00ffff] {string} 标注文字颜色
|
||||
*@param _Dialog {object} 弹框事件
|
||||
*@param _Dialog.confirmCallBack {function} 弹框确认时的回调
|
||||
*@param _Dialog.instructSubmit(id,name,instruct) {function} 提交指令(ID, 名称,指令内容)
|
||||
@ -107,7 +113,7 @@ class BillboardObject extends Base {
|
||||
: true
|
||||
this.options.label.fontFamily = options.label.fontFamily || 0
|
||||
this.options.label.fontSize = options.label.fontSize || 39
|
||||
this.options.label.color = options.label.color || '#FFFF00'
|
||||
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)
|
||||
@ -118,6 +124,7 @@ class BillboardObject extends Base {
|
||||
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
|
||||
@ -145,11 +152,18 @@ class BillboardObject extends Base {
|
||||
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
|
||||
|
||||
@ -182,7 +196,111 @@ class BillboardObject extends Base {
|
||||
|
||||
|
||||
|
||||
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)
|
||||
@ -211,8 +329,9 @@ class BillboardObject extends Base {
|
||||
let index = 0
|
||||
|
||||
let font = getFontFamily(that.labelFontFamily) || 'Helvetica'
|
||||
let url = that.replaceHost(that.options.billboard.image, that.options.host)
|
||||
that._frameImages = []
|
||||
if (that.options.billboard.image && that.options.billboard.image.endsWith('gif')) {
|
||||
if (url && url.endsWith('gif')) {
|
||||
isGlf = true
|
||||
switch (that.options.heightMode) {
|
||||
case 2:
|
||||
@ -222,7 +341,7 @@ class BillboardObject extends Base {
|
||||
}
|
||||
|
||||
let gifImg = document.createElement('img')
|
||||
gifImg.setAttribute('rel:animated_src', that.options.billboard.image)
|
||||
gifImg.setAttribute('rel:animated_src', url)
|
||||
gifImg.setAttribute('rel:auto_play', '1')
|
||||
const imgDiv = document.createElement('div')
|
||||
imgDiv.appendChild(gifImg)
|
||||
@ -231,7 +350,21 @@ class BillboardObject extends Base {
|
||||
that._superGif = superGif
|
||||
that._superGif.id = id // 自定义id,用于判断gif实例是否改变
|
||||
|
||||
superGif.load(function () {
|
||||
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
|
||||
}
|
||||
@ -253,13 +386,14 @@ class BillboardObject extends Base {
|
||||
return img
|
||||
}, false)
|
||||
addCluster(that.sdk, that.entity)
|
||||
that.attributeBoxState && (that.attributeBoxState = true)
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
let image = new Image()
|
||||
image.src =
|
||||
that.options.billboard.image ||
|
||||
url ||
|
||||
that.getSourceRootPath() + '/img/A-ablu-blank.png'
|
||||
switch (that.options.heightMode) {
|
||||
case 2:
|
||||
@ -284,8 +418,21 @@ class BillboardObject extends Base {
|
||||
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({
|
||||
@ -440,14 +587,45 @@ class BillboardObject extends Base {
|
||||
return this.options.show
|
||||
}
|
||||
set show(v) {
|
||||
if (!this.isShowView) {
|
||||
this.options.show = v
|
||||
this.originalOptions.show = v
|
||||
this.entity && (this.entity.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 = v
|
||||
this._DialogObject.showBtn.checked = this.options.show
|
||||
}
|
||||
|
||||
this.isShowView = false
|
||||
// if (v) {
|
||||
// if (this.diffuseShow) {
|
||||
// this.diffuseShow = true
|
||||
@ -527,6 +705,26 @@ class BillboardObject extends Base {
|
||||
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)
|
||||
}
|
||||
@ -581,6 +779,7 @@ class BillboardObject extends Base {
|
||||
}
|
||||
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()
|
||||
@ -696,11 +895,21 @@ class BillboardObject extends Base {
|
||||
}
|
||||
|
||||
get billboardImage() {
|
||||
return this.options.billboard.image
|
||||
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 = v
|
||||
this.options.billboard.image = this.replaceHost(v, this.options.host)
|
||||
let url =
|
||||
this.options.billboard.image ||
|
||||
getBillboardDefaultUrl(this.options.billboard.defaultImage) ||
|
||||
@ -729,7 +938,26 @@ class BillboardObject extends Base {
|
||||
let billboardH = 36
|
||||
let index = 0
|
||||
_this._frameImages = []
|
||||
superGif.load(function () {
|
||||
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
|
||||
}
|
||||
@ -802,6 +1030,23 @@ class BillboardObject extends Base {
|
||||
}, 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)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -860,22 +1105,22 @@ class BillboardObject extends Base {
|
||||
return this.options.label.color
|
||||
}
|
||||
set labelColor(v) {
|
||||
this.options.label.color = v
|
||||
this.options.label.color = v || '#00ffff'
|
||||
this.renewPoint()
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: v,
|
||||
defaultColor: this.options.label.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: c => {
|
||||
this.labelColor = c
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
this.labelColor = 'rgba(0,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
this._elms.labelColor[i] = colorPicker
|
||||
@ -937,7 +1182,7 @@ class BillboardObject extends Base {
|
||||
// this.options.diffuseColor = v
|
||||
// if (this._elms.diffuseColor) {
|
||||
// this._elms.diffuseColor.forEach((item, i) => {
|
||||
// let diffuseColorPicker = new ewPlugins('colorpicker', {
|
||||
// let diffuseColorPicker = new YJColorPicker({
|
||||
// el: item.el,
|
||||
// size: 'mini',//颜色box类型
|
||||
// alpha: false,//是否开启透明度
|
||||
@ -1013,7 +1258,7 @@ class BillboardObject extends Base {
|
||||
// this.options.scanColor = v
|
||||
// if (this._elms.scanColor) {
|
||||
// this._elms.scanColor.forEach((item, i) => {
|
||||
// let scanColorPicker = new ewPlugins('colorpicker', {
|
||||
// let scanColorPicker = new YJColorPicker({
|
||||
// el: item.el,
|
||||
// size: 'mini',//颜色box类型
|
||||
// alpha: false,//是否开启透明度
|
||||
@ -1441,10 +1686,11 @@ class BillboardObject extends Base {
|
||||
}
|
||||
|
||||
set billboardDefaultImage(v) {
|
||||
setBillboardDefaultUrl(v, this.options.billboard.defaultImage)
|
||||
let url = this.replaceHost(v, this.options.host)
|
||||
setBillboardDefaultUrl(url, this.options.billboard.defaultImage)
|
||||
this._elms.billboardDefaultImage &&
|
||||
this._elms.billboardDefaultImage.forEach(item => {
|
||||
item.src = v
|
||||
item.src = url
|
||||
})
|
||||
}
|
||||
|
||||
@ -1519,8 +1765,10 @@ class BillboardObject extends Base {
|
||||
}
|
||||
this.originalOptions = this.deepCopyObj(this.options)
|
||||
this._DialogObject.close()
|
||||
let cdoptions = this.deepCopyObj(this.options)
|
||||
cdoptions.host = ''
|
||||
this.Dialog.confirmCallBack &&
|
||||
this.Dialog.confirmCallBack(this.originalOptions)
|
||||
this.Dialog.confirmCallBack(cdoptions)
|
||||
syncData(this.sdk, this.options.id)
|
||||
syncSplitData(this.sdk, this.options.id)
|
||||
},
|
||||
@ -1575,7 +1823,7 @@ class BillboardObject extends Base {
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs('point-object-edit-tabs', undefined, this.sdk)
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName('labelColor')[0],
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
@ -1590,7 +1838,7 @@ class BillboardObject extends Base {
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
|
||||
// let diffuseColorPicker = new ewPlugins('colorpicker', {
|
||||
// let diffuseColorPicker = new YJColorPicker({
|
||||
// el: contentElm.getElementsByClassName("diffuseColor")[0],
|
||||
// size: 'mini',//颜色box类型
|
||||
// alpha: false,//是否开启透明度
|
||||
@ -1604,7 +1852,7 @@ class BillboardObject extends Base {
|
||||
// this.diffuseColor = 'rgba(255,255,255,1)'
|
||||
// },//点击清空按钮事件回调
|
||||
// })
|
||||
// let scanColorPicker = new ewPlugins('colorpicker', {
|
||||
// let scanColorPicker = new YJColorPicker({
|
||||
// el: contentElm.getElementsByClassName("scanColor")[0],
|
||||
// size: 'mini',//颜色box类型
|
||||
// alpha: false,//是否开启透明度
|
||||
@ -1632,6 +1880,22 @@ class BillboardObject extends Base {
|
||||
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 = `
|
||||
<span class="label">属性框</span>
|
||||
<input class="btn-switch" type="checkbox">
|
||||
`
|
||||
|
||||
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'
|
||||
@ -1756,7 +2020,13 @@ class BillboardObject extends Base {
|
||||
case '2':
|
||||
case 3:
|
||||
case '3':
|
||||
this.getClampToHeight(this.options.positions).then(h => {
|
||||
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
|
||||
})
|
||||
@ -1820,7 +2090,13 @@ class BillboardObject extends Base {
|
||||
break
|
||||
case 3:
|
||||
case '3':
|
||||
this.getClampToHeight(this.options.positions).then(h => {
|
||||
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
|
||||
@ -2077,9 +2353,9 @@ class BillboardObject extends Base {
|
||||
// )
|
||||
this.entity.label.pixelOffset = new Cesium.CallbackProperty(function () {
|
||||
if (_this.options.billboard.show) {
|
||||
let billboardH =
|
||||
let billboardH = _this.entity.billboard.imgHeight ?
|
||||
_this.entity.billboard.imgHeight *
|
||||
(31 / _this.entity.billboard.imgWidth)
|
||||
(31 / _this.entity.billboard.imgWidth) : 0
|
||||
return new Cesium.Cartesian2(
|
||||
0,
|
||||
-billboardH * _this.options.billboard.scale -
|
||||
@ -2131,6 +2407,7 @@ class BillboardObject extends Base {
|
||||
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()
|
||||
}
|
||||
@ -2138,6 +2415,7 @@ class BillboardObject extends Base {
|
||||
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
|
||||
}
|
||||
@ -2262,6 +2540,9 @@ class BillboardObject extends Base {
|
||||
}
|
||||
|
||||
async updateHeight() {
|
||||
if (!this.sdk || !this.sdk.viewer || !this.sdk.viewer.scene) {
|
||||
return
|
||||
}
|
||||
let height
|
||||
let height2
|
||||
let point1 = new Cesium.Cartesian3.fromDegrees(
|
||||
@ -2274,9 +2555,14 @@ class BillboardObject extends Base {
|
||||
this.options.positions.lat,
|
||||
10000000000000
|
||||
)
|
||||
let updatedCartesians = await this.sdk.viewer.scene.clampToHeightMostDetailed(
|
||||
[point1]
|
||||
)
|
||||
|
||||
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
|
||||
}
|
||||
@ -2320,6 +2606,7 @@ class BillboardObject extends Base {
|
||||
}
|
||||
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
|
||||
@ -2335,6 +2622,7 @@ class BillboardObject extends Base {
|
||||
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) {
|
||||
@ -2350,15 +2638,18 @@ class BillboardObject extends Base {
|
||||
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
|
||||
}
|
||||
}
|
||||
@ -2415,7 +2706,13 @@ class BillboardObject extends Base {
|
||||
}
|
||||
// 如果没有高度值,则获取紧贴高度计算
|
||||
if (!position.hasOwnProperty('alt')) {
|
||||
position.alt = await this.getClampToHeight(position)
|
||||
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
|
||||
@ -2426,7 +2723,13 @@ class BillboardObject extends Base {
|
||||
orientation: orientation
|
||||
})
|
||||
} else {
|
||||
let height = await this.getClampToHeight(this.options.positions)
|
||||
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(
|
||||
@ -2594,7 +2897,13 @@ class BillboardObject extends Base {
|
||||
}
|
||||
// 如果没有高度值,则获取紧贴高度计算
|
||||
if (!position.hasOwnProperty('alt')) {
|
||||
position.alt = await this.getClampToHeight(position)
|
||||
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,
|
||||
@ -2614,6 +2923,219 @@ class BillboardObject extends Base {
|
||||
(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 += `<DIV-cy-tab-pane label="${this.options.attribute.link.content[i].name}"><iframe width='100%' height='100%' src="${this.options.attribute.link.content[i].url}" ></iframe></DIV-cy-tab-pane>`
|
||||
}
|
||||
if (this.options.attribute.goods && this.options.attribute.goods.content && this.options.attribute.goods.content.length > 0) {
|
||||
goodsHtml += `<DIV-cy-tab-pane label="物资">
|
||||
<div class="table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th" style="width: 20%; flex: 0 20%;">序号</div>
|
||||
<div class="th" style="width: 40%; flex: 0 40%;">名称</div>
|
||||
<div class="th" style="width: 40%; flex: 0 40%;">数量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
`
|
||||
for (let i = 0; i < this.options.attribute.goods.content.length; i++) {
|
||||
goodsHtml += `<div class="tr">
|
||||
<div class="td" style="width: 20%; flex: 0 20%;">${i + 1}</div>
|
||||
<div class="td" style="width: 40%; flex: 0 40%;">${this.options.attribute.goods.content[i].name}</div>
|
||||
<div class="td" style="width: 40%; flex: 0 40%;">${this.options.attribute.goods.content[i].cnt}</div>
|
||||
</div>`
|
||||
}
|
||||
goodsHtml += `</div></div></DIV-cy-tab-pane>`
|
||||
}
|
||||
if (this.options.richTextContent) {
|
||||
richTextHtml = `<DIV-cy-tab-pane label="富文本">
|
||||
${this.options.richTextContent}
|
||||
</DIV-cy-tab-pane>`
|
||||
}
|
||||
|
||||
let boxHtml = `
|
||||
<span class="drag-nook left-top"></span>
|
||||
<span class="drag-nook right-top"></span>
|
||||
`
|
||||
|
||||
if (!linkHtml && !goodsHtml && !richTextHtml) {
|
||||
boxHtml = boxHtml + '<p style="margin: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;backdrop-filter: blur(2px);">暂无属性信息</p><div class="billboard-attribute-box-line"></div>'
|
||||
}
|
||||
else {
|
||||
boxHtml = boxHtml + `
|
||||
<DIV-cy-tabs class="tabs">
|
||||
${richTextHtml}
|
||||
${goodsHtml}
|
||||
${linkHtml}
|
||||
</DIV-cy-tabs>
|
||||
<div class="billboard-attribute-box-line"></div>`
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
@ -6,7 +6,7 @@ import EventBinding from '../../Element/Dialog/eventBinding';
|
||||
import richText from "../../Element/richText";
|
||||
import MouseEvent from '../../../Event/index'
|
||||
import LabelObject from '../LabelObject'
|
||||
import { syncData } from '../../../Global/MultiViewportMode'
|
||||
import { syncData, getSdk as get2DSdk } from '../../../Global/MultiViewportMode'
|
||||
import { legp } from '../../Element/datalist';
|
||||
import { getFontList, getFontFamilyName } from '../../Element/fontSelect'
|
||||
import MouseTip from '../../../MouseTip'
|
||||
@ -75,8 +75,8 @@ class CircleDiffuse extends Base {
|
||||
color: options.label.color || '#ffffff',
|
||||
lineWidth: (options.label.lineWidth || options.label.lineWidth === 0) ? options.label.lineWidth : 4,
|
||||
pixelOffset: (options.label.pixelOffset || options.label.pixelOffset === 0) ? options.label.pixelOffset : 20,
|
||||
backgroundColor: options.label.backgroundColor || ['#42c6ef', '#42c6ef'],
|
||||
lineColor: options.label.lineColor || '#fff000',
|
||||
backgroundColor: options.label.backgroundColor || ['#00ffff80', '#00ffff80'],
|
||||
lineColor: options.label.lineColor || '#00ffff80',
|
||||
scaleByDistance: options.label.scaleByDistance || false,
|
||||
near: (options.label.near || options.label.near === 0) ? options.label.near : 2000,
|
||||
far: (options.label.far || options.label.far === 0) ? options.label.far : 100000,
|
||||
@ -181,7 +181,7 @@ class CircleDiffuse extends Base {
|
||||
}
|
||||
that.sdk._entityZIndex++
|
||||
if (that.sdk.viewer._element.className === 'cesium-viewer 2d') {
|
||||
that.entity.ellipse.height = 1000000
|
||||
that.entity.ellipse.height = 1
|
||||
}
|
||||
CircleDiffuse.createLabel(that)
|
||||
syncData(that.sdk, that.options.id)
|
||||
@ -223,16 +223,31 @@ class CircleDiffuse extends Base {
|
||||
|
||||
set show(v) {
|
||||
if (typeof v === "boolean") {
|
||||
let sdkD = get2DSdk().sdkD
|
||||
if (!this.isShowView || !sdkD) {
|
||||
this.options.show = v
|
||||
this.entity.show = v
|
||||
}
|
||||
if (!this.showView || this.showView == 3 || !sdkD) {
|
||||
this.entity.show = this.options.show
|
||||
if (this.options.label.show) {
|
||||
this.label.show = this.options.show
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.entity.show = false
|
||||
if (this.options.label.show) {
|
||||
this.label.show = false
|
||||
}
|
||||
}
|
||||
|
||||
this.isShowView = false
|
||||
|
||||
syncData(this.sdk, this.options.id)
|
||||
syncSplitData(this.sdk, this.options.id)
|
||||
if (this._DialogObject && this._DialogObject.showBtn) {
|
||||
this._DialogObject.showBtn.checked = v
|
||||
}
|
||||
if (this.options.label.show) {
|
||||
this.label.show = v
|
||||
}
|
||||
|
||||
} else {
|
||||
console.error("参数必须为boolean")
|
||||
}
|
||||
@ -362,6 +377,7 @@ class CircleDiffuse extends Base {
|
||||
return this.options.circle
|
||||
}
|
||||
set circle(v) {
|
||||
console.log(v)
|
||||
this.options.circle = v || [{ radius: 10 }]
|
||||
for (let i = 0; i < this.options.circle.length; i++) {
|
||||
if(this.options.circle[i].radius>999999) {
|
||||
@ -427,8 +443,9 @@ class CircleDiffuse extends Base {
|
||||
return this.options.label.show
|
||||
}
|
||||
set labelShow(v) {
|
||||
let sdkD = get2DSdk().sdkD
|
||||
this.options.label.show = v
|
||||
if (this.show) {
|
||||
if (this.show && (!this.showView || this.showView == 3 || !sdkD)) {
|
||||
this.label.show = v
|
||||
}
|
||||
else {
|
||||
@ -462,7 +479,7 @@ class CircleDiffuse extends Base {
|
||||
this.label.color = v
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -562,7 +579,7 @@ class CircleDiffuse extends Base {
|
||||
this.label.lineColor = v
|
||||
if (this._elms.labelLineColor) {
|
||||
this._elms.labelLineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -573,7 +590,7 @@ class CircleDiffuse extends Base {
|
||||
this.labelLineColor = color
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
this.labelLineColor = 'rgba(0,255,255,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.labelLineColor[i] = lineColorPicker
|
||||
@ -589,7 +606,7 @@ class CircleDiffuse extends Base {
|
||||
this.label.backgroundColor = [v, this.label.backgroundColor[1]]
|
||||
if (this._elms.labelBackgroundColorStart) {
|
||||
this._elms.labelBackgroundColorStart.forEach((item, i) => {
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -615,7 +632,7 @@ class CircleDiffuse extends Base {
|
||||
this.label.backgroundColor = [this.label.backgroundColor[0], v]
|
||||
if (this._elms.labelBackgroundColorEnd) {
|
||||
this._elms.labelBackgroundColorEnd.forEach((item, i) => {
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1104,7 +1121,7 @@ class CircleDiffuse extends Base {
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs('circle-diffuse-edit-tabs', undefined, this.sdk)
|
||||
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1118,7 +1135,7 @@ class CircleDiffuse extends Base {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelLineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1132,7 +1149,7 @@ class CircleDiffuse extends Base {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorStart")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1146,7 +1163,7 @@ class CircleDiffuse extends Base {
|
||||
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
},
|
||||
})
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorEnd")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1321,7 +1338,7 @@ class CircleDiffuse extends Base {
|
||||
}
|
||||
|
||||
async remove() {
|
||||
this.label.remove()
|
||||
this.label && this.label.remove()
|
||||
this.entity && this.sdk.viewer.entities.remove(this.entity)
|
||||
this.entity2 && this.sdk.viewer.entities.remove(this.entity2)
|
||||
this.entity = null
|
||||
@ -1405,7 +1422,7 @@ class CircleDiffuse extends Base {
|
||||
}
|
||||
}
|
||||
this._radius = radius
|
||||
inputElm.value = value
|
||||
// inputElm.value = value
|
||||
CircleDiffuse.create(this)
|
||||
}
|
||||
}
|
||||
@ -1446,11 +1463,11 @@ class CircleDiffuse extends Base {
|
||||
|
||||
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: circleElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: false,//是否开启透明度
|
||||
defaultColor: this.options.circle[i].color,
|
||||
defaultColor: this.options.circle[i].color || this.options.color,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
|
||||
@ -23,7 +23,7 @@ class CircleObject extends Base {
|
||||
* @param options.id {string} 标注id
|
||||
* @param options.name {string} 名称
|
||||
* @param options.show=true {boolean} 显示/隐藏
|
||||
* @param options.color="#36c4ff" {string} 颜色
|
||||
* @param options.color="#ff000080" {string} 颜色
|
||||
* @param options.center {object} 位置
|
||||
* @param options.center.lng {object} 经度
|
||||
* @param options.center.lat {object} 纬度
|
||||
@ -31,21 +31,21 @@ class CircleObject extends Base {
|
||||
* @param options.radius=10 {object}半径
|
||||
* @param options.line {object} 边框
|
||||
* @param options.line.width=2 {string} 边框宽
|
||||
* @param options.line.color="rgba(155, 155, 124, 0.89)" {string} 边框颜色
|
||||
* @param options.line.color="#ff000080" {string} 边框颜色
|
||||
* @param options.label {object} 标注
|
||||
* @param options.heightMode=2{number} 高度模式(0:海拔高度;1:相对地表;2:依附模式)
|
||||
*/
|
||||
constructor(sdk, options = {}) {
|
||||
super(sdk, options);
|
||||
this.options.name = options.name || '未命名对象'
|
||||
this.options.color = options.color || "#36c4ff"
|
||||
this.options.color = options.color || "#ff000080"
|
||||
this.options.heightMode = (options.heightMode || options.heightMode == 0) ? options.heightMode : 2
|
||||
this.options.radius = (options.radius || options.radius === 0) ? options.radius : 10
|
||||
this.options.show = (options.show || options.show === false) ? options.show : true
|
||||
this.options.center = options.center || {}
|
||||
this.options.line = options.line || {}
|
||||
this.options.line.width = this.options.line.width || 2
|
||||
this.options.line.color = this.options.line.color || 'rgba(155, 155, 124, 0.89)'
|
||||
this.options.line.width = ((this.options.line.width || this.options.line.width === 0) ? this.options.line.width : 3)
|
||||
this.options.line.color = this.options.line.color || 'rgba(255, 0, 0, 1)'
|
||||
this.options['area-unit'] = options['area-unit'] || '平方米'
|
||||
options.label = options.label || {}
|
||||
this._elms = {};
|
||||
@ -58,8 +58,8 @@ class CircleObject extends Base {
|
||||
color: options.label.color || '#ffffff',
|
||||
lineWidth: (options.label.lineWidth || options.label.lineWidth === 0) ? options.label.lineWidth : 4,
|
||||
pixelOffset: (options.label.pixelOffset || options.label.pixelOffset === 0) ? options.label.pixelOffset : 20,
|
||||
backgroundColor: options.label.backgroundColor || ['#42c6ef', '#42c6ef'],
|
||||
lineColor: options.label.lineColor || '#fff000',
|
||||
backgroundColor: options.label.backgroundColor || ['#00ffff80', '#00ffff80'],
|
||||
lineColor: options.label.lineColor || '#00ffff80',
|
||||
scaleByDistance: options.label.scaleByDistance || false,
|
||||
near: (options.label.near || options.label.near === 0) ? options.label.near : 2000,
|
||||
far: (options.label.far || options.label.far === 0) ? options.label.far : 100000,
|
||||
@ -216,31 +216,31 @@ class CircleObject extends Base {
|
||||
return this.options.color
|
||||
}
|
||||
set color(v) {
|
||||
this.options.color = v
|
||||
this.options.color = v || 'rgba(255, 0, 0, 0.5)'
|
||||
if (!this.sdk || !this.sdk.viewer || !this.entity || !this.entity.polygon) {
|
||||
return
|
||||
}
|
||||
let material = Cesium.Color.fromCssColorString(v)
|
||||
let material = Cesium.Color.fromCssColorString(this.options.color)
|
||||
if (this.sdk.viewer.scene.mode === 2) {
|
||||
material = new Cesium.CustomColorMaterialSource({
|
||||
color: v
|
||||
color: this.options.color
|
||||
})
|
||||
}
|
||||
this.entity.polygon.material = material
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: v,
|
||||
defaultColor: this.options.color,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (c) => {
|
||||
this.color = c
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
this.color = 'rgba(255,0,0,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.color[i] = colorPicker
|
||||
@ -252,25 +252,25 @@ class CircleObject extends Base {
|
||||
return this.options.line.color
|
||||
}
|
||||
set lineColor(v) {
|
||||
this.options.line.color = v
|
||||
this.options.line.color = v || 'rgba(255, 0, 0, 0.5)'
|
||||
if (!this.sdk || !this.sdk.viewer || !this.entity || !this.entity.polyline) {
|
||||
return
|
||||
}
|
||||
this.entity.polyline.material = Cesium.Color.fromCssColorString(v)
|
||||
this.entity.polyline.material = Cesium.Color.fromCssColorString(this.options.line.color)
|
||||
if (this._elms.lineColor) {
|
||||
this._elms.lineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: v,
|
||||
defaultColor: this.options.line.color,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (c) => {
|
||||
this.lineColor = c
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.lineColor = 'rgba(255,255,255,1)'
|
||||
this.lineColor = 'rgba(255,0,0,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.lineColor[i] = lineColorPicker
|
||||
@ -282,8 +282,8 @@ class CircleObject extends Base {
|
||||
return this.options.line.width
|
||||
}
|
||||
set lineWidth(v) {
|
||||
this.options.line.width = v
|
||||
this.entity.polyline.width = v
|
||||
this.options.line.width = ((v || v === 0) ? v : 3)
|
||||
this.entity.polyline.width = this.options.line.width
|
||||
this._elms.lineWidth && this._elms.lineWidth.forEach((item) => {
|
||||
item.value = v
|
||||
})
|
||||
@ -333,7 +333,7 @@ class CircleObject extends Base {
|
||||
}
|
||||
set labelShow(v) {
|
||||
this.options.label.show = v
|
||||
if (this.show) {
|
||||
if (this.show && (!this.showView || this.showView == 3)) {
|
||||
this.label.show = v
|
||||
}
|
||||
else {
|
||||
@ -367,7 +367,7 @@ class CircleObject extends Base {
|
||||
this.label.color = v
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -467,7 +467,7 @@ class CircleObject extends Base {
|
||||
this.label.lineColor = v
|
||||
if (this._elms.labelLineColor) {
|
||||
this._elms.labelLineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -478,7 +478,7 @@ class CircleObject extends Base {
|
||||
this.labelLineColor = color
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
this.labelLineColor = 'rgba(0,255,255,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.labelLineColor[i] = lineColorPicker
|
||||
@ -494,7 +494,7 @@ class CircleObject extends Base {
|
||||
this.label.backgroundColor = [v, this.label.backgroundColor[1]]
|
||||
if (this._elms.labelBackgroundColorStart) {
|
||||
this._elms.labelBackgroundColorStart.forEach((item, i) => {
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -520,7 +520,7 @@ class CircleObject extends Base {
|
||||
this.label.backgroundColor = [this.label.backgroundColor[0], v]
|
||||
if (this._elms.labelBackgroundColorEnd) {
|
||||
this._elms.labelBackgroundColorEnd.forEach((item, i) => {
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1151,7 +1151,7 @@ class CircleObject extends Base {
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs('circle-object-edit-tabs', undefined, this.sdk)
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1165,7 +1165,7 @@ class CircleObject extends Base {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let linecolorPicker = new ewPlugins('colorpicker', {
|
||||
let linecolorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("lineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1179,7 +1179,7 @@ class CircleObject extends Base {
|
||||
this.lineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1193,7 +1193,7 @@ class CircleObject extends Base {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labellineColorPicker = new ewPlugins('colorpicker', {
|
||||
let labellineColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelLineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1207,7 +1207,7 @@ class CircleObject extends Base {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorStart")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1221,7 +1221,7 @@ class CircleObject extends Base {
|
||||
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
},
|
||||
})
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorEnd")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1878,7 +1878,7 @@ class CircleObject extends Base {
|
||||
entity = null
|
||||
}
|
||||
endpoint = that.cartesian3Towgs84(cartesian, that.viewer)
|
||||
let radius = that.computeDistance([that.options.center, endpoint])
|
||||
let radius = that.computeDistance2([that.options.center, endpoint])
|
||||
that.radius = radius
|
||||
|
||||
YJ.Measure.SetMeasureStatus(false)
|
||||
@ -1904,7 +1904,7 @@ class CircleObject extends Base {
|
||||
that.event.mouse_move((movement, cartesian) => {
|
||||
entity && (entity.show = true)
|
||||
endpoint = that.cartesian3Towgs84(cartesian, that.viewer)
|
||||
moveRadius = that.computeDistance([that.options.center, endpoint])
|
||||
moveRadius = that.computeDistance2([that.options.center, endpoint])
|
||||
fromDegreesArray = that.createCircle(that.options.center, moveRadius)
|
||||
that.tip.setPosition(
|
||||
cartesian,
|
||||
|
||||
@ -9,22 +9,15 @@ function html(that) {
|
||||
<span class="label">名称</span>
|
||||
<input class="input" maxlength="40" type="text" @model="name">
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 54%;">
|
||||
<div class="col" style="flex: 0 0 56%;">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">原始长度:</span>
|
||||
<div class="input-select-unit"></div>
|
||||
<input class="input input-text" readonly="readonly" type="text" style="flex: 0 0 130px;" @model="length">
|
||||
<div class="input-select-unit"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col input-select-fit-unit-box">
|
||||
<span class="label">拟合长度:</span>
|
||||
<input class="input input-text" readonly="readonly" type="text" style="flex: 0 0 130px;" @model="fitLength">
|
||||
<div class="input-select-fit-unit"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -72,7 +65,7 @@ function html(that) {
|
||||
<span class="label">线条颜色</span>
|
||||
<div class="color"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
<span class="label">线条宽度</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px;">
|
||||
<input class="input" type="number" title="" min="1" max="999" @model="lineWidth">
|
||||
@ -80,7 +73,7 @@ function html(that) {
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-line-type-box">
|
||||
<div class="col input-select-line-type-box" style="flex: 0 0 37%;">
|
||||
<span class="label">线条形式</span>
|
||||
<div class="input-select-line-type"></div>
|
||||
</div>
|
||||
@ -90,7 +83,7 @@ function html(that) {
|
||||
<span class="label">线段缓冲</span>
|
||||
<input class="btn-switch" type="checkbox" @model="extend">
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
<span class="label">缓冲宽度</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px;">
|
||||
<input class="input" type="number" title="" min="0" data-min="0.01" max="999999" @model="extendWidth">
|
||||
@ -98,21 +91,43 @@ function html(that) {
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col" style="flex: 0 0 37%;">
|
||||
<span class="label">缓冲颜色</span>
|
||||
<div class="extendColor"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="dashTextureDom">
|
||||
<div class="col">
|
||||
<span class="label">动画顺向</span>
|
||||
<input class="btn-switch" type="checkbox" @model="rotate">
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
<span class="label">流动速率</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px;">
|
||||
<input class="input" type="number" title="" min="0" max="999999" step="1" @model="speed">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%;">
|
||||
<span class="label lineSpace">间距</span>
|
||||
<div class="input-number input-number-unit-1 lineSpace" style="width: 80px;">
|
||||
<input class="input" type="number" title="" min="0" max="4.5" step="0.1" @model="space">
|
||||
<span class="unit">倍</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">首尾相连</span>
|
||||
<input class="btn-switch" type="checkbox" @model="noseToTail">
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col" style="flex: 0 0 37%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</DIV-cy-tab-pane>
|
||||
<DIV-cy-tab-pane label="标注风格">
|
||||
${labelStyleElm1()}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
||||
/**
|
||||
* 圆
|
||||
* 椭圆
|
||||
*/
|
||||
import Dialog from '../../Element/Dialog';
|
||||
import cy_tabs from "../../Element/cy_html_tabs";
|
||||
@ -24,7 +24,7 @@ class EllipseObject extends Base {
|
||||
* @param options.name {string} 名称
|
||||
* @param options.show=true {boolean} 显示/隐藏
|
||||
* @param options.center {object} 位置
|
||||
* @param options.color="#36c4ff" {string} 颜色
|
||||
* @param options.color="rgba(255, 0, 0, 0.5)" {string} 颜色
|
||||
* @param options.center.lng {object} 经度
|
||||
* @param options.center.lat {object} 维度
|
||||
* @param options.semiMinorAxis=10 {number} 短半轴长度
|
||||
@ -32,22 +32,22 @@ class EllipseObject extends Base {
|
||||
* @param options.bearing=0 {number} 旋转角度
|
||||
* @param options.line {object} 边框
|
||||
* @param options.line.width=2 {string} 边框宽
|
||||
* @param options.line.color="rgba(155, 155, 124, 0.89)" {string} 边框颜色
|
||||
* @param options.line.color="rgba(255, 0, 0, 1)" {string} 边框颜色
|
||||
* @param options.label {object} 标注
|
||||
* @param options.heightMode=2{number} 高度模式(0:海拔高度;1:相对地表;2:依附模式)
|
||||
*/
|
||||
constructor(sdk, options = {}) {
|
||||
super(sdk, options);
|
||||
this.options.name = options.name || '未命名对象'
|
||||
this.options.color = options.color || "#36c4ff"
|
||||
this.options.color = options.color || "rgba(255, 0, 0, 0.5)"
|
||||
this.options.heightMode = (options.heightMode || options.heightMode == 0) ? options.heightMode : 2
|
||||
this.options.semiMinorAxis = (options.semiMinorAxis || options.semiMinorAxis === 0) ? options.semiMinorAxis : 10
|
||||
this.options.semiMajorAxis = (options.semiMajorAxis || options.semiMajorAxis === 0) ? options.semiMajorAxis : 20
|
||||
this.options.show = (options.show || options.show === false) ? options.show : true
|
||||
this.options.center = options.center || {}
|
||||
this.options.line = options.line || {}
|
||||
this.options.line.width = this.options.line.width || 2
|
||||
this.options.line.color = this.options.line.color || 'rgba(155, 155, 124, 0.89)'
|
||||
this.options.line.width = ((this.options.line.width || this.options.line.width === 0) ? this.options.line.width : 3)
|
||||
this.options.line.color = this.options.line.color || 'rgba(255, 0, 0, 1)'
|
||||
this.options['area-unit'] = options['area-unit'] || '平方米'
|
||||
options.label = options.label || {}
|
||||
this._elms = {};
|
||||
@ -60,8 +60,8 @@ class EllipseObject extends Base {
|
||||
color: options.label.color || '#ffffff',
|
||||
lineWidth: (options.label.lineWidth || options.label.lineWidth === 0) ? options.label.lineWidth : 4,
|
||||
pixelOffset: (options.label.pixelOffset || options.label.pixelOffset === 0) ? options.label.pixelOffset : 20,
|
||||
backgroundColor: options.label.backgroundColor || ['#42c6ef', '#42c6ef'],
|
||||
lineColor: options.label.lineColor || '#fff000',
|
||||
backgroundColor: options.label.backgroundColor || ['#00ffff80', '#00ffff80'],
|
||||
lineColor: options.label.lineColor || '#00ffff80',
|
||||
scaleByDistance: options.label.scaleByDistance || false,
|
||||
near: (options.label.near || options.label.near === 0) ? options.label.near : 2000,
|
||||
far: (options.label.far || options.label.far === 0) ? options.label.far : 100000,
|
||||
@ -229,32 +229,32 @@ class EllipseObject extends Base {
|
||||
return this.options.color
|
||||
}
|
||||
set color(v) {
|
||||
this.options.color = v
|
||||
this.options.color = v || 'rgba(255, 0, 0, 0.5)'
|
||||
if (!this.sdk || !this.sdk.viewer || !this.entity || !this.entity.polygon) {
|
||||
return
|
||||
}
|
||||
let material = Cesium.Color.fromCssColorString(v)
|
||||
let material = Cesium.Color.fromCssColorString(this.options.color)
|
||||
if (this.sdk.viewer.scene.mode === 2) {
|
||||
material = new Cesium.CustomColorMaterialSource({
|
||||
color: v
|
||||
color: this.options.color
|
||||
})
|
||||
}
|
||||
this.entity.polygon.material = material
|
||||
this.entity.polyline.width = this.lineWidth
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: v,
|
||||
defaultColor: this.options.color,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (c) => {
|
||||
this.color = c
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
this.color = 'rgba(255,0,0,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.color[i] = colorPicker
|
||||
@ -266,25 +266,25 @@ class EllipseObject extends Base {
|
||||
return this.options.line.color
|
||||
}
|
||||
set lineColor(v) {
|
||||
this.options.line.color = v
|
||||
this.options.line.color = v || 'rgba(255, 0, 0, 0.5)'
|
||||
if (!this.sdk || !this.sdk.viewer || !this.entity || !this.entity.polyline) {
|
||||
return
|
||||
}
|
||||
this.entity.polyline.material = Cesium.Color.fromCssColorString(v)
|
||||
this.entity.polyline.material = Cesium.Color.fromCssColorString(this.options.line.color)
|
||||
if (this._elms.lineColor) {
|
||||
this._elms.lineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: v,
|
||||
defaultColor: this.options.line.color,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (c) => {
|
||||
this.lineColor = c
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.lineColor = 'rgba(255,255,255,1)'
|
||||
this.lineColor = 'rgba(255,0,0,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.lineColor[i] = lineColorPicker
|
||||
@ -296,10 +296,10 @@ class EllipseObject extends Base {
|
||||
return this.options.line.width
|
||||
}
|
||||
set lineWidth(v) {
|
||||
this.options.line.width = v
|
||||
this.entity.polyline.width = v
|
||||
this.options.line.width = ((v || v === 0) ? v : 3)
|
||||
this.entity.polyline.width = this.options.line.width
|
||||
this._elms.lineWidth && this._elms.lineWidth.forEach((item) => {
|
||||
item.value = v
|
||||
item.value = this.options.line.width
|
||||
})
|
||||
}
|
||||
|
||||
@ -347,7 +347,7 @@ class EllipseObject extends Base {
|
||||
}
|
||||
set labelShow(v) {
|
||||
this.options.label.show = v
|
||||
if (this.show) {
|
||||
if (this.show && !this.showView || this.showView == 3) {
|
||||
this.label.show = v
|
||||
}
|
||||
else {
|
||||
@ -381,7 +381,7 @@ class EllipseObject extends Base {
|
||||
this.label.color = v
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -481,7 +481,7 @@ class EllipseObject extends Base {
|
||||
this.label.lineColor = v
|
||||
if (this._elms.labelLineColor) {
|
||||
this._elms.labelLineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -492,7 +492,7 @@ class EllipseObject extends Base {
|
||||
this.labelLineColor = color
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
this.labelLineColor = 'rgba(0,255,255,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.labelLineColor[i] = lineColorPicker
|
||||
@ -508,7 +508,7 @@ class EllipseObject extends Base {
|
||||
this.label.backgroundColor = [v, this.label.backgroundColor[1]]
|
||||
if (this._elms.labelBackgroundColorStart) {
|
||||
this._elms.labelBackgroundColorStart.forEach((item, i) => {
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -534,7 +534,7 @@ class EllipseObject extends Base {
|
||||
this.label.backgroundColor = [this.label.backgroundColor[0], v]
|
||||
if (this._elms.labelBackgroundColorEnd) {
|
||||
this._elms.labelBackgroundColorEnd.forEach((item, i) => {
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1161,7 +1161,7 @@ class EllipseObject extends Base {
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs('circle-object-edit-tabs', undefined, this.sdk)
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1175,7 +1175,7 @@ class EllipseObject extends Base {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let linecolorPicker = new ewPlugins('colorpicker', {
|
||||
let linecolorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("lineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1189,7 +1189,7 @@ class EllipseObject extends Base {
|
||||
this.lineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1203,7 +1203,7 @@ class EllipseObject extends Base {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labellineColorPicker = new ewPlugins('colorpicker', {
|
||||
let labellineColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelLineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1217,7 +1217,7 @@ class EllipseObject extends Base {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorStart")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1231,7 +1231,7 @@ class EllipseObject extends Base {
|
||||
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
},
|
||||
})
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorEnd")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
|
||||
76
src/Obj/Base/FlowLine/_element.js
Normal file
76
src/Obj/Base/FlowLine/_element.js
Normal file
@ -0,0 +1,76 @@
|
||||
function html() {
|
||||
return `
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<input class="input" maxlength="40" type="text" @model="name">
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">颜色</span>
|
||||
<div class="flowLine-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">飞线数量</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="1" max="99999" @model="pointNumber">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">飞线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" max="99999" min="1" step="1" @model="width">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
|
||||
<div class="col">
|
||||
<span class="label">飞线高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="0" max="999999" step="1" @model="height">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">飞线高度差</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" max="99999" min="0" step="1" @model="heightDifference">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">单次运动时长(s)</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" max="999999999" min="1" step="1" @model="duration">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">轨迹透明度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" max="1" min="0.01" step="0.01" @model="lineBackAlpha">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
`
|
||||
}
|
||||
|
||||
export { html }
|
||||
92
src/Obj/Base/FlowLine/eventBinding.js
Normal file
92
src/Obj/Base/FlowLine/eventBinding.js
Normal file
@ -0,0 +1,92 @@
|
||||
class eventBinding {
|
||||
constructor() {
|
||||
this.element = {}
|
||||
}
|
||||
static event = {}
|
||||
|
||||
getEvent(name) {
|
||||
return eventBinding.event[name]
|
||||
}
|
||||
|
||||
getEventAll() {
|
||||
return eventBinding.event
|
||||
}
|
||||
|
||||
setEvent(name, event) {
|
||||
eventBinding.event[name] = event
|
||||
}
|
||||
|
||||
on(that, elements) {
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
let Event = []
|
||||
let isEvent = false
|
||||
let removeName = []
|
||||
if (!elements[i] || !elements[i].attributes) {
|
||||
continue;
|
||||
}
|
||||
for (let m of elements[i].attributes) {
|
||||
switch (m.name) {
|
||||
case '@model': {
|
||||
isEvent = true
|
||||
if (elements[i].type == 'checkbox') {
|
||||
Event.push((e) => { that[m.value] = e.target.checked })
|
||||
elements[i].checked = that[m.value]
|
||||
}
|
||||
else {
|
||||
Event.push((e) => {
|
||||
let value = e.target.value
|
||||
if (e.target.type == 'number') {
|
||||
value = Number(value)
|
||||
}
|
||||
that[m.value] = value
|
||||
})
|
||||
if (elements[i].nodeName == 'IMG') {
|
||||
elements[i].src = that[m.value]
|
||||
}
|
||||
else {
|
||||
elements[i].value = that[m.value]
|
||||
}
|
||||
}
|
||||
if (this.element[m.value]) {
|
||||
this.element[m.value].push(elements[i])
|
||||
}
|
||||
else {
|
||||
this.element[m.value] = [elements[i]]
|
||||
}
|
||||
removeName.push(m.name)
|
||||
break;
|
||||
}
|
||||
case '@click': {
|
||||
elements[i].addEventListener('click', (e) => {
|
||||
if (typeof (that.Dialog[m.value]) === 'function') {
|
||||
that.Dialog[m.value](e)
|
||||
}
|
||||
});
|
||||
removeName.push(m.name)
|
||||
// elements[i].attributes.removeNamedItem(m.name)
|
||||
break;
|
||||
}
|
||||
}
|
||||
// elements[i].attributes[m] = undefined
|
||||
}
|
||||
for (let n = 0; n < removeName.length; n++) {
|
||||
elements[i].attributes.removeNamedItem(removeName[n])
|
||||
}
|
||||
|
||||
if (isEvent) {
|
||||
let ventType = 'input'
|
||||
if (elements[i].tagName != 'INPUT' || elements[i].type == 'checkbox') {
|
||||
ventType = 'change'
|
||||
}
|
||||
elements[i].addEventListener(ventType, (e) => {
|
||||
for (let t = 0; t < Event.length; t++) {
|
||||
Event[t](e)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const EventBinding = new eventBinding();
|
||||
export default EventBinding;
|
||||
504
src/Obj/Base/FlowLine/index.js
Normal file
504
src/Obj/Base/FlowLine/index.js
Normal file
@ -0,0 +1,504 @@
|
||||
/**
|
||||
* @description 水面
|
||||
*/
|
||||
import Dialog from '../../Element/Dialog';
|
||||
import { html } from "./_element";
|
||||
import EventBinding from '../../Element/Dialog/eventBinding';
|
||||
import Base from "../index";
|
||||
import { syncData } from '../../../Global/MultiViewportMode'
|
||||
import DrawRect from '../../../Draw/drawRect'
|
||||
import drawPolygon from '../../../Draw/drawPolygon'
|
||||
import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen'
|
||||
import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global'
|
||||
import FlowLineMaterialProperty from "../../Materail/FlowLineMaterialProperty";
|
||||
|
||||
class FlowLine extends Base {
|
||||
/**
|
||||
* @constructor
|
||||
* @param sdk
|
||||
* @description 流光飞线
|
||||
* @param options {object} 流光飞线属性
|
||||
* @param options.name=未命名对象 {string} 名称
|
||||
* @param options.pointNumber=300 {number} 线数量
|
||||
* @param options.height=200 {number} 线高度
|
||||
* @param options.heightDifference=3000 {number} 线高度差
|
||||
* @param options.width=2 {number} 线宽
|
||||
* @param options.duration=10.0 {number} 单次运动时间
|
||||
* @param options.color=rgba(255,255,255,1) {string} 颜色
|
||||
* @param options.lineBackAlpha=0.05 {number} 轨迹颜色(不能为0)
|
||||
* @param Dialog {object} 弹框对象
|
||||
* @param Dialog.confirmCallBack {function} 弹框确认时的回调
|
||||
* */
|
||||
constructor(sdk, options = {}, _Dialog = {}) {
|
||||
super(sdk, options);
|
||||
this.viewer = this.sdk.viewer
|
||||
this.options.name = options.name || '飞线'
|
||||
this.options.pointNumber = options.pointNumber || 200
|
||||
this.options.height = options.height || 200
|
||||
this.options.heightDifference = options.heightDifference || 3000
|
||||
this.options.width = options.width || 2
|
||||
this.options.duration = options.duration || 10.0
|
||||
this.options.color = options.color || "rgba(255,255,255,1)"
|
||||
this.options.lineBackAlpha = options.lineBackAlpha || 0.05
|
||||
this.options.positions = options.positions || []
|
||||
this.options.show = (options.show || options.show === false) ? options.show : true
|
||||
this.Dialog = _Dialog
|
||||
this._EventBinding = new EventBinding()
|
||||
this._elms = {};
|
||||
this.positionArea = []
|
||||
this.positions = []
|
||||
this.sdk.addIncetance(this.options.id, this)
|
||||
// FlowLine.create(this)
|
||||
FlowLine.drawLine(this)
|
||||
}
|
||||
|
||||
// 创建水面
|
||||
static create(that) {
|
||||
// let Draw = new DrawRect(that.sdk)
|
||||
// Draw.start((a, positions) => {
|
||||
// that.positions = positions
|
||||
// that.getLine(that, that.positions)
|
||||
// that.edit(true)
|
||||
// })
|
||||
|
||||
let Draw = new drawPolygon(that.sdk)
|
||||
Draw.start((a, positions) => {
|
||||
that.positionArea = positions
|
||||
let posis = that.getRandomPointsInCesiumPolygon(positions, that.options.pointNumber)
|
||||
that.positions = posis
|
||||
that.getLine(that, posis)
|
||||
that.edit(true)
|
||||
})
|
||||
}
|
||||
static drawLine(that) {
|
||||
that.positionArea = that.options.positions
|
||||
let posis = that.getRandomPointsInCesiumPolygon(that.options.positions, that.options.pointNumber)
|
||||
that.positions = posis
|
||||
that.getLine(that, posis)
|
||||
// that.edit(true)
|
||||
}
|
||||
getRandomPointsInCesiumPolygon(positions, count) {
|
||||
let lons = [], lats = [], posi = []
|
||||
positions.forEach(item => {
|
||||
lons.push(item.lng)
|
||||
lats.push(item.lat)
|
||||
posi.push([item.lng, item.lat])
|
||||
})
|
||||
posi.push([posi[0][0], posi[0][1]])
|
||||
const minLon = Math.min(...lons), maxLon = Math.max(...lons);
|
||||
const minLat = Math.min(...lats), maxLat = Math.max(...lats);
|
||||
|
||||
const points = [];
|
||||
let that = this
|
||||
while (points.length < count) {
|
||||
const lon = minLon + Math.random() * (maxLon - minLon);
|
||||
const lat = minLat + Math.random() * (maxLat - minLat);
|
||||
// const cartesian = Cesium.Cartesian3.fromDegrees(lon, lat);
|
||||
let point = turf.point([lon, lat]);
|
||||
const polygon = turf.polygon([
|
||||
posi
|
||||
]);
|
||||
|
||||
const isInside = turf.booleanPointInPolygon(point, polygon);
|
||||
if (isInside) {
|
||||
let posi = Cesium.Cartesian3.fromDegrees(lon, lat);
|
||||
const cartographic = that.viewer.scene.globe.ellipsoid.cartesianToCartographic(posi);
|
||||
const height = cartographic.height;
|
||||
|
||||
points.push([
|
||||
lon,
|
||||
lat,
|
||||
height
|
||||
]);
|
||||
}
|
||||
}
|
||||
return points;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
getLine(that, positions) {
|
||||
let num = 0
|
||||
let celiangEntity = null
|
||||
if (that.viewer.entities.getById(that.options.id)) {
|
||||
that.viewer.entities.getById(that.options.id)._children.forEach((item) => {
|
||||
that.viewer.entities.remove(item);
|
||||
});
|
||||
that.viewer.entities.remove(that.viewer.entities.getById(that.options.id))
|
||||
}
|
||||
celiangEntity = that.viewer.entities.add(new Cesium.Entity({ id: that.options.id, show: that.options.show }))
|
||||
|
||||
positions.forEach((item, index) => {
|
||||
let point = item
|
||||
//根据点设置起始点位置
|
||||
// let start = Cesium.Cartesian3.fromDegrees(point[0], point[1], 0)
|
||||
let start = Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2])
|
||||
//根据点设置结束点位置
|
||||
let end = Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2] + that.options.height + Math.random() * that.options.heightDifference)
|
||||
//创建线
|
||||
that.viewer.entities.add({
|
||||
parent: celiangEntity,
|
||||
id: that.options.id + '-' + new Date().getTime() + index,
|
||||
polyline: {
|
||||
positions: [start, end],
|
||||
width: that.options.width,
|
||||
// material:Cesium.Color.RED
|
||||
material: new Cesium.FlowLineMaterialProperty({
|
||||
color: that.options.color,
|
||||
duration: that.options.duration,
|
||||
lineBackAlpha: that.options.lineBackAlpha,
|
||||
num: num
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
get color() {
|
||||
return this.options.color
|
||||
}
|
||||
|
||||
set color(v) {
|
||||
this.options.color = v
|
||||
let entity = this.viewer.entities.getById(this.options.id)
|
||||
if (entity) {
|
||||
entity._children.forEach(item => {
|
||||
item.polyline.material.color = Cesium.Color.fromCssColorString(v)
|
||||
})
|
||||
}
|
||||
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let picker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: v,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (c) => {
|
||||
this.color = c
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.color[i] = picker
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
get pointNumber() {
|
||||
return this.options.pointNumber
|
||||
}
|
||||
set pointNumber(v) {
|
||||
this.options.pointNumber = v
|
||||
let entity = this.viewer.entities.getById(this.options.id)
|
||||
if (entity) {
|
||||
let posis = this.getRandomPointsInCesiumPolygon(this.positionArea, this.options.pointNumber)
|
||||
this.positions = posis
|
||||
this.getLine(this, posis)
|
||||
}
|
||||
}
|
||||
|
||||
get height() {
|
||||
return this.options.height
|
||||
}
|
||||
|
||||
set height(v) {
|
||||
this.options.height = v
|
||||
let entity = this.viewer.entities.getById(this.options.id)
|
||||
if (entity) {
|
||||
this.getLine(this, this.positions)
|
||||
}
|
||||
}
|
||||
get show() {
|
||||
return this.options.show
|
||||
}
|
||||
|
||||
set show(v) {
|
||||
this.options.show = v
|
||||
let entity = this.viewer.entities.getById(this.options.id)
|
||||
if (entity) {
|
||||
entity.show = v
|
||||
}
|
||||
}
|
||||
|
||||
get heightDifference() {
|
||||
return this.options.heightDifference
|
||||
}
|
||||
|
||||
set heightDifference(v) {
|
||||
this.options.heightDifference = v
|
||||
let entity = this.viewer.entities.getById(this.options.id)
|
||||
if (entity) {
|
||||
this.getLine(this, this.positions)
|
||||
}
|
||||
}
|
||||
|
||||
get width() {
|
||||
return this.options.width
|
||||
}
|
||||
|
||||
set width(v) {
|
||||
this.options.width = v
|
||||
let entity = this.viewer.entities.getById(this.options.id)
|
||||
if (entity) {
|
||||
entity._children.forEach(item => {
|
||||
item.polyline.width = v
|
||||
})
|
||||
}
|
||||
}
|
||||
get duration() {
|
||||
return this.options.duration
|
||||
}
|
||||
set duration(v) {
|
||||
this.options.duration = v
|
||||
let entity = this.viewer.entities.getById(this.options.id)
|
||||
if (entity) {
|
||||
entity._children.forEach(item => {
|
||||
item.polyline.material.duration = v
|
||||
})
|
||||
}
|
||||
}
|
||||
get lineBackAlpha() {
|
||||
return this.options.lineBackAlpha
|
||||
}
|
||||
set lineBackAlpha(v) {
|
||||
this.options.lineBackAlpha = v
|
||||
let entity = this.viewer.entities.getById(this.options.id)
|
||||
if (entity) {
|
||||
entity._children.forEach(item => {
|
||||
item.polyline.material.lineBackAlpha = 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.originalOptions, {
|
||||
title: '飞线属性', left: '180px', top: '100px',
|
||||
confirmCallBack: (options) => {
|
||||
this.name = this.name.trim()
|
||||
if (!this.name) {
|
||||
// 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.reset()
|
||||
// this.entity.style = new Cesium.Cesium3DTileStyle({
|
||||
// color: "color('rgba(255,255,255," + this.newData.transparency + ")')",
|
||||
// show: true,
|
||||
// });
|
||||
this.Dialog.closeCallBack && this.Dialog.closeCallBack()
|
||||
},
|
||||
showCallBack: (show) => {
|
||||
this.show = show
|
||||
this.Dialog.showCallBack && this.Dialog.showCallBack()
|
||||
}
|
||||
}, true)
|
||||
this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' flow-line-surface'
|
||||
let contentElm = document.createElement('div');
|
||||
contentElm.innerHTML = html()
|
||||
this._DialogObject.contentAppChild(contentElm)
|
||||
// 颜色组件
|
||||
let waterColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("flowLine-color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: this.color,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
this.color = color
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
|
||||
let all_elm = contentElm.getElementsByTagName("*")
|
||||
this._EventBinding.on(this, all_elm)
|
||||
this._elms = this._EventBinding.element
|
||||
this._elms.color = [waterColorPicker]
|
||||
} 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
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
reset() {
|
||||
if (!this.viewer.entities.getById(this.options.id)) {
|
||||
return
|
||||
}
|
||||
this.name = this.originalOptions.name
|
||||
this.pointNumber = this.originalOptions.pointNumber
|
||||
this.height = this.originalOptions.height
|
||||
this.heightDifference = this.originalOptions.heightDifference
|
||||
this.width = this.originalOptions.width
|
||||
this.duration = this.originalOptions.duration
|
||||
this.color = this.originalOptions.color
|
||||
this.lineBackAlpha = this.originalOptions.lineBackAlpha
|
||||
}
|
||||
|
||||
/**
|
||||
* 飞到对应实体
|
||||
*/
|
||||
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[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 positionArray = []
|
||||
for (let i = 0; i < this.positions.length; i++) {
|
||||
let a = Cesium.Cartesian3.fromDegrees(
|
||||
this.positions[i][0],
|
||||
this.positions[i][1],
|
||||
this.positions[i][2] + this.options.height + this.options.heightDifference / 2
|
||||
)
|
||||
positionArray.push(a.x, a.y, a.z)
|
||||
}
|
||||
let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray)
|
||||
this.viewer.camera.flyToBoundingSphere(BoundingSphere, {
|
||||
offset: {
|
||||
heading: Cesium.Math.toRadians(0.0),
|
||||
pitch: Cesium.Math.toRadians(-20.0),
|
||||
roll: Cesium.Math.toRadians(0.0)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
getSphere() {
|
||||
return new Promise((resolve) => {
|
||||
// entity没有加载完成时 state 不会等于0 所以设置定时器直到获取到为止
|
||||
const interval = setInterval(() => {
|
||||
const sphere = new Cesium.BoundingSphere()
|
||||
const state = this.sdk.viewer._dataSourceDisplay.getBoundingSphere(
|
||||
this.viewer.entities.getById(this.options.id),
|
||||
false,
|
||||
sphere
|
||||
)
|
||||
if (state === Cesium.BoundingSphereState.DONE) {
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
async remove() {
|
||||
if (this.viewer.entities.getById(this.options.id)) {
|
||||
this.viewer.entities.getById(this.options.id)._children.forEach((item) => {
|
||||
this.viewer.entities.remove(item);
|
||||
});
|
||||
this.viewer.entities.remove(this.viewer.entities.getById(this.options.id))
|
||||
}
|
||||
this.positions = []
|
||||
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)
|
||||
}
|
||||
|
||||
flicker() { }
|
||||
}
|
||||
|
||||
export default FlowLine
|
||||
@ -162,6 +162,7 @@ class FlyRoam extends Base {
|
||||
pitch: viewer.camera.pitch,
|
||||
roll: viewer.camera.roll
|
||||
}
|
||||
this.message({text: '操作成功'})
|
||||
})
|
||||
|
||||
let totalTimeElm = contentElm.querySelector("input[name='totalTime']")
|
||||
|
||||
@ -8,6 +8,8 @@
|
||||
import { getHost, getToken } from "../../../on";
|
||||
import Base from '../index'
|
||||
import Tools from '../../../Tools'
|
||||
import { syncSplitData } from "../../../Global/SplitScreen";
|
||||
import { syncData, getSdk as get2DSdk } from '../../../Global/MultiViewportMode'
|
||||
import { setActiveViewer, closeRotateAround, closeViewFollow} from '../../../Global/global'
|
||||
|
||||
class GeoJson extends Base {
|
||||
@ -27,6 +29,7 @@ class GeoJson extends Base {
|
||||
this.primitive = undefined
|
||||
this.positions = []
|
||||
|
||||
|
||||
this.loading = true
|
||||
}
|
||||
|
||||
@ -48,6 +51,27 @@ class GeoJson extends Base {
|
||||
return this.options.show
|
||||
}
|
||||
|
||||
// set show(status) {
|
||||
// let sdkD = get2DSdk().sdkD
|
||||
// if (!this.isShowView || !sdkD) {
|
||||
// this.options.show = status
|
||||
// }
|
||||
// if (this.entity) {
|
||||
// if (!this.showView || this.showView == 3 || !sdkD) {
|
||||
// for (let i = 0; i < this.entity.entities.values.length; i++) {
|
||||
// this.entity.entities.values[i].show = this.options.show
|
||||
// }
|
||||
// }
|
||||
// else {
|
||||
// for (let i = 0; i < this.entity.entities.values.length; i++) {
|
||||
// this.entity.entities.values[i].show = false
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// syncData(this.sdk, this.options.id)
|
||||
// syncSplitData(this.sdk, this.options.id)
|
||||
// this.isShowView = false
|
||||
// }
|
||||
set show(status) {
|
||||
this.options.show = status
|
||||
if (this.entity) {
|
||||
@ -74,6 +98,7 @@ class GeoJson extends Base {
|
||||
})
|
||||
let json = await rsp.json()
|
||||
this.geojson = json
|
||||
// this.sdk.addIncetance(this.options.id, this)
|
||||
return GeoJson.addDataToGlobe(this, json.features)
|
||||
}
|
||||
|
||||
|
||||
@ -37,7 +37,7 @@ class Graffiti extends Draw {
|
||||
this.options.color = v
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -77,7 +77,7 @@ class Graffiti extends Draw {
|
||||
contentElm.innerHTML = html()
|
||||
that._DialogObject.contentAppChild(contentElm)
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
|
||||
@ -7,13 +7,21 @@ function html() {
|
||||
<span class="label">名称</span>
|
||||
<input class="input" maxlength="40" type="text" @model="name">
|
||||
</div>
|
||||
<div class="col">
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="anchor btn">调整锚点</button>
|
||||
</div>
|
||||
<div class="col mode-box">
|
||||
<span class="label" style="flex: unset;">军标模式</span>
|
||||
<div class="mode"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" mode="0">
|
||||
<div class="col">
|
||||
<span class="label">旋转角度</span>
|
||||
<input type="range" max="360" min="0" step="0.1" @model="angle">
|
||||
@ -24,16 +32,85 @@ function html() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" mode="0">
|
||||
<div class="col">
|
||||
<span class="label">调整大小</span>
|
||||
<input type="range" max="99999" min="0" step="0.1" @model="scale">
|
||||
<input type="range" max="40000" min="0" step="0.1" @model="scale">
|
||||
<div class="input-number input-number-unit-1" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
|
||||
<input class="input" type="number" title="" min="0" max="99999" step="0.1" @model="scale">
|
||||
<input class="input" type="number" title="" min="0" max="40000" step="0.1" @model="scale">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" mode="1">
|
||||
<div class="col height-mode-box" style="flex: 0 0 155px;margin-right: 10px;">
|
||||
<span class="label" style="flex: 0 0 56px;">高度模式</span>
|
||||
<div class="height-mode"></div>
|
||||
</div>
|
||||
<div class="col" style="margin: 0 10px;">
|
||||
<div class="height-box" style="display: flex; align-items: center;">
|
||||
<span class="label" style="flex: 0 0 56px;">高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input height" type="number" title="" min="-9999999" max="999999999">
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="margin-left: 10px;">
|
||||
<span class="label">图标倍数</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" data-min="0.1" max="99" @model="billboardScale">
|
||||
<span class="unit">倍</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" mode="1">
|
||||
<div class="col" style="flex: 0 0 155px;margin-right: 10px;">
|
||||
<span class="label">视野缩放</span>
|
||||
<input class="btn-switch" type="checkbox" @model="billboardScaleByDistance">
|
||||
</div>
|
||||
<div class="col" style="margin: 0 10px;">
|
||||
<span class="label">最近距离</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="1" max="99999999" @model="billboardNear">
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="margin-left: 10px;">
|
||||
<span class="label">最远距离</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="1" max="99999999" @model="billboardFar">
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 mode="1">文字设置</h4>
|
||||
<div class="row" mode="1">
|
||||
<div class="col" style="flex: 0 0 80px;margin: 0 10px;">
|
||||
<span class="label" style="flex: none;">显隐</span>
|
||||
<input class="btn-switch" type="checkbox" @model="labelShow">
|
||||
</div>
|
||||
<div class="col font-select-box" style="margin: 0 0px;flex: 0 0 150px;">
|
||||
<span class="label" style="flex: none;">字体选择</span>
|
||||
<div class="input input-select font-select"></div>
|
||||
</div>
|
||||
<div class="col" style="margin: 0 10px;">
|
||||
<span class="label">文字大小</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="1" max="99" @model="labelFontSize" style="width: 70px;">
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="margin-left: 10px;">
|
||||
<span class="label">文字颜色</span>
|
||||
<div class="labelColor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
`
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -54,7 +54,7 @@ function html(that) {
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 5;">
|
||||
<span class="label">文字内容</span>
|
||||
<input class="input" type="text" @model="textValue">
|
||||
<input class="input" type="text" @model="textValue" maxlength="30">
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn" @click="textPosPick">设置位置</span>
|
||||
|
||||
@ -123,7 +123,7 @@ class GroundSvg extends Base {
|
||||
}
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -796,7 +796,7 @@ class GroundSvg extends Base {
|
||||
await this._DialogObject.contentAppChild(contentElm)
|
||||
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
|
||||
@ -10,6 +10,7 @@ import { FontLoader } from '../../../../static/3rdparty/three/jsm/loaders/FontLo
|
||||
import { TextGeometry } from '../../../../static/3rdparty/three/jsm/geometries/TextGeometry.js';
|
||||
import * as variable from '../../../../static/3rdparty/three/fonts/FZZongYi-M05S_regular.typeface.json'
|
||||
import Base from "../index";
|
||||
import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global'
|
||||
import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen'
|
||||
|
||||
class GroundSvg extends Base {
|
||||
@ -108,13 +109,19 @@ class GroundSvg extends Base {
|
||||
this._isdrag = false
|
||||
this._EventBinding = new EventBinding()
|
||||
|
||||
if(this.sdk.entityMap.get(this.options.id)) {
|
||||
return
|
||||
}
|
||||
this.sdk.addIncetance(this.options.id, this)
|
||||
this.picking = true
|
||||
|
||||
|
||||
if (this.options.show) {
|
||||
setSplitDirection(0, this.options.id)
|
||||
}
|
||||
|
||||
this._entityArray = []
|
||||
|
||||
this.init()
|
||||
}
|
||||
|
||||
@ -153,12 +160,18 @@ class GroundSvg extends Base {
|
||||
|
||||
set show(v) {
|
||||
if (typeof v === "boolean") {
|
||||
super.show = v
|
||||
if (this.options.text && this.options.text.show && this.text) {
|
||||
if (this.options.text && this.options.text.show) {
|
||||
if(this.text) {
|
||||
if((!this.showView || this.showView == 3)) {
|
||||
this.text.show = v
|
||||
}
|
||||
syncData(this.sdk, this.options.id)
|
||||
syncSplitData(this.sdk, this.options.id)
|
||||
else {
|
||||
this.text.show = false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
super.show = v
|
||||
} else {
|
||||
console.error("参数必须为boolean")
|
||||
}
|
||||
@ -206,7 +219,7 @@ class GroundSvg extends Base {
|
||||
}
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -304,7 +317,12 @@ class GroundSvg extends Base {
|
||||
set textShow(v) {
|
||||
this.options.text.show = v
|
||||
if (this.show) {
|
||||
if((!this.showView || this.showView == 3)) {
|
||||
this.text && (this.text.show = v)
|
||||
}
|
||||
else {
|
||||
this.text && (this.text.show = false)
|
||||
}
|
||||
if (this.options.text.position) {
|
||||
setTimeout(() => {
|
||||
if (this.options.text.position.alt) {
|
||||
@ -334,7 +352,7 @@ class GroundSvg extends Base {
|
||||
this.text && (this.text.color = v)
|
||||
if (this._elms.textColor) {
|
||||
this._elms.textColor.forEach((item, i) => {
|
||||
let textColorPicker = new ewPlugins('colorpicker', {
|
||||
let textColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -358,7 +376,10 @@ class GroundSvg extends Base {
|
||||
}
|
||||
set textFontSize(v) {
|
||||
this.options.text.fontSize = v
|
||||
this.text && (this.text.fontSize = v)
|
||||
if(this.text) {
|
||||
this.text.fontSize = v
|
||||
this.text.pixelOffset = v
|
||||
}
|
||||
this._elms.textFontSize && this._elms.textFontSize.forEach((item) => {
|
||||
item.value = v
|
||||
})
|
||||
@ -594,12 +615,13 @@ class GroundSvg extends Base {
|
||||
}
|
||||
|
||||
init() {
|
||||
let url = this.replaceHost(this.options.url, this.options.host)
|
||||
syncData(this.sdk, this.options.id)
|
||||
this.hierarchys = []
|
||||
this.originalOptions = this.deepCopyObj(this.options)
|
||||
let geometryArray = []
|
||||
const loader = new SVGLoader();
|
||||
loader.load(this.options.url, (data) => {
|
||||
loader.load(url, (data) => {
|
||||
if (!this.sdk || !this.sdk.viewer || !this.sdk.viewer.entities) {
|
||||
return
|
||||
}
|
||||
@ -819,8 +841,13 @@ class GroundSvg extends Base {
|
||||
}
|
||||
for (let i = 0; i < this.hierarchys.length; i++) {
|
||||
for (let m = 0; m < this.hierarchys[i].length; m++) {
|
||||
let id = this.options.id + `-${i}_${m}}`
|
||||
let oldEntity = this.sdk.viewer.entities.getById(id)
|
||||
if(oldEntity) {
|
||||
this.sdk.viewer.entities.remove(oldEntity)
|
||||
}
|
||||
let entity = this.sdk.viewer.entities.add({
|
||||
id: this.options.id + `-${i}_${m}`,
|
||||
id: this.options.id + `-${i}_${m}}`,
|
||||
show: this.options.show,
|
||||
polygon: {
|
||||
hierarchy: new Cesium.CallbackProperty(() => {
|
||||
@ -853,6 +880,7 @@ class GroundSvg extends Base {
|
||||
color: this.geojson.features[i].properties.color
|
||||
}
|
||||
}
|
||||
this._entityArray.push(entity)
|
||||
this.entity.add(entity)
|
||||
}
|
||||
}
|
||||
@ -884,11 +912,10 @@ class GroundSvg extends Base {
|
||||
text: that.options.text.value,
|
||||
fontSize: that.options.text.fontSize,
|
||||
color: that.options.text.color,
|
||||
pixelOffset: that.options.text.pixelOffset,
|
||||
pixelOffset: that.options.text.fontSize,
|
||||
backgroundColor: that.options.text.backgroundColor,
|
||||
lineColor: that.options.text.lineColor,
|
||||
lineWidth: that.options.text.lineWidth,
|
||||
pixelOffset: 0,
|
||||
lineColor: '#ffffff00',
|
||||
lineWidth: 0,
|
||||
scaleByDistance: that.options.text.scaleByDistance,
|
||||
backgroundColor: ['#ffffff00', '#ffffff00'],
|
||||
near: that.options.text.near,
|
||||
@ -923,7 +950,9 @@ class GroundSvg extends Base {
|
||||
this.text && (this.options.text.position = { lng: this.text.position[0], lat: this.text.position[1], alt: this.text.position[2] })
|
||||
this.originalOptions = this.deepCopyObj(this.options)
|
||||
this._DialogObject.close()
|
||||
this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions)
|
||||
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)
|
||||
},
|
||||
@ -991,7 +1020,7 @@ class GroundSvg extends Base {
|
||||
this.attributeType = this.options.attributeType
|
||||
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1006,7 +1035,7 @@ class GroundSvg extends Base {
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
|
||||
let textColorPicker = new ewPlugins('colorpicker', {
|
||||
let textColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("textColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1186,9 +1215,12 @@ class GroundSvg extends Base {
|
||||
* @param {boolean} status=false 状态
|
||||
*/
|
||||
drag(status, cd) {
|
||||
if (!this.#loaded) {
|
||||
if (!this.#loaded || !this.sdk || !this.sdk.viewer || !this.entity || !this.entity.values || this.entity.values.length == 0) {
|
||||
return
|
||||
}
|
||||
let greenImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA+0lEQVR4AZSTPQ7CMAyFk0jAFYCRCbgEbHAKBqRyKCoYOAVs5RLAQseKKxQkwntWVCltJdzK+bO/59ZW6kztGX6mi/F7dhiV0ydWzxH2B8ZquIkSAN47bzNAW2vtBKtY2G8ZIyPOMFUJxuX8DF+C8c+SwAonCSSr9SvxaCawogHrQl2aNwOPLKHWoa5N5O5woNZ575cdNBFKrQsdjgLaA7XSRK2gjWMJeVtA40MJOUvgxdHwDQYlZO5r/akRUTqoda/e4wo+xehqKbXSxKJ/3xlvL+oMYEUDgSTAaorBbY1V8yVpYIGb+G9kVtTFi3Vkh4XAFPZHxsjAVdkPAAD//0PYov0AAAAGSURBVAMA5pZjby819WUAAAAASUVORK5CYII='
|
||||
let redImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA1klEQVR4AZST0Q2CQBBEF0qhEfjDKvgwwaIk+kEV8oeFSCs4D4+gB4l7ZIfszc7OLXDkFl2zWSnchJcwB5DDlZHcfgwkvkowCmehENYghxuDZuU3AxUeYlvhX7RBu+iWCUSwc70wvlsdeixXwnN5do6tmaRkgiauJKwbDKqEhlhaYcAbjgvedYGBV3yow2A6rPjICQMOjk++V40Y9HvezfR5ZvaUvBNSo6OXCUzJRd2D4I0h9Gz/goiTuj2TsDNayW0zYJWZMQkH667199chh6uCRuVPvAEAAP//mBlPPAAAAAZJREFUAwAzdy+JgzpBHQAAAABJRU5ErkJggg=='
|
||||
let yellowImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA8ElEQVR4AZyQMY7CQAxFbbe7W7IH2GrJJaCDU1AgwaFAUHAK6OASQAM9UAJtzLxRBikUKMwo1jjf//0oNnk518t/534uZtdTcbidC6fooxZmL3apBdwv7Ym6rV1kqCp/yUwftTDDk3TuZ0D40tJdR4jvCg/e5IkBVWoviQ3uXsWI8c+kNoBqFhhYM7dBbfLBC6yVLl3JPLDGhjN5gY1LzA2AM3c50uQUrJnKWjIPrJVaLjJ5gbWf1n6j6tNPQ2Bg4xK/WrtxCFiFavqsKkZiANT377ZPKv27woM3eZ4BCKS6ll0VmbNhNIo+amGGBy3VAwAA//9///lSAAAABklEQVQDAADzbcvdBag1AAAAAElFTkSuQmCC'
|
||||
this.ismove = false
|
||||
this._isdrag = status
|
||||
if (this.ScreenSpaceEventHandler) {
|
||||
@ -1253,6 +1285,9 @@ class GroundSvg extends Base {
|
||||
// 中心点到鼠标的距离
|
||||
let distance = turf.rhumbDistance(pointC, point2, options);
|
||||
|
||||
let flag = false
|
||||
let flag2 = false
|
||||
|
||||
switch (this.pickPoint.id) {
|
||||
case 'svg-control-points_0':
|
||||
angle = bearing2_0 - bearing1
|
||||
@ -1264,12 +1299,13 @@ class GroundSvg extends Base {
|
||||
bearingH = (((turf.rhumbBearing(pointC, turf.point(controlPoints[2])) + 360) - this.angle) % 360)
|
||||
angleW = bearing2 - bearingW
|
||||
angleH = bearing2 - bearingH
|
||||
|
||||
if ((angleW > -360 && angleW < -90) || (angleW < 360 && angleW > 90)) {
|
||||
angleW = angleW + 180
|
||||
flag = true
|
||||
}
|
||||
if ((angleH > -360 && angleH < -90) || (angleH < 360 && angleH > 90)) {
|
||||
angleH = angleH + 180
|
||||
flag2 = true
|
||||
}
|
||||
|
||||
radiansW = (Math.PI / 180) * angleW
|
||||
@ -1277,9 +1313,58 @@ class GroundSvg extends Base {
|
||||
// 矩形高度
|
||||
w = (Math.cos(radiansW) * distance) * 2
|
||||
h = (Math.cos(radiansH) * distance) * 2
|
||||
|
||||
if(h<0) {
|
||||
flag2 = !flag2
|
||||
}
|
||||
if(w<0) {
|
||||
flag = !flag
|
||||
}
|
||||
if (flag && flag2) {
|
||||
// this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
this.pointEntityCollection.values[1].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[3].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[7].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[9].billboard.image = redImg
|
||||
}
|
||||
else {
|
||||
if (flag) {
|
||||
// this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
// this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
this.pointEntityCollection.values[1].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[3].billboard.image = redImg
|
||||
this.pointEntityCollection.values[7].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[9].billboard.image = greenImg
|
||||
}
|
||||
else if (flag2) {
|
||||
// this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
// this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
this.pointEntityCollection.values[1].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[3].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[7].billboard.image = redImg
|
||||
this.pointEntityCollection.values[9].billboard.image = greenImg
|
||||
}
|
||||
else {
|
||||
// this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
// this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
this.pointEntityCollection.values[1].billboard.image = redImg
|
||||
this.pointEntityCollection.values[3].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[7].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[9].billboard.image = greenImg
|
||||
}
|
||||
}
|
||||
// scaleY值
|
||||
this.scale.x = w / 3.5
|
||||
this.scale.y = h / 3.5
|
||||
this.scale.x = Math.abs(w) / 3.5
|
||||
this.scale.y = Math.abs(h) / 3.5
|
||||
break
|
||||
case 'svg-control-points_2':
|
||||
case 'svg-control-points_8':
|
||||
@ -1288,6 +1373,16 @@ class GroundSvg extends Base {
|
||||
|
||||
if ((angleH > -360 && angleH < -90) || (angleH < 360 && angleH > 90)) {
|
||||
angleH = angleH + 180
|
||||
// this.pointEntityCollection.values[2].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[8].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
this.pointEntityCollection.values[2].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[8].billboard.image = redImg
|
||||
}
|
||||
else {
|
||||
// this.pointEntityCollection.values[2].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
// this.pointEntityCollection.values[8].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
this.pointEntityCollection.values[2].billboard.image = redImg
|
||||
this.pointEntityCollection.values[8].billboard.image = greenImg
|
||||
}
|
||||
|
||||
radiansH = (Math.PI / 180) * angleH
|
||||
@ -1305,9 +1400,11 @@ class GroundSvg extends Base {
|
||||
|
||||
if ((angleW > -360 && angleW < -90) || (angleW < 360 && angleW > 90)) {
|
||||
angleW = angleW + 180
|
||||
flag = true
|
||||
}
|
||||
if ((angleH > -360 && angleH < -90) || (angleH < 360 && angleH > 90)) {
|
||||
angleH = angleH + 180
|
||||
flag2 = true
|
||||
}
|
||||
|
||||
radiansW = (Math.PI / 180) * angleW
|
||||
@ -1315,9 +1412,59 @@ class GroundSvg extends Base {
|
||||
// 矩形高度
|
||||
w = (Math.cos(radiansW) * distance) * 2
|
||||
h = (Math.cos(radiansH) * distance) * 2
|
||||
|
||||
if(h<0) {
|
||||
flag2 = !flag2
|
||||
}
|
||||
if(w<0) {
|
||||
flag = !flag
|
||||
}
|
||||
|
||||
if (flag && flag2) {
|
||||
// this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
// this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
this.pointEntityCollection.values[1].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[3].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[7].billboard.image = redImg
|
||||
this.pointEntityCollection.values[9].billboard.image = greenImg
|
||||
}
|
||||
else {
|
||||
if (flag) {
|
||||
// this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
// this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
this.pointEntityCollection.values[1].billboard.image = redImg
|
||||
this.pointEntityCollection.values[3].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[7].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[9].billboard.image = greenImg
|
||||
}
|
||||
else if (flag2) {
|
||||
// this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
this.pointEntityCollection.values[1].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[3].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[7].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[9].billboard.image = redImg
|
||||
}
|
||||
else {
|
||||
// this.pointEntityCollection.values[1].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[3].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
// this.pointEntityCollection.values[7].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[9].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
this.pointEntityCollection.values[1].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[3].billboard.image = redImg
|
||||
this.pointEntityCollection.values[7].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[9].billboard.image = greenImg
|
||||
}
|
||||
}
|
||||
// scaleY值
|
||||
this.scale.x = w / 3.5
|
||||
this.scale.y = h / 3.5
|
||||
this.scale.x = Math.abs(w) / 3.5
|
||||
this.scale.y = Math.abs(h) / 3.5
|
||||
break
|
||||
case 'svg-control-points_4':
|
||||
bearingW = (((turf.rhumbBearing(pointC, turf.point(controlPoints[4])) + 360) - this.angle) % 360)
|
||||
@ -1325,6 +1472,16 @@ class GroundSvg extends Base {
|
||||
|
||||
if ((angleW > -360 && angleW < -90) || (angleW < 360 && angleW > 90)) {
|
||||
angleW = angleW + 180
|
||||
// this.pointEntityCollection.values[4].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[6].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
this.pointEntityCollection.values[4].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[6].billboard.image = redImg
|
||||
}
|
||||
else {
|
||||
// this.pointEntityCollection.values[6].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[4].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
this.pointEntityCollection.values[6].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[4].billboard.image = redImg
|
||||
}
|
||||
|
||||
radiansW = (Math.PI / 180) * angleW
|
||||
@ -1355,6 +1512,16 @@ class GroundSvg extends Base {
|
||||
|
||||
if ((angleW > -360 && angleW < -90) || (angleW < 360 && angleW > 90)) {
|
||||
angleW = angleW + 180
|
||||
// this.pointEntityCollection.values[6].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[4].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
this.pointEntityCollection.values[6].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[4].billboard.image = redImg
|
||||
}
|
||||
else {
|
||||
// this.pointEntityCollection.values[4].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[6].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
this.pointEntityCollection.values[4].billboard.image = greenImg
|
||||
this.pointEntityCollection.values[6].billboard.image = redImg
|
||||
}
|
||||
|
||||
radiansW = (Math.PI / 180) * angleW
|
||||
@ -1419,18 +1586,22 @@ class GroundSvg extends Base {
|
||||
}
|
||||
for (let i = 0; i < this.pointEntityCollection.values.length; i++) {
|
||||
if (pickPoint && this.pointEntityCollection.values[i].id === pickPoint.id) {
|
||||
pickPoint.point.color = Cesium.Color.fromCssColorString('#ffff00')
|
||||
// pickPoint.point.color = Cesium.Color.fromCssColorString('#ffff00')
|
||||
pickPoint.billboard.image = yellowImg
|
||||
}
|
||||
else {
|
||||
switch (this.pointEntityCollection.values[i].id) {
|
||||
case 'svg-control-points_5':
|
||||
this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#ffff00')
|
||||
// this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#ffff00')
|
||||
this.pointEntityCollection.values[i].billboard.image = yellowImg
|
||||
break
|
||||
case 'svg-control-points_0':
|
||||
this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
// this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
this.pointEntityCollection.values[i].billboard.image = redImg
|
||||
break
|
||||
default:
|
||||
this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
this.pointEntityCollection.values[i].billboard.image = greenImg
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1445,7 +1616,8 @@ class GroundSvg extends Base {
|
||||
) {
|
||||
YJ.Global.CameraController(this.sdk, false)
|
||||
this.pickPoint = pickedObject.primitive._id
|
||||
this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
// this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
this.pickPoint.billboard.image = redImg
|
||||
break
|
||||
}
|
||||
}
|
||||
@ -1455,13 +1627,16 @@ class GroundSvg extends Base {
|
||||
YJ.Global.CameraController(this.sdk, true)
|
||||
switch (this.pickPoint.id) {
|
||||
case 'svg-control-points_4':
|
||||
this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ffff00')
|
||||
// this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ffff00')
|
||||
this.pickPoint.billboard.image = yellowImg
|
||||
break
|
||||
case 'svg-control-points_9':
|
||||
this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
// this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ff0000')
|
||||
this.pickPoint.billboard.image = redImg
|
||||
break
|
||||
default:
|
||||
this.pickPoint.point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
// this.pickPoint.point.color = Cesium.Color.fromCssColorString('#00ff0a')
|
||||
this.pickPoint.billboard.image = greenImg
|
||||
}
|
||||
this.pickPoint = null
|
||||
}
|
||||
@ -1500,13 +1675,19 @@ class GroundSvg extends Base {
|
||||
controlPoints[9] = turf.destination(point, wh, 0 + angle, options).geometry.coordinates
|
||||
|
||||
this.controlPoints = controlPoints
|
||||
if (!this.sdk || !this.sdk.viewer) {
|
||||
return
|
||||
}
|
||||
for (let i = 0; i < this.controlPoints.length; i++) {
|
||||
let color = '#00ff0a'
|
||||
let img = greenImg
|
||||
if (i === 5) {
|
||||
color = '#ffff00'
|
||||
img = yellowImg
|
||||
}
|
||||
if (i === 0) {
|
||||
color = '#ff0000'
|
||||
img = redImg
|
||||
}
|
||||
let entity = this.sdk.viewer.entities.getOrCreateEntity('svg-control-points_' + i)
|
||||
entity.show = true
|
||||
@ -1514,11 +1695,18 @@ class GroundSvg extends Base {
|
||||
entity.position = new Cesium.CallbackProperty(() => {
|
||||
return Cesium.Cartesian3.fromDegrees(...this.controlPoints[i])
|
||||
})
|
||||
entity.point = new Cesium.PointGraphics({
|
||||
color: Cesium.Color.fromCssColorString(color), // 点的颜色
|
||||
pixelSize: 10, // 点的大小
|
||||
// entity.point = new Cesium.PointGraphics({
|
||||
// color: Cesium.Color.fromCssColorString(color), // 点的颜色
|
||||
// pixelSize: 10, // 点的大小
|
||||
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||
// scaleByDistance: new Cesium.NearFarScalar(0.0, 1.0, 1.0e10, 1.0),
|
||||
// disableDepthTestDistance: Number.POSITIVE_INFINITY // 不应用深度测试
|
||||
// })
|
||||
entity.billboard = new Cesium.BillboardGraphics({
|
||||
image: img,
|
||||
width: 10,
|
||||
height: 10,
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||
scaleByDistance: new Cesium.NearFarScalar(0.0, 1.0, 1.0e10, 1.0),
|
||||
disableDepthTestDistance: Number.POSITIVE_INFINITY // 不应用深度测试
|
||||
})
|
||||
this.pointEntityCollection.add(entity)
|
||||
@ -1740,7 +1928,7 @@ class GroundSvg extends Base {
|
||||
})
|
||||
this.hierarchys = [...hierarchys]
|
||||
|
||||
if (!this.entity) {
|
||||
if (!this.entity || !this.entity.values || this.entity.values.length == 0) {
|
||||
return
|
||||
}
|
||||
|
||||
@ -1988,21 +2176,25 @@ class GroundSvg extends Base {
|
||||
}
|
||||
|
||||
async remove() {
|
||||
this._worker.onmessage = (event) => {}
|
||||
await this.sdk.removeIncetance(this.options.id)
|
||||
if (!this.entity) {
|
||||
return
|
||||
}
|
||||
this.drag(false)
|
||||
if(!this.sdk || !this.sdk.viewer) {
|
||||
return
|
||||
}
|
||||
this.sdk.viewer.entities.remove(this.entity)
|
||||
this.text && this.text.remove()
|
||||
for (let i = this.entity.values.length; i >= 0; i--) {
|
||||
this.sdk.viewer.entities.remove(this.entity.values[i])
|
||||
}
|
||||
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)
|
||||
}
|
||||
|
||||
@ -2062,6 +2254,59 @@ class GroundSvg extends Base {
|
||||
}
|
||||
this._update()
|
||||
}
|
||||
|
||||
async flyTo(options = {}) {
|
||||
if (this._error) {
|
||||
return
|
||||
}
|
||||
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 = { ...this.options.position }
|
||||
// 如果没有高度值,则获取紧贴高度计算
|
||||
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 array = []
|
||||
for (let i = 0; i < this.controlPoints.length; i++) {
|
||||
let height = await this.getClampToHeight({lng: this.controlPoints[i][0], lat: this.controlPoints[i][1]})
|
||||
let cartesian = Cesium.Cartesian3.fromDegrees(this.controlPoints[i][0], this.controlPoints[i][1], height)
|
||||
array.push(cartesian.x, cartesian.y, cartesian.z)
|
||||
}
|
||||
let BoundingSphere = Cesium.BoundingSphere.fromVertices(array)
|
||||
|
||||
this.sdk.viewer.camera.flyToBoundingSphere(BoundingSphere, {
|
||||
offset: options.orientation || {
|
||||
heading: Cesium.Math.toRadians(0.0),
|
||||
pitch: Cesium.Math.toRadians(-60.0),
|
||||
roll: Cesium.Math.toRadians(0.0)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default GroundSvg
|
||||
@ -14,6 +14,8 @@ import {
|
||||
|
||||
class LabelObject extends Base {
|
||||
#updateBillboardImageTimeout
|
||||
#canvas = document.createElement('canvas')
|
||||
#canvas2 = document.createElement('canvas')
|
||||
constructor(sdk, options = {}, model) {
|
||||
super(sdk, options)
|
||||
this.model = model
|
||||
@ -34,10 +36,10 @@ class LabelObject extends Base {
|
||||
}
|
||||
this.options.text = textArray.join('\n')
|
||||
this.options.fontFamily = options.fontFamily || 0
|
||||
this.font = getFontFamily(this.options.fontFamily) || 'Helvetica'
|
||||
this.font = getFontFamily(this.options.fontFamily) || 'SimHei'
|
||||
this.options.fontSize = options.fontSize || 20
|
||||
this.options.lineWidth = options.lineWidth || 4
|
||||
this.options.lineColor = options.lineColor || '#fff000'
|
||||
this.options.lineColor = options.lineColor || '#00ffff80'
|
||||
this.options.color = options.color || '#ffffff'
|
||||
this.options.ground =
|
||||
options.ground || options.ground === false ? options.ground : true
|
||||
@ -46,8 +48,8 @@ class LabelObject extends Base {
|
||||
? options.pixelOffset
|
||||
: 20
|
||||
this.options.backgroundColor = options.backgroundColor || [
|
||||
'#42c6ef',
|
||||
'#42c6ef'
|
||||
'#00ffff80',
|
||||
'#00ffff80'
|
||||
]
|
||||
this.event = new MouseEvent(this.sdk)
|
||||
this.entity
|
||||
@ -65,6 +67,11 @@ class LabelObject extends Base {
|
||||
}
|
||||
this.originalOptions = copyObj(this.options)
|
||||
|
||||
let id = this.options.id + '-label'
|
||||
let oldEntity = this.sdk.viewer.entities.getById(id)
|
||||
if(oldEntity) {
|
||||
this.sdk.viewer.entities.remove(oldEntity)
|
||||
}
|
||||
this.entity = this.sdk.viewer.entities.add({
|
||||
show: this.options.show,
|
||||
id: this.options.id + '-label',
|
||||
@ -407,7 +414,7 @@ class LabelObject extends Base {
|
||||
|
||||
set fontFamily(v) {
|
||||
this.options.fontFamily = v || 0
|
||||
this.font = getFontFamily(this.options.fontFamily) || 'Helvetica'
|
||||
this.font = getFontFamily(this.options.fontFamily) || 'SimHei'
|
||||
this.updateBillboardImage()
|
||||
}
|
||||
|
||||
@ -415,7 +422,7 @@ class LabelObject extends Base {
|
||||
return this.options.lineWidth
|
||||
}
|
||||
set lineWidth(v) {
|
||||
this.options.lineWidth = Number(v)
|
||||
this.options.lineWidth = ((Number(v) || Number(v) === 0) ? Number(v) : 4)
|
||||
if (!this.entity) {
|
||||
return
|
||||
}
|
||||
@ -433,17 +440,18 @@ class LabelObject extends Base {
|
||||
this.updateBillboardImage()
|
||||
}
|
||||
updateBillboardImage() {
|
||||
clearTimeout(this.#updateBillboardImageTimeout)
|
||||
this.#updateBillboardImageTimeout = setTimeout(() => {
|
||||
clearTimeout(this.#updateBillboardImageTimeout)
|
||||
this.entity.billboard.image = this.getcanvas()
|
||||
}, 500)
|
||||
// clearTimeout(this.#updateBillboardImageTimeout)
|
||||
// this.#updateBillboardImageTimeout = setTimeout(() => {
|
||||
// clearTimeout(this.#updateBillboardImageTimeout)
|
||||
// this.entity.billboard.image = this.getcanvas()
|
||||
// }, 500)
|
||||
}
|
||||
get lineColor() {
|
||||
return this.options.pixelOffset
|
||||
}
|
||||
set lineColor(v) {
|
||||
this.options.lineColor = v
|
||||
this.options.lineColor = v || '#00ffff80'
|
||||
if (!this.entity) {
|
||||
return
|
||||
}
|
||||
@ -484,9 +492,8 @@ class LabelObject extends Base {
|
||||
// }
|
||||
|
||||
getcanvas() {
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
|
||||
const ctx = this.#canvas.getContext('2d')
|
||||
ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
|
||||
ctx.font = this.options.fontSize + 'px ' + this.font
|
||||
let texts = this.options.text.split('\n')
|
||||
let canvasWidth = 0
|
||||
@ -504,9 +511,8 @@ class LabelObject extends Base {
|
||||
if (canvasWidth < this.options.lineWidth) {
|
||||
canvasWidth = this.options.lineWidth
|
||||
}
|
||||
canvas.width = canvasWidth
|
||||
|
||||
canvas.height = this.options.pixelOffset + canvasHeight
|
||||
this.#canvas.width = canvasWidth
|
||||
this.#canvas.height = this.options.pixelOffset + canvasHeight
|
||||
const linearGradient = ctx.createLinearGradient(
|
||||
0,
|
||||
0,
|
||||
@ -553,15 +559,14 @@ class LabelObject extends Base {
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
|
||||
const canvas2 = document.createElement('canvas')
|
||||
const ctx2 = canvas2.getContext('2d')
|
||||
canvas2.width = canvas.width + 10
|
||||
canvas2.height = canvas.height + 10
|
||||
ctx2.drawImage(canvas, 5, 5);
|
||||
const ctx2 = this.#canvas2.getContext('2d')
|
||||
this.#canvas2.width = this.#canvas.width + 10
|
||||
this.#canvas2.height = this.#canvas.height + 10
|
||||
ctx2.drawImage(this.#canvas, 5, 5);
|
||||
|
||||
// const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
// ctx.putImageData(imageData, 40, 40);
|
||||
return canvas2
|
||||
return this.#canvas2.toDataURL("image/png")
|
||||
}
|
||||
|
||||
remove() {
|
||||
|
||||
@ -7,7 +7,7 @@ import EventBinding from './eventBinding'
|
||||
import Base from "../../index";
|
||||
import MouseEvent from '../../../../Event/index'
|
||||
import { syncPrimitives } from '../../../../Global/MultiViewportMode'
|
||||
import { syncData } from '../../../../Global/MultiViewportMode'
|
||||
import { syncData, getSdk as get2DSdk } from '../../../../Global/MultiViewportMode'
|
||||
import MouseTip from '../../../../MouseTip'
|
||||
import { setSplitDirection, syncSplitData, setActiveId } from '../../../../Global/SplitScreen'
|
||||
import { setActiveViewer, closeRotateAround, closeViewFollow} from '../../../../Global/global'
|
||||
@ -82,18 +82,34 @@ class Flame extends Base {
|
||||
|
||||
set show(v) {
|
||||
if (typeof v === "boolean") {
|
||||
let sdkD = get2DSdk().sdkD
|
||||
if (!this.isShowView || !sdkD) {
|
||||
this.options.show = v
|
||||
if (this.entity && this.sdk.viewer.camera.positionCartographic.height < 10000000) {
|
||||
this.entity.show = v
|
||||
}
|
||||
if (!this.showView || this.showView == 3 || !sdkD) {
|
||||
if (this.entity && this.sdk.viewer.camera.positionCartographic.height < 10000000) {
|
||||
this.entity.show = this.options.show
|
||||
}
|
||||
if (this.options.label && this.options.label.show) {
|
||||
this.label.show = this.options.show
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.entity && this.sdk.viewer.camera.positionCartographic.height < 10000000) {
|
||||
this.entity.show = false
|
||||
}
|
||||
if (this.options.label && this.options.label.show) {
|
||||
this.label.show = false
|
||||
}
|
||||
}
|
||||
|
||||
if (this._DialogObject && this._DialogObject.showBtn) {
|
||||
this._DialogObject.showBtn.checked = v
|
||||
}
|
||||
if (this.options.label && this.options.label.show) {
|
||||
this.label.show = v
|
||||
}
|
||||
|
||||
syncData(this.sdk, this.options.id)
|
||||
syncSplitData(this.sdk, this.options.id)
|
||||
this.isShowView = false
|
||||
} else {
|
||||
console.error("参数必须为boolean")
|
||||
}
|
||||
@ -245,7 +261,7 @@ class Flame extends Base {
|
||||
this.particleSystem.startColor = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.startColor) {
|
||||
this._elms.startColor.forEach((item, i) => {
|
||||
let picker = new ewPlugins('colorpicker', {
|
||||
let picker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -273,7 +289,7 @@ class Flame extends Base {
|
||||
this.particleSystem.endColor = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.endColor) {
|
||||
this._elms.endColor.forEach((item, i) => {
|
||||
let picker = new ewPlugins('colorpicker', {
|
||||
let picker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -496,7 +512,7 @@ class Flame extends Base {
|
||||
contentElm.innerHTML = html()
|
||||
this._DialogObject.contentAppChild(contentElm)
|
||||
// 颜色组件
|
||||
let startColorPicker = new ewPlugins('colorpicker', {
|
||||
let startColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("start_color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -510,7 +526,7 @@ class Flame extends Base {
|
||||
this.startColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let endColorPicker = new ewPlugins('colorpicker', {
|
||||
let endColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("end_color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
|
||||
@ -6,7 +6,7 @@ import { html } from "./_element";
|
||||
import EventBinding from './eventBinding'
|
||||
import Base from "../../index";
|
||||
import MouseEvent from '../../../../Event/index'
|
||||
import { syncData } from '../../../../Global/MultiViewportMode'
|
||||
import { syncData, getSdk as get2DSdk } from '../../../../Global/MultiViewportMode'
|
||||
import MouseTip from '../../../../MouseTip'
|
||||
import { setSplitDirection, syncSplitData, setActiveId } from '../../../../Global/SplitScreen'
|
||||
import { setActiveViewer, closeRotateAround, closeViewFollow} from '../../../../Global/global'
|
||||
@ -83,18 +83,32 @@ class Fountain extends Base {
|
||||
|
||||
set show(v) {
|
||||
if (typeof v === "boolean") {
|
||||
let sdkD = get2DSdk().sdkD
|
||||
if (!this.isShowView || !sdkD) {
|
||||
this.options.show = v
|
||||
}
|
||||
if (!this.showView || this.showView == 3 || !sdkD) {
|
||||
if (this.entity && this.sdk.viewer.camera.positionCartographic.height < 10000000) {
|
||||
this.entity.show = v
|
||||
this.entity.show = this.options.show
|
||||
}
|
||||
if (this.options.label && this.options.label.show) {
|
||||
this.label.show = this.options.show
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.entity && this.sdk.viewer.camera.positionCartographic.height < 10000000) {
|
||||
this.entity.show = false
|
||||
}
|
||||
if (this.options.label && this.options.label.show) {
|
||||
this.label.show = false
|
||||
}
|
||||
}
|
||||
if(this._DialogObject && this._DialogObject.showBtn) {
|
||||
this._DialogObject.showBtn.checked = v
|
||||
}
|
||||
if (this.options.label && this.options.label.show) {
|
||||
this.label.show = v
|
||||
}
|
||||
syncData(this.sdk, this.options.id)
|
||||
syncSplitData(this.sdk, this.options.id)
|
||||
this.isShowView = false
|
||||
} else {
|
||||
console.error("参数必须为boolean")
|
||||
}
|
||||
@ -269,7 +283,7 @@ class Fountain extends Base {
|
||||
this.particleSystem.startColor = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.startColor) {
|
||||
this._elms.startColor.forEach((item, i) => {
|
||||
let picker = new ewPlugins('colorpicker', {
|
||||
let picker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -297,7 +311,7 @@ class Fountain extends Base {
|
||||
this.particleSystem.endColor = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.endColor) {
|
||||
this._elms.endColor.forEach((item, i) => {
|
||||
let picker = new ewPlugins('colorpicker', {
|
||||
let picker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -520,7 +534,7 @@ class Fountain extends Base {
|
||||
contentElm.innerHTML = html()
|
||||
this._DialogObject.contentAppChild(contentElm)
|
||||
// 颜色组件
|
||||
let startColorPicker = new ewPlugins('colorpicker', {
|
||||
let startColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("start_color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -534,7 +548,7 @@ class Fountain extends Base {
|
||||
this.startColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let endColorPicker = new ewPlugins('colorpicker', {
|
||||
let endColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("end_color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
|
||||
@ -6,7 +6,7 @@ import { html, css } from "./_element";
|
||||
import EventBinding from './eventBinding'
|
||||
import Base from "../../index";
|
||||
import MouseEvent from '../../../../Event/index'
|
||||
import { syncData } from '../../../../Global/MultiViewportMode'
|
||||
import { syncData, getSdk as get2DSdk } from '../../../../Global/MultiViewportMode'
|
||||
import MouseTip from '../../../../MouseTip'
|
||||
import { setSplitDirection, syncSplitData, setActiveId } from '../../../../Global/SplitScreen'
|
||||
import { setActiveViewer, closeRotateAround, closeViewFollow} from '../../../../Global/global'
|
||||
@ -81,18 +81,32 @@ class Smoke extends Base {
|
||||
|
||||
set show(v) {
|
||||
if (typeof v === "boolean") {
|
||||
let sdkD = get2DSdk().sdkD
|
||||
if (!this.isShowView || !sdkD) {
|
||||
this.options.show = v
|
||||
}
|
||||
if (!this.showView || this.showView == 3 || !sdkD) {
|
||||
if (this.entity && this.sdk.viewer.camera.positionCartographic.height < 10000000) {
|
||||
this.entity.show = v
|
||||
this.entity.show = this.options.show
|
||||
}
|
||||
if (this.options.label && this.options.label.show) {
|
||||
this.label.show = this.options.show
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.entity && this.sdk.viewer.camera.positionCartographic.height < 10000000) {
|
||||
this.entity.show = false
|
||||
}
|
||||
if (this.options.label && this.options.label.show) {
|
||||
this.label.show = false
|
||||
}
|
||||
}
|
||||
if(this._DialogObject && this._DialogObject.showBtn) {
|
||||
this._DialogObject.showBtn.checked = v
|
||||
}
|
||||
if (this.options.label && this.options.label.show) {
|
||||
this.label.show = v
|
||||
}
|
||||
syncData(this.sdk, this.options.id)
|
||||
syncSplitData(this.sdk, this.options.id)
|
||||
this.isShowView = false
|
||||
} else {
|
||||
console.error("参数必须为boolean")
|
||||
}
|
||||
@ -243,7 +257,7 @@ class Smoke extends Base {
|
||||
this.particleSystem.startColor = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.startColor) {
|
||||
this._elms.startColor.forEach((item, i) => {
|
||||
let picker = new ewPlugins('colorpicker', {
|
||||
let picker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -271,7 +285,7 @@ class Smoke extends Base {
|
||||
this.particleSystem.endColor = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.endColor) {
|
||||
this._elms.endColor.forEach((item, i) => {
|
||||
let picker = new ewPlugins('colorpicker', {
|
||||
let picker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -494,7 +508,7 @@ class Smoke extends Base {
|
||||
contentElm.innerHTML = html()
|
||||
this._DialogObject.contentAppChild(contentElm)
|
||||
// 颜色组件
|
||||
let startColorPicker = new ewPlugins('colorpicker', {
|
||||
let startColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("start_color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -508,7 +522,7 @@ class Smoke extends Base {
|
||||
this.startColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let endColorPicker = new ewPlugins('colorpicker', {
|
||||
let endColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("end_color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
|
||||
@ -5,7 +5,7 @@ import Dialog from '../../../Element/Dialog';
|
||||
import { html, css } from "./_element";
|
||||
import Base from "../../index";
|
||||
import MouseEvent from '../../../../Event/index'
|
||||
import { syncData } from '../../../../Global/MultiViewportMode'
|
||||
import { syncData, getSdk as get2DSdk } from '../../../../Global/MultiViewportMode'
|
||||
import MouseTip from '../../../../MouseTip'
|
||||
import { setSplitDirection, syncSplitData, setActiveId } from '../../../../Global/SplitScreen'
|
||||
import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../../Global/global'
|
||||
@ -84,18 +84,32 @@ class Spout extends Base {
|
||||
|
||||
set show(v) {
|
||||
if (typeof v === "boolean") {
|
||||
let sdkD = get2DSdk().sdkD
|
||||
if (!this.isShowView || !sdkD) {
|
||||
this.options.show = v
|
||||
}
|
||||
if (!this.showView || this.showView == 3 || !sdkD) {
|
||||
if (this.entity && this.sdk.viewer.camera.positionCartographic.height < 10000000) {
|
||||
this.entity.show = v
|
||||
this.entity.show = this.options.show
|
||||
}
|
||||
if (this.options.label && this.options.label.show) {
|
||||
this.label.show = this.options.show
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.entity && this.sdk.viewer.camera.positionCartographic.height < 10000000) {
|
||||
this.entity.show = false
|
||||
}
|
||||
if (this.options.label && this.options.label.show) {
|
||||
this.label.show = false
|
||||
}
|
||||
}
|
||||
if(this._DialogObject && this._DialogObject.showBtn) {
|
||||
this._DialogObject.showBtn.checked = v
|
||||
}
|
||||
if (this.options.label && this.options.label.show) {
|
||||
this.label.show = v
|
||||
}
|
||||
syncData(this.sdk, this.options.id)
|
||||
syncSplitData(this.sdk, this.options.id)
|
||||
this.isShowView = false
|
||||
} else {
|
||||
console.error("参数必须为boolean")
|
||||
}
|
||||
@ -360,7 +374,7 @@ class Spout extends Base {
|
||||
this.particleSystem.startColor = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.startColor) {
|
||||
this._elms.startColor.forEach((item, i) => {
|
||||
let picker = new ewPlugins('colorpicker', {
|
||||
let picker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -388,7 +402,7 @@ class Spout extends Base {
|
||||
this.particleSystem.endColor = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.endColor) {
|
||||
this._elms.endColor.forEach((item, i) => {
|
||||
let picker = new ewPlugins('colorpicker', {
|
||||
let picker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -634,7 +648,7 @@ class Spout extends Base {
|
||||
contentElm.innerHTML = html()
|
||||
this._DialogObject.contentAppChild(contentElm)
|
||||
// 颜色组件
|
||||
let startColorPicker = new ewPlugins('colorpicker', {
|
||||
let startColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("start_color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -648,7 +662,7 @@ class Spout extends Base {
|
||||
this.startColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let endColorPicker = new ewPlugins('colorpicker', {
|
||||
let endColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("end_color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
|
||||
@ -24,7 +24,7 @@ class PincerArrowObject extends Base {
|
||||
* @param options {object} 属性
|
||||
* @param options.show=true {boolean} 显示/隐藏
|
||||
* @param options.name {string} 名称
|
||||
* @param options.color="#36c4ff" {string} 颜色
|
||||
* @param options.color="#ff000080" {string} 颜色
|
||||
* @param options.height {number} 高度
|
||||
* @param options.heightMode=2{number} 高度模式(0:海拔高度;1:相对地表;2:依附模式)
|
||||
* @param {Array.<object>} options.positions 坐标数组 [{lon,lat,alt},...]
|
||||
@ -34,13 +34,13 @@ class PincerArrowObject extends Base {
|
||||
constructor(sdk, options = {}, _Dialog = {}) {
|
||||
super(sdk, options);
|
||||
this.options.name = options.name || '未命名对象'
|
||||
this.options.color = options.color || "#36c4ff"
|
||||
this.options.color = options.color || "#ff000080"
|
||||
this.options.show = (options.show || options.show === false) ? options.show : true
|
||||
this.options.positions = options.positions || []
|
||||
this.options.heightMode = (options.heightMode || options.heightMode == 0) ? options.heightMode : 2
|
||||
this.options.line = options.line || {}
|
||||
this.options.line.width = this.options.line.width || 2
|
||||
this.options.line.color = this.options.line.color || 'rgba(155, 155, 124, 0.89)'
|
||||
this.options.line.width = ((this.options.line.width || this.options.line.width === 0) ? this.options.line.width : 3)
|
||||
this.options.line.color = this.options.line.color || 'rgba(255, 0, 0, 1)'
|
||||
this.options['area-unit'] = options['area-unit'] || '平方米'
|
||||
this.options.height = options.height
|
||||
this.options.loop = options.loop || false
|
||||
@ -62,8 +62,8 @@ class PincerArrowObject extends Base {
|
||||
color: options.label.color || '#ffffff',
|
||||
lineWidth: (options.label.lineWidth || options.label.lineWidth === 0) ? options.label.lineWidth : 4,
|
||||
pixelOffset: (options.label.pixelOffset || options.label.pixelOffset === 0) ? options.label.pixelOffset : 20,
|
||||
backgroundColor: options.label.backgroundColor || ['#42c6ef', '#42c6ef'],
|
||||
lineColor: options.label.lineColor || '#fff000',
|
||||
backgroundColor: options.label.backgroundColor || ['#00ffff80', '#00ffff80'],
|
||||
lineColor: options.label.lineColor || '#00ffff80',
|
||||
scaleByDistance: options.label.scaleByDistance || false,
|
||||
near: (options.label.near || options.label.near === 0) ? options.label.near : 2000,
|
||||
far: (options.label.far || options.label.far === 0) ? options.label.far : 100000,
|
||||
@ -122,31 +122,31 @@ class PincerArrowObject extends Base {
|
||||
return this.options.color
|
||||
}
|
||||
set color(v) {
|
||||
this.options.color = v
|
||||
this.options.color = v || 'rgba(255, 0, 0, 0.5)'
|
||||
if (!this.sdk || !this.sdk.viewer || !this.entity || !this.entity.polygon) {
|
||||
return
|
||||
}
|
||||
let material = Cesium.Color.fromCssColorString(v)
|
||||
let material = Cesium.Color.fromCssColorString(this.options.color)
|
||||
if (this.sdk.viewer.scene.mode === 2) {
|
||||
material = new Cesium.CustomColorMaterialSource({
|
||||
color: v
|
||||
color: this.options.color
|
||||
})
|
||||
}
|
||||
this.entity.polygon.material = material
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: v,
|
||||
defaultColor: this.options.color,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (c) => {
|
||||
this.color = c
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
this.color = 'rgba(255,0,0,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.color[i] = colorPicker
|
||||
@ -253,25 +253,25 @@ class PincerArrowObject extends Base {
|
||||
return this.options.line.color
|
||||
}
|
||||
set lineColor(v) {
|
||||
this.options.line.color = v
|
||||
this.options.line.color = v || 'rgba(255, 0, 0, 0.5)'
|
||||
if (!this.sdk || !this.sdk.viewer || !this.entity || !this.entity.polyline) {
|
||||
return
|
||||
}
|
||||
this.entity.polyline.material = Cesium.Color.fromCssColorString(v)
|
||||
this.entity.polyline.material = Cesium.Color.fromCssColorString(this.options.line.color)
|
||||
if (this._elms.lineColor) {
|
||||
this._elms.lineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: v,
|
||||
defaultColor: this.options.line.color,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (c) => {
|
||||
this.lineColor = c
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.lineColor = 'rgba(255,255,255,1)'
|
||||
this.lineColor = 'rgba(255,0,0,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.lineColor[i] = lineColorPicker
|
||||
@ -283,10 +283,10 @@ class PincerArrowObject extends Base {
|
||||
return this.options.line.width
|
||||
}
|
||||
set lineWidth(v) {
|
||||
this.options.line.width = v
|
||||
this.entity.polyline.width = v
|
||||
this.options.line.width = ((v || v === 0) ? v : 3)
|
||||
this.entity.polyline.width = this.options.line.width
|
||||
this._elms.lineWidth && this._elms.lineWidth.forEach((item) => {
|
||||
item.value = v
|
||||
item.value = this.options.line.width
|
||||
})
|
||||
}
|
||||
|
||||
@ -334,7 +334,7 @@ class PincerArrowObject extends Base {
|
||||
}
|
||||
set labelShow(v) {
|
||||
this.options.label.show = v
|
||||
if (this.show) {
|
||||
if (this.show && !this.showView || this.showView == 3) {
|
||||
this.label.show = v
|
||||
}
|
||||
else {
|
||||
@ -368,7 +368,7 @@ class PincerArrowObject extends Base {
|
||||
this.label.color = v
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -468,7 +468,7 @@ class PincerArrowObject extends Base {
|
||||
this.label.lineColor = v
|
||||
if (this._elms.labelLineColor) {
|
||||
this._elms.labelLineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -479,7 +479,7 @@ class PincerArrowObject extends Base {
|
||||
this.labelLineColor = color
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
this.labelLineColor = 'rgba(0,255,255,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.labelLineColor[i] = lineColorPicker
|
||||
@ -495,7 +495,7 @@ class PincerArrowObject extends Base {
|
||||
this.label.backgroundColor = [v, this.label.backgroundColor[1]]
|
||||
if (this._elms.labelBackgroundColorStart) {
|
||||
this._elms.labelBackgroundColorStart.forEach((item, i) => {
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -521,7 +521,7 @@ class PincerArrowObject extends Base {
|
||||
this.label.backgroundColor = [this.label.backgroundColor[0], v]
|
||||
if (this._elms.labelBackgroundColorEnd) {
|
||||
this._elms.labelBackgroundColorEnd.forEach((item, i) => {
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1192,7 +1192,7 @@ class PincerArrowObject extends Base {
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs('pincer-arrow-object-edit-tabs', undefined, this.sdk)
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1206,7 +1206,7 @@ class PincerArrowObject extends Base {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let linecolorPicker = new ewPlugins('colorpicker', {
|
||||
let linecolorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("lineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1220,7 +1220,7 @@ class PincerArrowObject extends Base {
|
||||
this.lineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1234,7 +1234,7 @@ class PincerArrowObject extends Base {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelLineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1248,7 +1248,7 @@ class PincerArrowObject extends Base {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorStart")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1262,7 +1262,7 @@ class PincerArrowObject extends Base {
|
||||
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
},
|
||||
})
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorEnd")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
|
||||
@ -25,7 +25,7 @@ class PolygonObject extends Base {
|
||||
* @param options.id {string} 唯一标识
|
||||
* @param options.show=true {boolean} 显示/隐藏
|
||||
* @param options.name {string} 名称
|
||||
* @param options.color="#36c4ff" {string} 颜色
|
||||
* @param options.color='rgba(255, 0, 0, 0.5)' {string} 颜色
|
||||
* @param options.height {number} 高度
|
||||
* @param options.heightMode=2{number} 高度模式(0:海拔高度;1:相对地表;2:依附模式)
|
||||
* @param options.line {object} 边框
|
||||
@ -39,15 +39,15 @@ class PolygonObject extends Base {
|
||||
constructor(sdk, options = {}, _Dialog = {}) {
|
||||
super(sdk, options)
|
||||
this.options.name = options.name || '未命名对象'
|
||||
this.options.color = options.color || '#36c4ff'
|
||||
this.options.color = options.color || 'rgba(255, 0, 0, 0.5)'
|
||||
this.options.show =
|
||||
options.show || options.show === false ? options.show : true
|
||||
this.options.heightMode = (options.heightMode || options.heightMode == 0) ? options.heightMode : 2
|
||||
this.options.positions = options.positions || []
|
||||
this.options.line = options.line || {}
|
||||
this.options.line.width = this.options.line.width || 2
|
||||
this.options.line.width = ((this.options.line.width || this.options.line.width === 0) ? this.options.line.width : 3)
|
||||
this.options.line.color =
|
||||
this.options.line.color || 'rgba(155, 155, 124, 0.89)'
|
||||
this.options.line.color || 'rgba(255, 0, 0, 1)'
|
||||
this.options['area-unit'] = options['area-unit'] || '平方米'
|
||||
this.entity
|
||||
this.event = new MouseEvent(this.sdk)
|
||||
@ -74,8 +74,8 @@ class PolygonObject extends Base {
|
||||
options.label.pixelOffset || options.label.pixelOffset === 0
|
||||
? options.label.pixelOffset
|
||||
: 20,
|
||||
backgroundColor: options.label.backgroundColor || ['#42c6ef', '#42c6ef'],
|
||||
lineColor: options.label.lineColor || '#fff000',
|
||||
backgroundColor: options.label.backgroundColor || ['#00ffff80', '#00ffff80'],
|
||||
lineColor: options.label.lineColor || '#00ffff80',
|
||||
scaleByDistance: options.label.scaleByDistance || false,
|
||||
near:
|
||||
options.label.near || options.label.near === 0
|
||||
@ -133,35 +133,35 @@ class PolygonObject extends Base {
|
||||
return this.options.color
|
||||
}
|
||||
set color(v) {
|
||||
this.options.color = v
|
||||
this.options.color = v || 'rgba(255, 0, 0, 0.5)'
|
||||
if (!this.sdk || !this.sdk.viewer || !this.entity || !this.entity.polygon) {
|
||||
return
|
||||
}
|
||||
if (!this.sdk || !this.sdk.viewer || !this.entity || !this.entity.polygon) {
|
||||
return
|
||||
}
|
||||
let material = Cesium.Color.fromCssColorString(v)
|
||||
let material = Cesium.Color.fromCssColorString(this.options.color)
|
||||
if (this.sdk.viewer.scene.mode === 2) {
|
||||
this.heightMode = 0
|
||||
material = new Cesium.CustomColorMaterialSource({
|
||||
color: v
|
||||
color: this.options.color
|
||||
})
|
||||
}
|
||||
this.entity.polygon.material = material
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: v,
|
||||
defaultColor: this.options.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: c => {
|
||||
this.color = c
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
this.color = 'rgba(255,0,0,0.5)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
this._elms.color[i] = colorPicker
|
||||
@ -269,25 +269,25 @@ class PolygonObject extends Base {
|
||||
return this.options.line.color
|
||||
}
|
||||
set lineColor(v) {
|
||||
this.options.line.color = v
|
||||
this.options.line.color = v || 'rgba(255, 0, 0, 0.5)'
|
||||
if (!this.sdk || !this.sdk.viewer || !this.entity || !this.entity.polyline) {
|
||||
return
|
||||
}
|
||||
this.entity.polyline.material = Cesium.Color.fromCssColorString(v)
|
||||
this.entity.polyline.material = Cesium.Color.fromCssColorString(this.options.line.color)
|
||||
if (this._elms.lineColor) {
|
||||
this._elms.lineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: v,
|
||||
defaultColor: this.options.line.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: c => {
|
||||
this.lineColor = c
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.lineColor = 'rgba(255,255,255,1)'
|
||||
this.lineColor = 'rgba(255,0,0,0.5)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
this._elms.lineColor[i] = lineColorPicker
|
||||
@ -299,8 +299,8 @@ class PolygonObject extends Base {
|
||||
return this.options.line.width
|
||||
}
|
||||
set lineWidth(v) {
|
||||
this.options.line.width = v
|
||||
this.entity.polyline.width = v
|
||||
this.options.line.width = ((v || v === 0) ? v : 3)
|
||||
this.entity.polyline.width = this.options.line.width
|
||||
this._elms.lineWidth &&
|
||||
this._elms.lineWidth.forEach(item => {
|
||||
item.value = v
|
||||
@ -355,7 +355,7 @@ class PolygonObject extends Base {
|
||||
}
|
||||
set labelShow(v) {
|
||||
this.options.label.show = v
|
||||
if (this.show) {
|
||||
if (this.show && !this.showView || this.showView == 3) {
|
||||
this.label.show = v
|
||||
} else {
|
||||
this.label.show = false
|
||||
@ -389,7 +389,7 @@ class PolygonObject extends Base {
|
||||
this.label.color = v
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
@ -493,7 +493,7 @@ class PolygonObject extends Base {
|
||||
this.label.lineColor = v
|
||||
if (this._elms.labelLineColor) {
|
||||
this._elms.labelLineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
@ -504,7 +504,7 @@ class PolygonObject extends Base {
|
||||
this.labelLineColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
this.labelLineColor = 'rgba(0,255,255,0.5)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
this._elms.labelLineColor[i] = lineColorPicker
|
||||
@ -520,7 +520,7 @@ class PolygonObject extends Base {
|
||||
this.label.backgroundColor = [v, this.label.backgroundColor[1]]
|
||||
if (this._elms.labelBackgroundColorStart) {
|
||||
this._elms.labelBackgroundColorStart.forEach((item, i) => {
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
@ -548,7 +548,7 @@ class PolygonObject extends Base {
|
||||
this.label.backgroundColor = [this.label.backgroundColor[0], v]
|
||||
if (this._elms.labelBackgroundColorEnd) {
|
||||
this._elms.labelBackgroundColorEnd.forEach((item, i) => {
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
@ -1216,7 +1216,6 @@ class PolygonObject extends Base {
|
||||
alt: this.label.position[2]
|
||||
}
|
||||
this.originalOptions = this.deepCopyObj(this.options)
|
||||
console.log('000000000000',this.options.label.scaleByDistance)
|
||||
this._DialogObject.close()
|
||||
this.Dialog.confirmCallBack &&
|
||||
this.Dialog.confirmCallBack(this.originalOptions)
|
||||
@ -1270,7 +1269,7 @@ class PolygonObject extends Base {
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs('polygon-object-edit-tabs', undefined, this.sdk)
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName('color')[0],
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
@ -1284,7 +1283,7 @@ class PolygonObject extends Base {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let linecolorPicker = new ewPlugins('colorpicker', {
|
||||
let linecolorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName('lineColor')[0],
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
@ -1298,7 +1297,7 @@ class PolygonObject extends Base {
|
||||
this.lineColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName('labelColor')[0],
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
@ -1312,7 +1311,7 @@ class PolygonObject extends Base {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName('labelLineColor')[0],
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
@ -1326,7 +1325,7 @@ class PolygonObject extends Base {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName('labelBackgroundColorStart')[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1340,7 +1339,7 @@ class PolygonObject extends Base {
|
||||
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
}
|
||||
})
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName('labelBackgroundColorEnd')[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
|
||||
@ -21,6 +21,7 @@ class eventBinding {
|
||||
let Event = []
|
||||
let isEvent = false
|
||||
let removeName = []
|
||||
let blurEvent = () => { }
|
||||
if (!elements[i] || !elements[i].attributes) {
|
||||
continue
|
||||
}
|
||||
@ -36,7 +37,8 @@ class eventBinding {
|
||||
Event.push((e) => {
|
||||
let value = e.target.value
|
||||
if (e.target.type == 'number') {
|
||||
if (e.data != '.' && (e.data != '-' || e.target.value)) {
|
||||
let str = e.target.value + ''
|
||||
if (e.data != '.' && (e.data != '-' || e.target.value) && !(str.charAt(str.length - 1) == '0' && e.target.value.toString().includes('.')) && e.target.value != '0') {
|
||||
value = Number(value)
|
||||
if((e.target.max) && value>Number(e.target.max)) {
|
||||
value = Number(e.target.max)
|
||||
@ -57,6 +59,22 @@ class eventBinding {
|
||||
that[m.value] = value
|
||||
}
|
||||
})
|
||||
blurEvent = (e) => {
|
||||
let value = e.target.value
|
||||
if ((e.target.type == 'number') && (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)
|
||||
}
|
||||
}
|
||||
that[m.value] = value
|
||||
}
|
||||
if(elements[i].nodeName=='IMG') {
|
||||
elements[i].src = that[m.value]
|
||||
}
|
||||
@ -114,6 +132,7 @@ class eventBinding {
|
||||
Event[t](e)
|
||||
}
|
||||
});
|
||||
elements[i].addEventListener('blur', blurEvent)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@ class PolyhedronObject extends Base {
|
||||
* @param options.id {string} 唯一标识
|
||||
* @param options.show=true {boolean} 显示/隐藏
|
||||
* @param options.name {string} 名称
|
||||
* @param options.color="#0df7f8" {string} 颜色
|
||||
* @param options.color="#ff0000" {string} 颜色
|
||||
* @param options.height=10 {number} 高
|
||||
* @param {Array.<object>} options.positions 经纬度和高度的列表,值交替 [{lon,lat,alt},...]
|
||||
* @param _Dialog {object} 弹框事件
|
||||
@ -32,7 +32,7 @@ class PolyhedronObject extends Base {
|
||||
* */
|
||||
constructor(sdk, options = {}, _Dialog = {}) {
|
||||
super(sdk, options);
|
||||
this.options.color = options.color || "#0df7f8"
|
||||
this.options.color = options.color || "#ff0000"
|
||||
this.options.show = (options.show || options.show === false) ? options.show : true
|
||||
this.options.height = (options.height || options.height === 0) ? options.height : 10
|
||||
if (this.options.height <= 0.01) {
|
||||
@ -54,8 +54,8 @@ class PolyhedronObject extends Base {
|
||||
color: options.label.color || '#ffffff',
|
||||
lineWidth: (options.label.lineWidth || options.label.lineWidth === 0) ? options.label.lineWidth : 4,
|
||||
pixelOffset: (options.label.pixelOffset || options.label.pixelOffset === 0) ? options.label.pixelOffset : 20,
|
||||
backgroundColor: options.label.backgroundColor || ['#42c6ef', '#42c6ef'],
|
||||
lineColor: options.label.lineColor || '#fff000',
|
||||
backgroundColor: options.label.backgroundColor || ['#00ffff80', '#00ffff80'],
|
||||
lineColor: options.label.lineColor || '#00ffff80',
|
||||
scaleByDistance: options.label.scaleByDistance || false,
|
||||
near: (options.label.near || options.label.near === 0) ? options.label.near : 2000,
|
||||
far: (options.label.far || options.label.far === 0) ? options.label.far : 100000,
|
||||
@ -381,7 +381,7 @@ class PolyhedronObject extends Base {
|
||||
return this.options.color
|
||||
}
|
||||
set color(v) {
|
||||
this.options.color = v
|
||||
this.options.color = v || '#ff0000'
|
||||
if(!this.sdk || !this.sdk.viewer || !this.entity || !this.entity.polygon) {
|
||||
return
|
||||
}
|
||||
@ -394,11 +394,11 @@ class PolyhedronObject extends Base {
|
||||
this.entity.polygon.material = material
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: v,
|
||||
defaultColor: this.options.color,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (c) => {
|
||||
@ -517,7 +517,7 @@ class PolyhedronObject extends Base {
|
||||
}
|
||||
set labelShow(v) {
|
||||
this.options.label.show = v
|
||||
if (this.show) {
|
||||
if (this.show && !this.showView || this.showView == 3) {
|
||||
this.label.show = v
|
||||
}
|
||||
else {
|
||||
@ -551,7 +551,7 @@ class PolyhedronObject extends Base {
|
||||
this.label.color = v
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -651,7 +651,7 @@ class PolyhedronObject extends Base {
|
||||
this.label.lineColor = v
|
||||
if (this._elms.labelLineColor) {
|
||||
this._elms.labelLineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -662,7 +662,7 @@ class PolyhedronObject extends Base {
|
||||
this.labelLineColor = color
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
this.labelLineColor = 'rgba(0,255,255,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.labelLineColor[i] = lineColorPicker
|
||||
@ -678,7 +678,7 @@ class PolyhedronObject extends Base {
|
||||
this.label.backgroundColor = [v, this.label.backgroundColor[1]]
|
||||
if (this._elms.labelBackgroundColorStart) {
|
||||
this._elms.labelBackgroundColorStart.forEach((item, i) => {
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -704,7 +704,7 @@ class PolyhedronObject extends Base {
|
||||
this.label.backgroundColor = [this.label.backgroundColor[0], v]
|
||||
if (this._elms.labelBackgroundColorEnd) {
|
||||
this._elms.labelBackgroundColorEnd.forEach((item, i) => {
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1105,7 +1105,7 @@ class PolyhedronObject extends Base {
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs('polygon-object-edit-tabs', undefined, this.sdk)
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1119,7 +1119,7 @@ class PolyhedronObject extends Base {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1133,7 +1133,7 @@ class PolyhedronObject extends Base {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelLineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1147,7 +1147,7 @@ class PolyhedronObject extends Base {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorStart")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1161,7 +1161,7 @@ class PolyhedronObject extends Base {
|
||||
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
},
|
||||
})
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorEnd")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
|
||||
@ -53,8 +53,8 @@ class PolyhedronObject extends Base {
|
||||
color: options.label.color || '#ffffff',
|
||||
lineWidth: (options.label.lineWidth || options.label.lineWidth === 0) ? options.label.lineWidth : 4,
|
||||
pixelOffset: (options.label.pixelOffset || options.label.pixelOffset === 0) ? options.label.pixelOffset : 20,
|
||||
backgroundColor: options.label.backgroundColor || ['#42c6ef', '#42c6ef'],
|
||||
lineColor: options.label.lineColor || '#fff000',
|
||||
backgroundColor: options.label.backgroundColor || ['#00ffff80', '#00ffff80'],
|
||||
lineColor: options.label.lineColor || '#00ffff80',
|
||||
scaleByDistance: options.label.scaleByDistance || false,
|
||||
near: (options.label.near || options.label.near === 0) ? options.label.near : 2000,
|
||||
far: (options.label.far || options.label.far === 0) ? options.label.far : 100000,
|
||||
@ -347,7 +347,7 @@ class PolyhedronObject extends Base {
|
||||
this.entity.polygon.material = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -488,7 +488,7 @@ class PolyhedronObject extends Base {
|
||||
this.label.color = v
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -588,7 +588,7 @@ class PolyhedronObject extends Base {
|
||||
this.label.lineColor = v
|
||||
if (this._elms.labelLineColor) {
|
||||
this._elms.labelLineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -599,7 +599,7 @@ class PolyhedronObject extends Base {
|
||||
this.labelLineColor = color
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
this.labelLineColor = 'rgba(0,255,255,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.labelLineColor[i] = lineColorPicker
|
||||
@ -615,7 +615,7 @@ class PolyhedronObject extends Base {
|
||||
this.label.backgroundColor = [v, this.label.backgroundColor[1]]
|
||||
if (this._elms.labelBackgroundColorStart) {
|
||||
this._elms.labelBackgroundColorStart.forEach((item, i) => {
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -641,7 +641,7 @@ class PolyhedronObject extends Base {
|
||||
this.label.backgroundColor = [this.label.backgroundColor[0], v]
|
||||
if (this._elms.labelBackgroundColorEnd) {
|
||||
this._elms.labelBackgroundColorEnd.forEach((item, i) => {
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -890,7 +890,7 @@ class PolyhedronObject extends Base {
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs('polygon-object-edit-tabs', undefined, this.sdk)
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -904,7 +904,7 @@ class PolyhedronObject extends Base {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -918,7 +918,7 @@ class PolyhedronObject extends Base {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelLineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -932,7 +932,7 @@ class PolyhedronObject extends Base {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorStart")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -946,7 +946,7 @@ class PolyhedronObject extends Base {
|
||||
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
},
|
||||
})
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorEnd")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
|
||||
@ -9,22 +9,15 @@ function html(that) {
|
||||
<span class="label">名称</span>
|
||||
<input class="input" maxlength="40" type="text" @model="name">
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 54%;">
|
||||
<div class="col" style="flex: 0 0 56%;">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">原始长度:</span>
|
||||
<div class="input-select-unit"></div>
|
||||
<input class="input input-text" readonly="readonly" type="text" style="flex: 0 0 130px;" @model="length">
|
||||
<div class="input-select-unit"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col input-select-fit-unit-box">
|
||||
<span class="label">拟合长度:</span>
|
||||
<input class="input input-text" readonly="readonly" type="text" style="flex: 0 0 130px;" @model="fitLength">
|
||||
<div class="input-select-fit-unit"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -48,7 +41,7 @@ function html(that) {
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
<button class="confirm height-confirm" style="margin-left: 5px;">确认</button>
|
||||
<button class="confirm height-confirm" style="margin-left: 5px;">应用</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -72,7 +65,7 @@ function html(that) {
|
||||
<span class="label">线条颜色</span>
|
||||
<div class="color"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
<span class="label">线条宽度</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px;">
|
||||
<input class="input" type="number" title="" min="1" max="999" @model="lineWidth">
|
||||
@ -80,7 +73,7 @@ function html(that) {
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-line-type-box">
|
||||
<div class="col input-select-line-type-box" style="flex: 0 0 37%;">
|
||||
<span class="label">线条形式</span>
|
||||
<div class="input-select-line-type"></div>
|
||||
</div>
|
||||
@ -90,11 +83,11 @@ function html(that) {
|
||||
<span class="label">首尾相连</span>
|
||||
<input class="btn-switch" type="checkbox" @model="noseToTail">
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
<span class="label">线段圆滑</span>
|
||||
<input class="btn-switch" type="checkbox" @model="smooth">
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col" style="flex: 0 0 37%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -102,7 +95,7 @@ function html(that) {
|
||||
<span class="label">线段缓冲</span>
|
||||
<input class="btn-switch" type="checkbox" @model="extend">
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
<span class="label">缓冲宽度</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px;">
|
||||
<input class="input" type="number" title="" min="0" data-min="0.01" max="999999" @model="extendWidth">
|
||||
@ -110,11 +103,32 @@ function html(that) {
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col" style="flex: 0 0 37%;">
|
||||
<span class="label">缓冲颜色</span>
|
||||
<div class="extendColor"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="dashTextureDom">
|
||||
<div class="col">
|
||||
<span class="label">首尾反向</span>
|
||||
<input class="btn-switch" type="checkbox" @model="rotate">
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
<span class="label">流动速率</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px;">
|
||||
<input class="input" type="number" title="" min="0" max="999999" step="1" @model="speed">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%;">
|
||||
<span class="label lineSpace">线条间距</span>
|
||||
<div class="input-number input-number-unit-1 lineSpace" style="width: 80px;">
|
||||
<input class="input" type="number" title="" min="0" max="4.5" step="0.1" @model="space">
|
||||
<span class="unit">倍</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DIV-cy-tab-pane>
|
||||
<DIV-cy-tab-pane label="标注风格">
|
||||
${labelStyleElm1()}
|
||||
|
||||
@ -40,9 +40,11 @@ class eventBinding {
|
||||
value = Number(value)
|
||||
if ((e.target.max) && value > Number(e.target.max)) {
|
||||
value = Number(e.target.max)
|
||||
e.target.value = value
|
||||
}
|
||||
if ((e.target.min) && value < Number(e.target.min)) {
|
||||
value = Number(e.target.min)
|
||||
e.target.value = value
|
||||
}
|
||||
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
|
||||
value = Number(e.target.dataset.min)
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,7 @@ import EventBinding from '../../Element/Dialog/eventBinding';
|
||||
import richText from "../../Element/richText";
|
||||
import MouseEvent from '../../../Event/index'
|
||||
import LabelObject from '../LabelObject'
|
||||
import { syncData } from '../../../Global/MultiViewportMode'
|
||||
import { syncData, getSdk as get2DSdk } from '../../../Global/MultiViewportMode'
|
||||
import { legp } from '../../Element/datalist';
|
||||
import { getFontList, getFontFamilyName } from '../../Element/fontSelect'
|
||||
import MouseTip from '../../../MouseTip'
|
||||
@ -53,8 +53,8 @@ class RadarScan extends Base {
|
||||
color: options.label.color || '#ffffff',
|
||||
lineWidth: (options.label.lineWidth || options.label.lineWidth === 0) ? options.label.lineWidth : 4,
|
||||
pixelOffset: (options.label.pixelOffset || options.label.pixelOffset === 0) ? options.label.pixelOffset : 20,
|
||||
backgroundColor: options.label.backgroundColor || ['#42c6ef', '#42c6ef'],
|
||||
lineColor: options.label.lineColor || '#fff000',
|
||||
backgroundColor: options.label.backgroundColor || ['#00ffff80', '#00ffff80'],
|
||||
lineColor: options.label.lineColor || '#00ffff80',
|
||||
scaleByDistance: options.label.scaleByDistance || false,
|
||||
near: (options.label.near || options.label.near === 0) ? options.label.near : 2000,
|
||||
far: (options.label.far || options.label.far === 0) ? options.label.far : 100000,
|
||||
@ -138,7 +138,7 @@ class RadarScan extends Base {
|
||||
})
|
||||
that.sdk._entityZIndex++
|
||||
if (that.sdk.viewer._element.className === 'cesium-viewer 2d') {
|
||||
that.entity.ellipse.height = 1000000
|
||||
that.entity.ellipse.height = 1
|
||||
}
|
||||
RadarScan.createLabel(that)
|
||||
syncData(that.sdk, that.options.id)
|
||||
@ -246,16 +246,29 @@ class RadarScan extends Base {
|
||||
|
||||
set show(v) {
|
||||
if (typeof v === "boolean") {
|
||||
let sdkD = get2DSdk().sdkD
|
||||
if (!this.isShowView || !sdkD) {
|
||||
this.options.show = v
|
||||
this.entity.show = v
|
||||
}
|
||||
if (!this.showView || this.showView == 3 || !sdkD) {
|
||||
this.entity.show = this.options.show
|
||||
if (this.options.label.show && this.label) {
|
||||
this.label.show = this.options.show
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.entity.show = false
|
||||
if (this.options.label.show && this.label) {
|
||||
this.label.show = false
|
||||
}
|
||||
}
|
||||
if (this._DialogObject && this._DialogObject.showBtn) {
|
||||
this._DialogObject.showBtn.checked = v
|
||||
}
|
||||
if (this.options.label.show && this.label) {
|
||||
this.label.show = v
|
||||
}
|
||||
|
||||
syncData(this.sdk, this.options.id)
|
||||
syncSplitData(this.sdk, this.options.id)
|
||||
this.isShowView = false
|
||||
} else {
|
||||
console.error("参数必须为boolean")
|
||||
}
|
||||
@ -425,7 +438,7 @@ class RadarScan extends Base {
|
||||
this.changeMaterial()
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -448,8 +461,9 @@ class RadarScan extends Base {
|
||||
return this.options.label.show
|
||||
}
|
||||
set labelShow(v) {
|
||||
let sdkD = get2DSdk().sdkD
|
||||
this.options.label.show = v
|
||||
if (this.show) {
|
||||
if (this.show && (!this.showView || this.showView == 3 || !sdkD)) {
|
||||
this.label.show = v
|
||||
}
|
||||
else {
|
||||
@ -483,7 +497,7 @@ class RadarScan extends Base {
|
||||
this.label.color = v
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -583,7 +597,7 @@ class RadarScan extends Base {
|
||||
this.label.lineColor = v
|
||||
if (this._elms.labelLineColor) {
|
||||
this._elms.labelLineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -594,7 +608,7 @@ class RadarScan extends Base {
|
||||
this.labelLineColor = color
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
this.labelLineColor = 'rgba(0,255,255,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.labelLineColor[i] = lineColorPicker
|
||||
@ -610,7 +624,7 @@ class RadarScan extends Base {
|
||||
this.label.backgroundColor = [v, this.label.backgroundColor[1]]
|
||||
if (this._elms.labelBackgroundColorStart) {
|
||||
this._elms.labelBackgroundColorStart.forEach((item, i) => {
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -636,7 +650,7 @@ class RadarScan extends Base {
|
||||
this.label.backgroundColor = [this.label.backgroundColor[0], v]
|
||||
if (this._elms.labelBackgroundColorEnd) {
|
||||
this._elms.labelBackgroundColorEnd.forEach((item, i) => {
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1124,7 +1138,7 @@ class RadarScan extends Base {
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs('radar-scan-edit-tabs', undefined, this.sdk)
|
||||
// 颜色组件
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1138,7 +1152,7 @@ class RadarScan extends Base {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1152,7 +1166,7 @@ class RadarScan extends Base {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelLineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1166,7 +1180,7 @@ class RadarScan extends Base {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorStart")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1180,7 +1194,7 @@ class RadarScan extends Base {
|
||||
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
},
|
||||
})
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorEnd")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1374,7 +1388,7 @@ class RadarScan extends Base {
|
||||
}
|
||||
|
||||
async remove() {
|
||||
this.label.remove()
|
||||
this.label && this.label.remove()
|
||||
this.entity && this.sdk.viewer.entities.remove(this.entity)
|
||||
this.entity2 && this.sdk.viewer.entities.remove(this.entity2)
|
||||
this.entity = null
|
||||
|
||||
@ -58,8 +58,8 @@ class RadarScanStereoscopic extends Base {
|
||||
color: options.label.color || '#ffffff',
|
||||
lineWidth: (options.label.lineWidth || options.label.lineWidth === 0) ? options.label.lineWidth : 4,
|
||||
pixelOffset: (options.label.pixelOffset || options.label.pixelOffset === 0) ? options.label.pixelOffset : 20,
|
||||
backgroundColor: options.label.backgroundColor || ['#42c6ef', '#42c6ef'],
|
||||
lineColor: options.label.lineColor || '#fff000',
|
||||
backgroundColor: options.label.backgroundColor || ['#00ffff80', '#00ffff80'],
|
||||
lineColor: options.label.lineColor || '#00ffff80',
|
||||
scaleByDistance: options.label.scaleByDistance || false,
|
||||
near: (options.label.near || options.label.near === 0) ? options.label.near : 2000,
|
||||
far: (options.label.far || options.label.far === 0) ? options.label.far : 100000,
|
||||
@ -86,6 +86,10 @@ class RadarScanStereoscopic extends Base {
|
||||
RadarScanStereoscopic.radarSolidScan(this)
|
||||
}
|
||||
|
||||
get type() {
|
||||
return 'RadarScanStereoscopic'
|
||||
}
|
||||
|
||||
static radarSolidScan(that) {
|
||||
let viewer = that.sdk.viewer
|
||||
let options = that.options
|
||||
@ -369,7 +373,7 @@ class RadarScanStereoscopic extends Base {
|
||||
this.entity.ellipsoid.outlineColor = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.colorOut) {
|
||||
this._elms.colorOut.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -396,7 +400,7 @@ class RadarScanStereoscopic extends Base {
|
||||
this.entity.wall.material = Cesium.Color.fromCssColorString(v)
|
||||
if (this._elms.colorIn) {
|
||||
this._elms.colorIn.forEach((item, i) => {
|
||||
let colorPicker = new ewPlugins('colorpicker', {
|
||||
let colorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -420,7 +424,7 @@ class RadarScanStereoscopic extends Base {
|
||||
}
|
||||
set labelShow(v) {
|
||||
this.options.label.show = v
|
||||
if (this.show) {
|
||||
if (this.show && !this.showView || this.showView == 3) {
|
||||
this.label.show = v
|
||||
}
|
||||
else {
|
||||
@ -454,7 +458,7 @@ class RadarScanStereoscopic extends Base {
|
||||
this.label.color = v
|
||||
if (this._elms.labelColor) {
|
||||
this._elms.labelColor.forEach((item, i) => {
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -554,7 +558,7 @@ class RadarScanStereoscopic extends Base {
|
||||
this.label.lineColor = v
|
||||
if (this._elms.labelLineColor) {
|
||||
this._elms.labelLineColor.forEach((item, i) => {
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -565,7 +569,7 @@ class RadarScanStereoscopic extends Base {
|
||||
this.labelLineColor = color
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
this.labelLineColor = 'rgba(0,255,255,0.5)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.labelLineColor[i] = lineColorPicker
|
||||
@ -581,7 +585,7 @@ class RadarScanStereoscopic extends Base {
|
||||
this.label.backgroundColor = [v, this.label.backgroundColor[1]]
|
||||
if (this._elms.labelBackgroundColorStart) {
|
||||
this._elms.labelBackgroundColorStart.forEach((item, i) => {
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -607,7 +611,7 @@ class RadarScanStereoscopic extends Base {
|
||||
this.label.backgroundColor = [this.label.backgroundColor[0], v]
|
||||
if (this._elms.labelBackgroundColorEnd) {
|
||||
this._elms.labelBackgroundColorEnd.forEach((item, i) => {
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1026,7 +1030,7 @@ class RadarScanStereoscopic extends Base {
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs('radar-scan-edit-tabs', undefined, this.sdk)
|
||||
// 颜色组件
|
||||
let colorOutPicker = new ewPlugins('colorpicker', {
|
||||
let colorOutPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("colorOut")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1040,7 +1044,7 @@ class RadarScanStereoscopic extends Base {
|
||||
this.colorOut = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let colorInPicker = new ewPlugins('colorpicker', {
|
||||
let colorInPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("colorIn")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1054,7 +1058,7 @@ class RadarScanStereoscopic extends Base {
|
||||
this.colorIn = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelColorPicker = new ewPlugins('colorpicker', {
|
||||
let labelColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1068,7 +1072,7 @@ class RadarScanStereoscopic extends Base {
|
||||
this.labelColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let lineColorPicker = new ewPlugins('colorpicker', {
|
||||
let lineColorPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelLineColor")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
@ -1082,7 +1086,7 @@ class RadarScanStereoscopic extends Base {
|
||||
this.labelLineColor = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
let labelBackgroundColorStartPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorStartPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorStart")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
@ -1096,7 +1100,7 @@ class RadarScanStereoscopic extends Base {
|
||||
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
},
|
||||
})
|
||||
let labelBackgroundColorEndPicker = new ewPlugins('colorpicker', {
|
||||
let labelBackgroundColorEndPicker = new YJColorPicker({
|
||||
el: contentElm.getElementsByClassName("labelBackgroundColorEnd")[0],
|
||||
size: 'mini',
|
||||
alpha: true,
|
||||
|
||||
@ -27,7 +27,7 @@ class Corridor extends Base {
|
||||
fromDegreesArray.push(positions[i].lng, positions[i].lat)
|
||||
}
|
||||
|
||||
let length = this.computeDistance(positions)
|
||||
let length = this.computeDistance2(positions)
|
||||
|
||||
let geometry = new Cesium.CorridorGeometry({
|
||||
positions: Cesium.Cartesian3.fromDegreesArray(fromDegreesArray),
|
||||
|
||||
@ -31,7 +31,7 @@ class Corridor extends Base {
|
||||
fromDegreesArray.push(positions[i].lng, positions[i].lat)
|
||||
}
|
||||
|
||||
let length = this.computeDistance(positions)
|
||||
let length = this.computeDistance2(positions)
|
||||
|
||||
let geometry = new Cesium.CorridorGeometry({
|
||||
positions: Cesium.Cartesian3.fromDegreesArray(fromDegreesArray),
|
||||
|
||||
39
src/Obj/Base/RoadObject/_element.js
Normal file
39
src/Obj/Base/RoadObject/_element.js
Normal file
@ -0,0 +1,39 @@
|
||||
function html() {
|
||||
return `
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<input class="input" maxlength="40" type="text" @model="name">
|
||||
</div>
|
||||
<div class="col road-box">
|
||||
<span class="label" style="flex: 0 0 56px;">道路类型</span>
|
||||
<div class="road-type"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">车道宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" max="99999" min="1" step="1" @model="carRoadWidth">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">人行道宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" max="99999" min="1" step="1" @model="sideWidth">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
`
|
||||
}
|
||||
|
||||
export { html }
|
||||
92
src/Obj/Base/RoadObject/eventBinding.js
Normal file
92
src/Obj/Base/RoadObject/eventBinding.js
Normal file
@ -0,0 +1,92 @@
|
||||
class eventBinding {
|
||||
constructor() {
|
||||
this.element = {}
|
||||
}
|
||||
static event = {}
|
||||
|
||||
getEvent(name) {
|
||||
return eventBinding.event[name]
|
||||
}
|
||||
|
||||
getEventAll() {
|
||||
return eventBinding.event
|
||||
}
|
||||
|
||||
setEvent(name, event) {
|
||||
eventBinding.event[name] = event
|
||||
}
|
||||
|
||||
on(that, elements) {
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
let Event = []
|
||||
let isEvent = false
|
||||
let removeName = []
|
||||
if (!elements[i] || !elements[i].attributes) {
|
||||
continue;
|
||||
}
|
||||
for (let m of elements[i].attributes) {
|
||||
switch (m.name) {
|
||||
case '@model': {
|
||||
isEvent = true
|
||||
if (elements[i].type == 'checkbox') {
|
||||
Event.push((e) => { that[m.value] = e.target.checked })
|
||||
elements[i].checked = that[m.value]
|
||||
}
|
||||
else {
|
||||
Event.push((e) => {
|
||||
let value = e.target.value
|
||||
if (e.target.type == 'number') {
|
||||
value = Number(value)
|
||||
}
|
||||
that[m.value] = value
|
||||
})
|
||||
if (elements[i].nodeName == 'IMG') {
|
||||
elements[i].src = that[m.value]
|
||||
}
|
||||
else {
|
||||
elements[i].value = that[m.value]
|
||||
}
|
||||
}
|
||||
if (this.element[m.value]) {
|
||||
this.element[m.value].push(elements[i])
|
||||
}
|
||||
else {
|
||||
this.element[m.value] = [elements[i]]
|
||||
}
|
||||
removeName.push(m.name)
|
||||
break;
|
||||
}
|
||||
case '@click': {
|
||||
elements[i].addEventListener('click', (e) => {
|
||||
if (typeof (that.Dialog[m.value]) === 'function') {
|
||||
that.Dialog[m.value](e)
|
||||
}
|
||||
});
|
||||
removeName.push(m.name)
|
||||
// elements[i].attributes.removeNamedItem(m.name)
|
||||
break;
|
||||
}
|
||||
}
|
||||
// elements[i].attributes[m] = undefined
|
||||
}
|
||||
for (let n = 0; n < removeName.length; n++) {
|
||||
elements[i].attributes.removeNamedItem(removeName[n])
|
||||
}
|
||||
|
||||
if (isEvent) {
|
||||
let ventType = 'input'
|
||||
if (elements[i].tagName != 'INPUT' || elements[i].type == 'checkbox') {
|
||||
ventType = 'change'
|
||||
}
|
||||
elements[i].addEventListener(ventType, (e) => {
|
||||
for (let t = 0; t < Event.length; t++) {
|
||||
Event[t](e)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const EventBinding = new eventBinding();
|
||||
export default EventBinding;
|
||||
1549
src/Obj/Base/RoadObject/index-8.4.js
Normal file
1549
src/Obj/Base/RoadObject/index-8.4.js
Normal file
File diff suppressed because it is too large
Load Diff
1704
src/Obj/Base/RoadObject/index-last.js
Normal file
1704
src/Obj/Base/RoadObject/index-last.js
Normal file
File diff suppressed because it is too large
Load Diff
889
src/Obj/Base/RoadObject/index-拐角连接.js
Normal file
889
src/Obj/Base/RoadObject/index-拐角连接.js
Normal file
@ -0,0 +1,889 @@
|
||||
/**
|
||||
* @description 道路
|
||||
*/
|
||||
import Dialog from '../../Element/Dialog';
|
||||
import { html } from "./_element";
|
||||
import EventBinding from '../../Element/Dialog/eventBinding';
|
||||
import Base from "../index";
|
||||
import { syncData } from '../../../Global/MultiViewportMode'
|
||||
import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen'
|
||||
import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global'
|
||||
|
||||
class Road extends Base {
|
||||
/**
|
||||
* @constructor
|
||||
* @param sdk
|
||||
* @description 道路
|
||||
* @param options {object} 道路属性
|
||||
* @param options.name=未命名对象 {string} 名称
|
||||
* @param options.carRoadWidth=2 {number} 车道宽度
|
||||
* @param options.sideWidth=2 {number} 人行道宽度
|
||||
* @param options.positions=[] {array} 道路positions
|
||||
* @param options.roadImage='' {string} 车道贴图
|
||||
* @param options.sideImage='' {string} 人行道贴图
|
||||
* @param Dialog {object} 弹框对象
|
||||
* @param Dialog.confirmCallBack {function} 弹框确认时的回调
|
||||
* */
|
||||
constructor(sdk, options = {}, _Dialog = {}) {
|
||||
super(sdk, options);
|
||||
this.viewer = this.sdk.viewer
|
||||
this.options.name = options.name || '道路'
|
||||
this.options.carRoadWidth = options.carRoadWidth || 10
|
||||
this.options.sideWidth = options.sideWidth || 5
|
||||
this.options.positions = options.positions || []
|
||||
this.options.roadImage = options.roadImage || (this.getSourceRootPath() + '/img/roadPhoto.png')
|
||||
this.options.sideImage = options.sideImage || (this.getSourceRootPath() + '/img/sidePhoto.png')
|
||||
this.options.show = (options.show || options.show === false) ? options.show : true
|
||||
this.Dialog = _Dialog
|
||||
this._EventBinding = new EventBinding()
|
||||
this._elms = {};
|
||||
this.positionArea = []
|
||||
this.positions = []
|
||||
this.lineEntity = ''
|
||||
|
||||
this.sdk.addIncetance(this.options.id, this)
|
||||
Road.create(this)
|
||||
}
|
||||
|
||||
// 创建道路
|
||||
static create(that) {
|
||||
let positions = []
|
||||
that.options.positions.forEach(v => {
|
||||
positions.push(new Cesium.Cartesian3.fromDegrees(v.lng, v.lat, v.alt))
|
||||
})
|
||||
|
||||
let area = [[], [], []]
|
||||
area[1] = that.createLineBufferPolygon2(positions, that.options.carRoadWidth / 2)
|
||||
area[0] = that.createLineBufferPolygonSide(area[1][2], -that.options.sideWidth)
|
||||
area[2] = that.createLineBufferPolygonSide(area[1][1], that.options.sideWidth)
|
||||
|
||||
//判断道路边是否相交
|
||||
for (let i = 0; i < area[0].length - 1; i++) {
|
||||
|
||||
let leftItem = area[0][i]
|
||||
let leftItem2 = area[0][i + 1]
|
||||
let rightItem = area[2][i]
|
||||
let rightItem2 = area[2][i + 1]
|
||||
let carItem = area[1][0][i]
|
||||
let carItem2 = area[1][0][i + 1]
|
||||
let leftLine = that.getIntersects(leftItem[1], leftItem[2], leftItem2[1], leftItem2[2])
|
||||
let rightLine = that.getIntersects(rightItem[1], rightItem[2], rightItem2[1], rightItem2[2])
|
||||
|
||||
console.log(leftLine, 'leftLine')
|
||||
if (leftLine) {//左侧相交
|
||||
//获取右侧延长交点
|
||||
let point1 = that.getExtendPoint(rightItem[1], rightItem[2], 1000)
|
||||
let point2 = that.getExtendPoint(rightItem2[2], rightItem2[1], 1000)
|
||||
let rightIntersection = that.getIntersects(rightItem[2], point1, rightItem2[1], point2)
|
||||
//将其他几条边都延长
|
||||
let leftLineNeiPoint = that.getExtendPoint(leftItem[0], leftItem[3], 1000)
|
||||
let carLeftPoint = that.getExtendPoint(carItem[3], carItem[2], 1000)
|
||||
let carRightPoint = that.getExtendPoint(carItem[0], carItem[1], 1000)
|
||||
let rightLineNeiPoint = that.getExtendPoint(rightItem[0], rightItem[3], 1000)
|
||||
|
||||
|
||||
|
||||
|
||||
//跟左侧里相交点
|
||||
let leftLineNei = that.getIntersects(leftLine, rightIntersection, leftItem[0], leftLineNeiPoint)
|
||||
//跟车道左侧相交点
|
||||
let carLeft = that.getIntersects(leftLine, rightIntersection, carItem[3], carLeftPoint)
|
||||
//跟车道右侧相交点
|
||||
let carRight = that.getIntersects(leftLine, rightIntersection, carItem[0], carRightPoint)
|
||||
let rightLineNei = that.getIntersects(leftLine, rightIntersection, rightItem[0], rightLineNeiPoint)
|
||||
|
||||
// let leftLineNei = that.getIntersects(leftLine, rightItem[2], leftItem[0], leftItem[3])
|
||||
// let carLeft = that.getIntersects(leftLine, rightItem[2], carItem[3], carItem[2])
|
||||
// let carRight = that.getIntersects(leftLine, rightItem[2], carItem[0], carItem[1])
|
||||
// let rightLineNei = that.getIntersects(leftLine, rightItem[2], rightItem[0], rightItem[3])
|
||||
|
||||
// let leftLineNei = that.getIntersects(leftLine, intersection, leftItem[0], leftItem[3])
|
||||
// //跟车道左侧相交点
|
||||
// let carLeft = that.getIntersects(leftLine, intersection, carItem[3], carItem[2])
|
||||
// //跟车道右侧相交点
|
||||
// let carRight = that.getIntersects(leftLine, intersection, carItem[0], carItem[1])
|
||||
// let rightLineNei = that.getIntersects(leftLine, intersection, rightItem[0], rightItem[3])
|
||||
|
||||
leftItem[2] = leftLine
|
||||
leftItem[3] = leftLineNei
|
||||
carItem[2] = carLeft
|
||||
carItem[1] = carRight
|
||||
rightItem[3] = rightLineNei
|
||||
rightItem[2] = rightIntersection
|
||||
console.log(leftItem, carItem, rightItem, 'leftItemleft')
|
||||
|
||||
|
||||
//将其他几条边都延长
|
||||
let leftLineNeiPoint2 = that.getExtendPoint(leftItem2[3], leftItem2[0], 1000)
|
||||
let carLeftPoint2 = that.getExtendPoint(carItem2[2], carItem2[3], 1000)
|
||||
let carRightPoint2 = that.getExtendPoint(carItem2[1], carItem2[0], 1000)
|
||||
let rightLineNeiPoint2 = that.getExtendPoint(rightItem2[3], rightItem2[0], 1000)
|
||||
|
||||
// let leftLineNei2 = that.getIntersects(leftLine, rightItem2[1], leftItem2[0], leftItem2[3])
|
||||
// let carLeft2 = that.getIntersects(leftLine, rightItem2[1], carItem2[3], carItem2[2])
|
||||
// let carRight2 = that.getIntersects(leftLine, rightItem2[1], carItem2[0], carItem2[1])
|
||||
// let rightLineNei2 = that.getIntersects(leftLine, rightItem2[1], rightItem2[0], rightItem2[3])
|
||||
|
||||
|
||||
|
||||
let leftLineNei2 = that.getIntersects(leftLine, rightIntersection, leftItem2[3], leftLineNeiPoint2)
|
||||
let carLeft2 = that.getIntersects(leftLine, rightIntersection, carItem2[2], carLeftPoint2)
|
||||
let carRight2 = that.getIntersects(leftLine, rightIntersection, carItem2[1], carRightPoint2)
|
||||
let rightLineNei2 = that.getIntersects(leftLine, rightIntersection, rightItem2[3], rightLineNeiPoint2)
|
||||
|
||||
// let arr = [leftLine, rightIntersection, leftItem2[3], leftLineNeiPoint2]
|
||||
// arr.forEach((item, index) => {
|
||||
// that.sdk.viewer.entities.add({
|
||||
// name: 'node-secondary-edit-point',
|
||||
// index: i,
|
||||
// position: item,
|
||||
// billboard: {
|
||||
// image: that.getSourceRootPath() + '/img/point.png',
|
||||
// width: 15,
|
||||
// height: 15,
|
||||
// disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||||
// color: Cesium.Color.WHITE.withAlpha(0.99)
|
||||
// },
|
||||
// label: {
|
||||
// text: '' + index,
|
||||
// pixelOffset: { x: 0, y: -20 },
|
||||
// },
|
||||
// })
|
||||
// })
|
||||
|
||||
// let leftLineNei2 = that.getIntersects(leftLine, intersection, leftItem2[0], leftItem2[3])
|
||||
// //跟车道左侧相交点
|
||||
// let carLeft2 = that.getIntersects(leftLine, intersection, carItem2[3], carItem2[2])
|
||||
// //跟车道右侧相交点
|
||||
// let carRight2 = that.getIntersects(leftLine, intersection, carItem2[0], carItem2[1])
|
||||
// let rightLineNei2 = that.getIntersects(leftLine, intersection, rightItem2[0], rightItem2[3])
|
||||
|
||||
leftItem2[1] = leftLine
|
||||
leftItem2[0] = leftLineNei2
|
||||
carItem2[3] = carLeft2
|
||||
carItem2[0] = carRight2
|
||||
rightItem2[0] = rightLineNei2
|
||||
rightItem2[1] = rightIntersection
|
||||
console.log(leftItem2, carItem2, rightItem2, 'leftItem2left')
|
||||
|
||||
} else if (rightLine) {//右侧相交
|
||||
|
||||
//获取左侧延长交点
|
||||
let point1 = that.getExtendPoint(leftItem[1], leftItem[2], 1000)
|
||||
let point2 = that.getExtendPoint(leftItem2[2], leftItem2[1], 1000)
|
||||
let rightIntersection = that.getIntersects(leftItem[2], point1, leftItem2[1], point2)
|
||||
//将其他几条边都延长
|
||||
let leftLineNeiPoint = that.getExtendPoint(leftItem[0], leftItem[3], 1000)
|
||||
let carLeftPoint = that.getExtendPoint(carItem[3], carItem[2], 1000)
|
||||
let carRightPoint = that.getExtendPoint(carItem[0], carItem[1], 1000)
|
||||
let rightLineNeiPoint = that.getExtendPoint(rightItem[0], rightItem[3], 1000)
|
||||
|
||||
// //跟左侧里相交点
|
||||
let leftLineNei = that.getIntersects(rightLine, rightIntersection, leftItem[0], leftLineNeiPoint)
|
||||
//跟车道左侧相交点
|
||||
let carLeft = that.getIntersects(rightLine, rightIntersection, carItem[3], carLeftPoint)
|
||||
//跟车道右侧相交点
|
||||
let carRight = that.getIntersects(rightLine, rightIntersection, carItem[0], carRightPoint)
|
||||
let rightLineNei = that.getIntersects(rightLine, rightIntersection, rightItem[0], rightLineNeiPoint)
|
||||
// //跟左侧里相交点
|
||||
// let leftLineNei = that.getIntersects(rightLine, leftItem[2], leftItem[0], leftItem[3])
|
||||
// //跟车道左侧相交点
|
||||
// let carLeft = that.getIntersects(rightLine, leftItem[2], carItem[3], carItem[2])
|
||||
// //跟车道右侧相交点
|
||||
// let carRight = that.getIntersects(rightLine, leftItem[2], carItem[0], carItem[1])
|
||||
// let rightLineNei = that.getIntersects(rightLine, leftItem[2], rightItem[0], rightItem[3])
|
||||
|
||||
|
||||
leftItem[2] = rightIntersection
|
||||
leftItem[3] = leftLineNei
|
||||
carItem[2] = carLeft
|
||||
carItem[1] = carRight
|
||||
rightItem[3] = rightLineNei
|
||||
rightItem[2] = rightLine
|
||||
console.log(leftItem, carItem, rightItem, 'leftItemright')
|
||||
|
||||
//将其他几条边都延长
|
||||
let leftLineNeiPoint2 = that.getExtendPoint(leftItem2[3], leftItem2[0], 1000)
|
||||
let carLeftPoint2 = that.getExtendPoint(carItem2[2], carItem2[3], 1000)
|
||||
let carRightPoint2 = that.getExtendPoint(carItem2[1], carItem2[0], 1000)
|
||||
let rightLineNeiPoint2 = that.getExtendPoint(rightItem2[3], rightItem2[0], 1000)
|
||||
|
||||
let leftLineNei2 = that.getIntersects(rightLine, rightIntersection, leftItem2[3], leftLineNeiPoint2)
|
||||
//跟车道左侧相交点
|
||||
let carLeft2 = that.getIntersects(rightLine, rightIntersection, carItem2[2], carLeftPoint2)
|
||||
//跟车道右侧相交点
|
||||
let carRight2 = that.getIntersects(rightLine, rightIntersection, carItem2[1], carRightPoint2)
|
||||
let rightLineNei2 = that.getIntersects(rightLine, rightIntersection, rightItem2[3], rightLineNeiPoint2)
|
||||
// let leftLineNei2 = that.getIntersects(rightLine, leftItem2[1], leftItem2[0], leftItem2[3])
|
||||
// //跟车道左侧相交点
|
||||
// let carLeft2 = that.getIntersects(rightLine, leftItem2[1], carItem2[3], carItem2[2])
|
||||
// //跟车道右侧相交点
|
||||
// let carRight2 = that.getIntersects(rightLine, leftItem2[1], carItem2[0], carItem2[1])
|
||||
// let rightLineNei2 = that.getIntersects(rightLine, leftItem2[1], rightItem2[0], rightItem2[3])
|
||||
|
||||
leftItem2[1] = rightIntersection
|
||||
leftItem2[0] = leftLineNei2
|
||||
carItem2[3] = carLeft2
|
||||
carItem2[0] = carRight2
|
||||
rightItem2[0] = rightLineNei2
|
||||
rightItem2[1] = rightLine
|
||||
console.log(leftItem2, carItem2, rightItem2, 'leftItem2right')
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
console.log(area[0], 'area')
|
||||
|
||||
if (that.viewer.entities.getById(that.options.id)) {
|
||||
that.viewer.entities.getById(that.options.id)._children.forEach((item) => {
|
||||
that.viewer.entities.remove(item);
|
||||
});
|
||||
that.viewer.entities.remove(that.viewer.entities.getById(that.options.id))
|
||||
}
|
||||
that.lineEntity = that.viewer.entities.add(new Cesium.Entity({ id: that.options.id, show: that.options.show }))
|
||||
|
||||
const myImg = new Image()
|
||||
myImg.src = that.options.roadImage
|
||||
myImg.onload = function () {
|
||||
console.log(area[1][0], 'arr')
|
||||
area[1][0].forEach((item, index) => {
|
||||
that.viewer.entities.add({
|
||||
// id: that.options.id,
|
||||
parent: that.lineEntity,
|
||||
polygon: {
|
||||
hierarchy: new Cesium.PolygonHierarchy(item),
|
||||
material: new Cesium.ImageMaterialProperty({
|
||||
image: that.options.roadImage,
|
||||
transparent: true,// 如果图片有透明部分,需要设置为 true
|
||||
repeat: that.calculateTextureRepeat(item, myImg)
|
||||
}),
|
||||
stRotation: that.calculateRoadAngle(positions[index], positions[index + 1])
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
const myImg2 = new Image()
|
||||
myImg2.src = that.options.sideImage
|
||||
myImg2.onload = function () {
|
||||
area[0].forEach((item, index) => {
|
||||
that.viewer.entities.add({
|
||||
parent: that.lineEntity,
|
||||
polygon: {
|
||||
hierarchy: new Cesium.PolygonHierarchy(item),
|
||||
material: new Cesium.ImageMaterialProperty({
|
||||
image: that.options.sideImage,
|
||||
transparent: true,// 如果图片有透明部分,需要设置为 true
|
||||
repeat: that.calculateTextureRepeat(item, myImg2)
|
||||
}),
|
||||
stRotation: that.calculateRoadAngle(positions[index], positions[index + 1])
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
area[2].forEach((item, index) => {
|
||||
that.viewer.entities.add({
|
||||
polygon: {
|
||||
hierarchy: new Cesium.PolygonHierarchy(item),
|
||||
material: new Cesium.ImageMaterialProperty({
|
||||
image: that.options.sideImage,
|
||||
transparent: true,// 如果图片有透明部分,需要设置为 true
|
||||
repeat: that.calculateTextureRepeat(item, myImg2)
|
||||
}),
|
||||
stRotation: that.calculateRoadAngle(positions[index], positions[index + 1])
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
getExtendPoint(position1, position2, distance) {
|
||||
// let position1 = Cesium.Cartesian3.fromDegrees(p1[0], p1[1], 0);
|
||||
// let position2 = Cesium.Cartesian3.fromDegrees(p2[0], p2[1], 0);
|
||||
let pot = Cesium.Cartesian3.subtract(position2, position1, new Cesium.Cartesian3());//方向
|
||||
var dir = Cesium.Cartesian3.normalize(pot, new Cesium.Cartesian3());//向量归一化
|
||||
|
||||
var ray = new Cesium.Ray(position1, dir);
|
||||
let np = Cesium.Ray.getPoint(ray, distance * 10);//计算延长点
|
||||
return np
|
||||
}
|
||||
getArr(arr1, arr2) {
|
||||
arr2 = arr2.reverse()
|
||||
let polygon = []
|
||||
for (let index = 0; index < arr1.length - 1; index++) {
|
||||
polygon.push([arr1[index], arr1[index + 1], arr2[index + 1], arr2[index]])
|
||||
}
|
||||
return polygon
|
||||
}
|
||||
|
||||
calculateRoadAngle(startPoint, endPoint) {
|
||||
// 1. 获取地表法向量
|
||||
const normal = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(startPoint);
|
||||
|
||||
// 2. 构建精确ENU坐标系
|
||||
const enuMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(startPoint, undefined, normal);
|
||||
const inverseMatrix = Cesium.Matrix4.inverse(enuMatrix, new Cesium.Matrix4());
|
||||
|
||||
// 3. 转换终点并计算水平向量
|
||||
const localEnd = Cesium.Matrix4.multiplyByPoint(inverseMatrix, endPoint, new Cesium.Cartesian3());
|
||||
const horizontalVec = new Cesium.Cartesian2(localEnd.x, localEnd.y);
|
||||
Cesium.Cartesian2.normalize(horizontalVec, horizontalVec);
|
||||
|
||||
const north = new Cesium.Cartesian2(1, 0);
|
||||
|
||||
const angle = Cesium.Cartesian2.angleBetween(north, horizontalVec);
|
||||
const cross = Cesium.Cartesian2.cross(north, horizontalVec, new Cesium.Cartesian2());
|
||||
return cross < 0 ? angle : -angle;
|
||||
}
|
||||
|
||||
calculatePolygonOrientation(positions) {
|
||||
|
||||
// 假设 position 是 Cesium.Cartesian3 对象,表示地球上的某个点
|
||||
var position = positions[0]
|
||||
// 获取东、北、上坐标系
|
||||
var eastNorthUp = Cesium.Transforms.eastNorthUpToFixedFrame(position);
|
||||
// northAxis 是北方向向量
|
||||
var northAxis = eastNorthUp.getColumn(1, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(northAxis, northAxis);
|
||||
|
||||
const direction = Cesium.Cartesian3.subtract(positions[0], positions[1], new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(direction, direction);
|
||||
|
||||
|
||||
const dot = Cesium.Cartesian3.dot(northAxis, direction);
|
||||
const magA = Cesium.Cartesian3.magnitude(northAxis);
|
||||
const magB = Cesium.Cartesian3.magnitude(direction);
|
||||
return Math.acos(dot / (magA * magB));
|
||||
}
|
||||
calculateTextureRepeat(polygonPositions, textureSize, meterPerPixel = 0.01) {
|
||||
// 验证纹理尺寸
|
||||
if (!textureSize.width || !textureSize.height) {
|
||||
throw new Error('Texture size must contain width and height in pixels');
|
||||
}
|
||||
|
||||
// 创建多边形几何体
|
||||
const geometry = Cesium.PolygonGeometry.createGeometry(
|
||||
new Cesium.PolygonGeometry({
|
||||
polygonHierarchy: new Cesium.PolygonHierarchy(polygonPositions),
|
||||
vertexFormat: Cesium.VertexFormat.POSITION_ONLY
|
||||
})
|
||||
);
|
||||
|
||||
// 计算多边形面积(平方米)
|
||||
let area = 0;
|
||||
const indices = geometry.indices;
|
||||
const positions = geometry.attributes.position.values;
|
||||
for (let i = 0; i < indices.length; i += 3) {
|
||||
const i0 = indices[i] * 3;
|
||||
const i1 = indices[i + 1] * 3;
|
||||
const i2 = indices[i + 2] * 3;
|
||||
|
||||
const p0 = new Cesium.Cartesian3(positions[i0], positions[i0 + 1], positions[i0 + 2]);
|
||||
const p1 = new Cesium.Cartesian3(positions[i1], positions[i1 + 1], positions[i1 + 2]);
|
||||
const p2 = new Cesium.Cartesian3(positions[i2], positions[i2 + 1], positions[i2 + 2]);
|
||||
|
||||
const cross = Cesium.Cartesian3.cross(
|
||||
Cesium.Cartesian3.subtract(p1, p0, new Cesium.Cartesian3()),
|
||||
Cesium.Cartesian3.subtract(p2, p0, new Cesium.Cartesian3()),
|
||||
new Cesium.Cartesian3()
|
||||
);
|
||||
area += Cesium.Cartesian3.magnitude(cross) * 0.5;
|
||||
}
|
||||
|
||||
// 将像素尺寸转换为实际尺寸(平方米)
|
||||
const textureWidthMeters = textureSize.width * meterPerPixel;
|
||||
const textureHeightMeters = textureSize.height * meterPerPixel;
|
||||
const textureArea = textureWidthMeters * textureHeightMeters;
|
||||
|
||||
// 计算各轴向重复次数
|
||||
const repeatX = Math.sqrt(area) / textureWidthMeters;
|
||||
const repeatY = Math.sqrt(area) / textureHeightMeters;
|
||||
|
||||
return new Cesium.Cartesian2(Math.max(1, Math.ceil(repeatX)), 1.0);
|
||||
}
|
||||
swapLastElements(arr1, arr2) {
|
||||
const last = arr1[arr1.length - 1]
|
||||
const first = arr2[0]
|
||||
arr1[arr1.length - 1] = first
|
||||
arr2[0] = last
|
||||
|
||||
return [arr1, arr2];
|
||||
}
|
||||
createLineBufferPolygonSide(positions, width) {
|
||||
let area = []
|
||||
for (let i = 0; i < positions.length; i++) {
|
||||
const posi = positions[i];
|
||||
|
||||
const dir = Cesium.Cartesian3.subtract(posi[1], posi[0], new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(dir, dir);
|
||||
|
||||
// 获取垂直向量(基于Z轴)
|
||||
const perp = Cesium.Cartesian3.cross(dir, Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(perp, perp);
|
||||
|
||||
// 生成偏移向量
|
||||
const offset = Cesium.Cartesian3.multiplyByScalar(perp, width, new Cesium.Cartesian3());
|
||||
let point1 = Cesium.Cartesian3.add(posi[0], offset, new Cesium.Cartesian3())
|
||||
let point3 = Cesium.Cartesian3.add(posi[1], offset, new Cesium.Cartesian3())
|
||||
|
||||
// i == positions.length - 2 ? area.push(start, point1, end, point3) : area.push(start, point1)
|
||||
area.push([posi[0], point1, point3, posi[1]])
|
||||
}
|
||||
// let arr = []
|
||||
// for (let i = 0; i < area.length - 2; i += 2) {
|
||||
// arr.push([area[i], area[i + 1], area[i + 3], area[i + 2]])
|
||||
// }
|
||||
return area
|
||||
}
|
||||
createLineBufferPolygon2(positions, width) {
|
||||
let area = []
|
||||
let leftPositions = [];
|
||||
let rightPositions = [];
|
||||
|
||||
for (let i = 0; i < positions.length - 1; i++) {
|
||||
const start = positions[i];
|
||||
// const end = positions[i + 1] || positions[i - 1];
|
||||
const end = positions[i + 1];
|
||||
|
||||
const dir = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(dir, dir);
|
||||
|
||||
// 获取垂直向量(基于Z轴)
|
||||
const perp = Cesium.Cartesian3.cross(dir, Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(perp, perp);
|
||||
|
||||
const dir2 = Cesium.Cartesian3.subtract(start, end, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(dir2, dir2);
|
||||
|
||||
// 获取垂直向量(基于Z轴)
|
||||
const perp2 = Cesium.Cartesian3.cross(dir2, Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(perp2, perp2);
|
||||
|
||||
|
||||
|
||||
|
||||
// 生成偏移向量
|
||||
const offset = Cesium.Cartesian3.multiplyByScalar(perp, width, new Cesium.Cartesian3());
|
||||
const offset2 = Cesium.Cartesian3.multiplyByScalar(perp, -width, new Cesium.Cartesian3());
|
||||
|
||||
const offsetEnd = Cesium.Cartesian3.multiplyByScalar(perp2, -width, new Cesium.Cartesian3());
|
||||
const offsetEnd2 = Cesium.Cartesian3.multiplyByScalar(perp2, width, new Cesium.Cartesian3());
|
||||
|
||||
let point1 = Cesium.Cartesian3.add(start, offset, new Cesium.Cartesian3())
|
||||
let point2 = Cesium.Cartesian3.add(start, offset2, new Cesium.Cartesian3())
|
||||
let point3 = Cesium.Cartesian3.add(end, offsetEnd, new Cesium.Cartesian3())
|
||||
let point4 = Cesium.Cartesian3.add(end, offsetEnd2, new Cesium.Cartesian3())
|
||||
|
||||
area.push([point1, point3, point4, point2])
|
||||
|
||||
rightPositions.push([point1, point3])
|
||||
leftPositions.push([point2, point4])
|
||||
|
||||
// if (i == positions.length - 2) {
|
||||
// area.push(point1, point2, point3, point4)
|
||||
// rightPositions.push(point1)
|
||||
// leftPositions.push(point2)
|
||||
// leftPositions.push(point4)
|
||||
// rightPositions.push(point3)
|
||||
// } else {
|
||||
// area.push(point1, point2)
|
||||
// rightPositions.push(point1)
|
||||
// leftPositions.push(point2)
|
||||
// }
|
||||
}
|
||||
// let arr = []
|
||||
// for (let i = 0; i < area.length - 2; i += 2) {
|
||||
// arr.push([area[i], area[i + 1], area[i + 3], area[i + 2]])
|
||||
// }
|
||||
console.log(area, rightPositions, 'rightPositions')
|
||||
let that = this
|
||||
// return [arr, rightPositions, leftPositions]
|
||||
return [area, rightPositions, leftPositions]
|
||||
}
|
||||
getIntersects(point1, point2, point3, point4) {
|
||||
let carPoint1 = this.getLonLat(point1)
|
||||
let carPoint2 = this.getLonLat(point2)
|
||||
let carPoint3 = this.getLonLat(point3)
|
||||
let carPoint4 = this.getLonLat(point4)
|
||||
var line1 = turf.lineString([
|
||||
[carPoint1.lon, carPoint1.lat],
|
||||
[carPoint2.lon, carPoint2.lat]
|
||||
]);
|
||||
var line2 = turf.lineString([
|
||||
[carPoint3.lon, carPoint3.lat],
|
||||
[carPoint4.lon, carPoint4.lat]
|
||||
]);
|
||||
var intersects = turf.lineIntersect(line1, line2);
|
||||
if (intersects.features.length > 0) {
|
||||
console.log(intersects.features, 'ooooo')
|
||||
return Cesium.Cartesian3.fromDegrees(intersects.features[0].geometry.coordinates[0], intersects.features[0].geometry.coordinates[1])
|
||||
}
|
||||
}
|
||||
getLonLat(point) {
|
||||
let pointDe = Cesium.Cartographic.fromCartesian(point)
|
||||
const longitude = Cesium.Math.toDegrees(pointDe.longitude);
|
||||
const latitude = Cesium.Math.toDegrees(pointDe.latitude);
|
||||
return { lon: longitude, lat: latitude }
|
||||
|
||||
}
|
||||
createLineBufferPolygon(viewer, positions, width) {
|
||||
// 计算每个线段的左右偏移点
|
||||
const leftPositions = [];
|
||||
const rightPositions = [];
|
||||
|
||||
for (let i = 0; i < positions.length; i++) {
|
||||
const start = positions[i];
|
||||
const end = positions[i + 1] || positions[i - 1];
|
||||
|
||||
// 计算线段方向向量
|
||||
const direction = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3());
|
||||
// const direction = Cesium.Cartesian3.subtract(start, end, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(direction, direction);
|
||||
|
||||
// 计算垂直向量(使用上向量叉积)
|
||||
const up = Cesium.Cartesian3.UNIT_Z;
|
||||
const perpendicular = Cesium.Cartesian3.cross(direction, up, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(perpendicular, perpendicular);
|
||||
|
||||
// 计算左右偏移点
|
||||
const leftOffset = Cesium.Cartesian3.multiplyByScalar(
|
||||
perpendicular,
|
||||
width,
|
||||
new Cesium.Cartesian3()
|
||||
);
|
||||
|
||||
if (width > 0) {
|
||||
rightPositions.unshift(Cesium.Cartesian3.add(start, leftOffset, new Cesium.Cartesian3()));
|
||||
} else if (width < 0) {
|
||||
rightPositions.push(Cesium.Cartesian3.add(start, leftOffset, new Cesium.Cartesian3()));
|
||||
}
|
||||
|
||||
}
|
||||
return rightPositions
|
||||
}
|
||||
//计算角度
|
||||
calculateAangle(arr) {
|
||||
// let fromDegreesArray = that.calSector(that.options.center, that.options.radius, that.options.startAngle, that.options.endAngle, 360, true)
|
||||
|
||||
function getAangle(start, end) {
|
||||
let rad = Math.PI / 180,
|
||||
lat1 = start.y * rad,
|
||||
lat2 = end.y * rad,
|
||||
lon1 = start.x * rad,
|
||||
lon2 = end.x * rad;
|
||||
const a = Math.sin(lon2 - lon1) * Math.cos(lat2);
|
||||
const b =
|
||||
Math.cos(lat1) * Math.sin(lat2) -
|
||||
Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1);
|
||||
const radians = Math.atan2(a, b)
|
||||
const degrees = radians % (2 * Math.PI);
|
||||
let bearing = 450 - ((degrees * 180) / Math.PI < 0
|
||||
? 360 + (degrees * 180) / Math.PI
|
||||
: (degrees * 180) / Math.PI) - 90;
|
||||
return 360 - (bearing % 360)
|
||||
}
|
||||
|
||||
let center = arr[0]
|
||||
let pos84_1 = arr[1]
|
||||
let pos84_2 = arr[2]
|
||||
|
||||
let start = { x: center.lng, y: center.lat }
|
||||
let end1 = { x: pos84_1.lng, y: pos84_1.lat }
|
||||
let end2 = { x: pos84_2.lng, y: pos84_2.lat }
|
||||
|
||||
let angle1 = getAangle(start, end1)
|
||||
let angle2 = getAangle(start, end2)
|
||||
|
||||
return {
|
||||
angle1,
|
||||
angle2
|
||||
}
|
||||
}
|
||||
|
||||
get carRoadWidth() {
|
||||
return this.options.carRoadWidth
|
||||
}
|
||||
|
||||
set carRoadWidth(v) {
|
||||
this.options.carRoadWidth = v
|
||||
Road.create(this)
|
||||
|
||||
}
|
||||
get sideWidth() {
|
||||
return this.options.sideWidth
|
||||
}
|
||||
set sideWidth(v) {
|
||||
this.options.sideWidth = v
|
||||
Road.create(this)
|
||||
}
|
||||
/**
|
||||
* @description 编辑框
|
||||
* @param state=false {boolean} 状态: true打开, false关闭
|
||||
*/
|
||||
async edit(state = false) {
|
||||
let _this = this
|
||||
this.originalOptions = this.deepCopyObj(this.options)
|
||||
|
||||
if (this._DialogObject && this._DialogObject.close) {
|
||||
this._DialogObject.close()
|
||||
this._DialogObject = null
|
||||
}
|
||||
|
||||
if (state) {
|
||||
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()
|
||||
},
|
||||
closeCallBack: () => {
|
||||
this.reset()
|
||||
this.Dialog.closeCallBack && this.Dialog.closeCallBack()
|
||||
},
|
||||
showCallBack: (show) => {
|
||||
this.show = show
|
||||
this.Dialog.showCallBack && this.Dialog.showCallBack()
|
||||
}
|
||||
}, true)
|
||||
this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' road-surface'
|
||||
let contentElm = document.createElement('div');
|
||||
contentElm.innerHTML = html()
|
||||
this._DialogObject.contentAppChild(contentElm)
|
||||
|
||||
|
||||
// 下拉选项
|
||||
// let heightModeData = [
|
||||
// {
|
||||
// name: '海拔高度',
|
||||
// value: '海拔高度',
|
||||
// key: '0',
|
||||
// },
|
||||
// {
|
||||
// name: '相对地表',
|
||||
// value: '相对地表',
|
||||
// key: '1',
|
||||
// },
|
||||
// {
|
||||
// name: '依附模型',
|
||||
// value: '依附模型',
|
||||
// key: '2',
|
||||
// }
|
||||
// ]
|
||||
// let heightModeObject = legp(
|
||||
// this._DialogObject._element.content.getElementsByClassName(
|
||||
// 'road-box'
|
||||
// )[0],
|
||||
// '.road-type'
|
||||
// )
|
||||
// if (heightModeObject) {
|
||||
// heightModeObject.legp_search(heightModeData)
|
||||
// let heightModeDataLegpElm = this._DialogObject._element.content
|
||||
// .getElementsByClassName('road-type')[0]
|
||||
// .getElementsByTagName('input')[0]
|
||||
// for (let i = 0; i < heightModeData.length; i++) {
|
||||
// if (heightModeData[i].key == this.heightMode) {
|
||||
// heightModeDataLegpElm.value = heightModeData[i].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) {
|
||||
// this.heightMode = heightModeData[i].key
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
|
||||
// this._elms.height = heightElm
|
||||
// this._elms.heightBox = heightBoxElm
|
||||
// this._elms.heightMode = heightModeDataLegpElm
|
||||
// this._elms.heightConfirm = heightConfirmElm
|
||||
// this._elms.heightModeObject = heightModeObject
|
||||
|
||||
// heightConfirmElm.addEventListener('click', () => {
|
||||
// this.positionEditing = false
|
||||
// for (let i = 0; i < this.options.positions.length; i++) {
|
||||
// this.options.positions[i].alt = Number((this.options.positions[i].alt + Number(heightElm.value)).toFixed(2))
|
||||
// this._elms.alt[i].innerHTML = this.options.positions[i].alt
|
||||
// }
|
||||
// let fromDegreesArray = this.renewPositions(this.options.positions)
|
||||
// this.entity.polyline.positions = Cesium.Cartesian3.fromDegreesArrayHeights(
|
||||
// fromDegreesArray
|
||||
// )
|
||||
|
||||
// this.positionEditing = false
|
||||
// PolylineObject.closeNodeEdit(this)
|
||||
// })
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let all_elm = contentElm.getElementsByTagName("*")
|
||||
this._EventBinding.on(this, all_elm)
|
||||
this._elms = this._EventBinding.element
|
||||
} 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
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
reset() {
|
||||
if (!this.viewer.entities.getById(this.options.id)) {
|
||||
return
|
||||
}
|
||||
this.name = this.originalOptions.name
|
||||
this.carRoadWidth = this.originalOptions.carRoadWidth
|
||||
this.sideWidth = this.originalOptions.sideWidth
|
||||
this.positions = this.originalOptions.positions
|
||||
this.roadImage = this.originalOptions.roadImage
|
||||
this.sideImage = this.originalOptions.sideImage
|
||||
}
|
||||
|
||||
/**
|
||||
* 飞到对应实体
|
||||
*/
|
||||
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[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 positionArray = []
|
||||
for (let i = 0; i < this.positions.length; i++) {
|
||||
let a = Cesium.Cartesian3.fromDegrees(
|
||||
this.positions[i][0],
|
||||
this.positions[i][1],
|
||||
this.options.height + this.options.heightDifference / 2
|
||||
)
|
||||
positionArray.push(a.x, a.y, a.z)
|
||||
}
|
||||
let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray)
|
||||
this.viewer.camera.flyToBoundingSphere(BoundingSphere, {
|
||||
offset: {
|
||||
heading: Cesium.Math.toRadians(0.0),
|
||||
pitch: Cesium.Math.toRadians(-20.0),
|
||||
roll: Cesium.Math.toRadians(0.0)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
getSphere() {
|
||||
return new Promise((resolve) => {
|
||||
// entity没有加载完成时 state 不会等于0 所以设置定时器直到获取到为止
|
||||
const interval = setInterval(() => {
|
||||
const sphere = new Cesium.BoundingSphere()
|
||||
const state = this.sdk.viewer._dataSourceDisplay.getBoundingSphere(
|
||||
this.viewer.entities.getById(this.options.id),
|
||||
false,
|
||||
sphere
|
||||
)
|
||||
if (state === Cesium.BoundingSphereState.DONE) {
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
async remove() {
|
||||
this.positions = []
|
||||
this.lineEntity = null
|
||||
|
||||
if (this.viewer.entities.getById(this.options.id)) {
|
||||
this.viewer.entities.getById(this.options.id)._children.forEach((item) => {
|
||||
this.viewer.entities.remove(item);
|
||||
});
|
||||
this.viewer.entities.remove(this.viewer.entities.getById(this.options.id))
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
flicker() { }
|
||||
}
|
||||
|
||||
export default Road
|
||||
615
src/Obj/Base/RoadObject/index-直接连接.js
Normal file
615
src/Obj/Base/RoadObject/index-直接连接.js
Normal file
@ -0,0 +1,615 @@
|
||||
/**
|
||||
* @description 道路
|
||||
*/
|
||||
import Dialog from '../../Element/Dialog';
|
||||
import { html } from "./_element";
|
||||
import EventBinding from '../../Element/Dialog/eventBinding';
|
||||
import Base from "../index";
|
||||
import { syncData } from '../../../Global/MultiViewportMode'
|
||||
import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen'
|
||||
import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global'
|
||||
|
||||
class Road extends Base {
|
||||
/**
|
||||
* @constructor
|
||||
* @param sdk
|
||||
* @description 道路
|
||||
* @param options {object} 道路属性
|
||||
* @param options.name=未命名对象 {string} 名称
|
||||
* @param options.carRoadWidth=2 {number} 车道宽度
|
||||
* @param options.sideWidth=2 {number} 人行道宽度
|
||||
* @param options.positions=[] {array} 道路positions
|
||||
* @param options.roadImage='' {string} 车道贴图
|
||||
* @param options.sideImage='' {string} 人行道贴图
|
||||
* @param Dialog {object} 弹框对象
|
||||
* @param Dialog.confirmCallBack {function} 弹框确认时的回调
|
||||
* */
|
||||
constructor(sdk, options = {}, _Dialog = {}) {
|
||||
super(sdk, options);
|
||||
this.viewer = this.sdk.viewer
|
||||
this.options.name = options.name || '道路'
|
||||
this.options.carRoadWidth = options.carRoadWidth || 10
|
||||
this.options.sideWidth = options.sideWidth || 5
|
||||
this.options.positions = options.positions || []
|
||||
this.options.roadImage = options.roadImage || (this.getSourceRootPath() + '/img/roadPhoto.png')
|
||||
this.options.sideImage = options.sideImage || (this.getSourceRootPath() + '/img/sidePhoto.png')
|
||||
this.options.show = (options.show || options.show === false) ? options.show : true
|
||||
this.Dialog = _Dialog
|
||||
this._EventBinding = new EventBinding()
|
||||
this._elms = {};
|
||||
this.positionArea = []
|
||||
this.positions = []
|
||||
this.lineEntity = ''
|
||||
|
||||
this.sdk.addIncetance(this.options.id, this)
|
||||
Road.create(this)
|
||||
}
|
||||
|
||||
// 创建道路
|
||||
static create(that) {
|
||||
let positions = []
|
||||
that.options.positions.forEach(v => {
|
||||
positions.push(new Cesium.Cartesian3.fromDegrees(v.lng, v.lat, v.alt))
|
||||
})
|
||||
|
||||
let area = [[], [], []]
|
||||
area[1] = that.createLineBufferPolygon2(positions, that.options.carRoadWidth / 2)
|
||||
area[0] = that.createLineBufferPolygonSide(area[1][2], -that.options.sideWidth)
|
||||
area[2] = that.createLineBufferPolygonSide(area[1][1], that.options.sideWidth)
|
||||
|
||||
if (that.viewer.entities.getById(that.options.id)) {
|
||||
that.viewer.entities.getById(that.options.id)._children.forEach((item) => {
|
||||
that.viewer.entities.remove(item);
|
||||
});
|
||||
that.viewer.entities.remove(that.viewer.entities.getById(that.options.id))
|
||||
}
|
||||
that.lineEntity = that.viewer.entities.add(new Cesium.Entity({ id: that.options.id, show: that.options.show }))
|
||||
|
||||
const myImg = new Image()
|
||||
myImg.src = that.options.roadImage
|
||||
myImg.onload = function () {
|
||||
area[1][0].forEach((item, index) => {
|
||||
that.viewer.entities.add({
|
||||
// id: that.options.id,
|
||||
parent: that.lineEntity,
|
||||
polygon: {
|
||||
hierarchy: new Cesium.PolygonHierarchy(item),
|
||||
material: new Cesium.ImageMaterialProperty({
|
||||
image: that.options.roadImage,
|
||||
transparent: true,// 如果图片有透明部分,需要设置为 true
|
||||
repeat: that.calculateTextureRepeat(item, myImg)
|
||||
}),
|
||||
stRotation: that.calculateRoadAngle(positions[index], positions[index + 1])
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
const myImg2 = new Image()
|
||||
myImg2.src = that.options.sideImage
|
||||
myImg2.onload = function () {
|
||||
area[0].forEach((item, index) => {
|
||||
that.viewer.entities.add({
|
||||
parent: that.lineEntity,
|
||||
polygon: {
|
||||
hierarchy: new Cesium.PolygonHierarchy(item),
|
||||
material: new Cesium.ImageMaterialProperty({
|
||||
image: that.options.sideImage,
|
||||
transparent: true,// 如果图片有透明部分,需要设置为 true
|
||||
repeat: that.calculateTextureRepeat(item, myImg2)
|
||||
}),
|
||||
stRotation: that.calculateRoadAngle(positions[index], positions[index + 1])
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
area[2].forEach((item, index) => {
|
||||
that.viewer.entities.add({
|
||||
polygon: {
|
||||
hierarchy: new Cesium.PolygonHierarchy(item),
|
||||
material: new Cesium.ImageMaterialProperty({
|
||||
image: that.options.sideImage,
|
||||
transparent: true,// 如果图片有透明部分,需要设置为 true
|
||||
repeat: that.calculateTextureRepeat(item, myImg2)
|
||||
}),
|
||||
stRotation: that.calculateRoadAngle(positions[index], positions[index + 1])
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
getArr(arr1, arr2) {
|
||||
arr2 = arr2.reverse()
|
||||
let polygon = []
|
||||
for (let index = 0; index < arr1.length - 1; index++) {
|
||||
polygon.push([arr1[index], arr1[index + 1], arr2[index + 1], arr2[index]])
|
||||
}
|
||||
return polygon
|
||||
}
|
||||
|
||||
calculateRoadAngle(startPoint, endPoint) {
|
||||
// 1. 获取地表法向量
|
||||
const normal = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(startPoint);
|
||||
|
||||
// 2. 构建精确ENU坐标系
|
||||
const enuMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(startPoint, undefined, normal);
|
||||
const inverseMatrix = Cesium.Matrix4.inverse(enuMatrix, new Cesium.Matrix4());
|
||||
|
||||
// 3. 转换终点并计算水平向量
|
||||
const localEnd = Cesium.Matrix4.multiplyByPoint(inverseMatrix, endPoint, new Cesium.Cartesian3());
|
||||
const horizontalVec = new Cesium.Cartesian2(localEnd.x, localEnd.y);
|
||||
Cesium.Cartesian2.normalize(horizontalVec, horizontalVec);
|
||||
|
||||
const north = new Cesium.Cartesian2(1, 0);
|
||||
|
||||
const angle = Cesium.Cartesian2.angleBetween(north, horizontalVec);
|
||||
const cross = Cesium.Cartesian2.cross(north, horizontalVec, new Cesium.Cartesian2());
|
||||
return cross < 0 ? angle : -angle;
|
||||
}
|
||||
|
||||
calculatePolygonOrientation(positions) {
|
||||
|
||||
// 假设 position 是 Cesium.Cartesian3 对象,表示地球上的某个点
|
||||
var position = positions[0]
|
||||
// 获取东、北、上坐标系
|
||||
var eastNorthUp = Cesium.Transforms.eastNorthUpToFixedFrame(position);
|
||||
// northAxis 是北方向向量
|
||||
var northAxis = eastNorthUp.getColumn(1, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(northAxis, northAxis);
|
||||
|
||||
const direction = Cesium.Cartesian3.subtract(positions[0], positions[1], new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(direction, direction);
|
||||
|
||||
|
||||
const dot = Cesium.Cartesian3.dot(northAxis, direction);
|
||||
const magA = Cesium.Cartesian3.magnitude(northAxis);
|
||||
const magB = Cesium.Cartesian3.magnitude(direction);
|
||||
return Math.acos(dot / (magA * magB));
|
||||
}
|
||||
calculateTextureRepeat(polygonPositions, textureSize, meterPerPixel = 0.01) {
|
||||
// 验证纹理尺寸
|
||||
if (!textureSize.width || !textureSize.height) {
|
||||
throw new Error('Texture size must contain width and height in pixels');
|
||||
}
|
||||
|
||||
// 创建多边形几何体
|
||||
const geometry = Cesium.PolygonGeometry.createGeometry(
|
||||
new Cesium.PolygonGeometry({
|
||||
polygonHierarchy: new Cesium.PolygonHierarchy(polygonPositions),
|
||||
vertexFormat: Cesium.VertexFormat.POSITION_ONLY
|
||||
})
|
||||
);
|
||||
|
||||
// 计算多边形面积(平方米)
|
||||
let area = 0;
|
||||
const indices = geometry.indices;
|
||||
const positions = geometry.attributes.position.values;
|
||||
for (let i = 0; i < indices.length; i += 3) {
|
||||
const i0 = indices[i] * 3;
|
||||
const i1 = indices[i + 1] * 3;
|
||||
const i2 = indices[i + 2] * 3;
|
||||
|
||||
const p0 = new Cesium.Cartesian3(positions[i0], positions[i0 + 1], positions[i0 + 2]);
|
||||
const p1 = new Cesium.Cartesian3(positions[i1], positions[i1 + 1], positions[i1 + 2]);
|
||||
const p2 = new Cesium.Cartesian3(positions[i2], positions[i2 + 1], positions[i2 + 2]);
|
||||
|
||||
const cross = Cesium.Cartesian3.cross(
|
||||
Cesium.Cartesian3.subtract(p1, p0, new Cesium.Cartesian3()),
|
||||
Cesium.Cartesian3.subtract(p2, p0, new Cesium.Cartesian3()),
|
||||
new Cesium.Cartesian3()
|
||||
);
|
||||
area += Cesium.Cartesian3.magnitude(cross) * 0.5;
|
||||
}
|
||||
|
||||
// 将像素尺寸转换为实际尺寸(平方米)
|
||||
const textureWidthMeters = textureSize.width * meterPerPixel;
|
||||
const textureHeightMeters = textureSize.height * meterPerPixel;
|
||||
const textureArea = textureWidthMeters * textureHeightMeters;
|
||||
|
||||
// 计算各轴向重复次数
|
||||
const repeatX = Math.sqrt(area) / textureWidthMeters;
|
||||
const repeatY = Math.sqrt(area) / textureHeightMeters;
|
||||
|
||||
return new Cesium.Cartesian2(Math.max(1, Math.ceil(repeatX)), 1.0);
|
||||
}
|
||||
swapLastElements(arr1, arr2) {
|
||||
const last = arr1[arr1.length - 1]
|
||||
const first = arr2[0]
|
||||
arr1[arr1.length - 1] = first
|
||||
arr2[0] = last
|
||||
|
||||
return [arr1, arr2];
|
||||
}
|
||||
createLineBufferPolygonSide(positions, width) {
|
||||
let area = []
|
||||
for (let i = 0; i < positions.length - 1; i++) {
|
||||
const start = positions[i];
|
||||
const end = positions[i + 1];
|
||||
|
||||
const dir = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(dir, dir);
|
||||
|
||||
// 获取垂直向量(基于Z轴)
|
||||
const perp = Cesium.Cartesian3.cross(dir, Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(perp, perp);
|
||||
|
||||
// 生成偏移向量
|
||||
const offset = Cesium.Cartesian3.multiplyByScalar(perp, width, new Cesium.Cartesian3());
|
||||
let point1 = Cesium.Cartesian3.add(start, offset, new Cesium.Cartesian3())
|
||||
let point3 = Cesium.Cartesian3.add(end, offset, new Cesium.Cartesian3())
|
||||
|
||||
i == positions.length - 2 ? area.push(start, point1, end, point3) : area.push(start, point1)
|
||||
}
|
||||
let arr = []
|
||||
for (let i = 0; i < area.length - 2; i += 2) {
|
||||
arr.push([area[i], area[i + 1], area[i + 3], area[i + 2]])
|
||||
}
|
||||
return arr
|
||||
}
|
||||
createLineBufferPolygon2(positions, width) {
|
||||
let area = []
|
||||
let leftPositions = [];
|
||||
let rightPositions = [];
|
||||
|
||||
for (let i = 0; i < positions.length - 1; i++) {
|
||||
const start = positions[i];
|
||||
// const end = positions[i + 1] || positions[i - 1];
|
||||
const end = positions[i + 1];
|
||||
|
||||
const dir = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(dir, dir);
|
||||
|
||||
// 获取垂直向量(基于Z轴)
|
||||
const perp = Cesium.Cartesian3.cross(dir, Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(perp, perp);
|
||||
|
||||
|
||||
// 生成偏移向量
|
||||
const offset = Cesium.Cartesian3.multiplyByScalar(perp, width, new Cesium.Cartesian3());
|
||||
const offset2 = Cesium.Cartesian3.multiplyByScalar(perp, -width, new Cesium.Cartesian3());
|
||||
let point1 = Cesium.Cartesian3.add(start, offset, new Cesium.Cartesian3())
|
||||
let point2 = Cesium.Cartesian3.add(start, offset2, new Cesium.Cartesian3())
|
||||
let point3 = Cesium.Cartesian3.add(end, offset, new Cesium.Cartesian3())
|
||||
let point4 = Cesium.Cartesian3.add(end, offset2, new Cesium.Cartesian3())
|
||||
|
||||
if (i == positions.length - 2) {
|
||||
area.push(point1, point2, point3, point4)
|
||||
rightPositions.push(point1)
|
||||
leftPositions.push(point2)
|
||||
leftPositions.push(point4)
|
||||
rightPositions.push(point3)
|
||||
} else {
|
||||
area.push(point1, point2)
|
||||
rightPositions.push(point1)
|
||||
leftPositions.push(point2)
|
||||
}
|
||||
}
|
||||
let arr = []
|
||||
for (let i = 0; i < area.length - 2; i += 2) {
|
||||
arr.push([area[i], area[i + 1], area[i + 3], area[i + 2]])
|
||||
}
|
||||
return [arr, rightPositions, leftPositions]
|
||||
}
|
||||
createLineBufferPolygon(viewer, positions, width) {
|
||||
// 计算每个线段的左右偏移点
|
||||
const leftPositions = [];
|
||||
const rightPositions = [];
|
||||
|
||||
for (let i = 0; i < positions.length; i++) {
|
||||
const start = positions[i];
|
||||
const end = positions[i + 1] || positions[i - 1];
|
||||
|
||||
// 计算线段方向向量
|
||||
const direction = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3());
|
||||
// const direction = Cesium.Cartesian3.subtract(start, end, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(direction, direction);
|
||||
|
||||
// 计算垂直向量(使用上向量叉积)
|
||||
const up = Cesium.Cartesian3.UNIT_Z;
|
||||
const perpendicular = Cesium.Cartesian3.cross(direction, up, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(perpendicular, perpendicular);
|
||||
|
||||
// 计算左右偏移点
|
||||
const leftOffset = Cesium.Cartesian3.multiplyByScalar(
|
||||
perpendicular,
|
||||
width,
|
||||
new Cesium.Cartesian3()
|
||||
);
|
||||
|
||||
if (width > 0) {
|
||||
rightPositions.unshift(Cesium.Cartesian3.add(start, leftOffset, new Cesium.Cartesian3()));
|
||||
} else if (width < 0) {
|
||||
rightPositions.push(Cesium.Cartesian3.add(start, leftOffset, new Cesium.Cartesian3()));
|
||||
}
|
||||
|
||||
}
|
||||
return rightPositions
|
||||
}
|
||||
|
||||
get carRoadWidth() {
|
||||
return this.options.carRoadWidth
|
||||
}
|
||||
|
||||
set carRoadWidth(v) {
|
||||
this.options.carRoadWidth = v
|
||||
Road.create(this)
|
||||
|
||||
}
|
||||
get sideWidth() {
|
||||
return this.options.sideWidth
|
||||
}
|
||||
set sideWidth(v) {
|
||||
this.options.sideWidth = v
|
||||
Road.create(this)
|
||||
}
|
||||
/**
|
||||
* @description 编辑框
|
||||
* @param state=false {boolean} 状态: true打开, false关闭
|
||||
*/
|
||||
async edit(state = false) {
|
||||
let _this = this
|
||||
this.originalOptions = this.deepCopyObj(this.options)
|
||||
|
||||
if (this._DialogObject && this._DialogObject.close) {
|
||||
this._DialogObject.close()
|
||||
this._DialogObject = null
|
||||
}
|
||||
|
||||
if (state) {
|
||||
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()
|
||||
},
|
||||
closeCallBack: () => {
|
||||
this.reset()
|
||||
this.Dialog.closeCallBack && this.Dialog.closeCallBack()
|
||||
},
|
||||
showCallBack: (show) => {
|
||||
this.show = show
|
||||
this.Dialog.showCallBack && this.Dialog.showCallBack()
|
||||
}
|
||||
}, true)
|
||||
this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' road-surface'
|
||||
let contentElm = document.createElement('div');
|
||||
contentElm.innerHTML = html()
|
||||
this._DialogObject.contentAppChild(contentElm)
|
||||
|
||||
|
||||
// 下拉选项
|
||||
// let heightModeData = [
|
||||
// {
|
||||
// name: '海拔高度',
|
||||
// value: '海拔高度',
|
||||
// key: '0',
|
||||
// },
|
||||
// {
|
||||
// name: '相对地表',
|
||||
// value: '相对地表',
|
||||
// key: '1',
|
||||
// },
|
||||
// {
|
||||
// name: '依附模型',
|
||||
// value: '依附模型',
|
||||
// key: '2',
|
||||
// }
|
||||
// ]
|
||||
// let heightModeObject = legp(
|
||||
// this._DialogObject._element.content.getElementsByClassName(
|
||||
// 'road-box'
|
||||
// )[0],
|
||||
// '.road-type'
|
||||
// )
|
||||
// if (heightModeObject) {
|
||||
// heightModeObject.legp_search(heightModeData)
|
||||
// let heightModeDataLegpElm = this._DialogObject._element.content
|
||||
// .getElementsByClassName('road-type')[0]
|
||||
// .getElementsByTagName('input')[0]
|
||||
// for (let i = 0; i < heightModeData.length; i++) {
|
||||
// if (heightModeData[i].key == this.heightMode) {
|
||||
// heightModeDataLegpElm.value = heightModeData[i].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) {
|
||||
// this.heightMode = heightModeData[i].key
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
|
||||
// this._elms.height = heightElm
|
||||
// this._elms.heightBox = heightBoxElm
|
||||
// this._elms.heightMode = heightModeDataLegpElm
|
||||
// this._elms.heightConfirm = heightConfirmElm
|
||||
// this._elms.heightModeObject = heightModeObject
|
||||
|
||||
// heightConfirmElm.addEventListener('click', () => {
|
||||
// this.positionEditing = false
|
||||
// for (let i = 0; i < this.options.positions.length; i++) {
|
||||
// this.options.positions[i].alt = Number((this.options.positions[i].alt + Number(heightElm.value)).toFixed(2))
|
||||
// this._elms.alt[i].innerHTML = this.options.positions[i].alt
|
||||
// }
|
||||
// let fromDegreesArray = this.renewPositions(this.options.positions)
|
||||
// this.entity.polyline.positions = Cesium.Cartesian3.fromDegreesArrayHeights(
|
||||
// fromDegreesArray
|
||||
// )
|
||||
|
||||
// this.positionEditing = false
|
||||
// PolylineObject.closeNodeEdit(this)
|
||||
// })
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let all_elm = contentElm.getElementsByTagName("*")
|
||||
this._EventBinding.on(this, all_elm)
|
||||
this._elms = this._EventBinding.element
|
||||
} 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
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
reset() {
|
||||
if (!this.viewer.entities.getById(this.options.id)) {
|
||||
return
|
||||
}
|
||||
this.name = this.originalOptions.name
|
||||
this.carRoadWidth = this.originalOptions.carRoadWidth
|
||||
this.sideWidth = this.originalOptions.sideWidth
|
||||
this.positions = this.originalOptions.positions
|
||||
this.roadImage = this.originalOptions.roadImage
|
||||
this.sideImage = this.originalOptions.sideImage
|
||||
}
|
||||
|
||||
/**
|
||||
* 飞到对应实体
|
||||
*/
|
||||
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[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 positionArray = []
|
||||
for (let i = 0; i < this.positions.length; i++) {
|
||||
let a = Cesium.Cartesian3.fromDegrees(
|
||||
this.positions[i][0],
|
||||
this.positions[i][1],
|
||||
this.options.height + this.options.heightDifference / 2
|
||||
)
|
||||
positionArray.push(a.x, a.y, a.z)
|
||||
}
|
||||
let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray)
|
||||
this.viewer.camera.flyToBoundingSphere(BoundingSphere, {
|
||||
offset: {
|
||||
heading: Cesium.Math.toRadians(0.0),
|
||||
pitch: Cesium.Math.toRadians(-20.0),
|
||||
roll: Cesium.Math.toRadians(0.0)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
getSphere() {
|
||||
return new Promise((resolve) => {
|
||||
// entity没有加载完成时 state 不会等于0 所以设置定时器直到获取到为止
|
||||
const interval = setInterval(() => {
|
||||
const sphere = new Cesium.BoundingSphere()
|
||||
const state = this.sdk.viewer._dataSourceDisplay.getBoundingSphere(
|
||||
this.viewer.entities.getById(this.options.id),
|
||||
false,
|
||||
sphere
|
||||
)
|
||||
if (state === Cesium.BoundingSphereState.DONE) {
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
async remove() {
|
||||
this.positions = []
|
||||
this.lineEntity = null
|
||||
|
||||
if (this.viewer.entities.getById(this.options.id)) {
|
||||
this.viewer.entities.getById(this.options.id)._children.forEach((item) => {
|
||||
this.viewer.entities.remove(item);
|
||||
});
|
||||
this.viewer.entities.remove(this.viewer.entities.getById(this.options.id))
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
flicker() { }
|
||||
}
|
||||
|
||||
export default Road
|
||||
1023
src/Obj/Base/RoadObject/index-面大小一致.js
Normal file
1023
src/Obj/Base/RoadObject/index-面大小一致.js
Normal file
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user