/*
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-10-18 17:17:50
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2022-11-18 09:22:49
|
* @FilePath: \srs-police-affairs\src\utils\EntityDraw.js
|
* @Description:
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
*/
|
|
// 1m的经度
|
const lngOneM = 0.00001141
|
// 1m的纬度
|
const latOneM = 0.00000899
|
|
export default class EntityDraw {
|
|
drawPolygonLayer = null
|
drawPolylineLayer = null
|
|
drawPolyLineGonLayer = null
|
|
drawPointLayer = null
|
|
activeShapePoints = []
|
|
activeShape = null
|
|
drawCompletePosition = []
|
|
type = ''
|
|
emitPointLayer = null
|
|
eventHandler = null
|
|
EditMoveCenterEntity = null
|
|
Cesium = null
|
|
EditMoveCenterPositoin = null
|
|
isEditing = false
|
|
editVertext = null
|
|
lastEventData = null
|
|
cb = () => { }
|
|
constructor() {
|
// 去除双击
|
this.deactivate()
|
|
// 初始化图层
|
this.initLayer()
|
|
// 修改this指向
|
this.getLeftEvent = this.getLeftEvent.bind(this)
|
this.getMoveEvent = this.getMoveEvent.bind(this)
|
this.getRightEvent = this.getRightEvent.bind(this)
|
|
this.resizePolyLineGon = this.resizePolyLineGon.bind(this)
|
|
this.Cesium = global.DC.Namespace.Cesium
|
|
this.eventHandler = new global.DC.Namespace.Cesium.ScreenSpaceEventHandler(global.viewer.scene.canvas)
|
}
|
|
initLayer () {
|
// 添加面图层
|
this.drawPolygonLayer = new global.DC.VectorLayer('drawPolygonLayer')
|
global.viewer.addLayer(this.drawPolygonLayer)
|
|
// 添加线图层
|
this.drawPolylineLayer = new global.DC.VectorLayer('drawPolylineLayer')
|
global.viewer.addLayer(this.drawPolylineLayer)
|
this.drawPolyLineGonLayer = new global.DC.VectorLayer('drawPolyLineGonLayer')
|
global.viewer.addLayer(this.drawPolyLineGonLayer)
|
|
// 添加点图层
|
this.drawPointLayer = new global.DC.VectorLayer('drawPointLayer')
|
global.viewer.addLayer(this.drawPointLayer)
|
|
// 添加编辑点图层
|
this.emitPointLayer = new global.DC.VectorLayer('emitPointLayer')
|
global.viewer.addLayer(this.emitPointLayer)
|
|
|
// global.viewer.scene.globe.depthTestAgainstTerrain = true
|
}
|
|
// draw执行这个
|
activate (type, cb) {
|
this.cb = cb
|
this.type = type
|
|
this.drawCompletePosition = []
|
|
this.clearLayer()
|
|
if (this.activeShapePoints.length > 0) {
|
this.clickInTheProcess()
|
}
|
|
this.registerEvents()
|
|
|
// this.initLeftDownEventHandler()
|
// this.initLeftUpEventHandler()
|
// this.initMouseMoveEventHandler()
|
}
|
|
deactivate () {
|
global.viewer.on(global.DC.MouseEventType.DB_CLICK, e => {
|
return
|
})
|
}
|
|
// 注册
|
registerEvents () {
|
global.viewer.tooltip.enable = true
|
|
// 这个是左键单击也就是添加点
|
global.viewer.on(global.DC.MouseEventType.CLICK, this.getLeftEvent)
|
|
// 这个是鼠标移动
|
global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.getMoveEvent)
|
|
// 这个是鼠标右键得，就是最后绘制结束 你要控制嘛 我调下
|
global.viewer.on(global.DC.MouseEventType.RIGHT_CLICK, this.getRightEvent)
|
}
|
|
// 解绑
|
unRegisterEvents () {
|
global.viewer.tooltip.enable = false
|
global.viewer.off(global.DC.MouseEventType.CLICK, this.getLeftEvent)
|
global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.getMoveEvent)
|
global.viewer.off(global.DC.MouseEventType.RIGHT_CLICK, this.getRightEvent)
|
}
|
|
// 绘制多边形
|
drawGraph (positionData) {
|
let graph
|
|
if (this.type === "polyline") {
|
graph = global.viewer.entities.add({
|
polyline: {
|
material: new global.DC.Namespace.Cesium.ColorMaterialProperty(
|
global.DC.Namespace.Cesium.Color.NAVAJOWHITE.withAlpha(0.7)
|
),
|
positions: positionData,
|
clampToGround: true,
|
width: 3,
|
},
|
})
|
} else {
|
graph = global.viewer.entities.add({
|
polygon: {
|
hierarchy: positionData,
|
material: new global.DC.Namespace.Cesium.ColorMaterialProperty(
|
global.DC.Namespace.Cesium.Color.NAVAJOWHITE.withAlpha(0.7)
|
),
|
}
|
})
|
}
|
|
return graph
|
}
|
|
// 左键
|
getLeftEvent (event) {
|
this.leftEvent(event)
|
}
|
|
leftEvent (event) {
|
const that = this
|
|
let point = new global.DC.Point(new global.DC.Position(event.wgs84SurfacePosition.lng, event.wgs84SurfacePosition.lat))
|
|
point.setStyle({
|
pixelSize: 10,
|
color: global.DC.Color.RED, //颜色
|
outlineColor: global.DC.Color.WHITE, //边框颜色
|
outlineWidth: 2, //边框大小，
|
})
|
|
that.drawPointLayer.addOverlay(point)
|
|
if (that.activeShapePoints.length === 0) {
|
that.activeShapePoints.push(event.surfacePosition)
|
|
const dynamicPositions = new global.DC.Namespace.Cesium.CallbackProperty(function () {
|
|
if (that.type === "polyline") {
|
return that.activeShapePoints
|
} else {
|
return new global.DC.Namespace.Cesium.PolygonHierarchy(that.activeShapePoints)
|
}
|
|
}, false)
|
|
that.activeShape = that.drawGraph(dynamicPositions)
|
|
}
|
|
that.activeShapePoints.push(event.surfacePosition)
|
}
|
|
// 移动
|
getMoveEvent (event) {
|
this.moveEvent(event)
|
}
|
|
moveEvent (event) {
|
global.viewer.tooltip.showAt(event.windowPosition, '左击选择点位，右击结束')
|
|
if (this.activeShapePoints.length >= 2) {
|
this.activeShapePoints.pop()
|
|
this.activeShapePoints.push(event.surfacePosition)
|
}
|
}
|
|
// 右键
|
getRightEvent (event) {
|
this.rightEvent(event)
|
}
|
|
rightEvent (event) {
|
if (this.type === "polyline") {
|
if (this.activeShapePoints.length < 2) {
|
global.viewer.tooltip.showAt(event.windowPosition, '不能绘制成线，请继续添加点')
|
return
|
}
|
} else {
|
if (this.activeShapePoints.length < 3) {
|
global.viewer.tooltip.showAt(event.windowPosition, '不能绘制成面，请继续添加点')
|
return
|
}
|
}
|
|
this.terminateShape()
|
}
|
|
terminateShape () {
|
this.activeShapePoints.pop()
|
|
this.activeShapePoints.forEach(item => {
|
|
let pointPosition = global.DC.Transform.transformCartesianToWGS84(item)
|
|
this.drawCompletePosition.push({ lng: pointPosition.lng, lat: pointPosition.lat })
|
|
})
|
|
if (this.type === "polyline") {
|
|
let polyline = new global.DC.Polyline(this.drawCompletePosition)
|
|
polyline.setStyle({
|
material: new global.DC.Namespace.Cesium.ColorMaterialProperty(
|
global.DC.Namespace.Cesium.Color.NAVAJOWHITE.withAlpha(0.7)
|
)
|
})
|
|
this.drawPolylineLayer.addOverlay(polyline)
|
|
this.addPolyLineGon(100, this.cb)
|
|
// this.EditMoveCenterPositoin = this.Cesium.Cartesian3.fromDegrees(this.drawCompletePosition[this.drawCompletePosition.length - 1].lng + 200 * lngOneM, this.drawCompletePosition[this.drawCompletePosition.length - 1].lat + 200 * latOneM, 0)
|
|
|
|
// this.createEditMoveCenterEntity()
|
} else {
|
let polygon = new global.DC.Polygon(this.drawCompletePosition)
|
|
polygon.setStyle({
|
material: new global.DC.Namespace.Cesium.ColorMaterialProperty(
|
global.DC.Namespace.Cesium.Color.NAVAJOWHITE.withAlpha(0.7)
|
)
|
})
|
|
|
// console.log(polygon, 999)
|
|
this.drawPolygonLayer.addOverlay(polygon)
|
|
this.lastEventData = {
|
type: 'polygon',
|
data: this.drawCompletePosition
|
}
|
|
this.cb(this.lastEventData)
|
}
|
|
this.clickInTheProcess()
|
}
|
|
clickInTheProcess () {
|
if (this.activeShape != null) {
|
global.viewer.entities.remove(this.activeShape)
|
}
|
|
this.drawPointLayer.clear()
|
|
this.activeShape = null
|
|
this.activeShapePoints = []
|
|
this.unRegisterEvents()
|
}
|
|
// 清除
|
clearLayer () {
|
this.drawPolygonLayer.clear()
|
this.drawPolylineLayer.clear()
|
this.drawPolyLineGonLayer.clear()
|
|
this.removeViewerEvent()
|
|
global.viewer.entities.removeAll()
|
}
|
|
// 销毁
|
destroy () {
|
this.unRegisterEvents()
|
this.removeViewerEvent()
|
|
this.drawPolygonLayer.clear()
|
this.drawPolygonLayer.remove()
|
|
this.drawPolylineLayer.clear()
|
this.drawPolylineLayer.remove()
|
|
this.drawPolyLineGonLayer.clear()
|
this.drawPolyLineGonLayer.remove()
|
|
this.drawPointLayer.clear()
|
this.drawPointLayer.remove()
|
|
global.viewer.entities.removeAll()
|
|
this.activeShape = null
|
this.activeShapePoints = []
|
this.drawCompletePosition = []
|
}
|
|
resizePolyLineGon (num) {
|
this.addPolyLineGon(num)
|
}
|
|
addPolyLineGon (num, cb) {
|
this.drawPolyLineGonLayer.clear()
|
|
let coords = global.DC.GeoTools.polylineBuffer(this.drawCompletePosition, num)
|
|
let polygon = new global.DC.Polygon(coords)
|
|
polygon.setStyle({
|
material: global.DC.Color.RED.withAlpha(0.4)
|
})
|
|
this.drawPolyLineGonLayer.addOverlay(polygon)
|
|
this.lastEventData = {
|
type: 'line',
|
data: coords,
|
lineData: this.drawCompletePosition
|
}
|
|
cb(this.lastEventData)
|
}
|
|
//场景鼠标左键按下事件
|
initLeftDownEventHandler () {
|
const that = this
|
that.eventHandler.setInputAction((e) => {
|
let id = global.viewer.scene.pick(e.position)
|
// 拾取到对象 判断拾取到的对象类型
|
if (!id || !id.id || !id.id.type) return
|
//拾取到具有type 属性的entity对象
|
if (id.id.type == "EditVertex" || id.id.type == "EditMove") {
|
that.isEditing = true
|
//禁用场景的旋转移动功能 保留缩放功能
|
global.viewer.scene.screenSpaceCameraController.enableRotate = false
|
//改变鼠标状态
|
global.viewer.enableCursorStyle = false
|
document.body.style.cursor = "move"
|
that.editVertext = id.id
|
}
|
|
}, that.Cesium.ScreenSpaceEventType.LEFT_DOWN)
|
}
|
|
//场景鼠标左键抬起事件
|
initLeftUpEventHandler () {
|
const that = this
|
that.eventHandler.setInputAction(((e) => {
|
if (!that.isEditing) return
|
that.isEditing = false
|
global.viewer.scene.screenSpaceCameraController.enableRotate = true
|
global.viewer.enableCursorStyle = true
|
document.body.style.cursor = "default"
|
}), that.Cesium.ScreenSpaceEventType.LEFT_UP)
|
}
|
|
getScope (position) {
|
let Scope = Math.abs(position.lng - this.drawCompletePosition[this.drawCompletePosition.length - 1].lng) / lngOneM - 200
|
|
return Scope > 100 ? Scope : 100
|
}
|
|
//场景鼠标移动事件
|
initMouseMoveEventHandler () {
|
const that = this
|
that.eventHandler.setInputAction(((e) => {
|
// 鼠标移动的位置
|
let pickPosition = global.viewer.scene.pickPosition(e.endPosition)
|
if (!pickPosition) return
|
if (!that.isEditing) return
|
|
if (that.editVertext.type == "EditMove") {
|
|
let startPosition = that.EditMoveCenterPositoin
|
|
if (!startPosition) return
|
|
let position = global.DC.Transform.transformCartesianToWGS84(pickPosition)
|
|
that.addPolyLineGon(that.getScope(position))
|
}
|
|
that.isEdited = true
|
|
that.EditMoveCenterPositoin = pickPosition
|
}), that.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
}
|
|
removeViewerEvent () {
|
if (this.eventHandler && this.eventHandler != null) {
|
this.eventHandler.removeInputAction(this.Cesium.ScreenSpaceEventType.LEFT_DOWN)
|
this.eventHandler.removeInputAction(this.Cesium.ScreenSpaceEventType.LEFT_UP)
|
this.eventHandler.removeInputAction(this.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
}
|
}
|
|
createEditMoveCenterEntity () {
|
const that = this
|
that.EditMoveCenterEntity = global.viewer.entities.add({
|
position: new that.Cesium.CallbackProperty(e => {
|
return that.EditMoveCenterPositoin
|
}, false),
|
|
type: "EditMove",
|
|
point: {
|
color: that.Cesium.Color.RED.withAlpha(0.8),
|
pixelSize: 12,
|
outlineColor: that.Cesium.Color.WHITE.withAlpha(0.6),
|
outlineWidth: 4,
|
disableDepthTestDistance: 2000,
|
heightReference: that.Cesium.HeightReference.CLAMP_TO_GROUND
|
},
|
})
|
}
|
}
|
