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>