|
|
<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>
|
|
|
<div class="albuginea backBtn" @click="initTilesetLayer()">
|
|
|
{{ show3D ? "关闭" : "开启" }}三维
|
|
|
</div>
|
|
|
<div class="albuginea" @click="$router.back()">
|
|
|
<i class="el-icon-back"></i> 返回
|
|
|
</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, getCarPoint } from "@/api/yunkun/yunkun.js";
|
|
|
export default {
|
|
|
data() {
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
return {
|
|
|
mileData: {
|
|
|
mile: "", //已经行驶多少里程
|
|
|
},
|
|
|
queryParams: {
|
|
|
startTime: undefined,
|
|
|
endTime: undefined,
|
|
|
},
|
|
|
map: null,
|
|
|
mapLayer: {},
|
|
|
show3D: false,
|
|
|
options: {
|
|
|
scene: {
|
|
|
center: {
|
|
|
lat: 31.184348,
|
|
|
lng: 120.625126,
|
|
|
alt: 6764.6,
|
|
|
heading: 357.9,
|
|
|
pitch: -31.5,
|
|
|
},
|
|
|
},
|
|
|
control: {
|
|
|
contextmenu: { preventDefault: false, hasDefault: false },
|
|
|
},
|
|
|
terrain: { show: false },
|
|
|
basemaps: [
|
|
|
{
|
|
|
name: "影像地图",
|
|
|
type: "xyz",
|
|
|
url: process.env.VUE_APP_BASE_API2 + "/map/{z}/{y}/{x}.png",
|
|
|
minimumLevel: 1,
|
|
|
maximumLevel: 16,
|
|
|
show: true,
|
|
|
},
|
|
|
// {
|
|
|
// name: "mapbox影像图",
|
|
|
// icon: "img/basemaps/mapboxSatellite.png",
|
|
|
// type: "mapbox",
|
|
|
// username: "sharealex",
|
|
|
// styleId: "cly5i21fn00e901prgq643t4r",
|
|
|
// token:
|
|
|
// "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
|
|
|
// tilesize: 256,
|
|
|
// scaleFactor: false,
|
|
|
// show: false,
|
|
|
// },
|
|
|
],
|
|
|
},
|
|
|
Line: [],
|
|
|
carUrl: basePathUrl + "static/qiche.gltf",
|
|
|
};
|
|
|
},
|
|
|
components: { MarsMap, grids },
|
|
|
beforeDestroy() {
|
|
|
this.mapLayer.car.remove();
|
|
|
this.mapLayer.car = null;
|
|
|
},
|
|
|
created() {
|
|
|
console.log(process.env.VUE_APP_BASE_API, "ssssss");
|
|
|
const { startOfDay, endOfDay } = this.getStartAndEndOfDayFormatted(true);
|
|
|
this.queryParams = {
|
|
|
carId: this.$route.query.carId,
|
|
|
startTime: startOfDay,
|
|
|
endTime: endOfDay,
|
|
|
};
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
clearInterval(this.timer);
|
|
|
},
|
|
|
methods: {
|
|
|
/**地图渲染完毕 */
|
|
|
mapLoad(map) {
|
|
|
map.set;
|
|
|
this.map = map;
|
|
|
map.fixedLight = true; // 固定光照，避免gltf模型随时间存在亮度不一致。
|
|
|
// 创建矢量图层
|
|
|
this.mapLayer.Line = new mars3d.layer.GraphicLayer();
|
|
|
this.map.addLayer(this.mapLayer.Line);
|
|
|
|
|
|
this.mapLayer.car = new mars3d.layer.GraphicLayer();
|
|
|
this.map.addLayer(this.mapLayer.car);
|
|
|
|
|
|
this.createLine();
|
|
|
this.createCar();
|
|
|
},
|
|
|
/**
|
|
|
* 加载姑苏区三维图层
|
|
|
*/
|
|
|
initTilesetLayer() {
|
|
|
if (this.map) {
|
|
|
if (!this.mapLayer.tiles3dLayer) {
|
|
|
this.mapLayer.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(this.mapLayer.tiles3dLayer);
|
|
|
this.show3D = true;
|
|
|
} else {
|
|
|
this.mapLayer.tiles3dLayer.show = !this.mapLayer.tiles3dLayer.show;
|
|
|
this.show3D = !this.show3D;
|
|
|
}
|
|
|
} else {
|
|
|
}
|
|
|
},
|
|
|
// 绘制历史轨迹线 -- 起点坐标
|
|
|
async createLine() {
|
|
|
let result = await historyLine(this.queryParams);
|
|
|
this.Line = result.list;
|
|
|
|
|
|
const marker = new mars3d.graphic.BillboardEntity({
|
|
|
position: this.Line[0],
|
|
|
style: {
|
|
|
image: require("../assets/images/origin.png"),
|
|
|
scale: 1,
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
clampToGround: true,
|
|
|
pixelOffsetY: 5,
|
|
|
},
|
|
|
});
|
|
|
this.mapLayer.Line.addGraphic(marker);
|
|
|
const line = new mars3d.graphic.PolylineEntity({
|
|
|
positions: this.Line,
|
|
|
style: {
|
|
|
width: 10,
|
|
|
color: "#00F7AC",
|
|
|
outline: true,
|
|
|
outlineColor: "#008DF8",
|
|
|
outlineWidth: 5,
|
|
|
clampToGround: true,
|
|
|
},
|
|
|
});
|
|
|
this.mapLayer.Line.addGraphic(line);
|
|
|
const lastPoint = this.Line[this.Line.length - 1];
|
|
|
|
|
|
this.map.flyToPoint(
|
|
|
new mars3d.LngLatPoint(
|
|
|
parseFloat(lastPoint.lng),
|
|
|
parseFloat(lastPoint.lat)
|
|
|
)
|
|
|
);
|
|
|
},
|
|
|
|
|
|
//创建实时车辆漫游
|
|
|
createCar() {
|
|
|
const car = new mars3d.graphic.FixedRoute({
|
|
|
id: this.queryParams.carId,
|
|
|
name: "漫游对象",
|
|
|
// positions: [[parseFloat(lastPoint.lng), parseFloat(lastPoint.lat)]],
|
|
|
// camera: {
|
|
|
// type: "gs",
|
|
|
// heading: 0,
|
|
|
// radius: 3000,
|
|
|
// },
|
|
|
model: {
|
|
|
show: true,
|
|
|
url: this.carUrl,
|
|
|
scale: 0.5,
|
|
|
minimumPixelSize: 30,
|
|
|
silhouette: true,
|
|
|
silhouetteColor: "#FFB200",
|
|
|
pitch: 0,
|
|
|
roll: 0,
|
|
|
// heading: parseFloat(lastPoint.drct),
|
|
|
},
|
|
|
circle: {
|
|
|
radius: 200,
|
|
|
materialType: mars3d.MaterialType.CircleWave,
|
|
|
materialOptions: {
|
|
|
color: "#FFB200",
|
|
|
count: 2,
|
|
|
speed: 6,
|
|
|
},
|
|
|
},
|
|
|
polyline: {
|
|
|
width: 10,
|
|
|
color: "#00F7AC",
|
|
|
outline: true,
|
|
|
outlineColor: "#008DF8",
|
|
|
outlineWidth: 5,
|
|
|
clampToGround: true,
|
|
|
},
|
|
|
});
|
|
|
this.mapLayer.car.addGraphic(car);
|
|
|
// let res = await getCarIdInfo("1328CC51-C858-4FFA-8714-4F354BB49CF8");
|
|
|
// this.bindPopup(car, res.data);
|
|
|
// car.openPopup();
|
|
|
// car.start();
|
|
|
|
|
|
const interval = 15;
|
|
|
this.changePosition(interval);
|
|
|
// this.time = setInterval(() => {
|
|
|
// this.changePosition(interval);
|
|
|
// }, interval * 1000);
|
|
|
},
|
|
|
async changePosition(interval) {
|
|
|
let list = await this.carPoint();
|
|
|
let carItem = this.mapLayer.car.getGraphicById(this.queryParams.carId);
|
|
|
// carItem.model.heading = parseFloat(list[0].drct);
|
|
|
// console.log(carItem.model.heading, "sss");
|
|
|
//StyleOptions({
|
|
|
// heading:parseFloat(list[0].drct)
|
|
|
// })
|
|
|
let position = Cesium.Cartesian3.fromDegrees(
|
|
|
parseFloat(list[0].lng),
|
|
|
parseFloat(list[0].lat),
|
|
|
30
|
|
|
);
|
|
|
carItem.addDynamicPosition(position, interval);
|
|
|
},
|
|
|
/**获取车辆接口 */
|
|
|
async carPoint() {
|
|
|
let res = await getCarPoint({
|
|
|
carIds: this.queryParams.carId,
|
|
|
});
|
|
|
return res.list;
|
|
|
},
|
|
|
|
|
|
// 车辆弹窗
|
|
|
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="pointer"></div>
|
|
|
<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: 100,
|
|
|
// closeButton: false,
|
|
|
});
|
|
|
},
|
|
|
|
|
|
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}`;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.albuginea {
|
|
|
cursor: pointer;
|
|
|
position: absolute;
|
|
|
top: 103px;
|
|
|
|
|
|
left: calc(554px + 24px);
|
|
|
z-index: 100;
|
|
|
width: 80px;
|
|
|
height: 32px;
|
|
|
text-align: center;
|
|
|
line-height: 32px;
|
|
|
background: #032b57;
|
|
|
border-radius: 2px;
|
|
|
border: 1px solid #0084ff;
|
|
|
font-weight: 400;
|
|
|
font-size: 14px;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
.backBtn {
|
|
|
top: 145px;
|
|
|
}
|
|
|
.albuginea:hover {
|
|
|
background: #0084ff;
|
|
|
}
|
|
|
.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: 30px;
|
|
|
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>
|
