Skip to content

H
holo-web
Commit bc5d17ab authored by ninglx's avatar ninglx
Browse files
Options

大屏引入cesium&快捷键配置&事故场景布局&样式完善

parent d593d3f7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2809 additions and 196 deletions
wj-data-vision/public/index.html
View file @ bc5d17ab
......@@ -21,6 +21,8 @@
<link href="/cdn/libs/mapbox-gl/mapbox-gl.css" rel="stylesheet"/>
<script src="/cdn/libs/threebox/threebox.min.js" type="text/javascript"></script>
<link href="/cdn/libs/threebox/threebox.css" rel="stylesheet"/>
<link rel="stylesheet" href="/cdn/libs/Cesium/Widgets/widgets.css">
<script type="text/javascript" src="/cdn/libs/Cesium/Cesium.js"></script>
<script src="/cdn/libs/turf/turf.min.js" type="text/javascript"></script>
<script src="/cdn/libs/flvjs/flv.min.js" type="text/javascript"></script>
<script src='/cdn/libs/mapUtil/mapUtilsV3.js' type="text/javascript"></script>
......
wj-data-vision/src/components/Standard/cameraVideo.vue
View file @ bc5d17ab
<template>
<div class="cameraVideo" v-loading="loading" element-loading-text="视频加载中.."
<div :class="['cameraVideo',border?'cameraVideoBorder':'']" v-loading="loading" element-loading-text="视频加载中.."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<span v-show="border" class="top-left"></span>
<span v-show="border" class="top-right"></span>
<span v-show="border" class="bottom-left"></span>
<span v-show="border" class="bottom-right"></span>
<video
@loadstart="loadstart($event)"
@canplay="canplay($event)"
......@@ -12,7 +16,7 @@
<script>
export default {
name: "cameraVideo",
props: ["videoData", 'autoPlay'],
props: ["videoData", 'autoPlay','border'],
watch: {},
methods: {
canplay() {
......@@ -108,13 +112,57 @@ export default {
</script>
<style lang="less" scoped>
::v-deep .el-loading-mask{
top: 1px;
bottom: 1px;
left: 1px;
right: 1px;
}
.cameraVideo {
position: relative;
//position: relative;
.videoControl {
position: absolute;
height: 100%;
width: 100%;
}
}
.cameraVideoBorder{
border: 1px solid #022950;
}
.top-left{
position: absolute;
left: -1px;
top: -1px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
border-width: 2px 0 0 2px;
}
.top-right{
position: absolute;
right: -1px;
top: -1px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
border-width: 2px 2px 0 0;
}
.bottom-left{
position: absolute;
right: -1px;
bottom: -1px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
border-width: 0 2px 2px 0;
}
.bottom-right{
position: absolute;
left: -1px;
bottom: -1px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
border-width: 0 0 2px 2px;
}
</style>
wj-data-vision/src/components/Standard/cesiumMap.vue
View file @ bc5d17ab
......@@ -47,28 +47,28 @@ export default {
});
// tileset三维场景
const tileset = new Cesium.Cesium3DTileset({
// url:'http://121.36.99.212:35002/ABCEarth/examples/examples/assets/model/crossroad/dl/tileset.json',
url: 'http://10.102.1.180:9090/1111/tileset.json'
});
tileset.readyPromise.then((a) => {
console.log('a', a)
const position = Cesium.Cartesian3.fromDegrees(112.968200, 28.189658, 0)// 给的坐标 位置不对 需要转换？
// const position = Cesium.Cartesian3.fromDegrees(112.929960602617,28.2186568459113, 0)
/*
const heading = 45 // 绕X轴角度
const A = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(heading))
const rotationX = Cesium.Matrix4.fromRotationTranslation(A);
Cesium.Matrix4.multiply(mat, rotationX, mat)
*/
tileset.root.transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
}
)
viewer.scene.primitives.add(tileset)
viewer.zoomTo(tileset);
// const tileset = new Cesium.Cesium3DTileset({
// // url:'http://121.36.99.212:35002/ABCEarth/examples/examples/assets/model/crossroad/dl/tileset.json',
// url: 'http://10.102.1.180:9090/1111/tileset.json'
// });
// tileset.readyPromise.then((a) => {
// console.log('a', a)
// const position = Cesium.Cartesian3.fromDegrees(112.968200, 28.189658, 0)// 给的坐标 位置不对 需要转换？
// // const position = Cesium.Cartesian3.fromDegrees(112.929960602617,28.2186568459113, 0)
//
//
// /*
// const heading = 45 // 绕X轴角度
// const A = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(heading))
// const rotationX = Cesium.Matrix4.fromRotationTranslation(A);
// Cesium.Matrix4.multiply(mat, rotationX, mat)
// */
// tileset.root.transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
// }
// )
// viewer.scene.primitives.add(tileset)
//
// viewer.zoomTo(tileset);
viewer.cesiumWidget.creditContainer.style.display = "none"
......@@ -111,53 +111,53 @@ export default {
}
</script>
<style>
.cesium-viewer-timelineContainer {
z-index: 15;
left: 625px !important;
width: 1025px !important;
/*right: 260px !important;*/
bottom: 35px !important;
height: 40px !important;
}
/*.cesium-viewer-timelineContainer {*/
/* z-index: 15;*/
/* left: 625px !important;*/
/* width: 1025px !important;*/
/* !*right: 260px !important;*!*/
/* bottom: 35px !important;*/
/* height: 40px !important;*/
/*}*/
.cesium-timeline-bar {
height: 30px;
}
/*.cesium-timeline-bar {*/
/* height: 30px;*/
/*}*/
.cesium-timeline-main {
height: inherit;
}
/*.cesium-timeline-main {*/
/* height: inherit;*/
/*}*/
.cesium-timeline-trackContainer {
height: unset !important;
}
/*.cesium-timeline-trackContainer {*/
/* height: unset !important;*/
/*}*/
/* pop框css*/
.cesium-popup-panel {
opacity: 0.8;
/*width: 312px;*/
position: absolute;
z-index: 0;
/*color: #00fcf9;*/
/*background: rgba(23, 50, 108, 0.6);*/
/*border: 1px solid #4674d6;*/
}
/*!* pop框css*!*/
/*.cesium-popup-panel {*/
/* opacity: 0.8;*/
/* !*width: 312px;*!*/
/* position: absolute;*/
/* z-index: 0;*/
/* !*color: #00fcf9;*!*/
/* !*background: rgba(23, 50, 108, 0.6);*!*/
/* !*border: 1px solid #4674d6;*!*/
/*}*/
.cesium-popup-close-btn > svg:hover {
color: #00fcf9 !important;
}
/*.cesium-popup-close-btn > svg:hover {*/
/* color: #00fcf9 !important;*/
/*}*/
.cesium-popup-close-btn > svg {
display: none;
user-select: auto;
color: #4674d6;
cursor: pointer;
width: 15px;
/* height: 15px; */
}
/*.cesium-popup-close-btn > svg {*/
/* display: none;*/
/* user-select: auto;*/
/* color: #4674d6;*/
/* cursor: pointer;*/
/* width: 15px;*/
/* !* height: 15px; *!*/
/*}*/
.cesium-viewer {
position: unset;
}
/*.cesium-viewer {*/
/* position: unset;*/
/*}*/
</style>
wj-data-vision/src/components/Standard/map/index.vue
View file @ bc5d17ab
......@@ -21,6 +21,7 @@ export default {
},
methods: {
initMap() {
mapboxgl.accessToken = 'pk.eyJ1IjoibmluZ2x4IiwiYSI6ImNsYnlnM2s2ODBnNmIzcHBpbzY5aDh3bHAifQ.hQL4zLjBss5i4x-zuFp9tg'
map = new mapboxgl.Map({
container: this.mapId,
style: map_config.MAP_STYLE,
......
wj-data-vision/src/components/Standard/msg-card.vue
View file @ bc5d17ab
......@@ -90,10 +90,10 @@ export default {
padding: 6px;
//background-image: url('../../assets/images/holo/border.png');
background-size: 100% 100%;
margin: 10px 0 15px 0;
//margin: 10px 0 15px 0;
}
.msg-card-content {
height: calc(100% - 60px);
height: calc(100% - 45px);
}
.msg-card-content-noHeader {
height: 100%;
......
wj-data-vision/src/components/Standard/timeKeeper.vue
View file @ bc5d17ab
......@@ -47,7 +47,7 @@ export default {
},
},
computed: {},
beforeDestory() {
beforeDestroy() {
clearInterval(this.timer);
},
};
......
wj-data-vision/src/config/routes.js
View file @ bc5d17ab
......@@ -12,7 +12,8 @@ export default [
},
{
path: '/home',
component: (resolve) => require(['@/views/situation/index'], resolve),
// component: (resolve) => require(['@/views/home/index'], resolve),
component: (resolve) => require(['@/views/home/index'], resolve),
},
]
wj-data-vision/src/views/home/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-main">
<home1 v-if="currentView === 1"/>
<home2 v-if="currentView === 2"/>
<home3 v-if="currentView === 3"/>
<home4 v-if="currentView === 4"/>
<home5 v-if="currentView === 5"/>
<home6 v-if="currentView === 6"/>
</div>
</template>
<script>
import Home1 from "../home1/index.vue";
import Home2 from "../home2/index.vue";
import Home3 from "../home3/index.vue";
import Home4 from "../home4/index.vue";
import Home5 from "../home5/index.vue";
import Home6 from "../home6/index.vue";
export default {
name: "home",
components: {Home6, Home5, Home4, Home3, Home2, Home1},
computed: {},
data() {
return {
currentView: 1,
};
},
mounted() {
// 快捷键
window.onkeydown = () => {
console.log('event.keyCode',event.keyCode)
if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
this.currentView = 1
}
if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
this.currentView = 2
}
if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
this.currentView = 3
}
if (event.altKey && (event.keyCode === 52 || event.keyCode === 100)) {
this.currentView = 4
}
if (event.altKey && (event.keyCode === 53 || event.keyCode === 101)) {
this.currentView = 5
}
if (event.altKey && (event.keyCode === 54 || event.keyCode === 102)) {
this.currentView = 6
}
}
},
methods: {},
beforeDestroy() {},
};
</script>
<style lang='less' scoped>
.home-main{
position: relative;
height: 100%;
width: 100%;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/situation/crossDetail.vue → wj-data-vision/src/views/home1/crossDetail.vue
View file @ bc5d17ab
......@@ -1550,7 +1550,7 @@ export default {
},
},
computed: {},
beforeDestory() {
beforeDestroy() {
},
};
</script>
......
wj-data-vision/src/views/situation/equipmentSwitch.vue → wj-data-vision/src/views/home1/equipmentSwitch.vue
View file @ bc5d17ab
......@@ -63,7 +63,7 @@ export default {
},
},
computed: {},
beforeDestory() {},
beforeDestroy() {},
};
</script>
......
wj-data-vision/src/views/situation/layersSwitch.vue → wj-data-vision/src/views/home1/layersSwitch.vue
View file @ bc5d17ab
<template>
<div class="layersSwitch" :style="{ left: right }">
<div v-show="true" class="layerIcons">
<div v-show="false" class="layerIcons">
<div
class="item"
v-for="item of switchOptions"
......@@ -59,7 +59,7 @@ export default {
},
},
computed: {},
beforeDestory() {},
beforeDestroy() {},
};
</script>
......
wj-data-vision/src/views/situation/equipmentPopup.vue → wj-data-vision/src/views/home1/mapPopup/equipmentPopup.vue
View file @ bc5d17ab
......@@ -37,8 +37,8 @@
</template>
<script>
import dict from '../../config/holo/dictionary'
import CameraVideo from "../../components/Standard/cameraVideo.vue";
import dict from '../../../config/holo/dictionary'
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
export default {
name: "passerbyPopup",
......@@ -54,7 +54,7 @@ export default {
},
methods: {},
computed: {},
beforeDestory() {},
beforeDestroy() {},
};
</script>
......@@ -72,7 +72,7 @@ export default {
line-height: 55px;
padding-left: 12px;
color: white;
background:url('../../assets/images/holo/popupTop.png');
background:url('../../../assets/images/holo/popupTop.png');
background-size: 100%;
}
.main{
......@@ -84,7 +84,7 @@ export default {
margin-right: 18px;
width:130px;
min-width: 130px;
background:url('../../assets/images/holo/qietu/qietu4.png');
background:url('../../../assets/images/holo/qietu/qietu4.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
......@@ -118,7 +118,7 @@ export default {
.equip_camera{
width: 448px;
height: 328px;
background-image: url("../../assets/images/holo/videobackgorund.png");
background-image: url("../../../assets/images/holo/videobackgorund.png");
background-repeat: no-repeat;
background-size: 100% 100%;
.header{
......
wj-data-vision/src/views/situation/eventPopup.vue → wj-data-vision/src/views/home1/mapPopup/eventPopup.vue
View file @ bc5d17ab
......@@ -11,7 +11,7 @@
</template>
<script>
import dict from '../../config/holo/dictionary'
import dict from '../../../config/holo/dictionary'
export default {
name: "eventPopup",
props: ["model"],
......@@ -38,7 +38,7 @@ export default {
}
},
beforeDestory() {
beforeDestroy() {
},
};
</script>
......@@ -49,7 +49,7 @@ export default {
width: 281px;
height: 233px;
background-color: #0f2645;
background-image: url('../../assets/images/holo/eventbackground.png');
background-image: url('../../../assets/images/holo/eventbackground.png');
background-size: 100% 100%;
}
......@@ -77,7 +77,7 @@ export default {
height: 30px;
display: flex;
align-items: center;
background-image: url("../../assets/images/holo/vehicle_popup_arrow.png");
background-image: url("../../../assets/images/holo/vehicle_popup_arrow.png");
background-position-x: left;
background-position-y: center;
background-repeat: no-repeat;
......
wj-data-vision/src/views/situation/vehicleDetail.vue → wj-data-vision/src/views/home1/mapPopup/vehicleDetail.vue
View file @ bc5d17ab
......@@ -43,7 +43,7 @@
</template>
<script>
import dict from "../../config/holo/dictionary";
import dict from "../../../config/holo/dictionary";
export default {
name: "vehicleDetail",
data() {
......@@ -73,7 +73,7 @@ export default {
},
},
computed: {},
beforeDestory() {},
beforeDestroy() {},
};
</script>
......@@ -86,7 +86,7 @@ export default {
width: 216px;
//height: 207px;
padding: 2px 16px 6px 16px;
background: url("../../assets/images/holo/vehicle_popup_back.png");
background: url("../../../assets/images/holo/vehicle_popup_back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.head {
......@@ -102,7 +102,7 @@ export default {
height: 18px;
margin-right: 5px;
line-height: 25px;
background-image:url('../../assets/images/holo/vehicle_popup_icon.png');
background-image:url('../../../assets/images/holo/vehicle_popup_icon.png');
background-position: center;
background-repeat: no-repeat;
}
......@@ -129,7 +129,7 @@ export default {
text-align: left;
padding-left: 20px;
//width: 50%;
background-image: url("../../assets/images/holo/vehicle_popup_arrow.png");
background-image: url("../../../assets/images/holo/vehicle_popup_arrow.png");
background-size: auto;
background-repeat: no-repeat;
background-position: left;
......
wj-data-vision/src/views/situation/messageBoxes.vue → wj-data-vision/src/views/home1/messageBoxes.vue
View file @ bc5d17ab
......@@ -684,10 +684,10 @@ export default {
top: 0;
height: 100%;
display: flex;
width: 480px;
width: 521px;
flex-direction: column;
justify-content: space-evenly;
background-color: #030b19;
background-color: rgba(3, 11, 25,1);
.item {
flex: 0 0 32%;
......@@ -1177,8 +1177,8 @@ export default {
}
.map-mask {
width: calc(100% - 960px);
left: 480px;
width: calc(100% - 1042px);
left: 521px;
height: 100%;
position: absolute;
//transition: 1s all ease;
......
wj-data-vision/src/views/situation/trafficEventsTend.vue → wj-data-vision/src/views/home1/trafficEventsTend.vue
View file @ bc5d17ab
......@@ -215,7 +215,7 @@ export default {
dom.setOption(option);
},
},
beforeDestory() {},
beforeDestroy() {},
};
</script>
......
wj-data-vision/src/views/home2/MapPopup/vehicleDetail.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="vehicleDetail">
<div class="head">
<span></span>{{ model.picLicense }}
</div>
<div class="content">
<div class="detailItem">
<span class="left">速度：</span
>{{ model.speed }}
</div>
<div class="detailItem">
<span class="left">角度：</span
>{{ model.courseAngle }}
</div>
<div class="detailItem">
<span class="left">行为：</span
>{{ model.courseAngle }}
</div>
</div>
</div>
</template>
<script>
export default {
name: "vehicleDetail",
data() {
return {};
},
props: ["model"],
watch: {
model: {
handler(val) {
},
deep: true, // 深度监听
immediate: true, // 初次监听即执行
}
},
mounted() {
},
methods: {
},
computed: {},
beforeDestroy() {
},
};
</script>
<style lang="less" scoped>
.vehicleDetail {
font-size: 12px;
position: absolute;
width: 242px;
padding: 2px 16px 6px 16px;
background-image: url("../../../assets/images/acci/detail-back-origin.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.head {
height: 25px;
color: white;
display: flex;
align-items: center;
span {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 5px;
line-height: 25px;
background-image: url('../../../assets/images/holo/vehicle_popup_icon.png');
background-position: center;
background-repeat: no-repeat;
}
}
.content {
height: calc(100% - 25px);
display: flex;
padding-top: 12px;
flex-direction: column;
.detailItem {
height: 30px;
line-height: 30px;
white-space: nowrap;
color: white;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
span {
display: inline-block;
}
span.left {
text-align: left;
padding-left: 20px;
background-image: url("../../../assets/images/acci/arrow-origin.png");
background-size: auto;
background-repeat: no-repeat;
background-position: left;
color: rgba(207, 238, 255, 0.9);
}
span.right {
text-align: left;
color: white;
}
}
}
}
</style>
wj-data-vision/src/views/home2/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="main" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中.."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<WMap :mapId="'situation-map'" ref="wMap"/>
<home-left/>
<home-right/>
</div>
</template>
<script>
import Vue from "vue";
import {Popup} from "@antv/l7";
import mapAssets from "../../config/holo/mapAssets";
import WMap from "../../components/Standard/map/index.vue";
import HomeLeft from "./left/index.vue";
import HomeRight from "./right/index.vue";
import dict from "../../config/holo/dictionary";
import wsSource from "../../config/holo/wsSource";
import {initWs} from "../../config/holo/websocket";
import * as l7Tools from "./l7Tools";
import vehicleDetail from "./MapPopup/vehicleDetail.vue";
const VehiclePopup = Vue.extend(vehicleDetail)
let map,
scene,
vehicleModelTypes = [],
layers = {
vehicle: null,
license: null,
},
popups = {};
export default {
name: 'home2',
components: {
HomeRight,
HomeLeft,
WMap
},
props: {},
computed: {},
data() {
return {
loading: true,
vehicleModelsNum: 0,
wsSources: wsSource.source,
sockets: [],
currentLocation: [],
lastLocation: [],
bounds: '',
};
},
watch: {},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
init() {
[map, scene] = this.$refs.wMap.initMap();
scene.on("loaded", () => {
this.loading = false
this.sceneLoaded = true;
for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapAssets.mapIcons[key]);
}
// map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
});
scene.on('click', e => {
console.log(e)
})
scene.on("zoomend", (e) => {
this.refreshBounds()
});
scene.on('mapmove', () => {
this.refreshBounds()
})
scene.on('zoomchange', () => {
this.refreshBounds()
})
map.on('style.load', () => {
map.addLayer({
id: "vehicle3D",
type: "custom",
renderingMode: "3d",
onAdd: (map, mbxContext) => {
window.tb = new Threebox(map, mbxContext, {
defaultLights: true,
});
for (let key in dict.vehicleTypes) {
window.tb.loadObj({
obj: `gltf/car${key}.gltf`,
type: "gltf",
units: "meters",
adjustment: {x: 0.5, y: 1, z: -0.6},
cloned: true,
bbox: false,
}, (model) => {
vehicleModelTypes[`car${key}`] = model;
this.vehicleModelsNum += 1;
});
}
},
render: function (gl, matrix) {
window.tb.update();
},
});
setTimeout(() => {
this.initWebS();
}, 1500)
})
},
initWebS() {
this.refreshBounds()
if (this.loading) this.loading = false
// 注册车辆实时ws
this.regisAndSendWs("callCar", {
dataType: "1"
});
},
// 注册 websocket 并绑定回调事件
regisAndSendWs(name, sendData) {
for (let socket of this.sockets) {
if (socket.name === name) {
if (socket.ws.readyState === 1) {
return; // 已注册
}
}
}
for (let item of this.wsSources) {
if (item.name === name) {
item.sendData = JSON.stringify(sendData);
let current = initWs(item);
current.ws.onmessage = (e) => this[item.name](JSON.parse(e.data));
this.sockets.push(current);
}
}
},
// 更新经纬度-角度-详细信息
setModel(model, options, setColor) {
if (setColor) {
model.traverse((child) => {
if (child.isMesh && child.name.includes("_19")) {
child.material = child.material.clone();
child.material.color.set(
dict.vehicleRealColors[options.originalColor]
);
}
});
}
model.userData.data = !model.userData.data
? options
: Object.assign({}, options, {
longitude: model.userData.data.longitude,
latitude: model.userData.data.latitude,
});
// 加判断防止距离过近模型抖动
if (
turf.distance(
[model.userData.data.longitude, model.userData.data.latitude],
[options.longitude, options.latitude],
{units: "kilometers"}
) > 0.0005 ||
options.dill === "add"
) {
model.setCoords([options.longitude, options.latitude]);
model.userData.data = options;
model.setRotation({x: 90, y: 360 - options.courseAngle - 90, z: 0});
}
},
// 根据处理后的数组新增-删除-更新模型 新增-更新详情弹窗
addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) {
for (let item of allData) {
// 交通事故车辆popup标注&更新
if (item.isAccident) { // todo: 参与交通事件的车辆特殊字段
// 新建
if (!popups[`${item.id}`]) {
popups[`${item.id}`] = new Popup({
offsets: [-100, 280],
closeButton: false,
closeButtonOffsets: [-200, 17]
})
.setLngLat([item.longitude, item.latitude])
.setHTML(`<div id="vehicle_popup${item.id}"></div>`)
scene.addPopup(popups[`${item.id}`]);
new VehiclePopup({
propsData: {
model: item,
},
}).$mount(`#vehicle_popup${item.id}`);
}
// 更新
else {
popups[`${item.id}`].setLngLat([item.longitude, item.latitude])
}
}
// 新增
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data.id === item.id) {
if (item.dill === 'del') {
window.tb.clear(item.id, true)
}
if (item.dill === 'com') {
this.setModel(window.tb.world.children[i], item, false);
}
}
}
}
}
}
},
refreshBounds() {
let bounds = map.getBounds();
let leftDownXy = [bounds._sw.lng, bounds._sw.lat];
let rightUpXy = [bounds._ne.lng, bounds._ne.lat];
let mid1 = [bounds._sw.lng, bounds._ne.lat]
let mid2 = [bounds._ne.lng, bounds._sw.lat]
this.bounds = [[[leftDownXy, mid1, rightUpXy, mid2, leftDownXy]]];
},
callCar(msg) {
let start = performance.now();
for (let i = 0; i < msg.length; i++) {
if (!msg[i].picLicense) {
msg[i].picLicense = ''
}
let pt = turf.point([msg[i].longitude, msg[i].latitude]);
let poly = turf.polygon(this.bounds[0]);
if (!turf.booleanPointInPolygon(pt, poly)) {
msg.splice(i, 1)
i = i - 1
}
}
if (this.sceneLoaded && msg.length > 0) {
// 第一帧 || 时间戳不相同则放行
if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) {
// 显示3D车辆
this.currentLocation = msg;
let allData = this.diff(this.lastLocation, this.currentLocation);
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
// 添加车牌号图层
if (!layers.license) {
layers.license = l7Tools.addLicenseLayer(scene, msg);
} else {
layers.license.setData(msg);
}
}
}
let end = performance.now();
// console.log('cost is', `${end - start}ms`)
},
// 根据 name 关闭 websocket 不传参则全部关闭
closeWs(name) {
if (name) {
for (let key in this.sockets) {
if (this.sockets[key].name === name) {
this.sockets[key].ws.close();
this.sockets.splice(key, 1);
}
}
} else {
for (let socket of this.sockets) {
socket.ws && socket.ws.close();
}
this.sockets = [];
}
},
},
beforeDestroy() {
this.closeWs();
scene = null;
map = null
},
};
</script>
<style lang='less' scoped>
.main {
height: 100%;
position: relative;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home2/l7Tools.js 0 → 100644
View file @ bc5d17ab
import {PointLayer, RasterLayer, LineLayer, HeatmapLayer, PolygonLayer} from '@antv/l7'
// 停止线
export function addCrossLine(scene, msg) {
let layer = new LineLayer()
.source(msg)
.size(4)
.shape('line')
.color('#f00')
scene.addLayer(layer)
return layer
}
// 车牌号图层
export function addLicenseLayer(scene, msg) {
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.shape('picLicense', 'text')
// .shape('originalType', 'text')
.size(9)
.style({
textAllowOverlap: true,
raisingHeight: 10,
stroke: '#01309b',
strokeWidth: 2,
halo: 1,
})
.color('#ffffff')
.on('contextmenu', (e) => {
const input = document.createElement('input')
input.setAttribute('readonly', 'readonly')
input.setAttribute('value', e.feature.id)
document.body.appendChild(input)
input.setSelectionRange(0, 9999)
input.select()
document.execCommand('copy')
document.body.removeChild(input)
ELEMENT.Message('复制ID成功！')
})
scene.addLayer(pointLayer)
return pointLayer
}
// 车辆圆点图层
export function addVehicleLayer(scene, msg) {
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.shape('circle')
.style({
blur: 1,
})
.size(6)
.color('#06f4fe')
scene.addLayer(pointLayer)
return pointLayer
}
// 路况栅格图层
export function addRoadRasterLayer(scene, url) {
const layer = new RasterLayer().source(url, {
parser: {
type: 'rasterTile',
tileSize: 256,
},
})
scene.addLayer(layer)
return layer
}
// 等待行人数量文本图层
export function addPasserbyText(scene, msg) {
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'x',
y: 'y',
},
})
.shape('text', 'text')
.size(10)
.style({
raisingHeight: 32,
textAllowOverlap: true,
stroke: 'red',
strokeWidth: 1,
})
.color('white')
scene.addLayer(pointLayer)
return pointLayer
}
// 路口图层
export function addCrossPoint(scene, msg, offset, callback) {
for (let i = 0; i < msg.length; i++) {
if (msg[i].isSignal === 0) continue;
if (!msg[i].isSignal) {
msg[i].isSignal = 1
}
}
const pointLayer = new PointLayer({zIndex: 2})
.source(msg, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.style({
offsets: offset,
})
.shape('isSignal', function (level) {
if (level === 1) {
return 'cross'
}
if (level === 0) {
return 'crossFalse'
}
})
.size(16)
.active({
color: '#ffffff',
mix: 0.6,
})
.on('click', (e) => {
callback(e)
})
scene.addLayer(pointLayer)
return pointLayer
}
// 路口名称图层
export function addCrossDetailPoint(scene, msg) {
const pointLayer = new PointLayer({zIndex: 3})
.source(msg, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.style({
textAllowOverlap: true,
raisingHeight: 0,
stroke: '#01309b',
strokeWidth: 2,
halo: 1,
})
.color('#ffffff')
.shape('name', 'text')
.size(12)
// .active(true)
scene.addLayer(pointLayer)
return pointLayer
}
// 天交通事件点图 && 热力图
export function addTrafficEventPoint1(scene, msg, callback) {
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.style({
offsets: [0, 0], raisingHeight: 10,
})
.shape('event')
.size(12)
.on('click', (e) => {
callback(e)
})
scene.addLayer(pointLayer)
return pointLayer
}
export function addTrafficEventPoint1Heat(scene, msg) {
const layer = new HeatmapLayer({})
.source(msg, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('heatmap')
.style({
intensity: 2,
radius: 20,
rampColors: {
colors: [
'rgba(253, 108, 3,1)',
'rgba(252, 145, 3,0.9)',
'rgba(190, 236, 68,0.9)',
'rgba(83, 231, 169,0.8)',
'rgba(36, 239, 219,0.7)',
'rgba(38, 233, 251,0.2)',
].reverse(),
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
})
scene.addLayer(layer)
return layer
}
// 周交通事件热力图
export function addTrafficEventPoint2(scene, msg) {
const layer = new HeatmapLayer({})
.source(msg, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('heatmap')
.style({
intensity: 2,
radius: 20,
rampColors: {
colors: [
'rgba(253, 108, 3,1)',
'rgba(252, 145, 3,0.9)',
'rgba(190, 236, 68,0.9)',
'rgba(83, 231, 169,0.8)',
'rgba(36, 239, 219,0.7)',
'rgba(38, 233, 251,0.2)',
].reverse(),
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
})
scene.addLayer(layer)
return layer
}
// 月交通事件热力图
export function addTrafficEventPoint3(scene, msg) {
const layer = new HeatmapLayer({})
.source(msg, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('heatmap')
.style({
intensity: 2,
radius: 20,
rampColors: {
colors: [
'rgba(253, 108, 3,1)',
'rgba(252, 145, 3,0.9)',
'rgba(190, 236, 68,0.9)',
'rgba(83, 231, 169,0.8)',
'rgba(36, 239, 219,0.7)',
'rgba(38, 233, 251,0.2)',
].reverse(),
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
})
scene.addLayer(layer)
return layer
}
// 设备图层 ---
export function addEquipmentMilli(scene, msg, callback) {
msg.map(item => {
item.x = item.wkt.split(',')[0]
item.y = item.wkt.split(',')[1]
})
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'x',
y: 'y',
},
})
.style({
offsets: [0, 20],
})
.shape('milli')
.size(20)
.on('click', (e) => {
callback(e)
})
scene.addLayer(pointLayer)
return pointLayer
}
export function addEquipmentLaser(scene, msg, callback) {
msg.map(item => {
item.x = item.wkt.split(',')[0]
item.y = item.wkt.split(',')[1]
})
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'x',
y: 'y',
},
})
.style({
offsets: [0, 20],
})
.shape('laser')
.size(20)
.on('click', (e) => {
callback(e)
})
scene.addLayer(pointLayer)
return pointLayer
}
export function addEquipmentWeather(scene, msg, callback) {
msg.map(item => {
item.x = item.wkt.split(',')[0]
item.y = item.wkt.split(',')[1]
})
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'x',
y: 'y',
},
})
.style({
offsets: [0, 20],
})
.shape('weather')
.size(20)
.on('click', (e) => {
callback(e)
})
scene.addLayer(pointLayer)
return pointLayer
}
export function addEquipmentCamera(scene, msg, callback) {
msg.map(item => {
item.x = item.wkt.split(',')[0]
item.y = item.wkt.split(',')[1]
})
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'x',
y: 'y',
},
})
.style({
offsets: [0, 20],
})
.shape('camera')
.size(20)
.on('click', (e) => {
callback(e)
})
scene.addLayer(pointLayer)
return pointLayer
}
export function addEquipmentSign(scene, msg, callback) {
msg.map(item => {
item.x = item.wkt.split(',')[0]
item.y = item.wkt.split(',')[1]
})
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'x',
y: 'y',
},
})
.style({
offsets: [0, 20],
})
.shape('sign')
.size(20)
.on('click', (e) => {
callback(e)
})
scene.addLayer(pointLayer)
return pointLayer
}
// ------------
export function addSignalCross(scene, msg, callback) {
const pointLayer = new PointLayer({zIndex: 2})
.source(msg, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.style({
offsets: [0, 0],
})
.shape('cross')
.size(12)
.active(true)
.on('click', callback)
scene.addLayer(pointLayer)
return pointLayer
}
export function addSignalRoad(scene, msg, callback) {
console.log('msg', msg)
const lineLayer = new PolygonLayer({zIndex: 1})
.source(msg)
.style({
opacity: 0.4,
})
.active(true)
.shape('fill')
.size(2)
.color('#F39800')
.on('click', callback)
scene.addLayer(lineLayer)
return lineLayer
}
wj-data-vision/src/views/home2/left/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-left">
<div class="topI">
<msg-card title="事故现场监控">
<div class="videos">
<camera-video class="videoItem" v-for="item of 4" :video-data="item"/>
<span class="top-left"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-right"></span>
</div>
</msg-card>
</div>
<div class="bottomI">
<div class="analysis">
<msg-card class="m-b-10" title="事件辅助定责">
<div class="msgTitle">
<span></span> 实时分析
</div>
<div class="timeMsg">
<i class="el-icon-time"/>疑似事故检测时长：<span>38.16s</span>
</div>
<div class="customTable">
<div class="row" v-for="item of rows">
<div class="col col-label" :class="[item.value.length>25?'longT':'']">{{ item.label }}</div>
<div class="col col-value" :class="[item.value.length>25?'longT':'']">{{ item.value }}</div>
</div>
</div>
</msg-card>
<msg-card title="交通影响报告">
<div class="msgTitle">
<span></span> 影响评估
</div>
<div class="cTable">
<el-row class="row1">
<el-col class="col deep" :span="5">涉事地点</el-col>
<el-col class="col" :span="9">
<span :class="[index === locationVal ? 'span-check':'']"
v-for="(item, index) of location">{{ item }}</span>
</el-col>
<el-col class="col deep" :span="4">涉事车辆</el-col>
<el-col class="col" :span="6">
<span :class="[index === isMultiVal ? 'span-check':'']"
v-for="(item, index) of isMulti">{{ item }}</span>
</el-col>
</el-row>
<el-row class="row1">
<el-col class="col deep" :span="5">涉事时段</el-col>
<el-col class="col" :span="9">
<span :class="[index === timeTypeVal ? 'span-check':'']"
v-for="(item, index) of timeType">{{ item }}</span>
</el-col>
<el-col class="col deep" :span="4">涉事行人</el-col>
<el-col class="col" :span="6">
<span :class="[index === haveWalkerVal ? 'span-check':'']"
v-for="(item, index) of haveWalker">{{ item }}</span>
</el-col>
</el-row>
<el-row class="row1">
<el-col class="col deep" :span="5">涉事非机动车</el-col>
<el-col class="col" :span="19">
<span :class="[index === haveNoVehicleVal ? 'span-check':'']"
v-for="(item, index) of haveNoVehicle">{{ item }}</span>
</el-col>
</el-row>
</div>
<div class="msgTitle">
<span></span> 影响程度
</div>
<div class="gradiantPoint">
<div v-for="item of 10" :class="[`point${item}`]" class="pointItem">
<div v-show="item===arrowIndex" class="arrow-down"></div>
</div>
</div>
</msg-card>
</div>
</div>
</div>
</template>
<script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
import MsgCard from "../../../components/Standard/msg-card.vue";
export default {
name: "homeLeft",
components: {MsgCard, CameraVideo},
computed: {},
data() {
return {
location: ['路口', '路段', '高架桥'],
locationVal: 1,
isMulti: ['单车', '多车'],
isMultiVal: 1,
timeType: ['早高峰', '平峰', '晚高峰', '夜间'],
timeTypeVal: 1,
haveWalker: ['有', '无'],
haveWalkerVal: 1,
haveNoVehicle: ['有', '无'],
haveNoVehicleVal: 1,
arrowIndex: 2,
rows: [
{label: '事故时间', value: '2022-09-18 05:26:46'},
{label: '事故地点', value: '港东大街与迎春大街路口东向 直行车道'},
{label: '事故描述', value: '疑似多车事故：鲁YBZ796与鲁KF1F97，从不同方向进入路口，行驶路线发生冲突，导致事故。'},
{label: '定责建议', value: '港东大街与迎春大街路口东向 直行车道'},
{label: '辅助信息', value: '鲁YBZ796 疑似侧碰鲁 鲁KC1F97'},
],
};
},
mounted() {
},
methods: {},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
.cTable {
font-size: 16px;
border-top: 1px solid rgba(62, 108, 150, 1);
border-left: 1px solid rgba(62, 108, 150, 1);
margin-bottom: 7px;
.row1 {
height: 30px;
width: 100%;
.col {
display: flex;
align-items: center;
height: 100%;
border-bottom: 1px solid rgba(62, 108, 150, 1);
border-right: 1px solid rgba(62, 108, 150, 1);
span {
display: inline-block;
height: 20px;
padding: 0 3px;
line-height: 20px;
font-size: 14px;
margin-left: 3px;
border: 1px solid rgba(5, 122, 255, 0);
border-radius: 8px;
}
.span-check {
border: 1px solid rgba(5, 122, 255, 1);
}
}
.deep {
justify-content: center;
background-color: rgba(46, 119, 255, 0.15);
}
}
}
.customTable {
color: white;
width: 100%;
font-size: 16px;
border-top: 1px solid rgba(62, 108, 150, 1);
border-left: 1px solid rgba(62, 108, 150, 1);
.row {
display: flex;
width: 100%;
.col {
border-bottom: 1px solid rgba(62, 108, 150, 1);
border-right: 1px solid rgba(62, 108, 150, 1);
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.longT {
height: 45px;
}
.col-label {
width: 20%;
background-color: rgba(46, 119, 255, 0.15);
}
.col-value {
width: 80%;
padding: 0 20px;
justify-content: flex-start;
background-color: transparent;
}
}
}
.top-left {
position: absolute;
left: -1px;
top: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 2px 0 0 2px;
}
.top-right {
position: absolute;
right: -1px;
top: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 2px 2px 0 0;
}
.bottom-left {
position: absolute;
right: -1px;
bottom: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 0 2px 2px 0;
}
.bottom-right {
position: absolute;
left: -1px;
bottom: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 0 0 2px 2px;
}
.msgTitle {
font-size: 18px;
font-weight: 700;
color: white;
display: flex;
align-items: center;
margin-bottom: 5px;
span {
display: inline-block;
width: 12px;
height: 12px;
border: 3px solid #0d7fd7;
rotate: 45deg;
margin-right: 8px;
}
}
.home-left {
position: absolute;
left: 0;
top: 0;
color: white;
height: 100%;
width: 668px;
background-color: rgba(3, 11, 25, 0.45);
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.57) 0%, rgba(0, 0, 0, 0.01) 26.39%);
padding: 15px 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
.topI {
height: 385px;
margin-bottom: 15px;
.videos {
display: flex;
justify-content: space-between;
align-content: space-between;
align-items: stretch;
position: relative;
flex-flow: row wrap;
height: 100%;
.videoItem {
width: 49%;
height: 49%;
position: relative;
}
}
}
.bottomI {
flex: 1;
.analysis {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.timeMsg {
height: 30px;
line-height: 30px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 7px;
font-size: 18px;
span {
font-weight: 700;
}
.el-icon-time {
margin-right: 5px;
}
}
.gradiantPoint {
display: flex;
margin-top: 30px;
padding: 0 20px;
justify-content: space-between;
overflow: visible;
.pointItem {
width: 10px;
height: 18px;
position: relative;
border-radius: 4px;
.arrow-down {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -28px;
width: 31px;
height: 33px;
background-image: url("../../../assets/images/acci/arrow-down.png");
background-position: center;
}
}
.point1 {
background-color: #1afd9c;
}
.point2 {
background-color: #28fd28;
}
.point3 {
background-color: #f4fa01;
}
.point4 {
background-color: #fdc616;
}
.point5 {
background-color: #ff972a;
}
.point6 {
background-color: #ef7923;
}
.point7 {
background-color: #de5a1a;
}
.point8 {
background-color: #cd3d12;
}
.point9 {
background-color: #bd2009;
}
.point10 {
background-color: #ac0100;
}
}
}
}
}
.m-b-10 {
margin-bottom: 10px;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home2/right/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-right">
<msg-card title="事故现场监控">
<div class="cardInner">
<div class="top">
<span class="top-left"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-right"></span>
<!-- <cesium-map class="cesium-map" ref="homeRightTop" c-id="home-right-top"/>-->
<camera-video class="full-h" :video-data="''"/>
</div>
<div class="bottom">
<span class="top-left"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-right"></span>
<camera-video class="full-h" :video-data="''"/>
<!-- <cesium-map class="cesium-map" ref="homeRightBottom" c-id="home-right-bottom"/>-->
</div>
</div>
</msg-card>
</div>
</template>
<script>
import CesiumMap from "../../../components/Standard/cesiumMap.vue";
import MsgCard from "../../../components/Standard/msg-card.vue";
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
let topViewer, bottomViewer;
export default {
name: "homeRight",
components: {CameraVideo, MsgCard, CesiumMap},
computed: {},
data() {
return {};
},
mounted() {
// topViewer = this.$refs.homeRightTop.loadMap()
// bottomViewer = this.$refs.homeRightBottom.loadMap()
// topViewer.timeline.container.style.visibility = 'hidden'
// bottomViewer.timeline.container.style.visibility = 'hidden'
},
methods: {
},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
.full-h{
height: 100%;
}
::v-deep .content {
margin: 0
}
::v-deep .msg-card-content {
}
.top-left {
position: absolute;
left: -1px;
top: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 3px 0 0 3px;
}
.top-right {
position: absolute;
right: -1px;
top: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 3px 3px 0 0;
}
.bottom-left {
position: absolute;
right: -1px;
bottom: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 0 3px 3px 0;
}
.bottom-right {
position: absolute;
left: -1px;
bottom: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 0 0 3px 3px;
}
.home-right {
position: absolute;
right: 0;
top: 0;
padding: 15px 25px;
height: 100%;
width: 668px;
background-color: rgba(3, 11, 25, 0.45);
background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.57) 0%, rgba(0, 0, 0, 0.01) 26.39%);
.cardInner {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%
}
.top {
height: 49%;
padding: 13px;
position: relative;
border: 1px solid rgba(24, 144, 255, 0.4);
}
.bottom {
height: 49%;
padding: 13px;
border: 1px solid rgba(24, 144, 255, 0.4);
position: relative;
}
.cesium-map {
height: 100%;
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home2/right/indexbak.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-right">
<msg-card title="事故现场监控">
<div class="cardInner">
<div class="top">
<span class="top-left"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-right"></span>
<cesium-map class="cesium-map" ref="homeRightTop" c-id="home-right-top"/>
</div>
<div class="bottom">
<span class="top-left"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-right"></span>
<cesium-map class="cesium-map" ref="homeRightBottom" c-id="home-right-bottom"/>
</div>
</div>
</msg-card>
</div>
</template>
<script>
import CesiumMap from "../../../components/Standard/cesiumMap.vue";
import MsgCard from "../../../components/Standard/msg-card.vue";
let topViewer, bottomViewer;
export default {
name: "homeRight",
components: {MsgCard, CesiumMap},
computed: {},
data() {
return {};
},
mounted() {
topViewer = this.$refs.homeRightTop.loadMap()
bottomViewer = this.$refs.homeRightBottom.loadMap()
topViewer.timeline.container.style.visibility = 'hidden'
bottomViewer.timeline.container.style.visibility = 'hidden'
this.$nextTick(() => {
this.playTracks()
})
},
methods: {
playTracks(){
topViewer.entities.removeAll()
let msg = []
// 起始时间
let start = Cesium.JulianDate.fromDate(new Date(msg[0].timeStamp));
// 结束时间
let stop = Cesium.JulianDate.fromDate(new Date(msg[msg.length - 1].timeStamp));
// 设置始时钟始时间
topViewer.timeline.zoomTo(start, stop);
topViewer.clock.startTime = start.clone();
// 设置时钟当前时间
topViewer.clock.currentTime = start.clone();
// 设置始终停止时间
topViewer.clock.stopTime = stop.clone();
// 时间速率，数字越大时间过的越快
topViewer.clock.multiplier = 1;
topViewer.clock.shouldAnimate = true
// 循环执行,即为2，到达终止时间，重新从起点时间开始
topViewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
this.currentEntity = this.addEntityProperty({
topViewer: topViewer,
data: msg,
type: rowData.type,
color: rowData.color,
lineColor: rowData.color,
start: start,
stop: stop,
pos: true,
ori: true,
speed: true,
angle: true,
path: true
})
}
},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
::v-deep .content {
margin: 0
}
::v-deep .msg-card-content {
}
.top-left {
position: absolute;
left: -1px;
top: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 3px 0 0 3px;
}
.top-right {
position: absolute;
right: -1px;
top: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 3px 3px 0 0;
}
.bottom-left {
position: absolute;
right: -1px;
bottom: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 0 3px 3px 0;
}
.bottom-right {
position: absolute;
left: -1px;
bottom: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 0 0 3px 3px;
}
.home-right {
position: absolute;
right: 0;
top: 0;
padding: 15px 25px;
height: 100%;
width: 668px;
background-color: rgba(3, 11, 25, 0.45);
background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.57) 0%, rgba(0, 0, 0, 0.01) 26.39%);
.cardInner {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%
}
.top {
height: 49%;
padding: 13px;
position: relative;
border: 1px solid rgba(24, 144, 255, 0.4);
}
.bottom {
height: 49%;
padding: 13px;
border: 1px solid rgba(24, 144, 255, 0.4);
position: relative;
}
.cesium-map {
height: 100%;
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home3/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="main" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中.."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<WMap :mapId="'situation-map'" ref="wMap"/>
<home-left/>
<home-right/>
</div>
</template>
<script>
import mapAssets from "../../config/holo/mapAssets";
import WMap from "../../components/Standard/map/index.vue";
import HomeLeft from "./left/index.vue";
import HomeRight from "./right/index.vue";
let map,
scene;
export default {
name:'home3',
components: {
HomeRight,
HomeLeft,
WMap
},
props: {},
computed: {},
data() {
return {
loading:true,
};
},
watch: {
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
init() {
[map, scene] = this.$refs.wMap.initMap();
scene.on("loaded", () => {
// window.onkeydown = function () {
// let center = map_config.MAP_CENTER
// if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
// map.flyTo({
// zoom: map_config.MAP_ZOOM,
// center: center
// })
// }
// if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
// map.flyTo({
// zoom: 17.17,
// center: [120.62601176446981, 31.422352253327617]
// })
// }
// if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
// map.flyTo({
// zoom: 19.26,
// center: center
// })
// }
// }
this.loading = false
this.sceneLoaded = true;
for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapAssets.mapIcons[key]);
}
// map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
});
scene.on('click', e => {
console.log(e)
})
},
},
beforeDestroy() {
scene = null;
map = null
},
};
</script>
<style lang='less' scoped>
.main{
height: 100%;
position: relative;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home3/left/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-left">
<div class="topI">
<div class="videos">
<camera-video class="videoItem" v-for="item of 4" :video-data="item" :border="true"/>
</div>
</div>
<div class="bottomI">
<div class="analysis">
<div class="analysisItem"></div>
<div class="analysisItem"></div>
</div>
</div>
</div>
</template>
<script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
export default {
name: "homeLeft",
components: {CameraVideo},
computed: {},
data() {
return {};
},
mounted() {},
methods: {},
beforeDestroy() {},
};
</script>
<style lang='less' scoped>
.home-left{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 521px;
background-color: #0d7fd7;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
.topI{
flex: 0 0 48%;
background-color: #0a5b85;
.videos{
display: flex;
flex-flow: row wrap;
height: 100%;
.videoItem{
width: 50%;
height: 50%;
position: relative;
}
}
}
.bottomI{
flex: 0 0 48%;
background-color: #1dce92;
.analysis{
height: 100%;
display: flex;
justify-content: space-between;
.analysisItem{
background-color: #0a5b85;
width: 48%;
height: 100%;
}
}
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home3/right/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-right">
<div class="top">
<cesium-map class="cesium-map" ref="homeRightTop" c-id="home-right-top"/>
</div>
<div class="bottom">
<cesium-map class="cesium-map" ref="homeRightBottom" c-id="home-right-bottom"/>
</div>
</div>
</template>
<script>
import CesiumMap from "../../../components/Standard/cesiumMap.vue";
let topViewer, bottomViewer;
export default {
name: "homeRight",
components: {CesiumMap},
computed: {},
data() {
return {};
},
mounted() {
topViewer = this.$refs.homeRightTop.loadMap()
bottomViewer = this.$refs.homeRightBottom.loadMap()
},
methods: {},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
.home-right {
position: absolute;
right: 0;
top: 0;
padding: 30px;
height: 100%;
width: 521px;
background-color: #0d7fd7;
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
height: 48%;
background-color: #0a5b85;
}
.bottom {
height: 48%;
background-color: #1dce92;
}
.cesium-map{
height: 100%;
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home4/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="main" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中.."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<WMap :mapId="'situation-map'" ref="wMap"/>
<home-left/>
<home-right/>
</div>
</template>
<script>
import mapAssets from "../../config/holo/mapAssets";
import WMap from "../../components/Standard/map/index.vue";
import HomeLeft from "./left/index.vue";
import HomeRight from "./right/index.vue";
let map,
scene;
export default {
name:'home4',
components: {
HomeRight,
HomeLeft,
WMap
},
props: {},
computed: {},
data() {
return {
loading:true,
};
},
watch: {
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
init() {
[map, scene] = this.$refs.wMap.initMap();
scene.on("loaded", () => {
// window.onkeydown = function () {
// let center = map_config.MAP_CENTER
// if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
// map.flyTo({
// zoom: map_config.MAP_ZOOM,
// center: center
// })
// }
// if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
// map.flyTo({
// zoom: 17.17,
// center: [120.62601176446981, 31.422352253327617]
// })
// }
// if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
// map.flyTo({
// zoom: 19.26,
// center: center
// })
// }
// }
this.loading = false
this.sceneLoaded = true;
for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapAssets.mapIcons[key]);
}
// map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
});
scene.on('click', e => {
console.log(e)
})
},
},
beforeDestroy() {
scene = null;
map = null
},
};
</script>
<style lang='less' scoped>
.main{
height: 100%;
position: relative;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home4/left/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-left">
<div class="topI">
<div class="videos">
<camera-video class="videoItem" v-for="item of 4" :video-data="item" :border="true"/>
</div>
</div>
<div class="bottomI">
<div class="analysis">
<div class="analysisItem"></div>
<div class="analysisItem"></div>
</div>
</div>
</div>
</template>
<script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
export default {
name: "homeLeft",
components: {CameraVideo},
computed: {},
data() {
return {};
},
mounted() {},
methods: {},
beforeDestroy() {},
};
</script>
<style lang='less' scoped>
.home-left{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 521px;
background-color: #0d7fd7;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
.topI{
flex: 0 0 48%;
background-color: #0a5b85;
.videos{
display: flex;
flex-flow: row wrap;
height: 100%;
.videoItem{
width: 50%;
height: 50%;
position: relative;
}
}
}
.bottomI{
flex: 0 0 48%;
background-color: #1dce92;
.analysis{
height: 100%;
display: flex;
justify-content: space-between;
.analysisItem{
background-color: #0a5b85;
width: 48%;
height: 100%;
}
}
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home4/right/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-right">
<div class="top">
<cesium-map class="cesium-map" ref="homeRightTop" c-id="home-right-top"/>
</div>
<div class="bottom">
<cesium-map class="cesium-map" ref="homeRightBottom" c-id="home-right-bottom"/>
</div>
</div>
</template>
<script>
import CesiumMap from "../../../components/Standard/cesiumMap.vue";
let topViewer, bottomViewer;
export default {
name: "homeRight",
components: {CesiumMap},
computed: {},
data() {
return {};
},
mounted() {
topViewer = this.$refs.homeRightTop.loadMap()
bottomViewer = this.$refs.homeRightBottom.loadMap()
},
methods: {},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
.home-right {
position: absolute;
right: 0;
top: 0;
padding: 30px;
height: 100%;
width: 521px;
background-color: #0d7fd7;
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
height: 48%;
background-color: #0a5b85;
}
.bottom {
height: 48%;
background-color: #1dce92;
}
.cesium-map{
height: 100%;
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home5/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="main" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中.."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<WMap :mapId="'situation-map'" ref="wMap"/>
<home-left/>
<home-right/>
</div>
</template>
<script>
import mapAssets from "../../config/holo/mapAssets";
import WMap from "../../components/Standard/map/index.vue";
import HomeLeft from "./left/index.vue";
import HomeRight from "./right/index.vue";
let map,
scene;
export default {
name:'home5',
components: {
HomeRight,
HomeLeft,
WMap
},
props: {},
computed: {},
data() {
return {
loading:true,
};
},
watch: {
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
init() {
[map, scene] = this.$refs.wMap.initMap();
scene.on("loaded", () => {
// window.onkeydown = function () {
// let center = map_config.MAP_CENTER
// if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
// map.flyTo({
// zoom: map_config.MAP_ZOOM,
// center: center
// })
// }
// if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
// map.flyTo({
// zoom: 17.17,
// center: [120.62601176446981, 31.422352253327617]
// })
// }
// if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
// map.flyTo({
// zoom: 19.26,
// center: center
// })
// }
// }
this.loading = false
this.sceneLoaded = true;
for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapAssets.mapIcons[key]);
}
// map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
});
scene.on('click', e => {
console.log(e)
})
},
},
beforeDestroy() {
scene = null;
map = null
},
};
</script>
<style lang='less' scoped>
.main{
height: 100%;
position: relative;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home5/left/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-left">
<div class="topI">
<div class="videos">
<camera-video class="videoItem" v-for="item of 4" :video-data="item" :border="true"/>
</div>
</div>
<div class="bottomI">
<div class="analysis">
<div class="analysisItem"></div>
<div class="analysisItem"></div>
</div>
</div>
</div>
</template>
<script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
export default {
name: "homeLeft",
components: {CameraVideo},
computed: {},
data() {
return {};
},
mounted() {},
methods: {},
beforeDestroy() {},
};
</script>
<style lang='less' scoped>
.home-left{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 521px;
background-color: #0d7fd7;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
.topI{
flex: 0 0 48%;
background-color: #0a5b85;
.videos{
display: flex;
flex-flow: row wrap;
height: 100%;
.videoItem{
width: 50%;
height: 50%;
position: relative;
}
}
}
.bottomI{
flex: 0 0 48%;
background-color: #1dce92;
.analysis{
height: 100%;
display: flex;
justify-content: space-between;
.analysisItem{
background-color: #0a5b85;
width: 48%;
height: 100%;
}
}
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home5/right/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-right">
<div class="top">
<cesium-map class="cesium-map" ref="homeRightTop" c-id="home-right-top"/>
</div>
<div class="bottom">
<cesium-map class="cesium-map" ref="homeRightBottom" c-id="home-right-bottom"/>
</div>
</div>
</template>
<script>
import CesiumMap from "../../../components/Standard/cesiumMap.vue";
let topViewer, bottomViewer;
export default {
name: "homeRight",
components: {CesiumMap},
computed: {},
data() {
return {};
},
mounted() {
topViewer = this.$refs.homeRightTop.loadMap()
bottomViewer = this.$refs.homeRightBottom.loadMap()
},
methods: {},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
.home-right {
position: absolute;
right: 0;
top: 0;
padding: 30px;
height: 100%;
width: 521px;
background-color: #0d7fd7;
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
height: 48%;
background-color: #0a5b85;
}
.bottom {
height: 48%;
background-color: #1dce92;
}
.cesium-map{
height: 100%;
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home6/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="main" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中.."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<WMap :mapId="'situation-map'" ref="wMap"/>
<home-left/>
<home-right/>
</div>
</template>
<script>
import mapAssets from "../../config/holo/mapAssets";
import WMap from "../../components/Standard/map/index.vue";
import HomeLeft from "./left/index.vue";
import HomeRight from "./right/index.vue";
let map,
scene;
export default {
name:'home6',
components: {
HomeRight,
HomeLeft,
WMap
},
props: {},
computed: {},
data() {
return {
loading:true,
};
},
watch: {
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
init() {
[map, scene] = this.$refs.wMap.initMap();
scene.on("loaded", () => {
// window.onkeydown = function () {
// let center = map_config.MAP_CENTER
// if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
// map.flyTo({
// zoom: map_config.MAP_ZOOM,
// center: center
// })
// }
// if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
// map.flyTo({
// zoom: 17.17,
// center: [120.62601176446981, 31.422352253327617]
// })
// }
// if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
// map.flyTo({
// zoom: 19.26,
// center: center
// })
// }
// }
this.loading = false
this.sceneLoaded = true;
for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapAssets.mapIcons[key]);
}
// map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
});
scene.on('click', e => {
console.log(e)
})
},
},
beforeDestroy() {
scene = null;
map = null
},
};
</script>
<style lang='less' scoped>
.main{
height: 100%;
position: relative;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home6/left/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-left">
<div class="topI">
<div class="videos">
<camera-video class="videoItem" v-for="item of 4" :video-data="item" :border="true"/>
</div>
</div>
<div class="bottomI">
<div class="analysis">
<div class="analysisItem"></div>
<div class="analysisItem"></div>
</div>
</div>
</div>
</template>
<script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
export default {
name: "homeLeft",
components: {CameraVideo},
computed: {},
data() {
return {};
},
mounted() {},
methods: {},
beforeDestroy() {},
};
</script>
<style lang='less' scoped>
.home-left{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 521px;
background-color: #0d7fd7;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
.topI{
flex: 0 0 48%;
background-color: #0a5b85;
.videos{
display: flex;
flex-flow: row wrap;
height: 100%;
.videoItem{
width: 50%;
height: 50%;
position: relative;
}
}
}
.bottomI{
flex: 0 0 48%;
background-color: #1dce92;
.analysis{
height: 100%;
display: flex;
justify-content: space-between;
.analysisItem{
background-color: #0a5b85;
width: 48%;
height: 100%;
}
}
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home6/right/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-right">
<div class="top">
<cesium-map class="cesium-map" ref="homeRightTop" c-id="home-right-top"/>
</div>
<div class="bottom">
<cesium-map class="cesium-map" ref="homeRightBottom" c-id="home-right-bottom"/>
</div>
</div>
</template>
<script>
import CesiumMap from "../../../components/Standard/cesiumMap.vue";
let topViewer, bottomViewer;
export default {
name: "homeRight",
components: {CesiumMap},
computed: {},
data() {
return {};
},
mounted() {
topViewer = this.$refs.homeRightTop.loadMap()
bottomViewer = this.$refs.homeRightBottom.loadMap()
},
methods: {},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
.home-right {
position: absolute;
right: 0;
top: 0;
padding: 30px;
height: 100%;
width: 521px;
background-color: #0d7fd7;
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
height: 48%;
background-color: #0a5b85;
}
.bottom {
height: 48%;
background-color: #1dce92;
}
.cesium-map{
height: 100%;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment