三点矩形功能
This commit is contained in:
318
src/Draw/drawThreeRect.js
Normal file
318
src/Draw/drawThreeRect.js
Normal file
@ -0,0 +1,318 @@
|
||||
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])
|
||||
return that.positionsLine
|
||||
}),
|
||||
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
|
||||
@ -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'
|
||||
@ -187,6 +188,7 @@ 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('录屏对象')
|
||||
@ -260,7 +262,8 @@ if (!window.YJ) {
|
||||
Dialog,
|
||||
FlowLine,
|
||||
// Road2,
|
||||
TextBox
|
||||
TextBox,
|
||||
BatchModel
|
||||
},
|
||||
YJEarth,
|
||||
Tools,
|
||||
@ -378,6 +381,7 @@ if (!window.YJ) {
|
||||
DrawAssemble,
|
||||
DrawSector,
|
||||
DrawTakeOff,
|
||||
DrawThreeRect
|
||||
},
|
||||
// 分析
|
||||
Analysis: {
|
||||
|
||||
Reference in New Issue
Block a user