Skip to content

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

地址栏token参数进入系统播放最近路口视频流

parent edfd140a
Hide whitespace changes
Inline Side-by-side
Showing with 227 additions and 261 deletions
wj-manage-web/src/views/situation/index.vue
View file @ 25afaff4
<template>
<div
class="main situation"
v-loading.fullscreen.lock="loading"
element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<track-switcher
:detetors="detetorsArray"
:boxShow="boxesShow"
@timeChange="timeChange"
v-show="trackSwitcherVis"
@closeRealTime="closeRealTime"
@openRealTime="openRealTime"
></track-switcher>
<situation-time
v-show="currentCheck === 'first' && timeState"
class="situationTime"
:time="situationTimeVal"
/>
<wMap :mapId="'situation-map'" ref="wMap"/>
<div class="main situation" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
<track-switcher :detetors="detetorsArray" :boxShow="boxesShow" @timeChange="timeChange" v-show="trackSwitcherVis"
@closeRealTime="closeRealTime" @openRealTime="openRealTime"></track-switcher>
<situation-time v-show="currentCheck === 'first' && timeState" class="situationTime" :time="situationTimeVal" />
<wMap :mapId="'situation-map'" ref="wMap" />
<!--左右图表组件-->
<message-boxes
@delWarningPopup="delWarningPopup"
@addWarningPopup="addWarningPopup"
:show="boxesShow"
/>
<message-boxes @delWarningPopup="delWarningPopup" @addWarningPopup="addWarningPopup" :show="boxesShow" />
<!--图层切换按钮-->
<layers-switch
ref="switch"
:show="boxesShow"
@changeCheck="changeCheck"
@visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'"
/>
<layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'" />
<!--视频播放组件-->
<video-list
ref="videoList"
v-if="showCameras.length"
@updateCamera="updateCameraCPB"
@resetCamera="resetCamera"
@delVideo="deleteVideo"
:showCameras="showCameras"
/>
<video-list ref="videoList" v-if="showCameras.length" @updateCamera="updateCameraCPB" @resetCamera="resetCamera"
@delVideo="deleteVideo" :showCameras="showCameras" />
<!--路口详情-->
<cross-detail
v-if="dialogVisible.crossDetail"
@actionFinished="actionFinished"
dialogId="crossDetail"
:crossDetailData="crossDetailData"
/>
<cross-detail v-if="dialogVisible.crossDetail" @actionFinished="actionFinished" dialogId="crossDetail"
:crossDetailData="crossDetailData" />
<!--底部交通事件趋势分析-->
<traffic-events-tend
@updateHeatMap="refreshEventLayer"
v-if="currentCheck === 'third'"
/>
<traffic-events-tend @updateHeatMap="refreshEventLayer" v-if="currentCheck === 'third'" />
<!--设备图例控制-->
<equipment-switch
@equipmentChange="equipmentChange"
v-if="currentCheck === 'fourth'"
/>
<equipment-switch @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'" />
</div>
</template>
......@@ -71,7 +31,7 @@ import MessageBoxes from "./floatData/messageBoxes.vue";
import CrossDetail from "./crossDetail.vue";
import VideoList from "./floatData/videoList.vue";
import TrafficEventsTend from "./floatData/trafficEventsTend.vue";
import {initWs} from "../../config/holo/websocket";
import { initWs } from "../../config/holo/websocket";
import dict from "../../config/holo/dictionary";
import mapAssets from "../../config/holo/mapAssets";
import * as mapTools from "../../utils/mapboxTools";
......@@ -92,7 +52,7 @@ import {
equip_radar,
getDetetors,
} from "../../dao/situation";
import {convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt} from "../../utils/mapboxTools";
import { convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt } from "../../utils/mapboxTools";
const VehiclePopup = Vue.extend(vehicleDetail);
const EquipmentPopup = Vue.extend(equipmentPopup);
......@@ -101,11 +61,11 @@ const AlarmPopup = Vue.extend(alarmPopup)
let pulsingDots = [];
const canvasImages = [
{size: 250, color: "252, 1, 26"},
{size: 400, color: "255,235,59"},
{size: 400, color: "255, 141, 26"},
{size: 400, color: "227, 5, 5"},
{size: 400, color: "24, 144, 255"},
{ size: 250, color: "252, 1, 26" },
{ size: 400, color: "255,235,59" },
{ size: 400, color: "255, 141, 26" },
{ size: 400, color: "227, 5, 5" },
{ size: 400, color: "24, 144, 255" },
];
for (let i = 0; i < canvasImages.length; i++) {
let size = canvasImages[i].size;
......@@ -140,23 +100,23 @@ for (let i = 0; i < canvasImages.length; i++) {
pulsingDots.push(pulsingDot);
}
let map,
equipPopup = null, // 设备弹窗
popupInstance = null, // 设备弹窗组件实例 用来更新数据与销毁
vehiclePopups = {},
popupVises = {},
vehiclePopupInstances = {},
licenseLabel = {}, // 车牌号label
vehicleModels = {}, // 车辆model
vehicleModelTypes = {},
lastFrameTime = null,
noTrackMsg = null,
AlarmPopupIns = {},
stopLineData = [],
waitGeo = null,
radarModels = {},
radarModelTypes = {},
radarTimers = [],
trackTimer = null; // 轨迹心跳检测
equipPopup = null, // 设备弹窗
popupInstance = null, // 设备弹窗组件实例 用来更新数据与销毁
vehiclePopups = {},
popupVises = {},
vehiclePopupInstances = {},
licenseLabel = {}, // 车牌号label
vehicleModels = {}, // 车辆model
vehicleModelTypes = {},
lastFrameTime = null,
noTrackMsg = null,
AlarmPopupIns = {},
stopLineData = [],
waitGeo = null,
radarModels = {},
radarModelTypes = {},
radarTimers = [],
trackTimer = null; // 轨迹心跳检测
export default {
mixins: [draw, mixinLightModel],
......@@ -231,12 +191,12 @@ export default {
boxesShow(val) {
if (val) {
document
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.remove("mapboxgl-ctrl-bottom-right-hide-box");
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.remove("mapboxgl-ctrl-bottom-right-hide-box");
} else {
document
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.add("mapboxgl-ctrl-bottom-right-hide-box");
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.add("mapboxgl-ctrl-bottom-right-hide-box");
}
},
},
......@@ -268,13 +228,16 @@ export default {
];
for (let item of needDicts) {
queue.push(
this.$store.dispatch("QUERY_DICT", {
type: item,
})
this.$store.dispatch("QUERY_DICT", {
type: item,
})
);
}
Promise.all(queue).then(() => {
this.pageInit();
if (this.$store.state.mapInit.center) {
this.boxesShow = false
}
});
},
methods: {
......@@ -287,7 +250,7 @@ export default {
// 重度拥堵: 3,
// 疑似事故: 4,
// };
let resItem = Object.assign({},item,{longitude:item.lng,latitude:item.lat,type:3})
let resItem = Object.assign({}, item, { longitude: item.lng, latitude: item.lat, type: 3 })
mapTools.addOrUpdateWarningWave(map, [resItem], item.eventSerialNumber);
// 上报产生的告警 弹窗提醒 定时销毁
let popup = new mapboxgl.Popup({
......@@ -296,10 +259,10 @@ export default {
offset: [0, 0],
});
popup
.setLngLat(targetLngLat)
.setHTML('<div id="alarm_popup"></div>')
.addTo(map)
.addClassName("alarmPopup");
.setLngLat(targetLngLat)
.setHTML('<div id="alarm_popup"></div>')
.addTo(map)
.addClassName("alarmPopup");
new AlarmPopup({
propsData: {
model: item,
......@@ -361,9 +324,9 @@ export default {
for (let item of equips) {
if (map.getLayer(item.label)) {
map.setLayoutProperty(
item.label,
"visibility",
item.check ? "visible" : "none"
item.label,
"visibility",
item.check ? "visible" : "none"
);
}
}
......@@ -420,10 +383,10 @@ export default {
offsetLength = offsetLength + Number(cameraItem.installHeight);
}
let translatedPoint = turf.destination(
this.cLocation,
offsetLength, // 相机向前偏移距离
this.cBearing,
{units: "meters"}
this.cLocation,
offsetLength, // 相机向前偏移距离
this.cBearing,
{ units: "meters" }
).geometry.coordinates;
map.flyTo({
center: translatedPoint,
......@@ -451,8 +414,8 @@ export default {
map = this.$refs.wMap.initMap();
window.map = map;
map.on("style.load", () => {
map.on('dblclick',()=>{
console.log('center '+map.getCenter()+' pitch '+map.getPitch()+' bearing '+map.getBearing()+' zoom '+map.getZoom())
map.on('dblclick', () => {
console.log('center ' + map.getCenter() + ' pitch ' + map.getPitch() + ' bearing ' + map.getBearing() + ' zoom ' + map.getZoom())
})
map.setFog({
color: "#1d3244", // Lower atmosphere
......@@ -476,14 +439,14 @@ export default {
}
for (let i = 0; i < pulsingDots.length; i++) {
if (map && !map.hasImage(`pulsingDot${i}`))
map.addImage(`pulsingDot${i}`, pulsingDots[i], {pixelRatio: 2});
map.addImage(`pulsingDot${i}`, pulsingDots[i], { pixelRatio: 2 });
}
// 添加map icons图片资源 ---end
this.loading = false;
this.mixDraw(map);
map.addControl(
new mapboxgl.NavigationControl({showZoom: false}),
"bottom-right"
new mapboxgl.NavigationControl({ showZoom: false }),
"bottom-right"
);
this.refreshBounds();
// 快捷键
......@@ -493,24 +456,24 @@ export default {
if (event.altKey && event.keyCode === 82) {
this.rulerStatus = !this.rulerStatus;
this.rulerStatus
? mapTools.addCalibrationTail(map)
: this.removeLayers("calibrationTailLine,chunkSymbol,chunkText");
? mapTools.addCalibrationTail(map)
: this.removeLayers("calibrationTailLine,chunkSymbol,chunkText");
}
// alt + x 显示隐藏绘制工具
if (event.altKey && event.keyCode === 88) {
this.boxesShow = false;
if (
document.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
.style.display === "none" ||
document.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
.style.display === ""
document.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
.style.display === "none" ||
document.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
.style.display === ""
) {
document.getElementsByClassName(
"mapboxgl-ctrl-top-right"
"mapboxgl-ctrl-top-right"
)[0].style.display = "unset";
} else {
document.getElementsByClassName(
"mapboxgl-ctrl-top-right"
"mapboxgl-ctrl-top-right"
)[0].style.display = "none";
}
}
......@@ -593,7 +556,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) => {
......@@ -602,17 +565,17 @@ export default {
}
for (let item of [1, 2]) {
window.tb.loadObj(
{
obj: `gltf/radar${item}.glb`,
type: "gltf",
units: "meters",
scale: 10,
adjustment: {x: 0.5, y: 1, z: -0.5},
bbox: false,
},
(model) => {
radarModelTypes[item] = model;
}
{
obj: `gltf/radar${item}.glb`,
type: "gltf",
units: "meters",
scale: 10,
adjustment: { x: 0.5, y: 1, z: -0.5 },
bbox: false,
},
(model) => {
radarModelTypes[item] = model;
}
);
}
window.vehicleModelTypes = vehicleModelTypes;
......@@ -637,36 +600,40 @@ export default {
solveRadarDatas() {
let milliFeatures = [];
console.log("radars...", this.radarDatas);
for (let i = 0; i < this.radarDatas.length; i++) {
//2 毫米波 other 激光雷达
let model =
radarModelTypes[this.radarDatas[i].sourceEquipType]?.duplicate();
if (model) {
model.setCoords(this.radarDatas[i].wkt.split(","));
model.userData.data = this.radarDatas[i];
model.setRotation({x: 90, y: 360 - 90, z: 0});
window.tb.add(
let timer = setInterval(() => {
if (radarModelTypes[1] && radarModelTypes[2]) {
clearInterval(timer)
for (let i = 0; i < this.radarDatas.length; i++) {
//2 毫米波 other 激光雷达
let model =
radarModelTypes[this.radarDatas[i].sourceEquipType].duplicate();
model.setCoords(this.radarDatas[i].wkt.split(","));
model.userData.data = this.radarDatas[i];
model.setRotation({ x: 90, y: 360 - 90, z: 0 });
window.tb.add(
model,
`radar${i}${this.radarDatas[i].sourceEquipType}`
);
radarModels[`radar${i}${this.radarDatas[i].sourceEquipType}`] = model;
if (this.radarDatas[i].sourceEquipType == 1) {
this.addRadarTimers(this.radarDatas[i], i);
} else {
let lnglat = this.radarDatas[i].wkt.split(",");
let center = turf.point(lnglat);
let radius = 0.17; // 100米半径
let direct = Number(this.radarDatas[i].equipmentDirect);
let arc = turf.lineArc(center, radius, direct - 10, direct + 10, {
unit: "kilometers",
});
let arcScope = [[lnglat, ...arc.geometry.coordinates, lnglat]];
milliFeatures.push(turf.polygon(arcScope, this.radarDatas[i]));
);
radarModels[`radar${i}${this.radarDatas[i].sourceEquipType}`] = model;
if (this.radarDatas[i].sourceEquipType == 1) {
this.addRadarTimers(this.radarDatas[i], i);
} else {
let lnglat = this.radarDatas[i].wkt.split(",");
let center = turf.point(lnglat);
let radius = 0.17; // 100米半径
let direct = Number(this.radarDatas[i].equipmentDirect);
let arc = turf.lineArc(center, radius, direct - 10, direct + 10, {
unit: "kilometers",
});
let arcScope = [[lnglat, ...arc.geometry.coordinates, lnglat]];
milliFeatures.push(turf.polygon(arcScope, this.radarDatas[i]));
}
}
let milliGeo = turf.featureCollection(milliFeatures);
mapTools.addOrUpdateMilliScope(map, milliGeo);
}
}
let milliGeo = turf.featureCollection(milliFeatures);
mapTools.addOrUpdateMilliScope(map, milliGeo);
}, 1000)
},
loadRadars() {
if (this.radarDatas.length) {
......@@ -706,20 +673,20 @@ export default {
}
if (!map.getLayer(`circle-layer-${ii}-${index}`)) {
map.addLayer(
{
id: `circle-layer-${ii}-${index}`,
source: `circle-source-${ii}-${index}`,
type: "circle",
paint: {
"circle-radius": radius,
"circle-opacity": 0,
"circle-stroke-color": "#f6eee0",
"circle-stroke-opacity": opacity,
"circle-stroke-width": 2,
"circle-pitch-alignment": "map",
},
{
id: `circle-layer-${ii}-${index}`,
source: `circle-source-${ii}-${index}`,
type: "circle",
paint: {
"circle-radius": radius,
"circle-opacity": 0,
"circle-stroke-color": "#f6eee0",
"circle-stroke-opacity": opacity,
"circle-stroke-width": 2,
"circle-pitch-alignment": "map",
},
"vehicle3D"
},
"vehicle3D"
);
this.radarLayers.push(`circle-layer-${ii}-${index}`);
}
......@@ -727,50 +694,50 @@ export default {
let timer = setInterval(() => {
if (map && this.radarLayers.length) {
let maxPxInterval = this.convertPxToMeter(
maxMeters,
map.getZoom(),
lnglat[1]
maxMeters,
map.getZoom(),
lnglat[1]
);
for (let ii = 0; ii < numRings; ii++) {
let radius = map.getPaintProperty(
`circle-layer-${ii}-${index}`,
"circle-radius"
`circle-layer-${ii}-${index}`,
"circle-radius"
);
if (radius < maxPxInterval - 1) {
map.setPaintProperty(
`circle-layer-${ii}-${index}`,
"circle-radius",
radius + 3
`circle-layer-${ii}-${index}`,
"circle-radius",
radius + 3
);
map.setPaintProperty(
`circle-layer-${ii}-${index}`,
"circle-stroke-opacity",
1 - radius / maxPxInterval < 0 ? 0 : 1 - radius / maxPxInterval
`circle-layer-${ii}-${index}`,
"circle-stroke-opacity",
1 - radius / maxPxInterval < 0 ? 0 : 1 - radius / maxPxInterval
);
} else {
map.removeLayer(`circle-layer-${ii}-${index}`);
map.addLayer(
{
id: `circle-layer-${ii}-${index}`,
source: `circle-source-${ii}-${index}`,
type: "circle",
paint: {
"circle-radius": 0,
"circle-opacity": 0,
"circle-stroke-color": "#f6eee0",
"circle-stroke-opacity": 1,
"circle-stroke-width": 2,
"circle-pitch-alignment": "map",
},
{
id: `circle-layer-${ii}-${index}`,
source: `circle-source-${ii}-${index}`,
type: "circle",
paint: {
"circle-radius": 0,
"circle-opacity": 0,
"circle-stroke-color": "#f6eee0",
"circle-stroke-opacity": 1,
"circle-stroke-width": 2,
"circle-pitch-alignment": "map",
},
"vehicle3D"
},
"vehicle3D"
);
}
}
} else {
clearInterval(timer);
}
}, 45-map.getZoom()*2);
}, 45 - map.getZoom() * 2);
radarTimers.push(timer);
},
convertPxToMeter(meter, zoom, latitude) {
......@@ -824,7 +791,7 @@ export default {
//----------------------------------------
if (!this.detetorsStatus) {
// let wsUrl= ws_config.BASE_URL
let wsUrl= `ws://${window.wsHost}/holows/subscribe`
let wsUrl = `ws://${window.wsHost}/holows/subscribe`
let ws1 = initWs({
name: "callDetetorA",
url: wsUrl,
......@@ -943,11 +910,19 @@ export default {
}, 100);
this.layerShowRenders = true;
let arr = this.$store.state.dicts.CrossInfo.map(item => {
[item.longitude,item.latitude] = item.location.split(",")
[item.longitude, item.latitude] = item.location.split(",")
return item
})
this.crossGeo = convertPointsToGeo(arr)
mapTools.addOrUpdateCross(map, this.crossGeo, this.firstCrossClick);
//--------如果从地址token参数进入系统 则加载中心点最近路口的视频流---------
if (this.$store.state.mapInit.center) {
let centerP = turf.point([map.getCenter().lng, map.getCenter().lat]);
// 取最近点的crossId
let nearest = turf.nearestPoint(centerP, this.crossGeo);
this.firstCrossClick({ features: [nearest] })
}
//--------------------------------------------------------------------
// 注册车辆实时ws
let socket = initWs({
name: "callCar",
......@@ -972,7 +947,7 @@ export default {
if (!this.detetors[item.detectorType]) {
this.detetors[item.detectorType] = [];
}
this.detetors[item.detectorType].push({...item, state: "0"});
this.detetors[item.detectorType].push({ ...item, state: "0" });
}
this.mapZoomEnd();
});
......@@ -983,7 +958,7 @@ export default {
// id 只在 全量数据 中存在且不在 接收数据 中存在的即为 需要合并的数据
if (this.detetors[`DETECTOR_${type}`]) {
let del = this.detetors[`DETECTOR_${type}`].filter(
(e) => !msg.find((c) => c.laneId === e.laneId)
(e) => !msg.find((c) => c.laneId === e.laneId)
);
for (let item of msg) {
let match = this.detetors[`DETECTOR_${type}`].find((de) => {
......@@ -1010,10 +985,10 @@ export default {
offset: [0, -30],
});
eventPopup
.setLngLat([data.lng, data.lat])
.setHTML('<div id="event_popup"></div>')
.addTo(map)
.addClassName("eventPopup");
.setLngLat([data.lng, data.lat])
.setHTML('<div id="event_popup"></div>')
.addTo(map)
.addClassName("eventPopup");
new EventPopup({
propsData: {
model: data,
......@@ -1023,7 +998,7 @@ export default {
// 交通事件热力图 & 点
refreshEventLayer(type) {
eventInfo({dayType: type}).then((res) => {
eventInfo({ dayType: type }).then((res) => {
// 热力图 - 如果还未创建 先创建图层 赋值
if (this.currentCheck === "third") {
mapTools.addOrUpdateEventHeat(map, res.content);
......@@ -1085,12 +1060,6 @@ export default {
layers: ["camera", "milli", "radar", "signal", "weather"],
});
if (features.length) {
console.log(
"fff",
features,
features[0].properties,
features[0].layer.id
);
let prop = features[0].properties;
let type = features[0].layer.id;
if (prop.status == "1") {
......@@ -1102,13 +1071,13 @@ export default {
//信号机popup窗口高度过高 加大偏移防止超出屏幕
distance = 80;
}
var bearing = map.getBearing(); // 平移方向，0 表示正北方向
var options = {units: "meters"};
var translatedPoint = turf.destination(
prop.wkt.split(","),
distance,
bearing,
options
let bearing = map.getBearing(); // 平移方向，0 表示正北方向
let options = { units: "meters" };
let translatedPoint = turf.destination(
prop.wkt.split(","),
distance,
bearing,
options
);
// 将地图中心点设置为平移后的点
map.flyTo({
......@@ -1120,14 +1089,14 @@ export default {
offset: [0, -20],
});
equipPopup
.setLngLat(prop.wkt.split(","))
.setHTML('<div id="equipment_popup"></div>')
.addTo(map)
.setMaxWidth("500")
.addClassName("equipmentPopup");
.setLngLat(prop.wkt.split(","))
.setHTML('<div id="equipment_popup"></div>')
.addTo(map)
.setMaxWidth("500")
.addClassName("equipmentPopup");
popupInstance = new EquipmentPopup({
propsData: {
model: {equip_type: type, ...prop},
model: { equip_type: type, ...prop },
},
});
popupInstance.$mount("#equipment_popup");
......@@ -1156,12 +1125,12 @@ export default {
this.$refs.videoList?.destroyAll();
this.hideTb();
this.closeAllWs()
.then(() => {
this.hideTb();
this[`switch${checkItem.label}`]();
})
.catch(() => {
});
.then(() => {
this.hideTb();
this[`switch${checkItem.label}`]();
})
.catch(() => {
});
} else {
if (beforeLabel === "fourth") {
equipPopup?.remove();
......@@ -1188,26 +1157,26 @@ export default {
return item.code == options.originalColor;
});
let realColor = colorDesc
? dict.colorMatch[colorDesc.name]
: "#fff";
? dict.colorMatch[colorDesc.name]
: "#fff";
child.material.color.set(realColor);
}
});
}
model.setCoords([options.longitude, options.latitude]);
model.userData.data = options;
model.setRotation({x: 90, y: 360 - options.courseAngle - 90, z: 0});
model.setRotation({ x: 90, y: 360 - options.courseAngle - 90, z: 0 });
},
// 转换轨迹数据为geo 并更新轨迹图层
updateSelectVehcleTrack() {
if (
this.selectVehicleTrackData &&
this.selectVehicleTrackData.lnglat.length > 1
this.selectVehicleTrackData &&
this.selectVehicleTrackData.lnglat.length > 1
) {
let feature = turf.lineString(
this.selectVehicleTrackData.lnglat,
this.selectVehicleTrackData.properties
this.selectVehicleTrackData.lnglat,
this.selectVehicleTrackData.properties
);
let geo = turf.featureCollection([feature]);
mapTools.addOrUpdateSelectVehicleTrack(map, geo);
......@@ -1270,10 +1239,10 @@ export default {
offset: [0, -20],
});
vehiclePopups[`popup${data.id}`]
.setLngLat([data.longitude, data.latitude])
.setHTML(`<div id="vehicle_popup${data.id}"></div>`)
.addTo(map)
.addClassName("vehicleDetailPopup");
.setLngLat([data.longitude, data.latitude])
.setHTML(`<div id="vehicle_popup${data.id}"></div>`)
.addTo(map)
.addClassName("vehicleDetailPopup");
vehiclePopups[`popup${data.id}`].on("close", () => {
vehiclePopups[`popup${data.id}`] = null;
delete vehiclePopups[`popup${data.id}`];
......@@ -1288,7 +1257,7 @@ export default {
},
});
vehiclePopupInstances[`popup${data.id}`].$mount(
`#vehicle_popup${data.id}`
`#vehicle_popup${data.id}`
);
}
},
......@@ -1329,8 +1298,8 @@ export default {
// console.log("车辆总数", msg.length);
// 第一帧 || 时间戳不相同 => 放行
if (
this.lastLocation.length === 0 ||
this.lastLocation[0].dateTime !== msg[0].dateTime
this.lastLocation.length === 0 ||
this.lastLocation[0].dateTime !== msg[0].dateTime
) {
this.situationTimeVal = msg[0].dateTime;
// zoom 大于 18 ： 移除圆点和图片图层
......@@ -1347,7 +1316,7 @@ export default {
} else {
this.clearLicense();
this.removeLayers(
"lightLayer,lightLayerText,vehicleSelectWave,vehiclePic,waitingLayer"
"lightLayer,lightLayerText,vehicleSelectWave,vehiclePic,waitingLayer"
);
mapTools.addOrUpdateVehicle(map, msg);
map.on("click", "vehicle", this.vehicleCircleClick);
......@@ -1370,8 +1339,8 @@ export default {
if (zoom > 18) {
// 新增
if (
item.dill === "add" ||
(item.dill === "com" && !vehicleModels[item.id])
item.dill === "add" ||
(item.dill === "com" && !vehicleModels[item.id])
) {
this.addVehicleModels(item);
if (this.licenseState) this.addVehicleLicenses(item);
......@@ -1392,8 +1361,8 @@ export default {
if (item.dill === "com") {
// 车型中途变化 清除并重新创建
if (
vehicleModels[key].userData.data.originalType !==
item.originalType
vehicleModels[key].userData.data.originalType !==
item.originalType
) {
if (vehicleModels[key]) {
window.tb.clear(item.id, true);
......@@ -1409,8 +1378,8 @@ export default {
if (licenseLabel[`license${item.id}`]) {
// 如果车牌model存在且未改变 则setCoords
if (
licenseLabel[`license${item.id}`].userData.data
.picLicense == item.picLicense
licenseLabel[`license${item.id}`].userData.data
.picLicense == item.picLicense
) {
licenseLabel[`license${item.id}`].setCoords([
item.longitude,
......@@ -1479,9 +1448,9 @@ export default {
let model = vehicleModelTypes[`car${option.originalType}`].duplicate();
this.setModel(model, option, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
vehicleModels[option.id] = model;
window.tb.add(model, option.id);
......@@ -1492,9 +1461,8 @@ export default {
let ele = document.createElement("div");
ele.style.color = "white";
ele.innerText = option.picLicense;
ele.style.backgroundImage = `url('${
mapAssets.mapIcons[`license${option.licenseColor}`]
}')`;
ele.style.backgroundImage = `url('${mapAssets.mapIcons[`license${option.licenseColor}`]
}')`;
ele.style.backgroundSize = "100% 100%";
ele.style.fontSize = "8px";
ele.style.textAlign = "center";
......@@ -1505,7 +1473,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;
}
......@@ -1531,14 +1499,14 @@ export default {
for (let singleDirLight of dirsLights) {
let stopLine = stopLineData.find((stop) => {
return (
stop.lkid == crossLight.crossId &&
stop.dirtype == singleDirLight.dir
stop.lkid == crossLight.crossId &&
stop.dirtype == singleDirLight.dir
);
});
if (stopLine) {
// 停止线往路口中心偏移0.8米
let resultStopLine = turf.lineString(
JSON.parse(stopLine.geom).coordinates
JSON.parse(stopLine.geom).coordinates
);
let stopLineGeom = turf.lineOffset(resultStopLine, -0.0008, {
units: "kilometers",
......@@ -1547,8 +1515,8 @@ export default {
splitPoints.left = stopLineGeom[0];
splitPoints.right = stopLineGeom[stopLineGeom.length - 1];
splitPoints.center = turf.midpoint(
turf.point(splitPoints.left),
turf.point(splitPoints.right)
turf.point(splitPoints.left),
turf.point(splitPoints.right)
).geometry.coordinates;
let lightNumSplitMap = {
1: ["center"],
......@@ -1557,7 +1525,6 @@ export default {
let stopLineAngle = stopLine.angle;
// 停止线对应的转向数组 只有属于此数组的才视为合法转向灯
let stopLineTurns = stopLine.turntype.replace(",3", "").split(",");
console.log("stopLineTurns", stopLineTurns);
// 根据停止线 turntype 筛选合法灯组
let newSingleDirTurnLightList = [];
for (let i = 0; i < singleDirLight.turnList.length; i++) {
......@@ -1571,17 +1538,16 @@ export default {
remainTime: newSingleDirTurnLightList[i].countDown || `-`,
turn: newSingleDirTurnLightList[i].turn,
coordinates:
splitPoints[lightNumSplitMap[stopLineTurns.length][i]],
splitPoints[lightNumSplitMap[stopLineTurns.length][i]],
ts: `${newSingleDirTurnLightList[i].turn}${newSingleDirTurnLightList[i].color}`,
lightAngle: stopLineAngle - 90,
});
}
}
console.log("w", lightResults);
let targetWait = waitGeo.features.find((wait) => {
return (
wait.properties.lkid == crossLight.crossId &&
wait.properties.dirtype == singleDirLight.dir
wait.properties.lkid == crossLight.crossId &&
wait.properties.dirtype == singleDirLight.dir
);
});
if (targetWait) {
......@@ -1590,7 +1556,7 @@ export default {
});
let color = currentWaiting?.color.replace("Flash", "") || "white";
waitResultFeatures.push(
turf.polygon(targetWait.geometry.coordinates, {state: color})
turf.polygon(targetWait.geometry.coordinates, { state: color })
);
}
}
......@@ -1748,7 +1714,7 @@ export default {
box-shadow: none !important;
}
.mapboxgl-ctrl-group button + button {
.mapboxgl-ctrl-group button+button {
border-top: unset !important;
}
......
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