Cesium 飛行路線編輯
效果
實現的主要功能
- 拖動點位圖標修改位置
- 點擊線，在線上新增點位
- 右擊點位圖標，刪除點位
這些功能配合父頁面使用，所以並沒有從頭開始繪製路線，父頁面是具有增刪改功能的飛行路線點位列表，包含時間點、經緯度、高度等字段信息
頁面代碼(vue2)
<template>
<el-dialog :title="title" :visible.sync="open" width="90vw" append-to-body>
<div style="height: 80vh;">
<three ref="three"></three>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="ok">確 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
/**
* 選擇位置集合
*/
import Three from "@/views/three/index.vue";
import { getMap } from "@/views/three/js/index.js";
import { getHeightByLngLat } from "@/views/three/js/utils.js";
let map;
let graphicLayer;
let graphic;
let hander;
let picked;
let pickedIndex;
let move;
export default {
name: "SelectPositions",
data() {
return {
title: "選擇位置集合", // 彈出層標題
open: false, // 是否顯示彈出層
waitHandle: undefined,
waitHandle2: undefined,
tag: undefined,
index: undefined,
list: [
{
time: undefined,
lng: 117.12,
lat: 31.86,
height: undefined,
createUser: undefined,
createTime: undefined,
updateUser: undefined,
updateTime: undefined,
},
{
time: undefined,
lng: undefined,
lat: undefined,
height: undefined,
createUser: undefined,
createTime: undefined,
updateUser: undefined,
updateTime: undefined,
},
{
time: undefined,
lng: 117.13,
lat: 31.87,
height: undefined,
createUser: undefined,
createTime: undefined,
updateUser: undefined,
updateTime: undefined,
},
],
};
},
components: {
Three,
},
created() {},
async mounted() {
await this.waitThreeReady();
this.$refs.three.containerId = "mars3dContainer2";
await this.$refs.three.initMap({
scene: {
center: {
lng: 117.119112,
lat: 31.862912,
alt: 10000,
heading: 0,
pitch: -89,
},
},
control: {
clockAnimate: false,
timeline: false,
},
}); // 子組件調用父組件的方法
map = getMap();
graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
this.bindMapClick(); // 綁定地圖點擊事件
map.unbindContextMenu(); // 屏蔽右鍵菜單
},
beforeDestroy() {
this.waitHandle && clearInterval(this.waitHandle);
this.waitHandle2 && clearInterval(this.waitHandle2);
this.unbindMapClick();
},
methods: {
async openDialog(data) {
this.open = true;
this.index = data.index;
this.tag = data.tag;
if (data.list) this.list = data.list;
await this.waitTerrainReady();
this.showPoints();
},
// 顯示點位集合
async showPoints() {
graphicLayer.clear();
let positions = [];
for (let i = 0; i < this.list.length; i++) {
let item = this.list[i];
let height = undefined;
if (item.lng && item.lat) {
height = await getHeightByLngLat(map, item.lng, item.lat);
let entity = await this.createBillboardEntity(
this.index == i ? i + 1 + "(當前點位)" : i + 1,
item.lng,
item.lat,
height
);
entity.options.index = i; // 把index記下來
graphicLayer.addGraphic(entity);
if (this.index == i) {
graphic = entity;
}
positions.push([item.lng, item.lat, height]);
}
}
let graphicPolyline = new mars3d.graphic.PolylineEntity({
positions: positions,
style: {
color: "rgba(255,255,0,1)",
width: 5,
},
});
graphicLayer.addGraphic(graphicPolyline);
},
async createBillboardEntity(text, lng, lat, height) {
return new mars3d.graphic.BillboardEntity({
position: [lng, lat, height],
style: {
image: "img/marker/mark-blue.png",
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
label: {
text: text,
font_size: 18,
color: "#ffffff",
pixelOffsetY: -50,
},
},
});
},
// 綁定地圖點擊事件
bindMapClick() {
hander = new Cesium.ScreenSpaceEventHandler(map.viewer.scene.canvas);
// 鼠標單擊
hander.setInputAction(async (e) => {
let position = this.pitchLngLat(e.position);
if (!position) return;
let pickedPolyline = false;
map.viewer.scene.drillPick(e.position).map((item) => {
if (item.id instanceof Cesium.Entity) {
if (item.id.polyline) {
pickedPolyline = true;
}
}
});
if (!pickedPolyline) {
this.setText(this.index + "(當前點位)");
await this.setPosition(graphic, position.lng, position.lat);
let currentItem = this.list[this.index];
currentItem.lng = position.lng;
currentItem.lat = position.lat;
this.showPoints();
} else {
let index = this.getIndex(e.position);
if (index + 1 <= this.index) {
this.index++;
}
this.list.splice(index + 1, 0, {
time: undefined,
lng: position.lng,
lat: position.lat,
height: undefined,
createUser: undefined,
createTime: undefined,
updateUser: undefined,
updateTime: undefined,
});
this.showPoints();
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 鼠標左鍵按下
hander.setInputAction((e) => {
map.viewer.scene.drillPick(e.position).map((item) => {
let graphics = graphicLayer.getGraphics();
for (let i = 0; i < graphics.length; i++) {
let graphic = graphics[i];
if (
graphic.id == item.id.id &&
graphic instanceof mars3d.graphic.BillboardEntity
) {
picked = graphic;
pickedIndex = graphic.options.index;
}
}
});
if (!picked) return;
map.viewer.scene.screenSpaceCameraController.enableRotate = false; // 鎖定相機
move = true;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
// 鼠標左鍵擡起
hander.setInputAction((e) => {
if (!move) return;
picked = false;
map.viewer.scene.screenSpaceCameraController.enableRotate = true; // 取消鎖定相機
move = false;
this.showPoints();
}, Cesium.ScreenSpaceEventType.LEFT_UP);
// 鼠標移動
hander.setInputAction((e) => {
if (!move) return;
let position = this.pitchLngLat(e.endPosition);
this.setPosition(picked, position.lng, position.lat);
this.list[pickedIndex].lng = position.lng;
this.list[pickedIndex].lat = position.lat;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// 鼠標右擊
hander.setInputAction((e) => {
map.viewer.scene.drillPick(e.position).map((item) => {
let graphics = graphicLayer.getGraphics();
for (let i = 0; i < graphics.length; i++) {
let graphic = graphics[i];
if (
graphic.id == item.id.id &&
graphic instanceof mars3d.graphic.BillboardEntity
) {
picked = graphic;
pickedIndex = graphic.options.index;
}
}
});
if (!picked) return;
if (
picked.options.index != this.index &&
picked.options.index != 0 &&
picked.options.index != this.list.length - 1
) {
this.list.splice(picked.options.index, 1);
if (picked.options.index < this.index) {
this.index--;
}
this.showPoints();
}
picked = undefined;
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
},
// 取消綁定地圖點擊事件
unbindMapClick() {
if (hander && !hander.isDestroyed()) {
hander.destroy();
hander = undefined;
}
},
//拾取經緯度
pitchLngLat(position) {
let cartesian = map.viewer.camera.pickEllipsoid(
position,
map.viewer.scene.globe.ellipsoid
);
if (!cartesian) return undefined;
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
let lng = Cesium.Math.toDegrees(cartographic.longitude);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
return { lng, lat };
},
// 查詢在線上拾取的點位在哪兩個點之間
getIndex(position) {
let minDistance;
let index = -1;
let p = this.pitchLngLat(position);
for (let i = 0; i < this.list.length - 1; i++) {
let item1 = this.list[i];
let item2 = this.list[i + 1];
let p1 = [item1.lng, item1.lat];
let p2 = [item2.lng, item2.lat];
let point = turf.point([p.lng, p.lat]);
let line = turf.lineString([p1, p2]);
let distance = turf.pointToLineDistance(point, line, {
units: "kilometers",
});
if (!minDistance) {
minDistance = distance;
index = i;
} else {
if (distance < minDistance) {
minDistance = distance;
index = i;
}
}
}
return index;
},
// 取消按鈕
cancel() {
this.open = false;
},
// 確定
ok() {
this.open = false;
this.$emit("selectPositionsOK", this.tag, this.index, this.list);
},
async setPosition(graphic, lng, lat) {
this.lng = lng;
this.lat = lat;
if (graphic) {
let height = await getHeightByLngLat(map, lng, lat);
graphic.position = [lng, lat, height];
}
},
setText(text) {
if (graphic) {
graphic.label.text = text;
}
},
// 等待this.$refs.three準備就緒
async waitThreeReady() {
return new Promise((resolve, reject) => {
this.waitHandle = setInterval(() => {
if (this.$refs.three) {
clearInterval(this.waitHandle);
this.waitHandle = undefined;
resolve();
}
}, 100);
});
},
// 等待terrainProvider準備就緒
async waitTerrainReady() {
return new Promise((resolve, reject) => {
this.waitHandle2 = setInterval(() => {
if (map && map.viewer && map.viewer.terrainProvider.availability) {
clearInterval(this.waitHandle2);
this.waitHandle2 = undefined;
resolve();
}
}, 100);
});
},
},
};
</script>