/**
|
* @Author: Caven
|
* @Date: 2021-07-14 20:28:14
|
*/
|
|
import { PlotEventType, PlotEvent } from '@/utils/event/index.js'
|
|
const IMG_CIRCLE_RED = '/images/circle_red.png'
|
|
const IMG_CIRCLE_YELLOW = '/images/circle_yellow.png'
|
|
const DEF_OPTS = {
|
icon_center: IMG_CIRCLE_YELLOW,
|
icon_anchor: IMG_CIRCLE_RED,
|
icon_size: [12, 12],
|
clampToModel: false
|
}
|
|
class DrawTool {
|
constructor() {
|
this._viewer = undefined
|
this._anchorLayer = new global.DC.Namespace.Cesium.CustomDataSource('draw-anchor-layer')
|
this._floatingAnchor = undefined
|
this._options = {}
|
this._plotEvent = new PlotEvent()
|
this._tooltipMess = undefined
|
}
|
|
set tooltipMess (tooltipMess) {
|
this._tooltipMess = tooltipMess
|
return this
|
}
|
|
/**
|
*
|
* @param e
|
* @returns {boolean}
|
* @private
|
*/
|
_onClick (e) {
|
let position =
|
this._options.clampToModel && e.position ? e.position : e.surfacePosition
|
if (!position) {
|
return false
|
}
|
|
if (!this._floatingAnchor) {
|
this._floatingAnchor = this._onCreateAnchor({ position })
|
}
|
|
this._plotEvent.fire(PlotEventType.DRAW_ANCHOR, position)
|
}
|
|
/**
|
*
|
* @param e
|
* @private
|
*/
|
_onMouseMove (e) {
|
e.windowPosition.x = e.windowPosition.x + 20
|
this._viewer.tooltip.showAt(e.windowPosition, this._tooltipMess)
|
let position =
|
this._options.clampToModel && e.position ? e.position : e.surfacePosition
|
if (!position) {
|
return false
|
}
|
this._floatingAnchor && this._floatingAnchor.position.setValue(position)
|
this._plotEvent.fire(PlotEventType.ANCHOR_MOVING, position)
|
}
|
|
/**
|
*
|
* @param e
|
* @private
|
*/
|
_onRightClick (e) {
|
this._plotEvent.fire(
|
PlotEventType.DRAW_STOP,
|
this._options.clampToModel && e.position ? e.position : e.surfacePosition
|
)
|
}
|
|
/**
|
*
|
* @param position
|
* @param isCenter
|
* @returns {*}
|
* @private
|
*/
|
_onCreateAnchor ({ position, isCenter = false }) {
|
console.log(this._options, 6633333)
|
return this._anchorLayer.entities.add({
|
position: position,
|
billboard: {
|
image: isCenter ? this._options.icon_center : this._options.icon_anchor,
|
width: this._options.icon_size[0],
|
height: this._options.icon_size[1],
|
eyeOffset: new global.DC.Namespace.Cesium.Cartesian3(0, 0, -4),
|
heightReference:
|
this._viewer.scene.mode === global.DC.Namespace.Cesium.SceneMode.SCENE3D &&
|
!this._options.clampToModel
|
? global.DC.Namespace.Cesium.HeightReference.CLAMP_TO_GROUND
|
: global.DC.Namespace.Cesium.HeightReference.NONE
|
}
|
})
|
}
|
|
/**
|
*
|
* @private
|
*/
|
_onClearAnchor () {
|
this._anchorLayer.entities.removeAll()
|
}
|
|
/**
|
*
|
* @private
|
*/
|
_bindEvent () {
|
this._viewer.on(global.DC.MouseEventType.CLICK, this._onClick, this)
|
this._viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this._onMouseMove, this)
|
this._viewer.on(global.DC.MouseEventType.RIGHT_CLICK, this._onRightClick, this)
|
this._plotEvent.on(PlotEventType.CREATE_ANCHOR, this._onCreateAnchor, this)
|
this._plotEvent.on(PlotEventType.CLEAR_ANCHOR, this._onClearAnchor, this)
|
}
|
|
/**
|
*
|
* @private
|
*/
|
_unbindEvent () {
|
this._viewer.off(global.DC.MouseEventType.CLICK, this._onClick, this)
|
this._viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this._onMouseMove, this)
|
this._viewer.off(global.DC.MouseEventType.RIGHT_CLICK, this._onRightClick, this)
|
this._plotEvent.off(PlotEventType.CREATE_ANCHOR, this._onCreateAnchor, this)
|
this._plotEvent.off(PlotEventType.CLEAR_ANCHOR, this._onClearAnchor, this)
|
}
|
|
/**
|
*
|
* @param type
|
* @param callback
|
* @param context
|
* @returns {DrawTool}
|
*/
|
on (type, callback, context) {
|
this._plotEvent.on(type, callback, context || this)
|
return this
|
}
|
|
/**
|
*
|
* @param type
|
* @param callback
|
* @param context
|
* @returns {DrawTool}
|
*/
|
off (type, callback, context) {
|
this._plotEvent.off(type, callback, context || this)
|
return this
|
}
|
|
/**
|
*
|
* @param type
|
* @param parmas
|
* @returns {DrawTool}
|
*/
|
fire (type, parmas) {
|
this._plotEvent.fire(type, parmas)
|
return this
|
}
|
|
/**
|
*
|
* @param options
|
* @returns {DrawTool}
|
*/
|
activate (options = {}) {
|
this._viewer.tooltip.enable = true
|
this._options = { ...DEF_OPTS, ...options }
|
this._unbindEvent()
|
this._bindEvent()
|
this.fire(PlotEventType.DRAW_START, this._options)
|
return this
|
}
|
|
/**
|
*
|
* @returns {DrawTool}
|
*/
|
deactivate () {
|
this._unbindEvent()
|
this._viewer.tooltip.enable = false
|
this._anchorLayer.entities.removeAll()
|
this._floatingAnchor = undefined
|
return this
|
}
|
|
/**
|
*
|
* @param viewer
|
*/
|
install (viewer) {
|
this._viewer = viewer
|
this._viewer.dataSources.add(this._anchorLayer)
|
Object.defineProperty(this._viewer, 'curDrawTool', {
|
value: this,
|
writable: true,
|
configurable: true,
|
enumerable: true
|
})
|
}
|
}
|
|
export default DrawTool
|
