343 lines
9.5 KiB
Vue
343 lines
9.5 KiB
Vue
<template>
|
||
<div class="ditu">
|
||
<div class="main">
|
||
<div
|
||
id="marsContainer-mymap"
|
||
ref="marsMaps1"
|
||
class="mars3d-container"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
"use script";
|
||
export default {
|
||
name: "myMars",
|
||
props: {
|
||
historyList: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
inputs: "",
|
||
checkInterval: null,
|
||
time: null
|
||
};
|
||
},
|
||
components: {},
|
||
watch: {
|
||
historyList: {
|
||
handler(val) {
|
||
let value = JSON.parse(JSON.stringify(val));
|
||
if (value) {
|
||
this.startCheckTimer(value);
|
||
}
|
||
},
|
||
deep: true,
|
||
immediate: true
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getMapJson();
|
||
},
|
||
methods: {
|
||
getMapJson() {
|
||
// eslint-disable-next-line no-undef
|
||
mars3d.Util.fetchJson({
|
||
url: "/configJson/mapMars.json"
|
||
}).then((res) => {
|
||
this.initMarsMap({
|
||
// 合并配置项
|
||
...res.map3d
|
||
});
|
||
});
|
||
},
|
||
initMarsMap(options) {
|
||
// eslint-disable-next-line no-undef
|
||
this.mapMars = new mars3d.Map(this.$refs.marsMaps1, options);
|
||
this.mapMars.unbindContextMenu(); //map上解绑默认菜单
|
||
const layerId = `marsContainer-warningMap`;
|
||
this.graphicLayer = this.mapMars.getLayerById(layerId);
|
||
if (!this.graphicLayer) {
|
||
// eslint-disable-next-line no-undef
|
||
this.graphicLayer = new mars3d.layer.GraphicLayer({ id: layerId });
|
||
this.mapMars.addLayer(this.graphicLayer);
|
||
}
|
||
// eslint-disable-next-line no-undef
|
||
this.clockAnimate = new mars3d.control.ClockAnimate({});
|
||
this.mapMars.addControl(this.clockAnimate);
|
||
|
||
// map构造完成后的一些处理
|
||
this.onMapLoad();
|
||
// map.on(mars3d.EventType.dblClick, map_dblClickHandler, graphicLayer);
|
||
// map.on(mars3d.EventType.click, map_clickHandler, graphicLayer)
|
||
},
|
||
onMapLoad() {
|
||
// 设置鼠标操作习惯,更换中键和右键
|
||
this.mapMars.changeMouseModel(true);
|
||
// eslint-disable-next-line no-undef
|
||
this.mapMars.scene.mode = Cesium.SceneMode.SCENE3D;
|
||
// 时间轴
|
||
// const timeline = new mars3d.control.Timeline();
|
||
// this.mapMars.addControl(timeline);
|
||
},
|
||
// 计时器
|
||
startCheckTimer(value) {
|
||
if (this.checkInterval) {
|
||
clearInterval(this.checkInterval);
|
||
}
|
||
|
||
this.checkInterval = setInterval(() => {
|
||
if (this.mapMars !== undefined) {
|
||
clearInterval(this.checkInterval);
|
||
this.onProcessTraceability(value);
|
||
}
|
||
}, 100);
|
||
},
|
||
onProcessTraceability(mapList) {
|
||
// eslint-disable-next-line no-undef
|
||
const property = new Cesium.SampledPositionProperty();
|
||
// eslint-disable-next-line no-undef
|
||
property.forwardExtrapolationType = Cesium.ExtrapolationType.HOLD;
|
||
|
||
const app_property = new Cesium.SampledPositionProperty();
|
||
// eslint-disable-next-line no-undef
|
||
app_property.forwardExtrapolationType = Cesium.ExtrapolationType.HOLD;
|
||
|
||
let start;
|
||
let stop;
|
||
for (let i = 0, len = mapList.length; i < len; i++) {
|
||
const item = mapList[i];
|
||
const lng = Number(item.lon); // 经度
|
||
const lat = Number(item.lat); // 纬度
|
||
const app_lng = Number(item.app_lon); // 经度
|
||
const app_lat = Number(item.app_lat); // 纬度
|
||
const height = item.alt || 5; // 高度5 是避免与geojson高度冲突
|
||
const outputDate = item.createTime.replace(" ", "T");
|
||
|
||
const time = outputDate; // 时间
|
||
let position = null;
|
||
let app_position = null;
|
||
if (lng !== 0 && lat !== 0) {
|
||
if (lng && lat) {
|
||
// eslint-disable-next-line no-undef
|
||
position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
|
||
app_position = Cesium.Cartesian3.fromDegrees(app_lng, app_lat, 0);
|
||
}
|
||
let juliaDate = null;
|
||
if (time) {
|
||
// eslint-disable-next-line no-undef
|
||
juliaDate = Cesium.JulianDate.fromIso8601(time);
|
||
}
|
||
if (position && juliaDate) {
|
||
property.addSample(juliaDate, position);
|
||
}
|
||
if (app_position && juliaDate) {
|
||
app_property.addSample(juliaDate, app_position);
|
||
}
|
||
|
||
if (i === 0) {
|
||
start = juliaDate;
|
||
} else if (i === len - 1) {
|
||
stop = juliaDate;
|
||
}
|
||
} else {
|
||
console.log("经纬度为0，忽略该数据");
|
||
}
|
||
}
|
||
// 设置时钟属性
|
||
if (stop === undefined) {
|
||
stop = start;
|
||
}
|
||
this.mapMars.clock.startTime = start.clone();
|
||
this.mapMars.clock.stopTime = stop.clone();
|
||
this.mapMars.clock.currentTime = start.clone();
|
||
// eslint-disable-next-line no-undef
|
||
this.mapMars.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
|
||
this.mapMars.clock.multiplier = 1;
|
||
if (this.mapMars.controls.timeline) {
|
||
this.mapMars.controls.timeline.zoomTo(start, stop);
|
||
}
|
||
|
||
//根据当前时间改变左侧绿灯颜色
|
||
// this.mapMars.on("clockTick", function (clock) {
|
||
// // const time = Cesium.JulianDate.toIso8601(clock.currentTime)
|
||
// // let times = moment(time).format('HH:mm:ss')
|
||
// console.log(clock);
|
||
// });
|
||
this.clearDraw();
|
||
// 创建无人机对象
|
||
let pathEntity = this.graphicLayer.getGraphicById("pathIdsss");
|
||
if (!pathEntity) {
|
||
pathEntity = new mars3d.graphic.ModelEntity({
|
||
id: "pathIdsss",
|
||
position: property,
|
||
orientation: new Cesium.VelocityOrientationProperty(property),
|
||
billboard: {
|
||
image: require("@/assets/img/uav.svg"),
|
||
scale: 0.5,
|
||
minimumPixelSize: 30,
|
||
distanceDisplayCondition_far: 1000000,
|
||
distanceDisplayCondition_near: 1000
|
||
},
|
||
path: {
|
||
width: 2,
|
||
color: "#FF0000"
|
||
},
|
||
flyTo: true,
|
||
flyToOptions: {
|
||
duration: 2,
|
||
minHeight: 5000,
|
||
maxHeight: 8000
|
||
}
|
||
});
|
||
this.graphicLayer.addGraphic(pathEntity);
|
||
}
|
||
// 飞手位置
|
||
let app_pathEntity = this.graphicLayer.getGraphicById(
|
||
"pathIdsss" + "_app"
|
||
);
|
||
if (!app_pathEntity) {
|
||
app_pathEntity = new mars3d.graphic.ModelEntity({
|
||
id: "pathIdsss" + "_app",
|
||
position: app_property,
|
||
orientation: new Cesium.VelocityOrientationProperty(app_property),
|
||
point: {
|
||
color: "#00ffff",
|
||
pixelSize: 8,
|
||
outlineColor: "#ffffff",
|
||
outlineWidth: 2
|
||
},
|
||
path: {
|
||
width: 2,
|
||
color: "#FF0000"
|
||
},
|
||
style: {
|
||
label: {
|
||
text: "飞手位置",
|
||
font_size: 14,
|
||
font_family: "微软雅黑"
|
||
}
|
||
}
|
||
});
|
||
this.graphicLayer.addGraphic(app_pathEntity);
|
||
}
|
||
},
|
||
clearDraw() {
|
||
if (this.graphics) {
|
||
this.mapMars.removeLayer(this.graphics);
|
||
}
|
||
if (this.graphicLayer) {
|
||
this.graphicLayer.clear();
|
||
}
|
||
},
|
||
clearInterval() {
|
||
clearInterval(this.time);
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
if (this.mapMars) {
|
||
this.mapMars.destroy();
|
||
this.mapMars = null;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.ditu {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
|
||
.main {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
position: relative;
|
||
justify-content: flex-start;
|
||
#marsContainer-mymap {
|
||
width: 100%;
|
||
height: 50vh;
|
||
// margin-left: 8%;
|
||
}
|
||
//历史轨迹气泡
|
||
#trajectoryPopup {
|
||
padding: 10px 10px 0px 10px;
|
||
.popTitle {
|
||
margin-bottom: 5px;
|
||
}
|
||
.mars3d-popup-background {
|
||
background: rgba(13, 40, 64, 0.9);
|
||
}
|
||
.popLonLat {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
#copyBtn {
|
||
width: max-content;
|
||
border: 0.5px solid #fff;
|
||
border-radius: 2px;
|
||
padding: 3px 9px;
|
||
color: #fff;
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(77, 154, 247, 1) 0%,
|
||
rgba(8, 98, 205, 1) 100%
|
||
);
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
#marsContainer-map {
|
||
width: 35vh;
|
||
height: 35vh;
|
||
margin-left: 8%;
|
||
.mars3d-divlayer {
|
||
.mars3d-divGraphic {
|
||
.lbPopup {
|
||
.mars3d-popup-background {
|
||
background: rgba(13, 40, 64, 0.9);
|
||
}
|
||
.mars3d-popup-content-wrapper {
|
||
width: 300px;
|
||
.mars3d-popup-content {
|
||
.popLonLat {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
.popTitle {
|
||
font-size: 12px;
|
||
}
|
||
#copyBtn {
|
||
border: 0.5px solid #fff;
|
||
border-radius: 2px;
|
||
padding: 3px 9px;
|
||
color: #fff;
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(77, 154, 247, 1) 0%,
|
||
rgba(8, 98, 205, 1) 100%
|
||
);
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|