|
|
|
|
@ -1,403 +0,0 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="map-container">
|
|
|
|
|
<div class="container-top">
|
|
|
|
|
<div class="next-stand">
|
|
|
|
|
<img src="../assets/images/next.png" alt="" />
|
|
|
|
|
<span>0</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="real-time">
|
|
|
|
|
<img src="../assets/images/realTime.png" alt="" />
|
|
|
|
|
<span>{{ mileData.mile ? ileData.mile : 0 }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<mars-map @mapLoad="mapLoad" :options="options"></mars-map>
|
|
|
|
|
<div class="video-list">
|
|
|
|
|
<grids></grids>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import MarsMap from "@/components/mars-map";
|
|
|
|
|
import grids from "@/components/grids.vue";
|
|
|
|
|
import { getCarIdInfo } from "@/api/yunkun/index.js";
|
|
|
|
|
import { historyLine, carMidle } from "@/api/yunkun/yunkun.js";
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
|
|
return {
|
|
|
|
|
list: [],
|
|
|
|
|
mileData: {
|
|
|
|
|
mile: "", //已经行驶多少里程
|
|
|
|
|
},
|
|
|
|
|
queryParams: {
|
|
|
|
|
startTime: undefined,
|
|
|
|
|
endTime: undefined,
|
|
|
|
|
},
|
|
|
|
|
graphicLayer: null,
|
|
|
|
|
baseUrl: basePathUrl + "lib/geoJson/tileset.json",
|
|
|
|
|
map: null,
|
|
|
|
|
options: {
|
|
|
|
|
scene: {
|
|
|
|
|
center: {
|
|
|
|
|
lat: 31.212805,
|
|
|
|
|
lng: 120.607156,
|
|
|
|
|
alt: 5096.4,
|
|
|
|
|
heading: 357.9,
|
|
|
|
|
pitch: -31.5,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
terrain: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
control: {
|
|
|
|
|
contextmenu: { preventDefault: false, hasDefault: false },
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
carUrl: basePathUrl + "lib/qiche.gltf",
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
components: { MarsMap, grids },
|
|
|
|
|
beforeDestroy() {},
|
|
|
|
|
mounted() {
|
|
|
|
|
const { startOfDay, endOfDay } = this.getStartAndEndOfDayFormatted(true);
|
|
|
|
|
this.queryParams = {
|
|
|
|
|
carId: this.$route.query.carId,
|
|
|
|
|
startTime: startOfDay,
|
|
|
|
|
endTime: endOfDay,
|
|
|
|
|
};
|
|
|
|
|
this.getCarMidle();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
mapLoad(map) {
|
|
|
|
|
this.map = map;
|
|
|
|
|
this.graphicLayer = new mars3d.layer.GraphicLayer();
|
|
|
|
|
map.addLayer(this.graphicLayer);
|
|
|
|
|
|
|
|
|
|
// this.initTilesetLayer();
|
|
|
|
|
this.getCarHistoryLine();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**根据车辆的id获取车辆的历史轨迹 */
|
|
|
|
|
async getCarHistoryLine() {
|
|
|
|
|
let result = await historyLine(this.queryParams);
|
|
|
|
|
result.list.map((item) => {
|
|
|
|
|
this.list.push([parseFloat(item.lng), parseFloat(item.lat)]);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.historyLine();
|
|
|
|
|
this.createCar(result.countData.avg_speed);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
historyLine() {
|
|
|
|
|
const firstPoint = this.list[0];
|
|
|
|
|
|
|
|
|
|
const divGraphic = new mars3d.graphic.DivGraphic({
|
|
|
|
|
position: firstPoint,
|
|
|
|
|
style: {
|
|
|
|
|
html: `<div class="mars-four-color mars3d-animation">
|
|
|
|
|
<div class="four-color_name">起点</div>
|
|
|
|
|
</div>`,
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
distanceDisplayCondition: true,
|
|
|
|
|
clampToGround: true,
|
|
|
|
|
visibleDepth: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
this.graphicLayer.addGraphic(divGraphic);
|
|
|
|
|
|
|
|
|
|
const graphic = new mars3d.graphic.PolylineEntity({
|
|
|
|
|
positions: this.list,
|
|
|
|
|
style: {
|
|
|
|
|
width: 10,
|
|
|
|
|
color: "#00F7AC",
|
|
|
|
|
outline: true,
|
|
|
|
|
outlineColor: "#008DF8",
|
|
|
|
|
outlineWidth: 5,
|
|
|
|
|
clampToGround: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
this.graphicLayer.addGraphic(graphic);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**获取车辆天里程 */
|
|
|
|
|
async getCarMidle() {
|
|
|
|
|
const { startOfDay, endOfDay } = this.getStartAndEndOfDayFormatted();
|
|
|
|
|
let result = await carMidle({
|
|
|
|
|
carId: this.queryParams.carId,
|
|
|
|
|
startDate: startOfDay,
|
|
|
|
|
endDate: endOfDay,
|
|
|
|
|
});
|
|
|
|
|
this.mileData.mile = result.mile;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getStartAndEndOfDayFormatted(boole) {
|
|
|
|
|
const now = new Date();
|
|
|
|
|
const startOfDay = new Date(
|
|
|
|
|
now.getFullYear(),
|
|
|
|
|
now.getMonth(),
|
|
|
|
|
now.getDate(),
|
|
|
|
|
0,
|
|
|
|
|
0,
|
|
|
|
|
0
|
|
|
|
|
);
|
|
|
|
|
const endOfDay = new Date(
|
|
|
|
|
now.getFullYear(),
|
|
|
|
|
now.getMonth(),
|
|
|
|
|
now.getDate(),
|
|
|
|
|
23,
|
|
|
|
|
59,
|
|
|
|
|
59,
|
|
|
|
|
999
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
startOfDay: this.formatDate(startOfDay, boole),
|
|
|
|
|
endOfDay: this.formatDate(endOfDay, boole),
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
formatDate(date, boole) {
|
|
|
|
|
const year = date.getFullYear();
|
|
|
|
|
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以要加1
|
|
|
|
|
const day = String(date.getDate()).padStart(2, "0");
|
|
|
|
|
const hours = String(date.getHours()).padStart(2, "0");
|
|
|
|
|
const minutes = String(date.getMinutes()).padStart(2, "0");
|
|
|
|
|
const seconds = String(date.getSeconds()).padStart(2, "0");
|
|
|
|
|
|
|
|
|
|
if (boole) {
|
|
|
|
|
return `${year}${month}${day}${hours}${minutes}${seconds}`;
|
|
|
|
|
} else {
|
|
|
|
|
return `${year}${month}${day}`;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 加载姑苏区三维图层
|
|
|
|
|
*/
|
|
|
|
|
initTilesetLayer() {
|
|
|
|
|
let _this = this;
|
|
|
|
|
// 添加参考三维模型;
|
|
|
|
|
let tiles3dLayer = new mars3d.layer.TilesetLayer({
|
|
|
|
|
name: "姑苏区建筑物",
|
|
|
|
|
url: "https://www.jichuanglanhai.com:88/3dtiles/yunkun/tileset.json",
|
|
|
|
|
maximumScreenSpaceError: 16,
|
|
|
|
|
maximumMemoryUsage: 1024 / 2,
|
|
|
|
|
dynamicScreenSpaceError: false,
|
|
|
|
|
skipLevelOfDetail: true,
|
|
|
|
|
preferLeaves: true,
|
|
|
|
|
flyTo: false,
|
|
|
|
|
style: {
|
|
|
|
|
color: {
|
|
|
|
|
conditions: [["true", `color("rgba(42, 160, 224, 1)")`]],
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
this.map.addLayer(tiles3dLayer);
|
|
|
|
|
tiles3dLayer.on(mars3d.EventType.load, function (event) {
|
|
|
|
|
_this.createCar();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 生成车辆实时点位
|
|
|
|
|
*/
|
|
|
|
|
async createCar(avg_speed) {
|
|
|
|
|
let _this = this;
|
|
|
|
|
const lastPoint = this.list[this.list.length - 1];
|
|
|
|
|
// let res = await getCarIdInfo("1328CC51-C858-4FFA-8714-4F354BB49CF8");
|
|
|
|
|
const fixedRoute = new mars3d.graphic.FixedRoute({
|
|
|
|
|
name: "贴模型表面漫游",
|
|
|
|
|
speed: avg_speed, //平均速度值
|
|
|
|
|
positions: [lastPoint],
|
|
|
|
|
camera: {
|
|
|
|
|
type: "gs",
|
|
|
|
|
heading: 90,
|
|
|
|
|
radius: 500,
|
|
|
|
|
},
|
|
|
|
|
model: {
|
|
|
|
|
show: true,
|
|
|
|
|
url: _this.carUrl,
|
|
|
|
|
scale: 0.3,
|
|
|
|
|
minimumPixelSize: 55,
|
|
|
|
|
silhouette: true,
|
|
|
|
|
silhouetteColor: "#fff",
|
|
|
|
|
silhouetteSize: 1,
|
|
|
|
|
silhouetteAlpha: 0.19,
|
|
|
|
|
clampToGround: true,
|
|
|
|
|
},
|
|
|
|
|
// billboard: {
|
|
|
|
|
// image: require("../assets/images/car-active.png"),
|
|
|
|
|
// width: 210,
|
|
|
|
|
// height: 100,
|
|
|
|
|
|
|
|
|
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
|
|
|
|
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
// distanceDisplayCondition: true,
|
|
|
|
|
// clampToGround: true,
|
|
|
|
|
// visibleDepth: true,
|
|
|
|
|
// label: {
|
|
|
|
|
// text: "001号线_01_早送_守押001_苏E",
|
|
|
|
|
// color: "#fff",
|
|
|
|
|
// font_size: 13,
|
|
|
|
|
// pixelOffsetY: -81,
|
|
|
|
|
// pixelOffsetX: 10,
|
|
|
|
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
|
|
// distanceDisplayCondition: true,
|
|
|
|
|
// visibleDepth: false,
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
circle: {
|
|
|
|
|
radius: 500,
|
|
|
|
|
materialType: mars3d.MaterialType.CircleWave,
|
|
|
|
|
materialOptions: {
|
|
|
|
|
color: "#FAAC51",
|
|
|
|
|
count: 2,
|
|
|
|
|
speed: 10,
|
|
|
|
|
},
|
|
|
|
|
clampToTileset: true,
|
|
|
|
|
},
|
|
|
|
|
// polyline: {
|
|
|
|
|
// // lastMaterialType: "LineTrail",
|
|
|
|
|
// width: 10,
|
|
|
|
|
// // closure: true,
|
|
|
|
|
// color: "#00F7AC",
|
|
|
|
|
// outline: true,
|
|
|
|
|
// outlineColor: "#008DF8",
|
|
|
|
|
// outlineWidth: 5,
|
|
|
|
|
// clampToGround: true,
|
|
|
|
|
// // materialOptions: {
|
|
|
|
|
// // color: "#008BFA",
|
|
|
|
|
// // materialType: "LineTrail",
|
|
|
|
|
// // speed: 0,
|
|
|
|
|
// // },
|
|
|
|
|
// // materialType: "LineTrail",
|
|
|
|
|
// // },
|
|
|
|
|
// },
|
|
|
|
|
});
|
|
|
|
|
this.graphicLayer.addGraphic(fixedRoute);
|
|
|
|
|
//绑定弹窗
|
|
|
|
|
// this.bindPopup(fixedRoute, res.data);
|
|
|
|
|
//开始漫游
|
|
|
|
|
// fixedRoute.start();
|
|
|
|
|
//打开弹窗
|
|
|
|
|
// fixedRoute.openPopup();
|
|
|
|
|
// // //绑定弹窗
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
bindPopup(fixedRoute, data) {
|
|
|
|
|
const userList = data.userList.map((item) => {
|
|
|
|
|
return `<div class="popup-item">
|
|
|
|
|
<div class="popup-lable">${item.name}：</div>
|
|
|
|
|
<div class="popup-value">${item.ename}</div>
|
|
|
|
|
</div>`;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const zbList = data.zbList.map((item) => {
|
|
|
|
|
return `<div class="popup-item">
|
|
|
|
|
<div class="popup-lable">${item.thingType}：</div>
|
|
|
|
|
<div class="popup-value">${item.type}</div>
|
|
|
|
|
</div>`;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let html = `<div class="diy-popup">
|
|
|
|
|
<div class="popup-title">001号线_01_早送_守押<br/>
|
|
|
|
|
001_苏E12345
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-item">
|
|
|
|
|
<div class="popup-lable">线路类型：</div>
|
|
|
|
|
<div class="popup-value">${data.lineType}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sub-title">装备信息</div>
|
|
|
|
|
<div class="popup-grid">
|
|
|
|
|
${zbList.join("")}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sub-title">人员信息</div>
|
|
|
|
|
<div class="popup-grid">
|
|
|
|
|
${userList.join("")}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sub-title">标的物信息</div>
|
|
|
|
|
<div class="popup-grid">
|
|
|
|
|
<div class="popup-item">
|
|
|
|
|
<div class="popup-lable">标的物总数：</div>
|
|
|
|
|
<div class="popup-value">${data.bdwInfo.count}只</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>`;
|
|
|
|
|
|
|
|
|
|
fixedRoute.bindPopup(html, {
|
|
|
|
|
className: "carPopup",
|
|
|
|
|
offsetX: 280,
|
|
|
|
|
offsetY: 20,
|
|
|
|
|
// closeButton: false,
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
chkShadows(val) {
|
|
|
|
|
let _this = this;
|
|
|
|
|
this.map.viewer.shadows = val;
|
|
|
|
|
if (val) {
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
// 光照沿着相机方向
|
|
|
|
|
_this.map.scene.shadowMap._lightCamera = _this.map.scene.camera;
|
|
|
|
|
}, 1500);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.container-top {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 100px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
z-index: 100;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
.next-stand {
|
|
|
|
|
margin-right: 40px;
|
|
|
|
|
}
|
|
|
|
|
& > div {
|
|
|
|
|
width: 200px;
|
|
|
|
|
img {
|
|
|
|
|
height: 38px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: block;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
span {
|
|
|
|
|
display: block;
|
|
|
|
|
font-size: 40px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
line-height: 51px;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
|
|
|
|
background: linear-gradient(270deg, #00e5ff 0%, #d8d8d8 100%);
|
|
|
|
|
/* 将背景限制在文字区域内 */
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
background-clip: text;
|
|
|
|
|
/* 设置文字颜色，会被背景图像遮住 */
|
|
|
|
|
color: transparent;
|
|
|
|
|
font-family: "DIN-Regular-2";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.video-list {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 25px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
z-index: 100;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border: 1px solid #415367;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
background: rgba(28, 31, 34, 0.6);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
