Merge branch 'develop' of http://xny.yj-3d.com:3000/zh/sdk4.0 into develop
This commit is contained in:
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
|
||||
@ -80,6 +80,10 @@ export default class Sunshine {
|
||||
}
|
||||
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)
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@ export default class TimeLine {
|
||||
this.timelineCon = document.getElementsByClassName('timeline-container')[0];
|
||||
this.speed = speed;
|
||||
this.animationId;
|
||||
this.startTime = Date.now();
|
||||
this.startTime = performance.now();
|
||||
this.manualPosition = null;
|
||||
this.isDragging = false;
|
||||
this.pauseed = false;
|
||||
@ -28,9 +28,7 @@ export default class TimeLine {
|
||||
document.getElementsByClassName('time-marks')[0].appendChild(label)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
that.startTime = Date.now() - ((that.manualPosition || 0) * 86400 * 1000 / that.speed);
|
||||
that.startTime = performance.now() - ((that.manualPosition || 0) * 86400 * 1000 / that.speed);
|
||||
|
||||
that.timeline.addEventListener('mousedown', (e) => {
|
||||
if (e.srcElement.className === 'handle') {
|
||||
@ -57,21 +55,22 @@ export default class TimeLine {
|
||||
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.pausedTime = Date.now(); // 记录暂停时刻
|
||||
that.sdk.viewer.clock.shouldAnimate = false
|
||||
} else {//播放
|
||||
let now = performance.now()
|
||||
const pausedDuration = now - that.pausedTime;
|
||||
document.getElementById('timePause').textContent = '暂停';
|
||||
that.manualPosition = null
|
||||
const pausedDuration = Date.now() - that.pausedTime;
|
||||
that.startTime += pausedDuration; // 补偿暂停期间的时间差
|
||||
|
||||
if (that.changeDate) {//切换日期后让时间从0开始
|
||||
if (that.changeDateGrag) {
|
||||
that.changeDateGrag = undefined
|
||||
} else {
|
||||
that.startTime = Date.now()
|
||||
that.startTime = now
|
||||
}
|
||||
that.changeDate = undefined
|
||||
}
|
||||
@ -88,14 +87,14 @@ export default class TimeLine {
|
||||
that.isDragging = false;
|
||||
if (that.manualPosition !== null) {
|
||||
// that.sdk.viewer.clock.shouldAnimate = true
|
||||
that.startTime = Date.now() - (that.manualPosition * 86400 * 1000 / that.speed);
|
||||
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 = Date.now(); // 记录暂停时刻
|
||||
that.pausedTime = performance.now(); // 记录暂停时刻
|
||||
func(that.currentTime.textContent)
|
||||
}
|
||||
|
||||
@ -113,9 +112,9 @@ export default class TimeLine {
|
||||
update() {
|
||||
if (this.manualPosition !== null) return;
|
||||
if (this.changeDate) {//切换日期后让时间从0开始
|
||||
this.startTime = Date.now()
|
||||
this.startTime = performance.now()
|
||||
}
|
||||
let elapsed = (Date.now() - this.startTime) * this.speed;
|
||||
let elapsed = (performance.now() - this.startTime) * this.speed;
|
||||
// if (this.elapsed) {
|
||||
// elapsed = elapsed + this.elapsed
|
||||
// this.elapsed = undefined
|
||||
@ -133,23 +132,23 @@ export default class TimeLine {
|
||||
}
|
||||
}
|
||||
setSpeed(v) {
|
||||
let now = performance.now()
|
||||
if (!this.pauseed) {
|
||||
const currentProgress = this.manualPosition ??
|
||||
(Date.now() - this.startTime) * this.speed / (86400 * 1000);
|
||||
(performance.now() - this.startTime) * this.speed / (86400 * 1000);
|
||||
this.speed = v;
|
||||
this.startTime = Date.now() - (currentProgress * 86400 * 1000 / this.speed);
|
||||
this.startTime = performance.now() - (currentProgress * 86400 * 1000 / this.speed);
|
||||
|
||||
} else {
|
||||
let pausedDuration = Date.now() - this.pausedTime;
|
||||
let pausedDuration = now - this.pausedTime;
|
||||
this.startTime += pausedDuration; // 补偿暂停期间的时间差
|
||||
|
||||
const currentProgress = this.manualPosition ??
|
||||
(Date.now() - this.startTime) * this.speed / (86400 * 1000);
|
||||
(now - this.startTime) * this.speed / (86400 * 1000);
|
||||
this.speed = v;
|
||||
this.startTime = Date.now() - (currentProgress * 86400 * 1000 / this.speed);
|
||||
this.startTime = now - (currentProgress * 86400 * 1000 / this.speed);
|
||||
|
||||
this.pausedTime = Date.now(); // 记录切换speed暂停时刻
|
||||
this.speed = v;
|
||||
this.pausedTime = now; // 记录切换speed暂停时刻
|
||||
// this.speed = v;
|
||||
}
|
||||
this.manualPosition = null;
|
||||
|
||||
@ -158,7 +157,7 @@ export default class TimeLine {
|
||||
}
|
||||
updateTime() {
|
||||
this.manualPosition = null;
|
||||
this.startTime = Date.now() - ((this.manualPosition || 0) * 86400 * 1000 / this.speed);
|
||||
this.startTime = performance.now() - ((this.manualPosition || 0) * 86400 * 1000 / this.speed);
|
||||
this.pauseed && (this.changeDate = true)
|
||||
this.changeDateGrag = undefined
|
||||
this.update();
|
||||
|
||||
@ -173,6 +173,9 @@ function MouseRightMenu(sdk, status, callBack) {
|
||||
// that.edit(true)
|
||||
// this.attribute(entityId)
|
||||
break
|
||||
case '文本框':
|
||||
object.position = position
|
||||
break
|
||||
}
|
||||
eventListener[sdk.div_id].callBack(key, object)
|
||||
_element.removeChild(menuElm)
|
||||
|
||||
@ -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'
|
||||
@ -185,6 +186,9 @@ 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('录屏对象')
|
||||
@ -256,7 +260,10 @@ if (!window.YJ) {
|
||||
FRUSTUN: Frustum,
|
||||
// GenerateRoute
|
||||
Dialog,
|
||||
FlowLine
|
||||
FlowLine,
|
||||
// Road2,
|
||||
TextBox,
|
||||
BatchModel
|
||||
},
|
||||
YJEarth,
|
||||
Tools,
|
||||
@ -374,6 +381,7 @@ if (!window.YJ) {
|
||||
DrawAssemble,
|
||||
DrawSector,
|
||||
DrawTakeOff,
|
||||
DrawThreeRect
|
||||
},
|
||||
// 分析
|
||||
Analysis: {
|
||||
|
||||
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 }
|
||||
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;
|
||||
653
src/Obj/Base/BatchModel/index.js
Normal file
653
src/Obj/Base/BatchModel/index.js
Normal file
@ -0,0 +1,653 @@
|
||||
/**
|
||||
* @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 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 } 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 || 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)
|
||||
// BatchModel.computeDis(this)
|
||||
if (this.options.positions.length > 0 || 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 == '面') {
|
||||
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 == '线') {
|
||||
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 == '点') {
|
||||
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
|
||||
}
|
||||
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
|
||||
@ -65,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">
|
||||
@ -73,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>
|
||||
@ -83,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">
|
||||
@ -91,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()}
|
||||
|
||||
@ -11,7 +11,7 @@ import LabelObject from '../LabelObject'
|
||||
import MouseEvent from '../../../Event/index'
|
||||
import MouseTip from '../../../MouseTip'
|
||||
import Controller from '../../../Controller/index'
|
||||
import { syncData } from '../../../Global/MultiViewportMode'
|
||||
import { syncData, get3DView } from '../../../Global/MultiViewportMode'
|
||||
import { legp } from '../../Element/datalist'
|
||||
import { getFontList, getFontFamilyName } from '../../Element/fontSelect'
|
||||
import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen'
|
||||
@ -56,6 +56,10 @@ class CurvelineObject extends Base {
|
||||
this.options.type = options.type ? Number(options.type) : 0
|
||||
this.options['nose-to-tail'] = options['nose-to-tail'] || false
|
||||
this.options.extend = options.extend || false
|
||||
this.options.rotate = options.rotate || true
|
||||
this.options.space = options.space || 1
|
||||
this.options.speed = options.speed || 10
|
||||
this.options.dashSize = options.dashSize || 0.03
|
||||
this.options['length-unit'] = options['length-unit'] || '米'
|
||||
this.options['fit-length-unit'] = options['fit-length-unit'] || '米'
|
||||
this.options['words-name'] = options['words-name'] || '空间长度'
|
||||
@ -146,7 +150,8 @@ class CurvelineObject extends Base {
|
||||
}
|
||||
set color(v) {
|
||||
this.options.color = v || '#ff0000'
|
||||
this.entity.polyline.material = this.getMaterial(v, this.options.type)
|
||||
// this.entity.polyline.material = this.getMaterial(v, this.options.type)
|
||||
this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options)
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let colorPicker = new YJColorPicker({
|
||||
@ -167,6 +172,48 @@ class CurvelineObject extends Base {
|
||||
})
|
||||
}
|
||||
}
|
||||
get speed() {
|
||||
return this.options.speed
|
||||
}
|
||||
|
||||
set speed(v) {
|
||||
// this.options.speed = v
|
||||
this.options.speed = v !== 0 ? Math.pow(v, -1) * 100 : 0
|
||||
this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options)
|
||||
}
|
||||
get dashSize() {
|
||||
return this.options.dashSize
|
||||
}
|
||||
|
||||
set dashSize(v) {
|
||||
this.options.dashSize = v
|
||||
this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options)
|
||||
}
|
||||
|
||||
get rotate() {
|
||||
return this.options.rotate
|
||||
}
|
||||
|
||||
set rotate(v) {
|
||||
this.options.rotate = v
|
||||
CurvelineObject.closeNodeEdit(this)
|
||||
this._elms.rotate &&
|
||||
this._elms.rotate.forEach(item => {
|
||||
item.checked = v
|
||||
})
|
||||
|
||||
this.options.rotate = v
|
||||
this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options)
|
||||
}
|
||||
|
||||
get space() {
|
||||
return this.options.space
|
||||
}
|
||||
|
||||
set space(v) {
|
||||
this.options.space = v
|
||||
this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options)
|
||||
}
|
||||
|
||||
get length() {
|
||||
return this.options.length
|
||||
@ -299,19 +346,82 @@ class CurvelineObject extends Base {
|
||||
set lineType(v) {
|
||||
let lineTypeData = [
|
||||
{
|
||||
name: '实线',
|
||||
name: '<i class="icon line"></i>实线',
|
||||
value: '实线',
|
||||
key: 0
|
||||
key: 0,
|
||||
icon: 'line'
|
||||
},
|
||||
{
|
||||
name: '虚线',
|
||||
name: '<i class="icon dash-line"></i>虚线',
|
||||
value: '虚线',
|
||||
key: 1
|
||||
key: 1,
|
||||
icon: 'dash-line'
|
||||
},
|
||||
{
|
||||
name: '泛光',
|
||||
name: '<i class="icon light-line"></i>泛光',
|
||||
value: '泛光',
|
||||
key: 2
|
||||
key: 2,
|
||||
icon: 'light-line'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon tail-line"></i>尾迹光线',
|
||||
value: '尾迹光线',
|
||||
key: 3,
|
||||
icon: 'tail-line'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon mult-tail-line"></i>多尾迹光线',
|
||||
value: '多尾迹光线',
|
||||
key: 4,
|
||||
icon: 'mult-tail-line'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon flow-dash-line1"></i>流动虚线1',
|
||||
value: '流动虚线1',
|
||||
key: 5,
|
||||
icon: 'flow-dash-line1'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon flow-dash-line2"></i>流动虚线2',
|
||||
value: '流动虚线2',
|
||||
key: 6,
|
||||
icon: 'flow-dash-line2'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon pic-line1"></i>流动箭头1',
|
||||
value: '流动箭头1',
|
||||
key: 7,
|
||||
icon: 'pic-line1'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon pic-line2"></i>流动箭头2',
|
||||
value: '流动箭头2',
|
||||
key: 8,
|
||||
icon: 'pic-line2'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon pic-line3"></i>流动箭头3',
|
||||
value: '流动箭头3',
|
||||
key: 9,
|
||||
icon: 'pic-line3'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon pic-line4"></i>流动箭头4',
|
||||
value: '流动箭头4',
|
||||
key: 10,
|
||||
icon: 'pic-line4'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon pic-line5"></i>流动箭头5',
|
||||
value: '流动箭头5',
|
||||
key: 11,
|
||||
icon: 'pic-line5'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon pic-line6"></i>流动箭头6',
|
||||
value: '流动箭头6',
|
||||
key: 12,
|
||||
icon: 'pic-line6'
|
||||
}
|
||||
]
|
||||
this.options.type = Number(v)
|
||||
@ -320,6 +430,18 @@ class CurvelineObject extends Base {
|
||||
this._elms.lineType &&
|
||||
this._elms.lineType.forEach(item => {
|
||||
item.value = lineTypeData[i].value
|
||||
if (2 < item.value && item.value < 13) {//贴图参数
|
||||
document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'flex')
|
||||
} else {
|
||||
document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'none')
|
||||
}
|
||||
if (2 < item.value && item.value < 5) {//尾迹参数
|
||||
document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'none')
|
||||
document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'none')
|
||||
} else {
|
||||
document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'flex')
|
||||
document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'flex')
|
||||
}
|
||||
})
|
||||
break
|
||||
}
|
||||
@ -328,7 +450,9 @@ class CurvelineObject extends Base {
|
||||
this.entity.polyline &&
|
||||
(this.entity.polyline.material = this.getMaterial(
|
||||
this.options.color,
|
||||
this.options.type
|
||||
this.options.type,
|
||||
this.entity,
|
||||
this.options
|
||||
))
|
||||
}
|
||||
get noseToTail() {
|
||||
@ -1212,6 +1336,16 @@ class CurvelineObject extends Base {
|
||||
zIndex: that.sdk._entityZIndex
|
||||
}
|
||||
})
|
||||
|
||||
that.entity.polyline.oriWidth = that.options.width
|
||||
that.judgeLine(that.entity, that.options)
|
||||
that.entity.polyline.material = that.getMaterial(
|
||||
that.options.color,
|
||||
that.options.type,
|
||||
that.entity,
|
||||
that.options
|
||||
)
|
||||
|
||||
that.sdk._entityZIndex++
|
||||
CurvelineObject.createLabel(that)
|
||||
// that.entity.polyline.positionsLngLat = positions
|
||||
@ -1252,7 +1386,130 @@ class CurvelineObject extends Base {
|
||||
|
||||
let scene = that.sdk.viewer.scene
|
||||
}
|
||||
judgeLine(entity, newParam) {
|
||||
if (!entity.polyline.oriRepeat) {
|
||||
let param = {
|
||||
color: newParam.color,
|
||||
image: this.getSourceRootPath() + `/img/arrow/1.png`,
|
||||
space: newParam.space,
|
||||
speed: newParam.speed
|
||||
}
|
||||
|
||||
param.speed = newParam.rotate ? param.speed : 0 - param.speed
|
||||
|
||||
const canvasEle = document.createElement('canvas');
|
||||
const ctx = canvasEle.getContext('2d')
|
||||
const myImg = new Image()
|
||||
// myImg.src = that.getSourceRootPath() + '/img/arrow/1.png'
|
||||
myImg.src = param.image
|
||||
let that = this
|
||||
myImg.onload = function () {
|
||||
canvasEle.width = myImg.width * (param.space + 1)
|
||||
canvasEle.height = myImg.height
|
||||
|
||||
let oriRepeat = that.getSceenLine(entity, param, canvasEle)
|
||||
oriRepeat && (entity.polyline.oriRepeat = oriRepeat)
|
||||
|
||||
|
||||
var positionProperty = entity.polyline.positions;
|
||||
var positions = positionProperty.getValue(that.sdk.viewer.clock.currentTime);
|
||||
|
||||
if (!Cesium.defined(positions)) {
|
||||
return new Cesium.Cartesian2(1.0, 1.0);
|
||||
// return 1.0;
|
||||
}
|
||||
|
||||
var distance = 0;
|
||||
for (var i = 0; i < positions.length - 1; ++i) {
|
||||
distance += Cesium.Cartesian3.distance(positions[i], positions[i + 1]);
|
||||
}
|
||||
|
||||
var repeatX = distance / entity.polyline.width.getValue();
|
||||
// 根据地图缩放程度调整repeatX
|
||||
var cameraHeight = that.sdk.viewer.camera.positionCartographic.height;
|
||||
var boundingSphere = new Cesium.BoundingSphere(
|
||||
new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标
|
||||
500000 // 半径（距离）
|
||||
);
|
||||
|
||||
// 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率）
|
||||
var drawingBufferWidth = that.sdk.viewer.canvas.clientWidth;
|
||||
var drawingBufferHeight = that.sdk.viewer.canvas.clientHeight;
|
||||
|
||||
// 使用 getPixelSize 方法获取包围球在屏幕上的像素大小
|
||||
var groundResolution = that.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight)
|
||||
repeatX *= groundResolution / cameraHeight / (param.space * (canvasEle.width / canvasEle.height * 5) + 1);
|
||||
// if (entity.polyline.material.oriRepeat) {
|
||||
|
||||
if (that.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) {
|
||||
let speed = repeatX / entity.polyline.oriRepeat
|
||||
entity.polyline.oriSpeed = speed
|
||||
entity.polyline.oriRepeatX = repeatX
|
||||
} else {
|
||||
let sdk3d = get3DView()
|
||||
let sdk3dEntity = sdk3d.viewer.entities.getById(that.options.id)
|
||||
entity.polyline.oriSpeed = sdk3dEntity.polyline.oriSpeed
|
||||
entity.polyline.oriRepeatX = sdk3dEntity.polyline.oriRepeatX
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
/**获取当前满屏横线速度 */
|
||||
getSceenLine(entity, options, canvasEle) {
|
||||
let point1 = new Cesium.Cartesian2(0, this.sdk.viewer.canvas.clientHeight)
|
||||
let point2 = new Cesium.Cartesian2(this.sdk.viewer.canvas.clientWidth / 2, this.sdk.viewer.canvas.clientHeight)
|
||||
// var cartesian1 = this.sdk.viewer.scene.pickPosition(point1)
|
||||
// var cartesian2 = this.sdk.viewer.scene.pickPosition(point2)
|
||||
|
||||
let ray = this.sdk.viewer.camera.getPickRay(point1);
|
||||
let cartesian1 = this.sdk.viewer.scene.globe.pick(ray, this.sdk.viewer.scene);
|
||||
|
||||
let ray2 = this.sdk.viewer.camera.getPickRay(point2);
|
||||
let cartesian2 = this.sdk.viewer.scene.globe.pick(ray2, this.sdk.viewer.scene);
|
||||
// if (!cartesian1 || !cartesian2) {
|
||||
// let ray = this.sdk.viewer.camera.getPickRay(point1);
|
||||
// cartesian1 = this.sdk.viewer.scene.globe.pick(ray, this.sdk.viewer.scene);
|
||||
|
||||
// let ray2 = this.sdk.viewer.camera.getPickRay(point2);
|
||||
// cartesian2 = this.sdk.viewer.scene.globe.pick(ray2, this.sdk.viewer.scene);
|
||||
// }
|
||||
if (cartesian1 && cartesian2) {
|
||||
|
||||
|
||||
var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2);
|
||||
|
||||
var repeatX = distance / entity.polyline.width.getValue();
|
||||
// 根据地图缩放程度调整repeatX
|
||||
var cameraHeight = this.sdk.viewer.camera.positionCartographic.height;
|
||||
var boundingSphere = new Cesium.BoundingSphere(
|
||||
new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标
|
||||
500000 // 半径（距离）
|
||||
);
|
||||
|
||||
|
||||
// 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率）
|
||||
var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth;
|
||||
var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight;
|
||||
|
||||
// 使用 getPixelSize 方法获取包围球在屏幕上的像素大小
|
||||
var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight)
|
||||
// repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1);
|
||||
if (groundResolution > 700) {
|
||||
repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
|
||||
} else {
|
||||
repeatX = undefined;
|
||||
}
|
||||
|
||||
if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) {
|
||||
return repeatX
|
||||
} else {
|
||||
let sdk3d = get3DView()
|
||||
let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id)
|
||||
return sdk3dEntity.polyline.oriRepeatX
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 编辑框
|
||||
* @param {boolean} state true打开，false关闭
|
||||
@ -1327,6 +1584,15 @@ class CurvelineObject extends Base {
|
||||
this.attributeType = this.options.attributeType
|
||||
// this.attributeCamera = this.options.attribute.camera.content
|
||||
// this.attributeGoods = this.options.attribute.goods.content
|
||||
function tabClick(e) {
|
||||
if (e === '2' || e === 2) {//点击线条样式
|
||||
if (2 < _this.options.type && _this.options.type < 13) {//贴图参数
|
||||
document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'flex')
|
||||
} else {
|
||||
document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'none')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 创建标签页
|
||||
let tabsElm = new cy_tabs(
|
||||
@ -1590,19 +1856,82 @@ class CurvelineObject extends Base {
|
||||
|
||||
let lineTypeData = [
|
||||
{
|
||||
name: '实线',
|
||||
name: '<i class="icon line"></i>实线',
|
||||
value: '实线',
|
||||
key: 0
|
||||
key: 0,
|
||||
icon: 'line'
|
||||
},
|
||||
{
|
||||
name: '虚线',
|
||||
name: '<i class="icon dash-line"></i>虚线',
|
||||
value: '虚线',
|
||||
key: 1
|
||||
key: 1,
|
||||
icon: 'dash-line'
|
||||
},
|
||||
{
|
||||
name: '泛光',
|
||||
name: '<i class="icon light-line"></i>泛光',
|
||||
value: '泛光',
|
||||
key: 2
|
||||
key: 2,
|
||||
icon: 'light-line'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon tail-line"></i>尾迹光线',
|
||||
value: '尾迹光线',
|
||||
key: 3,
|
||||
icon: 'tail-line'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon mult-tail-line"></i>多尾迹光线',
|
||||
value: '多尾迹光线',
|
||||
key: 4,
|
||||
icon: 'mult-tail-line'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon flow-dash-line1"></i>流动虚线1',
|
||||
value: '流动虚线1',
|
||||
key: 5,
|
||||
icon: 'flow-dash-line1'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon flow-dash-line2"></i>流动虚线2',
|
||||
value: '流动虚线2',
|
||||
key: 6,
|
||||
icon: 'flow-dash-line2'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon pic-line1"></i>流动箭头1',
|
||||
value: '流动箭头1',
|
||||
key: 7,
|
||||
icon: 'pic-line1'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon pic-line2"></i>流动箭头2',
|
||||
value: '流动箭头2',
|
||||
key: 8,
|
||||
icon: 'pic-line2'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon pic-line3"></i>流动箭头3',
|
||||
value: '流动箭头3',
|
||||
key: 9,
|
||||
icon: 'pic-line3'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon pic-line4"></i>流动箭头4',
|
||||
value: '流动箭头4',
|
||||
key: 10,
|
||||
icon: 'pic-line4'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon pic-line5"></i>流动箭头5',
|
||||
value: '流动箭头5',
|
||||
key: 11,
|
||||
icon: 'pic-line5'
|
||||
},
|
||||
{
|
||||
name: '<i class="icon pic-line6"></i>流动箭头6',
|
||||
value: '流动箭头6',
|
||||
key: 12,
|
||||
icon: 'pic-line6'
|
||||
}
|
||||
]
|
||||
let lineTypeDataLegpObject = legp(
|
||||
@ -1613,6 +1942,11 @@ class CurvelineObject extends Base {
|
||||
)
|
||||
if (lineTypeDataLegpObject) {
|
||||
lineTypeDataLegpObject.legp_search(lineTypeData)
|
||||
|
||||
let iActiveElm2 = document.createElement('i')
|
||||
iActiveElm2.className = 'icon icon-active'
|
||||
this._DialogObject._element.content.getElementsByClassName('input-select-line-type')[0].getElementsByClassName('cy_datalist')[0].appendChild(iActiveElm2)
|
||||
|
||||
let lineTypeDataLegpElm = this._DialogObject._element.content
|
||||
.getElementsByClassName('input-select-line-type')[0]
|
||||
.getElementsByTagName('input')[0]
|
||||
@ -1621,6 +1955,7 @@ class CurvelineObject extends Base {
|
||||
if (lineTypeData[i].key === this.options.type) {
|
||||
lineTypeDataLegpObject.legp_searchActive(lineTypeData[i].value)
|
||||
lineTypeDataLegpElm.value = lineTypeData[i].value
|
||||
iActiveElm2.className = `icon icon-active ${lineTypeData[i].icon}`
|
||||
break
|
||||
}
|
||||
}
|
||||
@ -1628,6 +1963,21 @@ class CurvelineObject extends Base {
|
||||
for (let i = 0; i < lineTypeData.length; i++) {
|
||||
if (lineTypeData[i].value === lineTypeDataLegpElm.value) {
|
||||
this.lineType = lineTypeData[i].key
|
||||
iActiveElm2.className = `icon icon-active ${lineTypeData[i].icon}`
|
||||
|
||||
//控制参数显隐
|
||||
if (2 < this.lineType && this.lineType < 13) {//贴图参数
|
||||
document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'flex')
|
||||
} else {
|
||||
document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'none')
|
||||
}
|
||||
if (2 < this.lineType && this.lineType < 5) {//尾迹参数
|
||||
document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'none')
|
||||
document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'none')
|
||||
} else {
|
||||
document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'flex')
|
||||
document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'flex')
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
@ -2111,6 +2461,10 @@ class CurvelineObject extends Base {
|
||||
this.attributeVr = this.options.attribute.vr.content
|
||||
this.attributeCamera = this.options.attribute.camera.content
|
||||
this.attributeGoods = this.options.attribute.goods.content
|
||||
this.rotate = this.originalOptions.rotate
|
||||
this.speed = this.originalOptions.speed
|
||||
this.dashSize = this.originalOptions.dashSize
|
||||
this.space = this.originalOptions.space
|
||||
this.cameraSelect && this.cameraSelect()
|
||||
this.goodsSelect && this.goodsSelect()
|
||||
|
||||
|
||||
@ -1480,39 +1480,41 @@ class PolylineObject extends Base {
|
||||
// let ray2 = this.sdk.viewer.camera.getPickRay(point2);
|
||||
// cartesian2 = this.sdk.viewer.scene.globe.pick(ray2, this.sdk.viewer.scene);
|
||||
// }
|
||||
|
||||
var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2);
|
||||
|
||||
var repeatX = distance / entity.polyline.width.getValue();
|
||||
// 根据地图缩放程度调整repeatX
|
||||
var cameraHeight = this.sdk.viewer.camera.positionCartographic.height;
|
||||
var boundingSphere = new Cesium.BoundingSphere(
|
||||
new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标
|
||||
500000 // 半径（距离）
|
||||
);
|
||||
if (cartesian1 && cartesian2) {
|
||||
|
||||
|
||||
// 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率）
|
||||
var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth;
|
||||
var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight;
|
||||
var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2);
|
||||
|
||||
// 使用 getPixelSize 方法获取包围球在屏幕上的像素大小
|
||||
var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight)
|
||||
// repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1);
|
||||
if (groundResolution > 700) {
|
||||
repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
|
||||
} else {
|
||||
repeatX = undefined;
|
||||
var repeatX = distance / entity.polyline.width.getValue();
|
||||
// 根据地图缩放程度调整repeatX
|
||||
var cameraHeight = this.sdk.viewer.camera.positionCartographic.height;
|
||||
var boundingSphere = new Cesium.BoundingSphere(
|
||||
new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标
|
||||
500000 // 半径（距离）
|
||||
);
|
||||
|
||||
|
||||
// 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率）
|
||||
var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth;
|
||||
var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight;
|
||||
|
||||
// 使用 getPixelSize 方法获取包围球在屏幕上的像素大小
|
||||
var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight)
|
||||
// repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1);
|
||||
if (groundResolution > 700) {
|
||||
repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
|
||||
} else {
|
||||
repeatX = undefined;
|
||||
}
|
||||
|
||||
if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) {
|
||||
return repeatX
|
||||
} else {
|
||||
let sdk3d = get3DView()
|
||||
let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id)
|
||||
return sdk3dEntity.polyline.oriRepeatX
|
||||
}
|
||||
}
|
||||
|
||||
if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) {
|
||||
return repeatX
|
||||
} else {
|
||||
let sdk3d = get3DView()
|
||||
let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id)
|
||||
return sdk3dEntity.polyline.oriRepeatX
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
* 编辑框
|
||||
|
||||
212
src/Obj/Base/TextBox/index.js
Normal file
212
src/Obj/Base/TextBox/index.js
Normal file
@ -0,0 +1,212 @@
|
||||
/**
|
||||
* 文本框
|
||||
*/
|
||||
import Base from "../index";
|
||||
import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global'
|
||||
class TextBox extends Base {
|
||||
/**
|
||||
* @constructor
|
||||
* @param sdk
|
||||
* @description 文本框
|
||||
* @param options {object} 属性
|
||||
* @param options.id=id
|
||||
* @param options.position=[]位置
|
||||
* @param options.text=文本框内容
|
||||
* @param options.show=true {boolean}是否显示
|
||||
* @param callback=方法回调
|
||||
* @param Dialog {object} 弹框对象
|
||||
* @param Dialog.confirmCallBack {function} 弹框确认时的回调
|
||||
* */
|
||||
constructor(sdk, options = {}, callback = null) {
|
||||
// this.sdk = { ...sdk }
|
||||
// this.options = { ...options }
|
||||
super(sdk, options)
|
||||
this.options.position = options.position || []
|
||||
this.options.text = options.text || ''
|
||||
this.options.show = (options.show || options.show === false) ? options.show : true
|
||||
this.clickTextDom = undefined
|
||||
this.handler = undefined
|
||||
this.textDom = undefined
|
||||
this.create(this)
|
||||
this.sdk.addIncetance(this.options.id, this)
|
||||
this.callback = callback
|
||||
}
|
||||
|
||||
async create(that) {
|
||||
let viewer = that.sdk.viewer
|
||||
// 创建div元素
|
||||
let dom = document.createElement('span');
|
||||
dom.id = that.options.id
|
||||
dom.className = 'popup-textarea'
|
||||
// 创建textarea元素
|
||||
var textarea = document.createElement('textarea');
|
||||
textarea.className = 'textarea'
|
||||
textarea.value = that.options.text;
|
||||
// 设置textarea的属性，例如行数和列数
|
||||
textarea.rows = 6;
|
||||
textarea.style.resize = 'none'
|
||||
// 将textarea添加到div中
|
||||
dom.appendChild(textarea);
|
||||
(!that.options.show) && (dom.style.display = 'none')
|
||||
// 将div添加到body中
|
||||
// document.body.appendChild(dom);
|
||||
|
||||
// 配置CSS样式和内容结构
|
||||
viewer.cesiumWidget.container.appendChild(dom);
|
||||
let posi = Cesium.Cartesian3.fromDegrees(that.options.position.lng, that.options.position.lat, that.options.position.alt)
|
||||
|
||||
that.handler = function () {
|
||||
const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
||||
viewer.scene, posi
|
||||
);
|
||||
if (position) {
|
||||
let width = dom.clientWidth * 1
|
||||
let height = dom.clientHeight * 1
|
||||
dom.style.left = `${position.x - width / 2}px`;
|
||||
dom.style.top = `${position.y - height}px`;
|
||||
}
|
||||
}
|
||||
viewer.scene.postRender.addEventListener(that.handler);
|
||||
that.textDom = dom;
|
||||
|
||||
}
|
||||
async setHandeler(data) {
|
||||
let that = this
|
||||
const ray = this.sdk.viewer.camera.getPickRay(new Cesium.Cartesian2(data.x, data.y));
|
||||
var cartesian = this.sdk.viewer.scene.globe.pick(ray, this.sdk.viewer.scene);
|
||||
if (Cesium.defined(cartesian)) {
|
||||
that.sdk.viewer.scene.postRender.removeEventListener(that.handler);
|
||||
|
||||
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
||||
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
||||
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
||||
that.position = {
|
||||
lng: longitude,
|
||||
lat: latitude,
|
||||
alt: cartographic.height
|
||||
}
|
||||
let posi = Cesium.Cartesian3.fromDegrees(longitude, latitude, cartographic.height)
|
||||
|
||||
that.handler = function () {
|
||||
const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
||||
that.sdk.viewer.scene, posi
|
||||
);
|
||||
if (position) {
|
||||
let width = that.textDom.clientWidth * 1
|
||||
let height = that.textDom.clientHeight * 1
|
||||
that.textDom.style.left = `${position.x - width / 2}px`;
|
||||
that.textDom.style.top = `${position.y - height}px`;
|
||||
}
|
||||
}
|
||||
that.sdk.viewer.scene.postRender.addEventListener(that.handler);
|
||||
}
|
||||
}
|
||||
async getwords(words) {
|
||||
this.options.text = words
|
||||
this.callback(this.options)
|
||||
}
|
||||
async returnFun() {
|
||||
return this.handler
|
||||
}
|
||||
get show() {
|
||||
return this.options.show
|
||||
}
|
||||
set show(v) {
|
||||
this.options.show = v
|
||||
this.textDom && (this.textDom.style.display = v ? 'block' : 'none');
|
||||
}
|
||||
get position() {
|
||||
return this.options.position
|
||||
}
|
||||
set position(v) {
|
||||
this.options.position = v
|
||||
}
|
||||
async flyTo(options = {}) {
|
||||
setActiveViewer(0)
|
||||
closeRotateAround(this.sdk)
|
||||
closeViewFollow(this.sdk)
|
||||
|
||||
if (this.options.customView && this.options.customView.relativePosition && this.options.customView.orientation) {
|
||||
let orientation = {
|
||||
heading: Cesium.Math.toRadians(this.options.customView.orientation.heading || 0.0),
|
||||
pitch: Cesium.Math.toRadians(this.options.customView.orientation.pitch || -60.0),
|
||||
roll: Cesium.Math.toRadians(this.options.customView.orientation.roll || 0.0)
|
||||
}
|
||||
|
||||
let lng = this.options.customView.relativePosition.lng
|
||||
let lat = this.options.customView.relativePosition.lat
|
||||
let alt = this.options.customView.relativePosition.alt
|
||||
let destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt)
|
||||
|
||||
let position = { lng: 0, lat: 0 }
|
||||
if (this.options.position) {
|
||||
position = { ...this.options.position }
|
||||
}
|
||||
else if (this.options.position) {
|
||||
position = { ...this.options.position[0] }
|
||||
}
|
||||
else if (this.options.center) {
|
||||
position = { ...this.options.center }
|
||||
}
|
||||
else if (this.options.start) {
|
||||
position = { ...this.options.start }
|
||||
}
|
||||
else {
|
||||
if (this.options.hasOwnProperty('lng')) {
|
||||
position.lng = this.options.lng
|
||||
}
|
||||
if (this.options.hasOwnProperty('lat')) {
|
||||
position.lat = this.options.lat
|
||||
}
|
||||
if (this.options.hasOwnProperty('alt')) {
|
||||
position.alt = this.options.alt
|
||||
}
|
||||
}
|
||||
// 如果没有高度值，则获取紧贴高度计算
|
||||
// if (!position.hasOwnProperty('alt')) {
|
||||
// position.alt = await this.getClampToHeight(position)
|
||||
// }
|
||||
lng = this.options.customView.relativePosition.lng + position.lng
|
||||
lat = this.options.customView.relativePosition.lat + position.lat
|
||||
alt = this.options.customView.relativePosition.alt + position.alt
|
||||
destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt)
|
||||
this.sdk.viewer.camera.flyTo({
|
||||
destination: destination,
|
||||
orientation: orientation
|
||||
})
|
||||
}
|
||||
else {
|
||||
let positionArray = []
|
||||
let a = Cesium.Cartesian3.fromDegrees(
|
||||
this.position.lng,
|
||||
this.position.lat,
|
||||
this.position.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)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
async remove() {
|
||||
if (this.handler) {
|
||||
this.sdk.viewer.scene.postRender.removeEventListener(this.handler);
|
||||
this.handler = undefined
|
||||
}
|
||||
if (this.textDom && this.textDom.parentNode) {
|
||||
this.sdk.viewer.cesiumWidget.container.removeChild(this.textDom);
|
||||
}
|
||||
}
|
||||
|
||||
flicker() { }
|
||||
}
|
||||
|
||||
export default TextBox
|
||||
@ -880,38 +880,38 @@ class Tools {
|
||||
|
||||
let ray2 = this.sdk.viewer.camera.getPickRay(point2);
|
||||
let cartesian2 = this.sdk.viewer.scene.globe.pick(ray2, this.sdk.viewer.scene);
|
||||
if (cartesian1 && cartesian2) {
|
||||
var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2);
|
||||
|
||||
var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2);
|
||||
var repeatX = distance / entity.polyline.width.getValue();
|
||||
// 根据地图缩放程度调整repeatX
|
||||
var cameraHeight = this.sdk.viewer.camera.positionCartographic.height;
|
||||
var boundingSphere = new Cesium.BoundingSphere(
|
||||
new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标
|
||||
500000 // 半径（距离）
|
||||
);
|
||||
|
||||
var repeatX = distance / entity.polyline.width.getValue();
|
||||
// 根据地图缩放程度调整repeatX
|
||||
var cameraHeight = this.sdk.viewer.camera.positionCartographic.height;
|
||||
var boundingSphere = new Cesium.BoundingSphere(
|
||||
new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标
|
||||
500000 // 半径（距离）
|
||||
);
|
||||
// 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率）
|
||||
var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth;
|
||||
var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight;
|
||||
|
||||
// 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率）
|
||||
var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth;
|
||||
var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight;
|
||||
// 使用 getPixelSize 方法获取包围球在屏幕上的像素大小
|
||||
var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight)
|
||||
// repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1);
|
||||
if (groundResolution > 700) {
|
||||
repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
|
||||
} else {
|
||||
repeatX = undefined;
|
||||
}
|
||||
|
||||
// 使用 getPixelSize 方法获取包围球在屏幕上的像素大小
|
||||
var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight)
|
||||
// repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1);
|
||||
if (groundResolution > 700) {
|
||||
repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
|
||||
} else {
|
||||
repeatX = undefined;
|
||||
if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) {
|
||||
return repeatX
|
||||
} else {
|
||||
let sdk3d = get3DView()
|
||||
let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id)
|
||||
return sdk3dEntity.polyline.oriRepeatX
|
||||
}
|
||||
}
|
||||
|
||||
if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) {
|
||||
return repeatX
|
||||
} else {
|
||||
let sdk3d = get3DView()
|
||||
let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id)
|
||||
return sdk3dEntity.polyline.oriRepeatX
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*创建直箭头图片*/
|
||||
|
||||
@ -46,16 +46,18 @@ class YJEarth {
|
||||
// setCesiumIndexedDBMaxSize(getCesiumIndexedDBMaxSize())
|
||||
setCesiumManageIndexexDBState(getCesiumManageIndexexDBState())
|
||||
this.proj = new Proj()
|
||||
this.clickTextDom = undefined
|
||||
this.isLeftClick = false
|
||||
this.init()
|
||||
setSvg()
|
||||
}
|
||||
|
||||
addIncetance(id, obj) {
|
||||
this.entityMap.set(id, obj)
|
||||
this.entityMap.set(id + '', obj)
|
||||
}
|
||||
|
||||
getIncetance(id) {
|
||||
return this.entityMap.get(id)
|
||||
return this.entityMap.get(id + '')
|
||||
}
|
||||
|
||||
removeIncetance(id) {
|
||||
@ -221,11 +223,11 @@ class YJEarth {
|
||||
|
||||
document.fonts.ready.then(() => {
|
||||
for (let [id, obj] of this.entityMap) {
|
||||
if('labelFontFamily' in obj) {
|
||||
if ('labelFontFamily' in obj) {
|
||||
obj.labelFontFamily = obj.labelFontFamily
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
// const font = new FontFace(
|
||||
@ -413,6 +415,95 @@ class YJEarth {
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
let ClickHandler = new Cesium.ScreenSpaceEventHandler(_this.viewer.canvas)
|
||||
ClickHandler.setInputAction((movement) => {
|
||||
let textList = document.getElementsByClassName('popup-textarea')
|
||||
_this.isLeftClick = false
|
||||
for (let i = textList.length - 1; i > -1; i--) {
|
||||
let left = returnNumber(textList[i].style.left)
|
||||
let top = returnNumber(textList[i].style.top)
|
||||
let width = textList[i].clientWidth * 1
|
||||
let height = textList[i].clientHeight * 1
|
||||
let x = movement.position.x
|
||||
let y = movement.position.y
|
||||
if (x > left && x < left + width && y > top && y < top + height) {
|
||||
if (_this.clickTextDom) {
|
||||
_this.clickTextDom.style['pointer-events'] = 'none'
|
||||
}
|
||||
_this.clickTextDom = textList[i]
|
||||
textList[i].style['pointer-events'] = 'all'
|
||||
textList[i].querySelector('textarea').focus()
|
||||
_this.isLeftClick = true
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
let mousedown = undefined
|
||||
let mousemove = undefined
|
||||
let mouseup = undefined
|
||||
let fun = undefined
|
||||
let handler = undefined
|
||||
|
||||
if (_this.isLeftClick) {
|
||||
let click = false
|
||||
let layerX = 0
|
||||
let layerY = 0
|
||||
|
||||
mousedown = function (e) {
|
||||
layerX = e.layerX
|
||||
layerY = e.layerY
|
||||
click = true
|
||||
}
|
||||
mousemove = function (e) {
|
||||
if (!click) {
|
||||
return
|
||||
}
|
||||
let width = _this.clickTextDom.clientWidth * 1
|
||||
let height = _this.clickTextDom.clientHeight * 1
|
||||
let param = {
|
||||
x: e.clientX - layerX + width / 2,
|
||||
y: e.clientY - layerY + height,
|
||||
}
|
||||
_this.entityMap.get(_this.clickTextDom.id).setHandeler(param)
|
||||
|
||||
}
|
||||
mouseup = function (e) {
|
||||
if (!click) {
|
||||
return
|
||||
}
|
||||
click = false
|
||||
}
|
||||
|
||||
_this.clickTextDom.addEventListener('mousedown', mousedown);
|
||||
document.addEventListener('mousemove', mousemove);
|
||||
document.addEventListener('mouseup', mouseup);
|
||||
}
|
||||
// 点击其他地方取消
|
||||
if (!_this.isLeftClick && _this.clickTextDom) {
|
||||
_this.clickTextDom.removeEventListener('mousedown', mousedown);
|
||||
document.removeEventListener('mousemove', mousemove);
|
||||
document.removeEventListener('mouseup', mouseup);
|
||||
_this.entityMap.get(_this.clickTextDom.id).getwords(_this.clickTextDom.getElementsByTagName('textarea')[0].value)
|
||||
|
||||
_this.clickTextDom.style['pointer-events'] = 'none'
|
||||
_this.clickTextDom = undefined
|
||||
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||||
|
||||
// ClickHandler.setInputAction((movement) => {
|
||||
// if (_this.clickTextDom) {
|
||||
// _this.clickTextDom.style['pointer-events'] = 'none'
|
||||
// _this.clickTextDom = undefined
|
||||
// }
|
||||
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||||
function returnNumber(str) {
|
||||
let index = str.indexOf('px')
|
||||
return Number(str.slice(0, index))
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
@ -3119,6 +3119,42 @@
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* 文本框 */
|
||||
.popup-textarea{
|
||||
/* width: 212px; */
|
||||
width: 161.6px;
|
||||
/* height: 154px; */
|
||||
height: 119.2px;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
/* z-index: 99; */
|
||||
background: url(../../img/pop.png) 100% 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 5px 5px 0px 5px;
|
||||
}
|
||||
.popup-textarea textarea{
|
||||
background-color: unset!important;
|
||||
border: unset!important;
|
||||
color: #fff;
|
||||
}
|
||||
.popup-textarea textarea::-webkit-scrollbar {
|
||||
width: 8px!important;
|
||||
/* height: 8px!important; */
|
||||
}
|
||||
|
||||
.popup-textarea textarea::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px!important;
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2)!important;
|
||||
background-color: rgba(var(--color-sdk-base-rgb))!important;
|
||||
}
|
||||
|
||||
.popup-textarea textarea::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2)!important;
|
||||
border-radius: 5px!important;
|
||||
background-color: rgba(var(--color-sdk-base-rgb), 0.1)!important;
|
||||
}
|
||||
|
||||
/* 贴地图片 */
|
||||
.YJ-custom-base-dialog.ground-image>.content {
|
||||
width: 500px;
|
||||
|
||||
BIN
static/img/pop.png
Normal file
BIN
static/img/pop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 868 B |
Reference in New Issue
Block a user