1151 lines
36 KiB
Vue
1151 lines
36 KiB
Vue
<template>
|
||
<div>
|
||
<div id="path-viewer"></div>
|
||
<div class="path-container" >
|
||
<div class="fly-box">
|
||
<div class="fly-title">
|
||
<label>飞行漫游</label>
|
||
<i class="el-icon-close" @click="close"></i>
|
||
</div>
|
||
<div class="fly-content">
|
||
<div class="fly-tab-path" v-show="!showCoord">
|
||
<div class="fly-operation">
|
||
<button @click="addPath">
|
||
<i class="el-icon-circle-plus-outline"></i>新增路线
|
||
</button>
|
||
<button @click="document.getElementById('importBtn').click()">
|
||
导入
|
||
</button>
|
||
<input
|
||
type="file"
|
||
style="display: none"
|
||
name="导入"
|
||
id="importBtn"
|
||
accept=".json"
|
||
@change="importPath"
|
||
/>
|
||
<button @click="clearDraw">清除</button>
|
||
</div>
|
||
<div class="fly-table">
|
||
<table>
|
||
<thead class="fly-table-header">
|
||
<tr>
|
||
<th
|
||
style="width: 150px; text-align: left; padding-left: 10px"
|
||
>
|
||
名称
|
||
</th>
|
||
<th style="text-align: center">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="fly-table-body">
|
||
<tr v-for="p in paths" :key="p.id">
|
||
<td @dblclick.stop="enableInput">
|
||
<input
|
||
v-model="p.name"
|
||
disabled
|
||
@blur="inptBlur(p.id, $event)"
|
||
/>
|
||
</td>
|
||
<td class="fly-table-operation">
|
||
<i
|
||
title="漫游"
|
||
v-show="!p.playing"
|
||
@click.stop="flyPath(p.id)"
|
||
class="el-icon-s-promotion"
|
||
></i>
|
||
<i
|
||
title="暂停"
|
||
v-show="p.playing"
|
||
@click.stop="stopFly(p.id)"
|
||
class="el-icon-video-pause"
|
||
></i>
|
||
<i
|
||
title="编辑"
|
||
@click.stop="editPath(p.id)"
|
||
class="el-icon-edit-outline"
|
||
></i>
|
||
<i
|
||
title="删除"
|
||
@click.stop="deletePath(p.id)"
|
||
class="el-icon-delete"
|
||
></i>
|
||
<i
|
||
title="导出"
|
||
@click.stop="exportPath(p.id)"
|
||
class="el-icon-printer"
|
||
></i>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div
|
||
v-show="!paths.length"
|
||
style="height: 80px; text-align: center"
|
||
>
|
||
<i
|
||
class="el-icon-folder-delete"
|
||
style="font-size: 2rem; margin: 20px 0 10px"
|
||
></i>
|
||
<div>暂无数据</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="fly-tab-coord" v-show="showCoord">
|
||
<div class="title-box">
|
||
<label>路线名称：{{ currPath.name }}</label>
|
||
</div>
|
||
<div class="fly-coord-content">
|
||
<div
|
||
class="path-coord"
|
||
v-for="(item, index) in currPath.coords"
|
||
:key="index"
|
||
>
|
||
<label>第 {{ index + 1 }} 个点</label>
|
||
<table>
|
||
<tr>
|
||
<td style="width: 120px; text-align: center">经度</td>
|
||
<td><input v-model.number="item[0]" /></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="width: 120px; text-align: center">纬度</td>
|
||
<td><input v-model.number="item[1]" /></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="width: 120px; text-align: center">高度</td>
|
||
<td><input v-model.number="item[2]" /></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="coord-btn">
|
||
<button @click="changPath">确定</button>
|
||
<button @click="showCoord = false">取消</button>
|
||
</div>
|
||
</div>
|
||
<!--<div class="fly-tabs">-->
|
||
<!--<label class="fly-tabs-item">轨迹</label>-->
|
||
<!--<label class="fly-tabs-item">坐标</label>-->
|
||
<!--</div>-->
|
||
</div>
|
||
<div class="handle handle-l"></div>
|
||
<div class="handle handle-r"></div>
|
||
<div class="handle handle-t"></div>
|
||
<div class="handle handle-b"></div>
|
||
<div class="handle handle-lb"></div>
|
||
<div class="handle handle-rb"></div>
|
||
</div>
|
||
<div
|
||
id="tooltip"
|
||
style="
|
||
position: fixed;
|
||
display: none;
|
||
z-index: 999;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
color: rgb(255, 255, 255);
|
||
font-size: 12px;
|
||
padding: 5px;
|
||
border-radius: 5px;
|
||
"
|
||
>
|
||
左键点击选点，右键也可取消
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 对Date的扩展，将 Date 转化为指定格式的String
|
||
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
|
||
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
|
||
// 例子：
|
||
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
|
||
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
|
||
Date.prototype.Format = function (fmt) { //author: meizz
|
||
var o = {
|
||
"M+": this.getMonth() + 1, //月份
|
||
"d+": this.getDate(), //日
|
||
"h+": this.getHours(), //小时
|
||
"m+": this.getMinutes(), //分
|
||
"s+": this.getSeconds(), //秒
|
||
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
||
"S": this.getMilliseconds() //毫秒
|
||
};
|
||
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||
for (var k in o)
|
||
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||
return fmt;
|
||
}
|
||
// import { cartesianToLnglat, uuid } from "./js/cUtils";
|
||
export default {
|
||
data() {
|
||
return {
|
||
name: "轨迹播放(第一人称视角)",
|
||
showCoord: false,
|
||
|
||
tableData: [],
|
||
isAddStatus: false,
|
||
pointPositionList: [], //点位置坐标数组
|
||
pointEntities: [],
|
||
polylineEntities: [],
|
||
playing: false,
|
||
// handler:new Cesium.ScreenSpaceEventHandler(viewer.canvas),//事件实例
|
||
pathVisible: true,
|
||
|
||
// tempPoints:[],//存储绘制的点
|
||
// isAddPoint:false,//是否新增加了点，需要更新
|
||
// tempEntities:[],//存储绘制轨迹中产生的实体（点、线）
|
||
paths: [], //路径集合，{id:'',name,'',coords:[]}
|
||
currPath: {
|
||
id: "dsdad",
|
||
name: "未命名-124230",
|
||
coords: [
|
||
[112, 32, 2],
|
||
[112.2, 32.1, 2],
|
||
[112.2, 32.1, 2],
|
||
[112.2, 32.1, 2],
|
||
[112.2, 32.1, 2],
|
||
[112.2, 32.1, 2],
|
||
],
|
||
},
|
||
currId: "", //记录当前绘制的轨迹Id
|
||
};
|
||
},
|
||
mounted() {
|
||
this.initCesium();
|
||
// let Cesium = this.$cesium;
|
||
window.pointEntities = [];
|
||
this.handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); //事件实例
|
||
// 创建轨迹实体数据源
|
||
window.pathSource = new Cesium.CustomDataSource("pathSource");
|
||
viewer.dataSources.add(window.pathSource);
|
||
// 获取本地存储的轨迹数据
|
||
let localPath = JSON.parse(localStorage.getItem("localPaths"));
|
||
this.palyPath = localPath ? localPath : [];
|
||
},
|
||
methods: {
|
||
cartesianToLnglat:(cartesian)=>{
|
||
// //笛卡尔空间坐标转WGS84弧度.
|
||
// const ellipsoid84 = Cesium.Ellipsoid.wgs84;
|
||
// const cartographicPosition = ellipsoid84.cartesianToCartographic(cartesian);
|
||
const cartographicPosition = Cesium.Cartographic.fromCartesian(cartesian);
|
||
|
||
return [
|
||
Cesium.Math.toDegrees(cartographicPosition.longitude),
|
||
Cesium.Math.toDegrees(cartographicPosition.latitude),
|
||
]
|
||
},
|
||
uuid:function(len, radix) {
|
||
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
|
||
var uuid = [], i;
|
||
radix = radix || chars.length;
|
||
if (len) {
|
||
// Compact form
|
||
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
|
||
} else {
|
||
// rfc4122, version 4 form
|
||
var r;
|
||
// rfc4122 requires these characters
|
||
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
|
||
uuid[14] = '4';
|
||
// Fill in random data. At i==19 set the high bits of clock sequence as
|
||
// per rfc4122, sec. 4.1.5
|
||
for (i = 0; i < 36; i++) {
|
||
if (!uuid[i]) {
|
||
r = 0 | Math.random() * 16;
|
||
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
|
||
}
|
||
}
|
||
}
|
||
return uuid.join('');
|
||
},
|
||
initCesium() {
|
||
let box = document.getElementsByClassName("content__default")[0];
|
||
box.style.maxWidth = "100%";
|
||
box.style.paddingTop = 0;
|
||
|
||
let Cesium = this.$cesium;
|
||
window.CESIUM_BASE_URL = "/cesium";
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
||
var viewer = new Cesium.Viewer("path-viewer", {
|
||
geocoder: false, //位置查找
|
||
homeButton: false, //视图返回初始位置
|
||
sceneModePicker: false, //视角选择器
|
||
baseLayerPicker: false, //底图选择器
|
||
navigationHelpButton: false, //导航帮助按钮
|
||
animation: false, //动画控制器
|
||
creditContainer: document.createElement("div"), //版权显示
|
||
timeline: false, //时间线
|
||
fullscreenButton: false, //全屏控件
|
||
vrButton: false,
|
||
skyBox: false,
|
||
infoBox: false,
|
||
selectionIndicator: false,
|
||
shouldAnimate: false, // Enable animations
|
||
timeline: true, //时间线
|
||
imageryProvider:new Cesium.UrlTemplateImageryProvider({
|
||
url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
|
||
minimumLevel: 3,
|
||
maximumLevel: 18
|
||
})
|
||
});
|
||
// var imageryLayers = viewer.scene.imageryLayers;
|
||
// let tdtLayer =
|
||
// imageryLayers.addImageryProvider(tdtLayer);
|
||
|
||
viewer.camera.flyTo({
|
||
destination: new Cesium.Cartesian3(
|
||
-2325771.0288233184,
|
||
5392181.511762224,
|
||
2484480.395134067
|
||
),
|
||
orientation: {
|
||
heading: 6.0399326,
|
||
pitch: -0.30503,
|
||
roll: 6.2825747,
|
||
},
|
||
});
|
||
|
||
window.viewer = viewer;
|
||
window.Cesium = Cesium;
|
||
},
|
||
close() {
|
||
this.isAddStatus = false;
|
||
this.playing = false;
|
||
window.pathSource.entities.removeAll();
|
||
viewer.clock.shouldAnimate = false;
|
||
viewer.trackedEntity = null;
|
||
// this.setFly(false);
|
||
},
|
||
triggerImport() {
|
||
let importBtn = document.getElementById("importBtn").click();
|
||
importBtn.click();
|
||
},
|
||
|
||
inptBlur(id, e) {
|
||
this.paths.forEach((p) => {
|
||
if (p.id == id && !p.name) {
|
||
p.name = "未命名";
|
||
}
|
||
});
|
||
e.currentTarget.disabled = true;
|
||
localStorage.setItem("localPaths", JSON.stringify(this.paths));
|
||
},
|
||
enableInput(e) {
|
||
let inputDom = e.currentTarget.getElementsByTagName("input")[0];
|
||
inputDom.disabled = false;
|
||
inputDom.focus();
|
||
},
|
||
importPath(e) {
|
||
const file = e.target.files[0];
|
||
if (file.type !== "application/json") {
|
||
layer.msg("仅允许上传json文件！");
|
||
return;
|
||
}
|
||
// 执行后清空input的值，防止下次选择同一个文件不会触发onchange事件
|
||
e.target.value = "";
|
||
// 执行读取json数据操作
|
||
const reader = new FileReader();
|
||
reader.readAsText(file); // 读取的结果还有其他读取方式，我认为text最为方便
|
||
reader.onerror = (err) => {
|
||
layer.msg("json文件解析失败！", err);
|
||
};
|
||
|
||
reader.onload = () => {
|
||
const resultData = reader.result;
|
||
if (resultData) {
|
||
try {
|
||
const importData = JSON.parse(resultData);
|
||
this.$set(this.paths, this.paths.length, importData);
|
||
// 更新本地的 paths
|
||
localStorage.setItem("localPaths", JSON.stringify(this.paths));
|
||
layer.msg("导入成功！", { icon: 1, time: 1000 });
|
||
} catch (error) {
|
||
layer.msg("读取数据解析失败！", error);
|
||
}
|
||
} else {
|
||
layer.msg("读取数据解析失败！", error);
|
||
}
|
||
};
|
||
},
|
||
exportPath(id) {
|
||
let path = this.paths.filter((p) => p.id == id)[0];
|
||
let data = JSON.stringify(path, undefined, 4);
|
||
var blob = new Blob([data], { type: "text/json" }),
|
||
e = document.createEvent("MouseEvents"),
|
||
a = document.createElement("a");
|
||
a.download = path.name + ".json";
|
||
a.href = window.URL.createObjectURL(blob);
|
||
a.dataset.downloadurl = ["text/json", a.download, a.href].join(":");
|
||
e.initMouseEvent(
|
||
"click",
|
||
true,
|
||
false,
|
||
window,
|
||
0,
|
||
0,
|
||
0,
|
||
0,
|
||
0,
|
||
false,
|
||
false,
|
||
false,
|
||
false,
|
||
0,
|
||
null
|
||
);
|
||
a.dispatchEvent(e);
|
||
},
|
||
deletePath(id) {
|
||
this.paths = this.paths.filter((p) => p.id != id);
|
||
// 更新本地的 paths
|
||
localStorage.setItem("localPaths", JSON.stringify(this.paths));
|
||
if (this.currId == id) {
|
||
window.pathSource.entities.removeAll();
|
||
}
|
||
},
|
||
editPath(id) {
|
||
this.showCoord = true;
|
||
let path = this.paths.filter((p) => p.id == id)[0];
|
||
this.currPath = { ...path };
|
||
},
|
||
changPath() {
|
||
this.showCoord = false;
|
||
// 更新
|
||
localStorage.setItem("localPaths", JSON.stringify(this.paths));
|
||
console.log(this.currPath);
|
||
},
|
||
clearDraw() {
|
||
window.pathSource.entities.removeAll();
|
||
if (this.handler) {
|
||
this.handler.destroy();
|
||
}
|
||
},
|
||
addPath() {
|
||
// 清空绘制的路径
|
||
window.pathSource.entities.removeAll();
|
||
|
||
let that = this;
|
||
let tempPoints = []; //保存点的集合
|
||
let isAddPoint = false; //是否添加了点
|
||
let tempEntities = []; //用来保存路径上的点实体和线实体
|
||
|
||
// viewer.scene.globe.depthTestAgainstTerrain = true;// 开启深度检测
|
||
document.getElementById("path-viewer").style.cursor = "crosshair";
|
||
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); //事件实例
|
||
this.handler = handler;
|
||
//鼠标移动事件
|
||
handler.setInputAction( (movement)=> {
|
||
let tooltip = document.getElementById("tooltip");
|
||
tooltip.style.display = "block";
|
||
tooltip.style.left = movement.endPosition.x + 80 + "px";
|
||
tooltip.style.top = movement.endPosition.y + "px";
|
||
let car3 = viewer.scene.pickPosition(movement.endPosition);
|
||
|
||
//当鼠标在一些Entity上时，car3会是undefined
|
||
if (tempPoints.length > 0 && Cesium.defined(car3)) {
|
||
let carto = this.cartesianToLnglat(car3);
|
||
if (!window.lineEntity || isAddPoint) {
|
||
isAddPoint = false;
|
||
console.log([...tempPoints, [...carto, 8]]);
|
||
window.lineEntity &&
|
||
window.pathSource.entities.remove(window.lineEntity);
|
||
window.lineEntity = that.drawPolyline([
|
||
...tempPoints,
|
||
[...carto, 8],
|
||
]);
|
||
}
|
||
let positions = window.lineEntity.polyline.positions.getValue();
|
||
|
||
positions[positions.length - 1].x = car3.x;
|
||
positions[positions.length - 1].y = car3.y;
|
||
positions[positions.length - 1].z = car3.z;
|
||
window.lineEntity.polyline.positions = new Cesium.CallbackProperty(
|
||
function () {
|
||
return positions;
|
||
},
|
||
false
|
||
);
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||
//左键点击操作
|
||
handler.setInputAction( (click)=> {
|
||
isAddPoint = true;
|
||
//调用获取位置信息的接口
|
||
let ray = viewer.camera.getPickRay(click.position);
|
||
let position = viewer.scene.globe.pick(ray, viewer.scene);
|
||
|
||
//将笛卡尔三维坐标转为地图坐标（弧度）
|
||
var cartographic =
|
||
viewer.scene.globe.ellipsoid.cartesianToCartographic(position);
|
||
var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(
|
||
6
|
||
);
|
||
var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(
|
||
6
|
||
);
|
||
tempPoints.push([Number(log_String), Number(lat_String), 8]);
|
||
|
||
// tempPoints.push(position);
|
||
let tempLength = tempPoints.length;
|
||
//调用绘制点的接口
|
||
let point = that.drawPoint(tempPoints[tempLength - 1]);
|
||
tempEntities.push(point);
|
||
if (tempLength > 1) {
|
||
let pointline = that.drawPolyline([
|
||
tempPoints[tempPoints.length - 2],
|
||
tempPoints[tempPoints.length - 1],
|
||
]);
|
||
tempEntities.push(pointline);
|
||
} else {
|
||
// tooltip.innerHTML = "请绘制下一个点，右键结束";
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
//右键点击操作
|
||
handler.setInputAction( (click) =>{
|
||
that.currId = this.uuid(8);
|
||
that.$set(that.paths, that.paths.length, {
|
||
id: that.currId,
|
||
name: "未命名-" + new Date().Format("hhmmss"),
|
||
coords: [...tempPoints],
|
||
playing: false,
|
||
});
|
||
// 将轨迹数据保存到本地的 localStorage 中
|
||
localStorage.setItem("localPaths", JSON.stringify(that.paths));
|
||
tempPoints = [];
|
||
handler.destroy(); //关闭事件句柄
|
||
handler = null;
|
||
window.pathSource.entities.remove(window.lineEntity);
|
||
window.lineEntity = null;
|
||
let tooltip = document.getElementById("tooltip");
|
||
tooltip.style.display = "none";
|
||
document.getElementById("path-viewer").style.cursor = "default";
|
||
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
||
},
|
||
drawPoint(coords, config) {
|
||
let config_ = config ? config : {};
|
||
return window.pathSource.entities.add({
|
||
name: "点几何对象",
|
||
// position: position,
|
||
position: Cesium.Cartesian3.fromDegrees(
|
||
coords[0],
|
||
coords[1],
|
||
coords[2]
|
||
),
|
||
point: {
|
||
color: Cesium.Color.SKYBLUE,
|
||
pixelSize: 10,
|
||
outlineColor: Cesium.Color.YELLOW,
|
||
outlineWidth: 3,
|
||
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
},
|
||
});
|
||
},
|
||
drawPolyline(positions, config_) {
|
||
if (positions.length < 1) return;
|
||
let config = config_ ? config_ : {};
|
||
return window.pathSource.entities.add({
|
||
name: "线几何对象",
|
||
polyline: {
|
||
// positions: positions,
|
||
positions: new Cesium.CallbackProperty(function () {
|
||
return Cesium.Cartesian3.fromDegreesArrayHeights(positions.flat(3));
|
||
}, false),
|
||
width: config.width ? config.width : 5.0,
|
||
material: new Cesium.PolylineGlowMaterialProperty({
|
||
color: config.color
|
||
? new Cesium.Color.fromCssColorString(config.color)
|
||
: Cesium.Color.GOLD,
|
||
}),
|
||
depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
|
||
color: config.color
|
||
? new Cesium.Color.fromCssColorString(config.color)
|
||
: Cesium.Color.GOLD,
|
||
}),
|
||
// clampToGround: true,
|
||
},
|
||
});
|
||
},
|
||
// clearPath(){
|
||
// if(window.entity){
|
||
// viewer.entities.remove(window.entity);
|
||
// }
|
||
// window.pointEntities.forEach(entity=>{
|
||
// viewer.entities.remove(entity);
|
||
// });
|
||
// window.pointEntities = [];
|
||
// this.pointPositionList=[];
|
||
// },
|
||
stopFly(id) {
|
||
// 获取轨迹对象
|
||
let path = this.paths.filter((p) => p.id == id)[0];
|
||
path.playing = false;
|
||
window.pathSource.show = true;
|
||
viewer.trackedEntity = null;
|
||
viewer.clock.shouldAnimate = false;
|
||
},
|
||
flyPath(id) {
|
||
this.currId = id;
|
||
// 获取轨迹对象
|
||
let path = this.paths.filter((p) => p.id == id)[0];
|
||
let coords = path.coords;
|
||
// 清空绘制的路径
|
||
window.pathSource.entities.removeAll();
|
||
// 设置时间
|
||
this.initTimeline(coords.length - 1);
|
||
// 设置坐标的时间，使用 SampledPositionProperty进行插值
|
||
let positions = this.getPositionProperty(coords);
|
||
let orientation = new Cesium.VelocityOrientationProperty(positions);
|
||
|
||
// 创建轨迹实体
|
||
!window.flyEntity && (window.flyEntity = {});
|
||
let flyEntity = window.pathSource.entities.add({
|
||
show: true,
|
||
//Set the entity availability to the same interval as the simulation time.
|
||
availability: new Cesium.TimeIntervalCollection([
|
||
new Cesium.TimeInterval({
|
||
start: this.start,
|
||
stop: this.stop,
|
||
}),
|
||
]),
|
||
//使用计算的位置
|
||
position: positions,
|
||
//Automatically compute orientation based on position movement.
|
||
orientation: orientation,
|
||
//Load the Cesium plane model to represent the entity
|
||
model: {
|
||
show: true,
|
||
uri: "/assets/region/models/CesiumAir/Cesium_Air.glb",
|
||
minimumPixelSize: 64,
|
||
},
|
||
path: {
|
||
resolution: 1,
|
||
material: new Cesium.PolylineGlowMaterialProperty({
|
||
glowPower: 0.1,
|
||
color: Cesium.Color.YELLOW,
|
||
}),
|
||
width: 10,
|
||
},
|
||
});
|
||
window.flyEntity[id] = flyEntity;
|
||
|
||
//监听时间变化,【关键代码】。保存返回值，是一个移除事件的回调函数
|
||
this.tickCallBack && this.tickCallBack();
|
||
this.tickCallBack = viewer.clock.onTick.addEventListener((e) => {
|
||
if (viewer.clock.shouldAnimate === true) {
|
||
let ori = orientation.getValue(viewer.clock.currentTime); //获取偏向角
|
||
let center = positions.getValue(viewer.clock.currentTime); //获取位置
|
||
let transform = Cesium.Matrix4.fromRotationTranslation(
|
||
Cesium.Matrix3.fromQuaternion(ori),
|
||
center
|
||
); //将偏向角转为3*3矩阵，利用实时点位转为4*4矩阵
|
||
viewer.camera.lookAtTransform(
|
||
transform,
|
||
new Cesium.Cartesian3(-10, 0, 0)
|
||
); //将相机向后面放一点
|
||
}
|
||
});
|
||
// 修改飞行状态
|
||
path.playing = true;
|
||
// 飞行的时候隐藏轨迹相关的实体
|
||
window.pathSource.show = false;
|
||
viewer.trackedEntity = window.flyEntity[id];
|
||
viewer.clock.shouldAnimate = true;
|
||
},
|
||
hidePath() {
|
||
this.pathVisible = !this.pathVisible;
|
||
if (window.entity) {
|
||
window.entity.show = this.pathVisible;
|
||
}
|
||
window.pointEntities.forEach((entity) => {
|
||
entity.show = this.pathVisible;
|
||
});
|
||
},
|
||
initTimeline(len) {
|
||
var start = Cesium.JulianDate.fromDate(new Date("2022-10-9"));
|
||
var stop = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
len,
|
||
new Cesium.JulianDate()
|
||
);
|
||
this.start = start;
|
||
this.stop = stop;
|
||
//Make sure viewer is at the desired time.
|
||
viewer.clock.startTime = start.clone();
|
||
viewer.clock.stopTime = stop.clone();
|
||
viewer.clock.currentTime = start.clone();
|
||
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
|
||
viewer.clock.multiplier = 0.06;
|
||
//Set timeline to simulation bounds
|
||
viewer.timeline.zoomTo(start, stop);
|
||
viewer.clock.shouldAnimate = false;
|
||
},
|
||
getPositionProperty(coords) {
|
||
// 给轨迹点关联时间和插值
|
||
const property = new Cesium.SampledPositionProperty();
|
||
for (var i = 0; i < coords.length; i++) {
|
||
var time = Cesium.JulianDate.addSeconds(
|
||
this.start,
|
||
i,
|
||
new Cesium.JulianDate()
|
||
);
|
||
var position = Cesium.Cartesian3.fromDegrees(
|
||
coords[i][0],
|
||
coords[i][1],
|
||
coords[i][2]
|
||
);
|
||
property.addSample(time, position);
|
||
window.pathSource.entities.add({
|
||
position: position,
|
||
point: {
|
||
color: Cesium.Color.SKYBLUE,
|
||
pixelSize: 10,
|
||
outlineColor: Cesium.Color.YELLOW,
|
||
outlineWidth: 3,
|
||
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
},
|
||
});
|
||
}
|
||
return property;
|
||
},
|
||
readyPath() {
|
||
// 给轨迹点关联时间和插值
|
||
const property = new Cesium.SampledPositionProperty();
|
||
property.setInterpolationOptions({
|
||
interpolationDegree: 5,
|
||
interpolationAlgorithm: Cesium.HermitePolynomialApproximation, //设置插值算法
|
||
});
|
||
for (var i = 0; i < this.pointPositionList.length; i++) {
|
||
var time = Cesium.JulianDate.addSeconds(
|
||
this.start,
|
||
i,
|
||
new Cesium.JulianDate()
|
||
);
|
||
var position = Cesium.Cartesian3.fromArray(this.pointPositionList[i]);
|
||
property.addSample(time, position);
|
||
}
|
||
this.position = property;
|
||
this.orientation = new Cesium.VelocityOrientationProperty(property);
|
||
},
|
||
createModel() {
|
||
//Actually create the entity
|
||
if (window.entity) {
|
||
viewer.entities.remove(window.entity);
|
||
window.entity = null;
|
||
}
|
||
window.entity = viewer.entities.add({
|
||
//Set the entity availability to the same interval as the simulation time.
|
||
availability: new Cesium.TimeIntervalCollection([
|
||
new Cesium.TimeInterval({
|
||
start: this.start,
|
||
stop: this.stop,
|
||
}),
|
||
]),
|
||
//Use our computed positions
|
||
position: this.position,
|
||
//Automatically compute orientation based on position movement.
|
||
orientation: this.orientation,
|
||
model: {
|
||
uri: "./models/CesiumAir/Cesium_Air.glb",
|
||
minimumPixelSize: 64,
|
||
show: false,
|
||
},
|
||
//Show the path as a pink line sampled in 1 second increments.
|
||
path: {
|
||
resolution: 10,
|
||
material: new Cesium.PolylineGlowMaterialProperty({
|
||
width: 30,
|
||
// glowPower: 0.1,
|
||
color: Cesium.Color.fromCssColorString("rgba(230,163,60,1)"),
|
||
}),
|
||
width: 10,
|
||
},
|
||
});
|
||
// window.entity = entity;
|
||
//追踪物体
|
||
// viewer.trackedEntity = entity;
|
||
},
|
||
palyPath() {
|
||
this.playing = !this.playing;
|
||
viewer.trackedEntity = this.playing ? window.entity : null;
|
||
viewer.clock.shouldAnimate = this.playing;
|
||
},
|
||
handlerPath() {
|
||
this.isAddStatus = !this.isAddStatus;
|
||
if (this.isAddStatus) {
|
||
// 清空坐标点
|
||
(this.pointPositionList = []), //点位置坐标数组
|
||
(window.pointEntities = []),
|
||
this.registerEvent();
|
||
} else {
|
||
window.pointEntities.forEach((entity) => {
|
||
viewer.entities.remove(entity);
|
||
});
|
||
window.pointEntities = [];
|
||
this.cancelEvent();
|
||
window.entitiy && viewer.entities.remove(window.entitiy);
|
||
window.entitiy = null;
|
||
viewer.trackedEntity = null;
|
||
document.getElementsByTagName("body").item(0).style.cursor = "default";
|
||
}
|
||
|
||
// 关闭双击事件
|
||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
|
||
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
|
||
);
|
||
},
|
||
registerEvent() {
|
||
this.addMouseListener();
|
||
this.addMouseClick(); // 地图鼠标左键单击事件
|
||
this.addMouseRightClick();
|
||
this.addClockEvent();
|
||
},
|
||
cancelEvent() {
|
||
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除事件
|
||
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE); //移入事件
|
||
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK); //右击事件
|
||
},
|
||
addClockEvent() {
|
||
// let handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
|
||
// handler.setInputAction((movement) => {
|
||
// let pick = scene.pick(movent.position);
|
||
// // if(){
|
||
|
||
// // }
|
||
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
//监听时间变化
|
||
viewer.clock.onTick.addEventListener((e) => {
|
||
if (viewer.clock.shouldAnimate === true) {
|
||
let ori = this.orientation.getValue(viewer.clock.currentTime); //获取偏向角
|
||
let center = this.position.getValue(viewer.clock.currentTime); //获取位置
|
||
let transform = Cesium.Matrix4.fromRotationTranslation(
|
||
Cesium.Matrix3.fromQuaternion(ori),
|
||
center
|
||
); //将偏向角转为3*3矩阵，利用实时点位转为4*4矩阵
|
||
viewer.camera.lookAtTransform(
|
||
transform,
|
||
new Cesium.Cartesian3(-1, 0, 0)
|
||
); //将相机向后面放一点
|
||
// viewer.camera.lookAtTransform(transform);
|
||
}
|
||
});
|
||
},
|
||
// 鼠标左侧单击事件
|
||
addMouseClick() {
|
||
let that = this;
|
||
that.handler.setInputAction(function (movement) {
|
||
console.log("========单击事件========");
|
||
// 添加区域情况
|
||
if (that.isAddStatus) {
|
||
// 平面坐标(x,y)
|
||
let windowPosition = movement.position;
|
||
// 三维坐标（x,y,z）
|
||
let ellipsoid = viewer.scene.globe.ellipsoid;
|
||
let cartesian = viewer.camera.pickEllipsoid(
|
||
windowPosition,
|
||
viewer.scene.globe.ellipsoid
|
||
);
|
||
// 坐标转换:世界坐标转换为经纬度
|
||
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
||
let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
|
||
let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
|
||
// 经度在前纬度在后
|
||
// that.pointPositionList.push([Number(lng.toFixed(6)),Number(lat.toFixed(6)),30]);
|
||
that.pointPositionList.push([
|
||
cartesian.x,
|
||
cartesian.y,
|
||
cartesian.z + 20,
|
||
]);
|
||
if (!cartesian) {
|
||
return;
|
||
}
|
||
// 实例化点实体
|
||
let point = viewer.entities.add({
|
||
name: "gon_point",
|
||
position: new Cesium.Cartesian3(
|
||
cartesian.x,
|
||
cartesian.y,
|
||
cartesian.z + 20
|
||
),
|
||
point: {
|
||
color: Cesium.Color.WHITE,
|
||
pixelSize: 10,
|
||
outlineColor: Cesium.Color.BLACK,
|
||
outlineWidth: 1,
|
||
},
|
||
});
|
||
window.pointEntities.push(point);
|
||
|
||
if (window.pointEntities.length > 1) {
|
||
that.initTimeline();
|
||
that.readyPath();
|
||
that.createModel();
|
||
}
|
||
// 存储点的实体，用于下图
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
},
|
||
// 鼠标移入事件，添加状态改变鼠标光标
|
||
addMouseListener() {
|
||
let that = this;
|
||
// const handler = new Cesium.ScreenSpaceEventHandler(
|
||
// viewer.scene.canvas
|
||
// );
|
||
that.handler.setInputAction(function (movement) {
|
||
console.log("========移入事件========");
|
||
if (that.isAddStatus) {
|
||
document.getElementsByTagName("body").item(0).style.cursor =
|
||
"pointer";
|
||
} else {
|
||
document.getElementsByTagName("body").item(0).style.cursor =
|
||
"default";
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||
},
|
||
// 鼠标右击事件，添加状态改变鼠标光标
|
||
addMouseRightClick() {
|
||
let that = this;
|
||
that.handler.setInputAction(function (movement) {
|
||
console.log("========右击事件========");
|
||
// 结束区域查询
|
||
that.isAddStatus = false;
|
||
that.cancelEvent();
|
||
document.getElementsByTagName("body").item(0).style.cursor = "default";
|
||
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang='stylus' scoped>
|
||
#path-viewer {
|
||
height: 80vh;
|
||
width: 100%;
|
||
}
|
||
|
||
.path-container {
|
||
position: absolute;
|
||
top: 70px;
|
||
left: 70px;
|
||
}
|
||
|
||
.path-container .box-card {
|
||
width: 250px;
|
||
}
|
||
|
||
.fly-box {
|
||
padding-top: 44px;
|
||
padding-bottom: 10px;
|
||
width: 300px;
|
||
z-index: 900;
|
||
// right: 10px;
|
||
// left: 59px;
|
||
position: absolute;
|
||
box-sizing: border-box;
|
||
z-index: 999 !important;
|
||
z-index: 100;
|
||
border-bottom: 1px solid #008aff70;
|
||
border-left: 1px solid #008aff70;
|
||
border-right: 1px solid #008aff70;
|
||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||
border-radius: 0;
|
||
background: linear-gradient(to left, #ffffff, #ffffff) left bottom no-repeat, linear-gradient(to bottom, #ffffff, #ffffff) left bottom no-repeat, linear-gradient(to left, #ffffff, #ffffff) right bottom no-repeat, linear-gradient(to left, #ffffff, #ffffff) right bottom no-repeat;
|
||
background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px;
|
||
background-color: rgba(22, 51, 76, 0.8) !important;
|
||
}
|
||
|
||
.fly-title {
|
||
height: 44px;
|
||
width: 100%;
|
||
line-height: 44px;
|
||
overflow: hidden;
|
||
height: 41px;
|
||
line-height: 41px;
|
||
background: url('http://mars3d.cn/project/vue/assets/msg-title-bg.53c38de6.png'); // mars3d.cn/project/vue/assets/msg-title-bg.53c38de6.png);
|
||
background-size: 10px 44px;
|
||
padding: 0 5px 0 10px;
|
||
color: #fff;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
box-sizing: border-box;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.fly-title i {
|
||
float: right;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.fly-content {
|
||
height: 100%;
|
||
overflow: auto;
|
||
padding: 5px 15px;
|
||
}
|
||
|
||
.fly-operation {
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.fly-operation button {
|
||
height: 32px;
|
||
background: rgba(0, 138, 255, 0.5);
|
||
border: none;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.fly-operation button i {
|
||
padding: 0 5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.fly-table {
|
||
clear: both;
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
transition: opacity 0.3s;
|
||
color: #cdcdcd;
|
||
font-size: 12px;
|
||
border: solid 1px;
|
||
border-color: #0b67b7;
|
||
border-top-color: #c1c1d5;
|
||
min-height: 180px;
|
||
}
|
||
|
||
.fly-table table {
|
||
width: 100%;
|
||
border-spacing: 0;
|
||
border-collapse: separate;
|
||
}
|
||
|
||
.fly-table table td, fly-table table th {
|
||
padding: 10px;
|
||
}
|
||
|
||
.fly-table-header {
|
||
background: rgba(0, 138, 255, 0.2);
|
||
/* text-align: left; */
|
||
height: 32px;
|
||
}
|
||
|
||
.fly-table-body {
|
||
background: rgba(22, 51, 76, 0.5);
|
||
color: white;
|
||
}
|
||
|
||
.fly-table-body input {
|
||
color: white;
|
||
background: transparent;
|
||
border: none;
|
||
}
|
||
|
||
.fly-table-operation {
|
||
text-align: center;
|
||
}
|
||
|
||
.fly-table-operation i {
|
||
padding: 0 2px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.fly-tab-coord {
|
||
color: white;
|
||
padding: 5px;
|
||
}
|
||
|
||
.fly-tab-coord .title-box {
|
||
font-size: 15px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.fly-tab-coord .path-coord {
|
||
padding: 5px;
|
||
border: solid 1px #295f8f;
|
||
}
|
||
|
||
.fly-tab-coord .fly-coord-content {
|
||
max-height: 520px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.fly-tab-coord .path-coord input {
|
||
color: white;
|
||
background: transparent;
|
||
width: 100px;
|
||
}
|
||
|
||
.fly-tab-coord .coord-btn {
|
||
text-align: center;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.fly-tab-coord .coord-btn button {
|
||
padding: 3px 10px;
|
||
font-size: 12px;
|
||
margin: 0 10px;
|
||
color: white;
|
||
background: rgba(120, 255, 53, 0.3);
|
||
border: none;
|
||
}
|
||
|
||
.handle {
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
z-index: 1;
|
||
width: 10px;
|
||
height: 10px;
|
||
opacity: 0;
|
||
}
|
||
|
||
.handle-l {
|
||
height: auto;
|
||
top: 10px;
|
||
left: 0;
|
||
bottom: 10px;
|
||
}
|
||
|
||
.handle-r {
|
||
height: auto;
|
||
top: 10px;
|
||
right: 0;
|
||
bottom: 10px;
|
||
}
|
||
/deep/.cesium-viewer-timelineContainer{
|
||
display: none !important;
|
||
}
|
||
.handle-t {
|
||
width: auto;
|
||
top: 0;
|
||
left: 10px;
|
||
right: 10px;
|
||
}
|
||
|
||
.handle-b {
|
||
width: auto;
|
||
bottom: 0;
|
||
left: 10px;
|
||
right: 10px;
|
||
}
|
||
|
||
.handle-lb {
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.handle-rb {
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
</style> |