Cesium 动态绘制polygon并且进行调整
启发博客链接：https://blog.csdn.net/qwe435541908/article/details/90762066
本文只是针对动态绘制polygon，没有涉及线，圆其他实体。因为自己是刚入这行的小白，所以可能有很多地方都没进行合适的方法抽取，没考虑到性能方面，请大家指点，共同进步
<script>
// spaceTurnL 因为多处需要使用将空间坐标转为经纬度坐标，自己懒得写那几行直接进行封装了
import {spaceTurnL} from "../utils/coordinateTransformation";
let activeShapePoints = [];
let floatingPoint;
let handler
let ent=[];
let endPr;
let endPos
let shape
export default {
name: "polygon",
data(){
return {
position: ''
}
},
methods: {
// ctrl+z撤销上一步的点
keyEvent(){
document.onkeyup=function (e) {
if(e.keyCode===90&&e.ctrlKey){
if(ent.length>0){
let entity = ent[ent.length-1]
console.log('entity',ent.length);
viewer.entities.remove(entity)
ent.pop()
}
activeShapePoints.pop()
}
}
},
//绘制点
createPoint(worldPosition) {
let point = viewer.entities.add({
// 先将获取到的空间坐标转为经纬度高度，将高度加上0.几的值后在转为空间坐标生成point，
// 目前个人能找到有效解决point点被遮挡无法选取问题
position: Cesium.Cartesian3.fromDegrees(worldPosition.lng,worldPosition.lat,worldPosition.height+0.2),
point: {
color: Cesium.Color.RED,
pixelSize: 10,
outlineWidth: 5,
outlineColor: Cesium.Color.AQUA,
}
});
return point;
},
// 绘制polygon
drawShape(positionData) {
// 此处只是为了动态改变polygon颜色,对于动态绘制polygon形状没啥用
let color = window.color || 'rgba(19, 206, 102, 0.8)'
shape = viewer.entities.add({
polygon: {
hierarchy: new Cesium.CallbackProperty(function () {
let arrPoint = new Cesium.PolygonHierarchy(positionData);
return arrPoint;
}, false),
material: new Cesium.Color.fromCssColorString(color),
HeightReference: Cesium.HeightReference.NONE,
}
});
return shape;
},
// 点击鼠标左键开始绘制polygon
leftClick() {
this.keyEvent()
handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
let that = this
handler.setInputAction(function (event) {
let pick = viewer.scene.pick(event.position)
if(!Cesium.defined(pick)){
return;
}
let earthPosition = viewer.scene.pickPosition(event.position);
if(!Cesium.defined(earthPosition)){
return;
}
if (Cesium.defined(earthPosition)) {
let l = spaceTurnL(earthPosition)
if (activeShapePoints.length === 0) {
floatingPoint = that.createPoint(l);
activeShapePoints.push(earthPosition);
that.drawShape(activeShapePoints)
}
activeShapePoints.push(earthPosition);
let point = that.createPoint(l);
ent.push(point)
that.move()
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
that.rightClick()
},
//绘制调整前的最终图
terminateShape() {
if(activeShapePoints.length){
endPos = activeShapePoints
endPr = this.drawShape(activeShapePoints);//绘制最终图
}
viewer.entities.remove(floatingPoint);//去除动态点图形（当前鼠标点）
// viewer.entities.remove(activeShape);//去除动态图形
floatingPoint = undefined;
// activeShape = undefined;
activeShapePoints = [];
},
//鼠标移动
move(){
handler.setInputAction(function (event) {
if (Cesium.defined(floatingPoint)) {
let pick = viewer.scene.pick(event.endPosition)
if(!Cesium.defined(pick)){
return;
}
let newPosition = viewer.scene.pickPosition(event.endPosition);
if (Cesium.defined(newPosition)) {
// 先将获取到的空间坐标转为经纬度高度，将高度加上0.几的值后再转为空间坐标生成point，
// 目前个人能找到有效解决point点被遮挡无法选取问题，有更好的方案希望大家给出，共同进步，谢谢
let l = spaceTurnL(newPosition)
let c3 = Cesium.Cartesian3.fromDegrees(l.lng,l.lat,l.height+0.2)
floatingPoint.position.setValue(c3)
activeShapePoints.pop();
activeShapePoints.push(c3);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
},
// 右键结束绘制调整前的polygon
rightClick(){
let that = this
handler.setInputAction(function (event) {
let earthPosition = viewer.scene.pickPosition(event.position);
let l = spaceTurnL(earthPosition)
let point = that.createPoint(l)
ent.push(point)
that.terminateShape();
if(handler){
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
that.drawLeftClick()
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
},
// 双击左键拖动功能 开始调整polygon
drawLeftClick(){
if(handler){
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
}
let that = this
handler.setInputAction(function leftClick(event) {
let feature = viewer.scene.pick(event.position)
if(!Cesium.defined(feature)){
return;
}
ent.map((item,index)=>{
if(feature.id){
if(feature.id._id===item._id){
if(feature.id.point){
document.body.style.cursor = 'move';
that.movePoint(item,index)
}
}
}
})
},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
},
// 结束调整polygon
endDrawPolygon(){
handler.setInputAction(function leftClick(event) {
if(handler){
handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
}
},Cesium.ScreenSpaceEventType.RIGHT_CLICK)
},
// 调整双击得到的point
// 同时得到因为point改变而调整的polygon
movePoint(clickFeature,index){
let that = this
// let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
handler.setInputAction(function movement(event) {
let position = viewer.scene.pickPosition(event.endPosition)
if(!Cesium.defined(position)){
return
}
//动态回调改变物体的位置
let l = spaceTurnL(position)
clickFeature.position = new Cesium.CallbackProperty(() => {
return Cesium.Cartesian3.fromDegrees(l.lng,l.lat,l.height+0.2);
}, false);
endPr.polygon.hierarchy = new Cesium.CallbackProperty(() => {
endPos[index] = position
return new Cesium.PolygonHierarchy(endPos);
}, false);
that.endDrawPolygon(clickFeature)
},Cesium.ScreenSpaceEventType.MOUSE_MOVE)
},
// 改变颜色
handleColor(){
if(endPr&&window.color){
let color = new Cesium.Color.fromCssColorString(window.color)
endPr._polygon._material._color.setValue(color)
}
},
}
}
</script>