Skip to content

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

首页路况图层定时刷新 30s

parent 7764ca9d
Show whitespace changes
Inline Side-by-side
Showing with 1438 additions and 1374 deletions
wj-smartcity/src/utils/mapboxTools.js
View file @ bc0726c1
......@@ -13,13 +13,15 @@ function createTriangleIcon(color) {
context.fill();
return canvas.toDataURL();
}
export function convertPointsToGeo(arr){
export function convertPointsToGeo(arr) {
let features = []
for(let item of arr){
features.push(turf.point([item.longitude,item.latitude],item))
for (let item of arr) {
features.push(turf.point([item.longitude, item.latitude], item))
}
return turf.featureCollection(features)
}
export function addOrUpdateSelectVehicleTrack(map, geo) {
if (!map.getSource("selectVehicleTrack")) {
map.addSource("selectVehicleTrack", {
......@@ -398,6 +400,58 @@ export function addOrUpdateRoadVector(map) {
},
});
}
let timer = setInterval(() => {
// 1. 清除重新创建
// if (map) {
// if (map.getLayer('vector_road_layer')) {
// map.removeLayer('vector_road_layer')
// }
// if (map.getSource('vector_road')) {
// map.removeSource('vector_road')
// }
// setTimeout(() => {
// if (!map.getSource("vector_road")) {
// map.addSource("vector_road", {
// type: "vector",
// tiles: [map_config.VECTOR_ROAD],
// });
// }
// if (!map.getLayer("vector_road_layer")) {
// map.addLayer({
// id: "vector_road_layer",
// source: "vector_road",
// "source-layer": "line-layer",
// type: "line",
// layout: {
// "line-join": "round",
// "line-cap": "round",
// },
// paint: {
// "line-width": 3,
// "line-color": [
// "match",
// ["get", "status"],
// "1",
// "green",
// "2",
// "yellow",
// "3",
// "orange",
// "4",
// "red",
// "green",
// ],
// },
// });
// }
// }, 0)
// }
// 2. 只更新source
if (map?.getSource("vector_road")) {
map.getSource("vector_road").reload()
}
}, 1000 * 30)
return timer
}
// 更新选中车辆底部闪动波纹
......@@ -1173,7 +1227,7 @@ export function addOrUpdateFlowLineArrow(map, json) {
turf.point(item.lineArray[1])
);
features.push(
turf.point([item.endLng, item.endLat], { ...item, angle: angle })
turf.point([item.endLng, item.endLat], {...item, angle: angle})
);
}
}
......@@ -1533,10 +1587,12 @@ export const vehicleWave = {
},
};
import Vue from "vue";
import { Message } from "element-ui";
import {Message} from "element-ui";
import eventPopupVue from "@/views/signal/mapPopup/eventPopup.vue";
const EventPopupVue = Vue.extend(eventPopupVue);
let popupEvent = null;
export function addPopupEvent(map, prop) {
popupEvent?.remove();
if (prop.lng && prop.lat) {
......
wj-smartcity/src/views/signal/index.vue
View file @ bc0726c1
<template>
<div class="full-w-h">
<wMap :mapId="'situation-map'" ref="wMap" />
<wMap :mapId="'situation-map'" ref="wMap"/>
<msgs :clickCrossData="clickCrossData" :isCrossDetail="isCrossDetail" v-if="!loading"
@showCrossStatus="showCrossStatus" @openCrossIndexDetail="openCrossIndexDetail" @showPolygon="showPolygon"
@openGreenWaveDialog="openGreenWaveDialog" :show="boxesShow"></msgs>
<div :class="boxesShow ? '' : 'hideBackToMain'" @click="backToMain" v-if="isCrossDetail" class="backToMain"></div>
<!--切换图层 收起放开侧边栏-->
<layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'" />
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'"/>
<!--路口指标详情弹窗-->
<cross-detail :cross-detail-data="crossData" dialogId="crossDetailShow" v-if="dialogVisible.crossDetailShow"
@actionFinished="actionFinished" />
@actionFinished="actionFinished"/>
<!--路口绿波信息弹窗-->
<green-wave :greenId="greenId" :waveTitle="waveTitle" dialogId="greenWaveShow" v-if="dialogVisible.greenWaveShow"
@actionFinished="actionFinished" />
@actionFinished="actionFinished"/>
<!--设备图例控制-->
<equipment-switch :boxesShow="boxesShow" @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'" />
<equipment-switch :boxesShow="boxesShow" @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'"/>
</div>
</template>
......@@ -28,7 +28,7 @@ import mapAssets from "@/config/holo/mapAssets";
import CrossDetail from "@/views/signal/dialogs/crossDetail.vue";
import GreenWave from "@/views/signal/dialogs/greenWave/index.vue";
import * as mapTool from "@/utils/mapboxTools";
import { initWs } from "@/config/holo/websocket";
import {initWs} from "@/config/holo/websocket";
import equipmentPopup from "./mapPopup/equipmentPopup.vue";
import dict from "../../config/holo/dictionary";
import vehicleDetail from "./mapPopup/vehicleDetail.vue";
......@@ -39,6 +39,7 @@ import {
equip_camera,
equip_radar,
} from "../../dao/situation";
const EquipmentPopup = Vue.extend(equipmentPopup);
const VehiclePopup = Vue.extend(vehicleDetail);
......@@ -63,10 +64,11 @@ export default {
msgs,
EquipmentSwitch,
},
mixins:[lightMixin],
mixins: [lightMixin],
computed: {},
data() {
return {
roadTimer: null,
currentCheck: "first",
timer: null,
licenseState: false,
......@@ -77,7 +79,7 @@ export default {
clickCrossData: {},
isCrossDetail: false,
loading: true,
crossData: { id: "", name: "" },
crossData: {id: "", name: ""},
waveTitle: "",
boxesShow: true,
detailShow: false,
......@@ -200,7 +202,8 @@ export default {
map.loadImage(mapAssets.lightIcons[key], (error, image) => {
if (map && !map.hasImage(key)) map.addImage(key, image);
});
};
}
;
window.tb = new Threebox(map, map.getCanvas().getContext("webgl"), {
defaultLights: true,
realSunlight: true,
......@@ -220,7 +223,7 @@ export default {
type: "gltf",
units: "meters",
scale: 0.8,
adjustment: { x: 0.5, y: 1, z: -0.5 },
adjustment: {x: 0.5, y: 1, z: -0.5},
bbox: true,
};
window.tb.loadObj(options, (model) => {
......@@ -234,7 +237,7 @@ export default {
},
});
map.addControl(
new mapboxgl.NavigationControl({ showZoom: false }),
new mapboxgl.NavigationControl({showZoom: false}),
"bottom-right"
);
map.on("dblclick", () => {
......@@ -306,7 +309,7 @@ export default {
});
}
model.setCoords([options.longitude, options.latitude]);
model.setRotation({ x: 90, y: 360 - options.courseAngle - 90, z: 0 });
model.setRotation({x: 90, y: 360 - options.courseAngle - 90, z: 0});
model.userData.data = options;
},
clearLicense() {
......@@ -632,7 +635,7 @@ export default {
topMargin: 2,
});
license.setCoords([option.longitude, option.latitude, 4]);
license.userData.data = { picLicense: option.picLicense };
license.userData.data = {picLicense: option.picLicense};
window.tb.add(license, `license${option.id}`);
licenseLabel[`license${option.id}`] = license;
}
......@@ -759,7 +762,7 @@ export default {
});
},
openCrossIndexDetail(crossData) {
this.showRightDetail({ features: [{ properties: crossData }] });
this.showRightDetail({features: [{properties: crossData}]});
// this.crossData = crossData
// this.dialogVisible.crossDetailShow = true
},
......@@ -796,7 +799,8 @@ export default {
});
},
switchsecond() {
mapTool.addOrUpdateRoadVector(map);
// 返回刷新定时器 供页面销毁
this.roadTimer = mapTool.addOrUpdateRoadVector(map);
},
switchfourth() {
Promise.all([
......@@ -845,7 +849,7 @@ export default {
distance = 80;
}
let bearing = map.getBearing(); // 平移方向，0 表示正北方向
let options = { units: "meters" };
let options = {units: "meters"};
let translatedPoint = turf.destination(
prop.wkt.split(","),
distance,
......@@ -869,7 +873,7 @@ export default {
.addClassName("equipmentPopup");
equipPopupInstance = new EquipmentPopup({
propsData: {
model: { equip_type: type, ...prop },
model: {equip_type: type, ...prop},
},
});
equipPopupInstance.$mount("#equipment_popup");
......@@ -908,6 +912,9 @@ export default {
equipPopup?.remove();
map.off("click", this.equipmentsClick);
}
if (beforeLabel === 'second') {
if (this.roadTimer) clearInterval(this.roadTimer)
}
for (let key in this.layers) {
if (key !== checkItem.label) {
for (let layer of this.layers[key]) {
......@@ -923,6 +930,7 @@ export default {
},
},
beforeDestroy() {
if (this.roadTimer) clearInterval(this.roadTimer)
this.timer && clearInterval(this.timer);
this.closeAllWs()
window.tb.dispose();
......
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