Skip to content

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

wj-smartcity 调整部分页面布局 首页添加不同图层切换功能（轨迹&路况&设备）

parent c6af1ebd
Hide whitespace changes
Inline Side-by-side
Showing with 2009 additions and 1589 deletions
wj-smartcity/public/index.html
View file @ 6ff4bafe
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
} }
.mapboxgl-ctrl-bottom-right { .mapboxgl-ctrl-bottom-right {
bottom: 6px !important; bottom: calc(33.3% + 20px) !important;
right: 515px !important; right: 515px !important;
z-index: 11 !important; z-index: 11 !important;
transition: 0.5s all ease !important; transition: 0.5s all ease !important;
...@@ -126,6 +126,7 @@ ...@@ -126,6 +126,7 @@
.mapboxgl-ctrl-bottom-right-hide-box { .mapboxgl-ctrl-bottom-right-hide-box {
right: 16px !important; right: 16px !important;
bottom: 20px !important;
transition: 0.5s all ease !important; transition: 0.5s all ease !important;
} }
......
wj-smartcity/src/utils/mapboxTools.js
View file @ 6ff4bafe
// Function to create a triangle icon (arrow) // Function to create a triangle icon (arrow)
function createTriangleIcon(color) { function createTriangleIcon(color) {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
canvas.width = 24; canvas.width = 24;
canvas.height = 24; canvas.height = 24;
const context = canvas.getContext("2d"); const context = canvas.getContext("2d");
context.fillStyle = color; context.fillStyle = color;
context.beginPath(); context.beginPath();
context.moveTo(12, 2); context.moveTo(12, 2);
context.lineTo(22, 22); context.lineTo(22, 22);
context.lineTo(2, 22); context.lineTo(2, 22);
context.closePath(); context.closePath();
context.fill(); context.fill();
return canvas.toDataURL(); return canvas.toDataURL();
} }
export function addOrUpdateSelectVehicleTrack(map, geo) { export function addOrUpdateSelectVehicleTrack(map, geo) {
if (!map.getSource("selectVehicleTrack")) { if (!map.getSource("selectVehicleTrack")) {
map.addSource("selectVehicleTrack", { map.addSource("selectVehicleTrack", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("selectVehicleTrack").setData(geo); map.getSource("selectVehicleTrack").setData(geo);
} }
if (!map.getLayer("selectVehicleTrack")) { if (!map.getLayer("selectVehicleTrack")) {
map.addLayer( map.addLayer(
{ {
id: "selectVehicleTrack", id: "selectVehicleTrack",
type: "line", type: "line",
source: "selectVehicleTrack", source: "selectVehicleTrack",
paint: { paint: {
"line-color": 'red', "line-color": "red",
"line-width": 3, "line-width": 3,
}, },
}, },
"vehicle3D" "vehicle3D"
); );
} }
} }
// 毫米波雷达范围图层 // 毫米波雷达范围图层
export function addOrUpdateMilliScope(map, geo) { export function addOrUpdateMilliScope(map, geo) {
if (!map.getSource(`milliScope`)) { if (!map.getSource(`milliScope`)) {
map.addSource(`milliScope`, { map.addSource(`milliScope`, {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} }
if (!map.getLayer(`milliScope`)) { if (!map.getLayer(`milliScope`)) {
map.addLayer( map.addLayer(
{ {
id: `milliScope`, id: `milliScope`,
source: `milliScope`, source: `milliScope`,
type: "fill", type: "fill",
paint: { paint: {
"fill-color": 'rgba(68, 114, 196, 0.4)', // 默认值，如果没有匹配到上述枚举值] "fill-color": "rgba(68, 114, 196, 0.4)", // 默认值，如果没有匹配到上述枚举值]
}, },
}, },
"vehicle3D" "vehicle3D"
); );
} }
} }
// 更新灯态图层 // 更新灯态图层
export function addOrUpdateLightLayers(map, geo) { export function addOrUpdateLightLayers(map, geo) {
if (!map.getSource("lightLayer")) { if (!map.getSource("lightLayer")) {
map.addSource("lightLayer", { map.addSource("lightLayer", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("lightLayer").setData(geo); map.getSource("lightLayer").setData(geo);
} }
if (!map.getSource("lightLayerText")) { if (!map.getSource("lightLayerText")) {
map.addSource("lightLayerText", { map.addSource("lightLayerText", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("lightLayerText").setData(geo); map.getSource("lightLayerText").setData(geo);
} }
if (!map.getLayer("lightLayer")) { if (!map.getLayer("lightLayer")) {
map.addLayer( map.addLayer(
{ {
id: "lightLayer", id: "lightLayer",
type: "symbol", type: "symbol",
source: "lightLayer", source: "lightLayer",
layout: { layout: {
"icon-allow-overlap": true, "icon-allow-overlap": true,
"icon-ignore-placement": true, "icon-ignore-placement": true,
"icon-size": 0.7, "icon-size": 0.7,
"icon-image": ["get", "ts"], "icon-image": ["get", "ts"],
"icon-pitch-alignment": "map", "icon-pitch-alignment": "map",
// "icon-rotate": ["+", ["*", ["get", "roadDir"], 45], 180], // "icon-rotate": ["+", ["*", ["get", "roadDir"], 45], 180],
'icon-rotate': ['get', 'lightAngle'], "icon-rotate": ["get", "lightAngle"],
"icon-rotation-alignment": "map", "icon-rotation-alignment": "map",
}, },
}, },
"vehicle3D" "vehicle3D"
); );
} }
if (!map.getLayer("lightLayerText")) { if (!map.getLayer("lightLayerText")) {
map.addLayer( map.addLayer(
{ {
id: "lightLayerText", id: "lightLayerText",
type: "symbol", type: "symbol",
source: "lightLayerText", source: "lightLayerText",
layout: { layout: {
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
"text-field": ["get", "remainTime"], "text-field": ["get", "remainTime"],
"text-size": 14, "text-size": 14,
"text-pitch-alignment": "map", "text-pitch-alignment": "map",
"text-rotation-alignment": "map", "text-rotation-alignment": "map",
'text-rotate': ['get', 'lightAngle'], "text-rotate": ["get", "lightAngle"],
// "text-rotate": ["+", ["*", ["get", "roadDir"], 45], 180], // "text-rotate": ["+", ["*", ["get", "roadDir"], 45], 180],
}, },
paint: { paint: {
"text-color": "white", "text-color": "white",
"text-halo-blur": 1, "text-halo-blur": 1,
"text-halo-width": 2, "text-halo-width": 2,
"text-halo-color": [ "text-halo-color": [
"match", "match",
["get", "state"], // 属性字段名称 ["get", "state"], // 属性字段名称
"red", "red",
"rgba(255, 130, 130, 0.5)", "rgba(255, 130, 130, 0.5)",
"yellow", "yellow",
"rgba(255, 179, 0, 0.5)", "rgba(255, 179, 0, 0.5)",
"green", "green",
"rgba(48, 255, 141, 0.5)", "rgba(48, 255, 141, 0.5)",
"rgba(255,255,255,0)", // 默认值，如果没有匹配到上述枚举值 "rgba(255,255,255,0)", // 默认值，如果没有匹配到上述枚举值
], ],
}, },
}, },
"vehicle3D" "vehicle3D"
); );
} }
} }
// 更新路网 wkt polygon // 更新路网 wkt polygon
export function sAddOrUpdateRoadPolygon(map, geo) { export function sAddOrUpdateRoadPolygon(map, geo) {
if (!map.getSource("RoadPolygon")) { if (!map.getSource("RoadPolygon")) {
map.addSource("RoadPolygon", { map.addSource("RoadPolygon", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("RoadPolygon").setData(geo); map.getSource("RoadPolygon").setData(geo);
} }
if (!map.getLayer("RoadPolygon")) { if (!map.getLayer("RoadPolygon")) {
map.addLayer( map.addLayer(
{ {
id: "RoadPolygon", id: "RoadPolygon",
type: "fill", type: "fill",
source: "RoadPolygon", source: "RoadPolygon",
paint: { paint: {
"fill-color": 'rgba(85,179,241,0.47)' "fill-color": "rgba(85,179,241,0.47)",
}, },
}, 'crossStatus' },
); "crossStatus"
if (map.getLayer("vehicle3D")) map.moveLayer("vehicle3D"); );
if (map.getLayer("vehicle")) map.moveLayer("vehicle"); if (map.getLayer("vehicle3D")) map.moveLayer("vehicle3D");
} if (map.getLayer("vehicle")) map.moveLayer("vehicle");
}
} }
// 更新路网 polygon 边框 // 更新路网 polygon 边框
export function sAddOrUpdateRoadLine(map, geo) { export function sAddOrUpdateRoadLine(map, geo) {
if (!map.getSource("RoadLine")) { if (!map.getSource("RoadLine")) {
map.addSource("RoadLine", { map.addSource("RoadLine", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("RoadLine").setData(geo); map.getSource("RoadLine").setData(geo);
} }
if (!map.getLayer("RoadLine")) { if (!map.getLayer("RoadLine")) {
map.addLayer({ map.addLayer(
id: "RoadLine", {
type: "line", id: "RoadLine",
source: "RoadLine", type: "line",
paint: { source: "RoadLine",
"line-color": 'rgb(30,164,252)', paint: {
"line-width": 2, "line-color": "rgb(30,164,252)",
'line-dasharray': [2, 6] "line-width": 2,
}, "line-dasharray": [2, 6],
}, 'crossStatus'); },
if (map.getLayer("vehicle")) map.moveLayer("vehicle"); },
if (map.getLayer("vehicle3D")) map.moveLayer("vehicle3D"); "crossStatus"
} );
if (map.getLayer("vehicle")) map.moveLayer("vehicle");
if (map.getLayer("vehicle3D")) map.moveLayer("vehicle3D");
}
} }
// 更新状态路口 // 更新状态路口
export function sAddOrUpdateCrossStatus(map, geo) { export function sAddOrUpdateCrossStatus(map, geo) {
if (!map.getSource("crossStatus")) { if (!map.getSource("crossStatus")) {
map.addSource("crossStatus", { map.addSource("crossStatus", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("crossStatus").setData(geo); map.getSource("crossStatus").setData(geo);
} }
if (!map.getLayer("crossStatus")) { if (!map.getLayer("crossStatus")) {
map.addLayer({
map.addLayer({ id: "crossStatus",
id: "crossStatus", type: "symbol",
type: "symbol", source: "crossStatus",
source: "crossStatus", layout: {
layout: { "icon-image": ["concat", "crossStatus", ["get", "realtimeStatus"]],
"icon-image": ["concat", "crossStatus", ["get", "realtimeStatus"]], "icon-allow-overlap": true,
"icon-allow-overlap": true, "icon-ignore-placement": true,
"icon-ignore-placement": true, "icon-size": 0.7,
"icon-size": 0.7, "icon-offset": [0, -10],
"icon-offset": [0, -10], },
}, });
},); }
}
} }
// 更新等待行人区域灯态 // 更新等待行人区域灯态
export function addOrUpdateWaitingPolygons(map, geo) { export function addOrUpdateWaitingPolygons(map, geo) {
if (!map.getSource("waitingLayer")) { if (!map.getSource("waitingLayer")) {
map.addSource("waitingLayer", { map.addSource("waitingLayer", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("waitingLayer").setData(geo); map.getSource("waitingLayer").setData(geo);
} }
if (!map.getLayer("waitingLayer")) { if (!map.getLayer("waitingLayer")) {
map.addLayer( map.addLayer(
{ {
id: "waitingLayer", id: "waitingLayer",
type: "fill", type: "fill",
source: "waitingLayer", source: "waitingLayer",
paint: { paint: {
"fill-color": [ "fill-color": [
"match", "match",
["get", "state"], // 属性字段名称 ["get", "state"], // 属性字段名称
'red', "red",
"rgba(231, 63, 50,0.4)", "rgba(231, 63, 50,0.4)",
'green', "green",
'rgba(35, 148, 67,0.4)', "rgba(35, 148, 67,0.4)",
'yellow', "yellow",
'rgba(251, 194, 29,0.4)', "rgba(251, 194, 29,0.4)",
"rgba(255,255,255,0)", "rgba(255,255,255,0)",
], // 默认值，如果没有匹配到上述枚举值] ], // 默认值，如果没有匹配到上述枚举值]
}, },
}, },
"vehicle3D" "vehicle3D"
); );
} }
} }
// 检测器layer // 检测器layer
export function addOrUpdateDetetorA(map, geo) { export function addOrUpdateDetetorA(map, geo) {
if (!map.getSource("detetorsA")) { if (!map.getSource("detetorsA")) {
map.addSource("detetorsA", { map.addSource("detetorsA", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("detetorsA").setData(geo); map.getSource("detetorsA").setData(geo);
} }
if (!map.getLayer("detetorsA")) { if (!map.getLayer("detetorsA")) {
map.addLayer( map.addLayer(
{ {
id: "detetorsA", id: "detetorsA",
type: "line", type: "line",
source: "detetorsA", source: "detetorsA",
paint: { paint: {
"line-color": [ "line-color": [
"match", "match",
["get", "state"], ["get", "state"],
0, 0,
"green", "green",
1, 1,
"red", "red",
"green", "green",
], ],
"line-width": 3, "line-width": 3,
}, },
}, },
"vehicle3D" "vehicle3D"
); );
} }
} }
export function addOrUpdateDetetorB(map, geo) { export function addOrUpdateDetetorB(map, geo) {
if (!map.getSource("detetorsB")) { if (!map.getSource("detetorsB")) {
map.addSource("detetorsB", { map.addSource("detetorsB", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("detetorsB").setData(geo); map.getSource("detetorsB").setData(geo);
} }
if (!map.getLayer("detetorsB")) { if (!map.getLayer("detetorsB")) {
map.addLayer( map.addLayer(
{ {
id: "detetorsB", id: "detetorsB",
type: "line", type: "line",
source: "detetorsB", source: "detetorsB",
paint: { paint: {
"line-color": [ "line-color": [
"match", "match",
["get", "state"], ["get", "state"],
0, 0,
"green", "green",
1, 1,
"red", "red",
"green", "green",
], ],
"line-width": 3, "line-width": 3,
}, },
}, },
"vehicle3D" "vehicle3D"
); );
} }
} }
export function addOrUpdateDetetorC(map, geo) { export function addOrUpdateDetetorC(map, geo) {
if (!map.getSource("detetorsC")) { if (!map.getSource("detetorsC")) {
map.addSource("detetorsC", { map.addSource("detetorsC", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("detetorsC").setData(geo); map.getSource("detetorsC").setData(geo);
} }
if (!map.getLayer("detetorsC")) { if (!map.getLayer("detetorsC")) {
map.addLayer( map.addLayer(
{ {
id: "detetorsC", id: "detetorsC",
type: "line", type: "line",
source: "detetorsC", source: "detetorsC",
paint: { paint: {
"line-color": [ "line-color": [
"match", "match",
["get", "state"], ["get", "state"],
0, 0,
"green", "green",
1, 1,
"red", "red",
"green", "green",
], ],
"line-width": 3, "line-width": 3,
}, },
}, },
"vehicle3D" "vehicle3D"
); );
} }
} }
// 更新路况矢量切片图层 // 更新路况矢量切片图层
export function addOrUpdateRoadVector(map) { export function addOrUpdateRoadVector(map) {
if (!map.getSource("vector_road")) { if (!map.getSource("vector_road")) {
map.addSource("vector_road", { map.addSource("vector_road", {
type: "vector", type: "vector",
tiles: [map_config.VECTOR_ROAD], tiles: [map_config.VECTOR_ROAD],
}); });
} }
if (!map.getLayer("vector_road_layer")) { if (!map.getLayer("vector_road_layer")) {
map.addLayer({ map.addLayer({
id: "vector_road_layer", id: "vector_road_layer",
source: "vector_road", source: "vector_road",
"source-layer": "line-layer", "source-layer": "line-layer",
type: "line", type: "line",
layout: { layout: {
"line-join": "round", "line-join": "round",
"line-cap": "round", "line-cap": "round",
}, },
paint: { paint: {
"line-width": 3, "line-width": 3,
"line-color": [ "line-color": [
"match", "match",
["get", "status"], ["get", "status"],
"1", "1",
"green", "green",
"2", "2",
"yellow", "yellow",
"3", "3",
"orange", "orange",
"4", "4",
"red", "red",
"green", "green",
], ],
}, },
}); });
if (map.getLayer("holo_crossPointS")) map.moveLayer("holo_crossPointS"); }
}
} }
// 更新选中车辆底部闪动波纹 // 更新选中车辆底部闪动波纹
export function addOrUpdateWave(map, geo) { export function addOrUpdateWave(map, geo) {
if (map.getSource("dot-point")) { if (map.getSource("dot-point")) {
map.getSource("dot-point").setData(geo); map.getSource("dot-point").setData(geo);
} else { } else {
map.addSource("dot-point", { map.addSource("dot-point", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} }
if (!map.getLayer("vehicleSelectWave")) { if (!map.getLayer("vehicleSelectWave")) {
map.addLayer({ map.addLayer({
id: "vehicleSelectWave", id: "vehicleSelectWave",
type: "symbol", type: "symbol",
source: "dot-point", source: "dot-point",
layout: { layout: {
"icon-image": "pulsingDot0", "icon-image": "pulsingDot0",
"icon-pitch-alignment": "map", "icon-pitch-alignment": "map",
"icon-rotation-alignment": "map", "icon-rotation-alignment": "map",
}, },
}); });
} }
} }
// type 4 种颜色 对应 4种告警信息 // type 4 种颜色 对应 4种告警信息
export function addOrUpdateWarningWave(map, geo, id) { export function addOrUpdateWarningWave(map, geo, id) {
if (map.getSource(id)) { if (map.getSource(id)) {
map.getSource(id).setData(geo); map.getSource(id).setData(geo);
} else { } else {
map.addSource(id, { map.addSource(id, {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} }
if (!map.getLayer(id)) { if (!map.getLayer(id)) {
map.addLayer({ map.addLayer({
id: id, id: id,
type: "symbol", type: "symbol",
source: id, source: id,
layout: { layout: {
'icon-allow-overlap': true, "icon-allow-overlap": true,
'icon-ignore-placement': true, "icon-ignore-placement": true,
"icon-image": [ "icon-image": [
"match", "match",
["get", "type"], ["get", "type"],
1, 1,
"pulsingDot1", "pulsingDot1",
2, 2,
"pulsingDot2", "pulsingDot2",
3, 3,
"pulsingDot3", "pulsingDot3",
4, 4,
"pulsingDot4", "pulsingDot4",
"", "",
], ],
"icon-pitch-alignment": "map", "icon-pitch-alignment": "map",
"icon-rotation-alignment": "map", "icon-rotation-alignment": "map",
}, },
}); });
} }
} }
// 更新zoom值较小时的车辆轨迹point // 更新zoom值较小时的车辆轨迹point
export function addOrUpdateVehicle(map, geo) { export function addOrUpdateVehicle(map, geo) {
if (!map.getSource("vehicle")) { if (!map.getSource("vehicle")) {
map.addSource("vehicle", { map.addSource("vehicle", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("vehicle").setData(geo); map.getSource("vehicle").setData(geo);
} }
if (!map.getLayer("vehicle")) { if (!map.getLayer("vehicle")) {
map.addLayer({ map.addLayer({
id: "vehicle", id: "vehicle",
type: "circle", type: "circle",
source: "vehicle", source: "vehicle",
paint: { paint: {
"circle-blur": 1, "circle-blur": 1,
"circle-color": "#06f4fe", "circle-color": "#06f4fe",
"circle-pitch-alignment": "map", "circle-pitch-alignment": "map",
}, },
}); });
if (map.getLayer("crossStatus")) map.moveLayer("crossStatus"); if (map.getLayer("crossStatus")) map.moveLayer("crossStatus");
} }
} }
// 路口icon // 路口icon
export function addOrUpdateCross(map, geo, callback) { export function addOrUpdateCross(map, geo, callback) {
if (!map.getSource("holo_crossPoint")) {
if (!map.getSource("holo_crossPoint")) { map.addSource("holo_crossPoint", {
map.addSource("holo_crossPoint", { type: "geojson",
type: "geojson", data: geo,
data: geo, });
}); } else {
} else { map.getSource("holo_crossPoint").setData(geo);
map.getSource("holo_crossPoint").setData(geo); }
} if (!map.getLayer("holo_crossPoint")) {
if (!map.getLayer("holo_crossPoint")) { map.addLayer({
id: "holo_crossPoint",
map.addLayer({ type: "symbol",
id: "holo_crossPoint", source: "holo_crossPoint",
type: "symbol", layout: {
source: "holo_crossPoint", "icon-image": [
layout: { "match",
"icon-image": [ ["get", "isSignal"], // 属性字段名称
"match", 1,
["get", "isSignal"], // 属性字段名称 "crossNormal",
1, 0,
"crossNormal", "crossFalse",
0, "crossSelect", // 默认值，如果没有匹配到上述枚举值
"crossFalse", ],
"crossSelect", // 默认值，如果没有匹配到上述枚举值 "icon-size": 0.7,
], "icon-offset": [0, -10],
"icon-size": 0.7, },
"icon-offset": [0, -10], });
}, map.on("click", "holo_crossPoint", (aaa) => callback(aaa));
}); }
map.on("click", "holo_crossPoint", (aaa) => callback(aaa));
}
} }
// second 路口icon // second 路口icon
export function addOrUpdateCrossS(map, geo, callback) { export function addOrUpdateCrossS(map, geo, callback) {
if (!map.getSource("holo_crossPointS")) { if (!map.getSource("holo_crossPointS")) {
map.addSource("holo_crossPointS", { map.addSource("holo_crossPointS", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("holo_crossPointS").setData(geo); map.getSource("holo_crossPointS").setData(geo);
} }
if (!map.getLayer("holo_crossPointS")) { if (!map.getLayer("holo_crossPointS")) {
map.addLayer({ map.addLayer({
id: "holo_crossPointS", id: "holo_crossPointS",
type: "symbol", type: "symbol",
source: "holo_crossPointS", source: "holo_crossPointS",
layout: { layout: {
"icon-image": [ "icon-image": [
"match", "match",
["get", "isSignal"], // 属性字段名称 ["get", "isSignal"], // 属性字段名称
1, 1,
"crossNormal", "crossNormal",
0, 0,
"crossFalse", "crossFalse",
"crossSelect", // 默认值，如果没有匹配到上述枚举值 "crossSelect", // 默认值，如果没有匹配到上述枚举值
], ],
"icon-size": 0.7, "icon-size": 0.7,
"icon-offset": [0, -10], "icon-offset": [0, -10],
}, },
}); });
map.on("click", "holo_crossPointS", (aaa) => callback(aaa)); }
}
} }
// 路口名称 // 路口名称
export function addOrUpdateCrossName(map, geo) { export function addOrUpdateCrossName(map, geo) {
if (!map.getSource("holo_crossPoint")) { if (!map.getSource("holo_crossPoint")) {
map.addSource("holo_crossPoint", { map.addSource("holo_crossPoint", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("holo_crossPoint").setData(geo); map.getSource("holo_crossPoint").setData(geo);
} }
if (!map.getLayer("holo_crossName")) { if (!map.getLayer("holo_crossName")) {
map.addLayer({ map.addLayer({
id: "holo_crossName", id: "holo_crossName",
type: "symbol", type: "symbol",
source: "holo_crossPoint", source: "holo_crossPoint",
layout: { layout: {
"text-field": ["get", "name"], "text-field": ["get", "name"],
"text-size": 12, "text-size": 12,
"text-offset": [0, 1.5], "text-offset": [0, 1.5],
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
}, },
paint: { paint: {
"text-color": "white", "text-color": "white",
"text-halo-blur": 1, "text-halo-blur": 1,
"text-halo-width": 2, "text-halo-width": 2,
"text-halo-color": "black", "text-halo-color": "black",
}, },
}); });
} }
} }
// 交通事件热力图 // 交通事件热力图
export function addOrUpdateEventHeat(map, geo, callback) { export function addOrUpdateEventHeat(map, geo, callback) {
console.log(geo, 7777777777777777777); console.log(geo, 7777777777777777777);
if (!map.getSource("eventHeat")) { if (!map.getSource("eventHeat")) {
map.addSource("eventHeat", { map.addSource("eventHeat", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("eventHeat").setData(geo); map.getSource("eventHeat").setData(geo);
} }
if (!map.getLayer("eventHeat")) { if (!map.getLayer("eventHeat")) {
map.addLayer({ map.addLayer({
id: "eventHeat", id: "eventHeat",
type: "heatmap", type: "heatmap",
source: "eventHeat", source: "eventHeat",
paint: { paint: {
"heatmap-color": [ "heatmap-color": [
"interpolate", "interpolate",
["linear"], ["linear"],
["heatmap-density"], ["heatmap-density"],
0, 0,
"rgba(38, 233, 251,0.0)", "rgba(38, 233, 251,0.0)",
0.1, 0.1,
"rgba(38, 233, 251,0.2)", // 低密度的颜色 "rgba(38, 233, 251,0.2)", // 低密度的颜色
0.2, 0.2,
"rgba(36, 239, 219,0.7)", "rgba(36, 239, 219,0.7)",
0.4, 0.4,
"rgba(83, 231, 169,0.8)", "rgba(83, 231, 169,0.8)",
0.6, 0.6,
"rgba(190, 236, 68,0.9)", "rgba(190, 236, 68,0.9)",
0.8, 0.8,
"rgba(252, 145, 3,0.9)", "rgba(252, 145, 3,0.9)",
1, 1,
"rgba(253, 108, 3,1)", // 高密度的颜色 "rgba(253, 108, 3,1)", // 高密度的颜色
], ],
}, },
}); });
if (map.getLayer("vehicle3D")) { if (map.getLayer("vehicle3D")) {
map.moveLayer("eventHeat", "vehicle3D"); map.moveLayer("eventHeat", "vehicle3D");
}
} }
}
} }
// 交通事件点图 // 交通事件点图
export function addOrUpdateEventPoint(map, geo, callback) { export function addOrUpdateEventPoint(map, geo, callback) {
if (!map.getSource("eventPoint")) { if (!map.getSource("eventPoint")) {
map.addSource("eventPoint", { map.addSource("eventPoint", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("eventPoint").setData(geo); map.getSource("eventPoint").setData(geo);
} }
if (!map.getLayer("eventPoint")) { if (!map.getLayer("eventPoint")) {
map.addLayer({ map.addLayer({
id: "eventPoint", id: "eventPoint",
type: "symbol", type: "symbol",
source: "eventPoint", source: "eventPoint",
layout: { layout: {
"icon-image": "event", "icon-image": "event",
"icon-size": 1, "icon-size": 1,
"icon-offset": [0, -10], "icon-offset": [0, -10],
}, },
}); });
map.on("click", "eventPoint", (aaa) => callback(aaa)); map.on("click", "eventPoint", (aaa) => callback(aaa));
} }
} }
export function addOrUpdateEventPoint1(map, geo, callback) { export function addOrUpdateEventPoint1(map, geo, callback) {
if (!map.getSource("eventPoint1")) { if (!map.getSource("eventPoint1")) {
map.addSource("eventPoint1", { map.addSource("eventPoint1", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("eventPoint1").setData(geo); map.getSource("eventPoint1").setData(geo);
} }
if (!map.getLayer("eventPoint1")) { if (!map.getLayer("eventPoint1")) {
map.addLayer({ map.addLayer({
id: "eventPoint1", id: "eventPoint1",
type: "symbol", type: "symbol",
source: "eventPoint1", source: "eventPoint1",
layout: { layout: {
"icon-allow-overlap": true, "icon-allow-overlap": true,
"icon-ignore-placement": true, "icon-ignore-placement": true,
"icon-image": "event", "icon-image": "event",
"icon-size": 1, "icon-size": 1,
"icon-offset": [0, -10], "icon-offset": [0, -10],
}, },
}); });
} }
} }
// 相机设备 // 相机设备
export function addOrUpdateEquipCamera(map, geo, callback) { export function addOrUpdateEquipCamera(map, geo, callback) {
if (!map.getSource("camera")) { if (!map.getSource("camera")) {
console.log("addsource"); console.log("addsource");
map.addSource("camera", { map.addSource("camera", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
console.log("setData"); console.log("setData");
map.getSource("camera").setData(geo); map.getSource("camera").setData(geo);
} }
if (!map.getLayer("camera")) { if (!map.getLayer("camera")) {
console.log("addLayer"); console.log("addLayer");
map.addLayer({ map.addLayer({
id: "camera", id: "camera",
type: "symbol", type: "symbol",
source: "camera", source: "camera",
layout: { layout: {
// "icon-image": [ // "icon-image": [
// "match", // "match",
// ["get", "status"], // 属性字段名称 // ["get", "status"], // 属性字段名称
// '0', // '0',
// "cameraFalse", // "cameraFalse",
// '1', // '1',
// 'camera', // 'camera',
// "cameraFalse", // "cameraFalse",
// ], // 默认值，如果没有匹配到上述枚举值] // ], // 默认值，如果没有匹配到上述枚举值]
"icon-image": "camera", "icon-image": "camera",
"icon-size": 0.6, "icon-size": 0.6,
"icon-ignore-placement": true, "icon-ignore-placement": true,
// 'icon-offset': [0, -10] // 'icon-offset': [0, -10]
}, },
}); });
// map.on("click", "camera", (aaa) => callback(aaa, "camera")); // map.on("click", "camera", (aaa) => callback(aaa, "camera"));
} }
} }
// 设备... // 设备...
export function addOrUpdateEquipMilli(map, geo, callback) { export function addOrUpdateEquipMilli(map, arr, callback) {
if (!map.getSource("milli")) { let geo = convertPointsWktToGeo(arr);
map.addSource("milli", { if (!map.getSource("milli")) {
type: "geojson", map.addSource("milli", {
data: geo, type: "geojson",
}); data: geo,
} else { });
map.getSource("milli").setData(geo); } else {
} map.getSource("milli").setData(geo);
if (!map.getLayer("milli")) { }
map.addLayer({ if (!map.getLayer("milli")) {
id: "milli", map.addLayer({
type: "symbol", id: "milli",
source: "milli", type: "symbol",
layout: { source: "milli",
"icon-image": [ layout: {
"match", "icon-image": [
["get", "status"], // 属性字段名称 "match",
'0', ["get", "status"], // 属性字段名称
"milliFalse", "0",
'1', "milliFalse",
'milli', "1",
"milliFalse", "milli",
], // 默认值，如果没有匹配到上述枚举值] "milliFalse",
// "icon-image": "milli", ], // 默认值，如果没有匹配到上述枚举值]
"icon-size": 0.6, // "icon-image": "milli",
"icon-ignore-placement": true, "icon-size": 0.6,
}, "icon-ignore-placement": true,
}); },
// map.on("click", "milli", (aaa) => callback(aaa, "milli")); });
} // map.on("click", "milli", (aaa) => callback(aaa, "milli"));
}
} }
export function addOrUpdateEquipRadar(map, geo, callback) { export function addOrUpdateEquipRadar(map, arr, callback) {
if (!map.getSource("radar")) { let geo = convertPointsWktToGeo(arr);
map.addSource("radar", { if (!map.getSource("radar")) {
type: "geojson", map.addSource("radar", {
data: geo, type: "geojson",
}); data: geo,
} else { });
map.getSource("radar").setData(geo); } else {
} map.getSource("radar").setData(geo);
if (!map.getLayer("radar")) { }
map.addLayer({ if (!map.getLayer("radar")) {
id: "radar", map.addLayer({
type: "symbol", id: "radar",
source: "radar", type: "symbol",
layout: { source: "radar",
"icon-image": [ layout: {
"match", "icon-image": [
["get", "status"], // 属性字段名称 "match",
'0', ["get", "status"], // 属性字段名称
"radarFalse", "0",
'1', "radarFalse",
'radar', "1",
"radarFalse", "radar",
], // 默认值，如果没有匹配到上述枚举值] "radarFalse",
// "icon-image": "radar", ], // 默认值，如果没有匹配到上述枚举值]
"icon-size": 0.6, // "icon-image": "radar",
"icon-ignore-placement": true, "icon-size": 0.6,
}, "icon-ignore-placement": true,
}); },
// map.on("click", "radar", (aaa) => callback(aaa, "radar")); });
} // map.on("click", "radar", (aaa) => callback(aaa, "radar"));
}
} }
export function addOrUpdateEquipSignal(map, geo, callback) { export function addOrUpdateEquipSignal(map, arr, callback) {
if (!map.getSource("signal")) { let geo = convertPointsWktToGeo(arr);
map.addSource("signal", { if (!map.getSource("signal")) {
type: "geojson", map.addSource("signal", {
data: geo, type: "geojson",
}); data: geo,
} else { });
map.getSource("signal").setData(geo); } else {
} map.getSource("signal").setData(geo);
if (!map.getLayer("signal")) { }
map.addLayer({ if (!map.getLayer("signal")) {
id: "signal", map.addLayer({
type: "symbol", id: "signal",
source: "signal", type: "symbol",
layout: { source: "signal",
// "icon-image": "signal", layout: {
"icon-image": [ // "icon-image": "signal",
"match", "icon-image": [
["get", "status"], // 属性字段名称 "match",
'0', ["get", "status"], // 属性字段名称
"signalFalse", "0",
'1', "signalFalse",
'signal', "1",
"signalFalse", "signal",
], // 默认值，如果没有匹配到上述枚举值] "signalFalse",
"icon-size": 0.6, ], // 默认值，如果没有匹配到上述枚举值]
"icon-ignore-placement": true, "icon-size": 0.6,
}, "icon-ignore-placement": true,
}); },
// map.on("click", "signal", (aaa) => callback(aaa, "signal")); });
} // map.on("click", "signal", (aaa) => callback(aaa, "signal"));
}
} }
export function addOrUpdateEquipWeather(map, geo, callback) { export function addOrUpdateEquipWeather(map, arr, callback) {
if (!map.getSource("weather")) { let geo = convertPointsWktToGeo(arr);
map.addSource("weather", { if (!map.getSource("weather")) {
type: "geojson", map.addSource("weather", {
data: geo, type: "geojson",
}); data: geo,
} else { });
map.getSource("weather").setData(geo); } else {
} map.getSource("weather").setData(geo);
if (!map.getLayer("weather")) { }
map.addLayer({ if (!map.getLayer("weather")) {
id: "weather", map.addLayer({
type: "symbol", id: "weather",
source: "weather", type: "symbol",
layout: { source: "weather",
// "icon-image": "weather", layout: {
"icon-image": [ // "icon-image": "weather",
"match", "icon-image": [
["get", "status"], // 属性字段名称 "match",
'0', ["get", "status"], // 属性字段名称
"weatherFalse", "0",
'1', "weatherFalse",
'weather', "1",
"weatherFalse", "weather",
], // 默认值，如果没有匹配到上述枚举值] "weatherFalse",
"icon-size": 0.6, ], // 默认值，如果没有匹配到上述枚举值]
"icon-ignore-placement": true, "icon-size": 0.6,
}, "icon-ignore-placement": true,
}); },
// map.on("click", "weather", (aaa) => callback(aaa, "weather")); });
} // map.on("click", "weather", (aaa) => callback(aaa, "weather"));
}
} }
// 车牌号及其背景图片 // 车牌号及其背景图片
export function addOrUpdateLicense(map, geo) { export function addOrUpdateLicense(map, geo) {
if (!map.getSource("license")) { if (!map.getSource("license")) {
map.addSource("license", { map.addSource("license", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("license").setData(geo); map.getSource("license").setData(geo);
} }
if (!map.getLayer("licenseBack")) { if (!map.getLayer("licenseBack")) {
map.addLayer({ map.addLayer({
id: "licenseBack", id: "licenseBack",
type: "symbol", type: "symbol",
source: "license", source: "license",
layout: { layout: {
"icon-allow-overlap": true, "icon-allow-overlap": true,
"icon-ignore-placement": true, "icon-ignore-placement": true,
"icon-size": 0.4, "icon-size": 0.4,
"icon-image": ["concat", "license", ["get", "licenseColor"]], "icon-image": ["concat", "license", ["get", "licenseColor"]],
"icon-offset": [0, -80], "icon-offset": [0, -80],
}, },
paint: { paint: {
// 'icon-translate': [-80, 0], // 'icon-translate': [-80, 0],
// 'icon-translate-anchor': 'viewport' // 'icon-translate-anchor': 'viewport'
}, },
}); });
} }
if (!map.getLayer("license")) { if (!map.getLayer("license")) {
map.addLayer({ map.addLayer({
id: "license", id: "license",
type: "symbol", type: "symbol",
source: "license", source: "license",
layout: { layout: {
"text-field": ["get", "picLicense"], "text-field": ["get", "picLicense"],
"text-size": 10, "text-size": 10,
"text-offset": [0, -3.5], "text-offset": [0, -3.5],
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
}, },
paint: { paint: {
"text-color": "white", "text-color": "white",
"text-halo-width": 0.3, "text-halo-width": 0.3,
"text-halo-color": "white", "text-halo-color": "white",
}, },
}); });
} }
} }
// 中间层级车辆图片图层 // 中间层级车辆图片图层
export function addOrUpdateVehiclePic(map, geo) { export function addOrUpdateVehiclePic(map, geo) {
if (!map.getSource("vehiclePic")) { if (!map.getSource("vehiclePic")) {
map.addSource("vehiclePic", { map.addSource("vehiclePic", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("vehiclePic").setData(geo); map.getSource("vehiclePic").setData(geo);
} }
if (!map.getLayer("vehiclePic")) { if (!map.getLayer("vehiclePic")) {
map.addLayer( map.addLayer(
{ {
id: "vehiclePic", id: "vehiclePic",
type: "symbol", type: "symbol",
source: "vehiclePic", source: "vehiclePic",
layout: { layout: {
"icon-allow-overlap": true, "icon-allow-overlap": true,
"icon-ignore-placement": true, "icon-ignore-placement": true,
"icon-size": 0.2, "icon-size": 0.2,
"icon-image": ["concat", "car", ["get", "originalType"]], "icon-image": ["concat", "car", ["get", "originalType"]],
"icon-pitch-alignment": "map", "icon-pitch-alignment": "map",
"icon-rotate": ["get", "courseAngle"], "icon-rotate": ["get", "courseAngle"],
"icon-rotation-alignment": "map", "icon-rotation-alignment": "map",
// 'icon-offset': [0, -20] // 'icon-offset': [0, -20]
}, },
}, },
"vehicle3D" "vehicle3D"
); );
} }
} }
// 车道面 // 车道面
export function addOrUpdateRoadPolygon(map, geo, callback) { export function addOrUpdateRoadPolygon(map, geo, callback) {
if (!map.getSource("roadPolygon")) { if (!map.getSource("roadPolygon")) {
map.addSource("roadPolygon", { map.addSource("roadPolygon", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("roadPolygon").setData(geo); map.getSource("roadPolygon").setData(geo);
} }
if (!map.getLayer("roadPolygon")) { if (!map.getLayer("roadPolygon")) {
map.addLayer( map.addLayer(
{ {
id: "roadPolygon", id: "roadPolygon",
type: "fill", type: "fill",
source: "roadPolygon", source: "roadPolygon",
paint: { paint: {
"fill-color": [ "fill-color": [
"match", "match",
["get", "select"], // 属性字段名称 ["get", "select"], // 属性字段名称
0, 0,
"rgba(114, 186, 190,0.4)", "rgba(114, 186, 190,0.4)",
1, 1,
// "rgba(114, 186, 190,0.8)", // "rgba(114, 186, 190,0.8)",
'rgba(213, 44, 54,0.8)', "rgba(213, 44, 54,0.8)",
"rgba(255,255,255,1)", "rgba(255,255,255,1)",
], // 默认值，如果没有匹配到上述枚举值] ], // 默认值，如果没有匹配到上述枚举值]
}, },
} }
// "vehicle3D" // "vehicle3D"
); );
// map.on("click", "roadPolygon", (aaa) => callback(aaa)); // map.on("click", "roadPolygon", (aaa) => callback(aaa));
} }
} }
// 轨迹点集合 vector图层 // 轨迹点集合 vector图层
export function addOrUpdateTrackPointVector(map, startTime, endTime, crossId) { export function addOrUpdateTrackPointVector(map, startTime, endTime, crossId) {
if (!map.getSource("myMVTLayer")) { if (!map.getSource("myMVTLayer")) {
map.addSource("myMVTLayer", { map.addSource("myMVTLayer", {
type: "vector", type: "vector",
tiles: [ tiles: [
`${map_config.MVT_TILEURL}/holo/histrory-track/tile?z={z}&x={x}&y={y}&startTime=${startTime}&endTime=${endTime}&crossId=${crossId}`, `${map_config.MVT_TILEURL}/holo/histrory-track/tile?z={z}&x={x}&y={y}&startTime=${startTime}&endTime=${endTime}&crossId=${crossId}`,
], ],
}); });
} }
if (!map.getLayer("myMVTLayer")) { if (!map.getLayer("myMVTLayer")) {
map.addLayer({ map.addLayer({
id: "myMVTLayer", id: "myMVTLayer",
type: "circle", type: "circle",
source: "myMVTLayer", source: "myMVTLayer",
"source-layer": "track-point", "source-layer": "track-point",
paint: { paint: {
"circle-color": "#00fff1", "circle-color": "#00fff1",
"circle-radius": 1, "circle-radius": 1,
}, },
}); });
} }
} }
// 组织评价 - 流量线 // 组织评价 - 流量线
export function addOrUpdateFlowLine(map, geo) { export function addOrUpdateFlowLine(map, geo) {
if (!map.getSource("flowLine")) { if (!map.getSource("flowLine")) {
map.addSource("flowLine", { map.addSource("flowLine", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("flowLine").setData(geo); map.getSource("flowLine").setData(geo);
} }
if (!map.getLayer("flowLine")) { if (!map.getLayer("flowLine")) {
map.addLayer({ map.addLayer({
id: "flowLine", id: "flowLine",
type: "line", type: "line",
source: "flowLine", source: "flowLine",
paint: { paint: {
"line-color": [ "line-color": [
"match", "match",
["get", "select"], // 属性字段名称 ["get", "select"], // 属性字段名称
1, 1,
"rgba(152, 234, 35, 1)", "rgba(152, 234, 35, 1)",
0, 0,
"rgba(1,1,1,0)", "rgba(1,1,1,0)",
"rgba(1,1,1,0)", // 默认值，如果没有匹配到上述枚举值 "rgba(1,1,1,0)", // 默认值，如果没有匹配到上述枚举值
], ],
"line-width": 2, "line-width": 2,
}, },
}); });
} }
} }
// 分析报告 - 流量线 // 分析报告 - 流量线
export function addOrUpdateFlowLineR(map, geo) { export function addOrUpdateFlowLineR(map, geo) {
if (!map.getSource("flowLineR")) { if (!map.getSource("flowLineR")) {
map.addSource("flowLineR", { map.addSource("flowLineR", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("flowLineR").setData(geo); map.getSource("flowLineR").setData(geo);
} }
if (!map.getLayer("flowLineR")) { if (!map.getLayer("flowLineR")) {
map.addLayer({ map.addLayer({
id: "flowLineR", id: "flowLineR",
type: "line", type: "line",
source: "flowLineR", source: "flowLineR",
paint: { paint: {
// 'line-color':'rgba(152, 234, 35, 1)', // 'line-color':'rgba(152, 234, 35, 1)',
"line-color": [ "line-color": [
"match", "match",
["get", "ridDir"], // 属性字段名称 ["get", "ridDir"], // 属性字段名称
1, 1,
"#d10401", "#d10401",
2, 2,
"#d10401", "#d10401",
3, 3,
"#08a24d", "#08a24d",
4, 4,
"#08a24d", "#08a24d",
5, 5,
"#5440b8", "#5440b8",
6, 6,
"#5440b8", "#5440b8",
7, 7,
"#f37c0b", "#f37c0b",
8, 8,
"#f37c0b", "#f37c0b",
"rgba(1,1,1,0)", // 默认值，如果没有匹配到上述枚举值 "rgba(1,1,1,0)", // 默认值，如果没有匹配到上述枚举值
], ],
"line-width": 4, "line-width": 4,
}, },
}); });
} }
} }
// 分析报告 - 流量值 // 分析报告 - 流量值
export function addOrUpdateFlowLineRText(map, geo) { export function addOrUpdateFlowLineRText(map, geo) {
if (!map.getSource("flowLineRText")) { if (!map.getSource("flowLineRText")) {
map.addSource("flowLineRText", { map.addSource("flowLineRText", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("flowLineRText").setData(geo); map.getSource("flowLineRText").setData(geo);
} }
if (!map.getLayer("flowLineRText")) { if (!map.getLayer("flowLineRText")) {
map.addLayer({ map.addLayer({
id: "flowLineRText", id: "flowLineRText",
type: "symbol", type: "symbol",
source: "flowLineRText", source: "flowLineRText",
layout: { layout: {
"text-field": ["get", "flowVal"], "text-field": ["get", "flowVal"],
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
"text-size": 12, "text-size": 12,
}, },
paint: { paint: {
"text-color": "rgba(255, 225, 0, 1)", "text-color": "rgba(255, 225, 0, 1)",
"text-halo-color": "black", "text-halo-color": "black",
"text-halo-width": 2, "text-halo-width": 2,
}, },
}); });
} }
} }
// 分析报告 - 流量线箭头 // 分析报告 - 流量线箭头
export function addOrUpdateFlowLineRArrow(map, points) { export function addOrUpdateFlowLineRArrow(map, points) {
if (!map.getSource("flowLineArrowR")) { if (!map.getSource("flowLineArrowR")) {
map.addSource('flowLineArrowR', { map.addSource("flowLineArrowR", {
type: 'geojson', type: "geojson",
data: points data: points,
}); });
} else { } else {
map.getSource("flowLineArrowR").setData(points); map.getSource("flowLineArrowR").setData(points);
} }
if (!map.getLayer("flowLineArrowR")) { if (!map.getLayer("flowLineArrowR")) {
// console.log('has.............'); // console.log('has.............');
if (!map.hasImage('arrowIcon1')) { if (!map.hasImage("arrowIcon1")) {
const arrowIcons = []; const arrowIcons = [];
// Create a triangle icon (arrow) with a specified color // Create a triangle icon (arrow) with a specified color
// const arrowIcon0 = createTriangleIcon("#d10401"); // const arrowIcon0 = createTriangleIcon("#d10401");
const arrowIcon0 = createTriangleIcon("yellow"); const arrowIcon0 = createTriangleIcon("yellow");
const arrowIcon1 = createTriangleIcon("#08a24d"); const arrowIcon1 = createTriangleIcon("#08a24d");
const arrowIcon2 = createTriangleIcon("#5440b8"); const arrowIcon2 = createTriangleIcon("#5440b8");
const arrowIcon3 = createTriangleIcon("#f37c0b"); const arrowIcon3 = createTriangleIcon("#f37c0b");
arrowIcons.push(arrowIcon0, arrowIcon2, arrowIcon3, arrowIcon1); arrowIcons.push(arrowIcon0, arrowIcon2, arrowIcon3, arrowIcon1);
for (let i = 0; i < arrowIcons.length; i++) { for (let i = 0; i < arrowIcons.length; i++) {
map.loadImage(arrowIcons[i], (error, image) => { map.loadImage(arrowIcons[i], (error, image) => {
if (error) throw error; if (error) throw error;
map.addImage(`arrowIcon${i}`, image) map.addImage(`arrowIcon${i}`, image);
})
}
}
map.addLayer({
id: 'flowLineArrowR',
type: 'symbol',
source: 'flowLineArrowR',
layout: {
// 'icon-image': [
// "match",
// ["get", "ridDir"], // 属性字段名称
// 1,
// "arrowIcon0",
// 2,
// "arrowIcon0",
// 3,
// "arrowIcon1",
// 4,
// "arrowIcon1",
// 5,
// "arrowIcon2",
// 6,
// "arrowIcon2",
// 7,
// "arrowIcon3",
// 8,
// "arrowIcon3",
// "arrowIcon1",
// ],
'icon-image': 'arrowIcon0',
'icon-size': 0.5, // Adjust the size of the arrow
'icon-rotation-alignment': 'map',
'icon-rotate': ['get', 'bearing'], // Rotate the arrow based on bearing
},
}); });
} }
}
map.addLayer({
id: "flowLineArrowR",
type: "symbol",
source: "flowLineArrowR",
layout: {
// 'icon-image': [
// "match",
// ["get", "ridDir"], // 属性字段名称
// 1,
// "arrowIcon0",
// 2,
// "arrowIcon0",
// 3,
// "arrowIcon1",
// 4,
// "arrowIcon1",
// 5,
// "arrowIcon2",
// 6,
// "arrowIcon2",
// 7,
// "arrowIcon3",
// 8,
// "arrowIcon3",
// "arrowIcon1",
// ],
"icon-image": "arrowIcon0",
"icon-size": 0.5, // Adjust the size of the arrow
"icon-rotation-alignment": "map",
"icon-rotate": ["get", "bearing"], // Rotate the arrow based on bearing
},
});
}
} }
// 组织评价 - 流量线箭头 // 组织评价 - 流量线箭头
export function addOrUpdateFlowLineArrow(map, json) { export function addOrUpdateFlowLineArrow(map, json) {
let features = []; let features = [];
for (let item of json) { for (let item of json) {
if (item.select) { if (item.select) {
let angle = turf.bearing( let angle = turf.bearing(
turf.point(item.lineArray[0]), turf.point(item.lineArray[0]),
turf.point(item.lineArray[1]) turf.point(item.lineArray[1])
); );
features.push( features.push(
turf.point([item.endLng, item.endLat], {...item, angle: angle}) turf.point([item.endLng, item.endLat], { ...item, angle: angle })
); );
} }
} }
let geo = turf.featureCollection(features); let geo = turf.featureCollection(features);
if (!map.getSource("flowLineArrow")) { if (!map.getSource("flowLineArrow")) {
map.addSource("flowLineArrow", { map.addSource("flowLineArrow", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("flowLineArrow").setData(geo); map.getSource("flowLineArrow").setData(geo);
} }
if (!map.getLayer("flowLineArrow")) { if (!map.getLayer("flowLineArrow")) {
map.addLayer({ map.addLayer({
id: "flowLineArrow", id: "flowLineArrow",
type: "symbol", type: "symbol",
source: "flowLineArrow", source: "flowLineArrow",
layout: { layout: {
"icon-image": "lineArrow", "icon-image": "lineArrow",
"icon-rotate": ["get", "angle"], "icon-rotate": ["get", "angle"],
"icon-ignore-placement": true, "icon-ignore-placement": true,
"icon-allow-overlap": true, "icon-allow-overlap": true,
"icon-pitch-alignment": "map", "icon-pitch-alignment": "map",
"icon-rotation-alignment": "map", "icon-rotation-alignment": "map",
"icon-size": 0.5, "icon-size": 0.5,
}, },
}); });
} }
} }
// 流量存在分流 一个起始值对应多个分流末尾 // 流量存在分流 一个起始值对应多个分流末尾
// 组织评价 - 流量值（起始 // 组织评价 - 流量值（起始
export function addOrUpdateFlowText(map, json) { export function addOrUpdateFlowText(map, json) {
let features = []; let features = [];
for (let item of json) { for (let item of json) {
if (item.select) { if (item.select) {
features.push(turf.point([item.startLng, item.startLat], item)); features.push(turf.point([item.startLng, item.startLat], item));
} }
} }
let geo = turf.featureCollection(features); let geo = turf.featureCollection(features);
if (!map.getSource("flowText")) { if (!map.getSource("flowText")) {
map.addSource("flowText", { map.addSource("flowText", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("flowText").setData(geo); map.getSource("flowText").setData(geo);
} }
if (!map.getLayer("flowText")) { if (!map.getLayer("flowText")) {
map.addLayer({ map.addLayer({
id: "flowText", id: "flowText",
type: "symbol", type: "symbol",
source: "flowText", source: "flowText",
layout: { layout: {
"text-field": ["get", "flow"], "text-field": ["get", "flow"],
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
"text-size": 12, "text-size": 12,
}, },
paint: { paint: {
"text-color": "rgba(255, 225, 0, 1)", "text-color": "rgba(255, 225, 0, 1)",
"text-halo-color": "black", "text-halo-color": "black",
"text-halo-width": 2, "text-halo-width": 2,
}, },
}); });
} }
} }
// 组织评价 - 流量值（结束 // 组织评价 - 流量值（结束
export function addOrUpdateFlowTextEnd(map, json) { export function addOrUpdateFlowTextEnd(map, json) {
let features = []; let features = [];
for (let item of json) { for (let item of json) {
if (item.select) { if (item.select) {
features.push(turf.point([item.endLng, item.endLat], item)); features.push(turf.point([item.endLng, item.endLat], item));
} }
} }
let geo = turf.featureCollection(features); let geo = turf.featureCollection(features);
if (!map.getSource("flowTextEnd")) { if (!map.getSource("flowTextEnd")) {
map.addSource("flowTextEnd", { map.addSource("flowTextEnd", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("flowTextEnd").setData(geo); map.getSource("flowTextEnd").setData(geo);
} }
if (!map.getLayer("flowTextEnd")) { if (!map.getLayer("flowTextEnd")) {
map.addLayer({ map.addLayer({
id: "flowTextEnd", id: "flowTextEnd",
type: "symbol", type: "symbol",
source: "flowTextEnd", source: "flowTextEnd",
layout: { layout: {
"text-field": ["get", "endFlow"], "text-field": ["get", "endFlow"],
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
"text-size": 12, "text-size": 12,
}, },
paint: { paint: {
"text-color": "rgba(255, 225, 0, 1)", "text-color": "rgba(255, 225, 0, 1)",
"text-halo-color": "black", "text-halo-color": "black",
"text-halo-width": 2, "text-halo-width": 2,
}, },
}); });
} }
} }
// let roadLineGeo = null, roadChunkPointGeo = null // let roadLineGeo = null, roadChunkPointGeo = null
...@@ -1395,158 +1398,174 @@ export function addOrUpdateFlowTextEnd(map, json) { ...@@ -1395,158 +1398,174 @@ export function addOrUpdateFlowTextEnd(map, json) {
// } // }
export function addCalibrationTail(map) { export function addCalibrationTail(map) {
let roadLineGeo, roadChunkPointGeo; let roadLineGeo, roadChunkPointGeo;
let a = new Promise((resolve) => { let a = new Promise((resolve) => {
if (!map.getSource("calibrationTail") && !map.getSource("chunkPointGeo")) { if (!map.getSource("calibrationTail") && !map.getSource("chunkPointGeo")) {
fetch("roadLineChunk.json").then((res) => { fetch("roadLineChunk.json").then((res) => {
console.log("res...", res); console.log("res...", res);
res.json().then((data) => { res.json().then((data) => {
console.log("data...", data); console.log("data...", data);
roadLineGeo = data.roadLineGeo; roadLineGeo = data.roadLineGeo;
roadChunkPointGeo = data.roadChunkPointGeo; roadChunkPointGeo = data.roadChunkPointGeo;
map.addSource("calibrationTail", { map.addSource("calibrationTail", {
type: "geojson", type: "geojson",
data: roadLineGeo, data: roadLineGeo,
}); });
map.addSource("chunkPointGeo", { map.addSource("chunkPointGeo", {
type: "geojson", type: "geojson",
data: roadChunkPointGeo, data: roadChunkPointGeo,
}); });
resolve(); resolve();
}); });
}); });
} else { } else {
map.getSource("calibrationTail").setData(roadLineGeo); map.getSource("calibrationTail").setData(roadLineGeo);
map.getSource("chunkPointGeo").setData(roadChunkPointGeo); map.getSource("chunkPointGeo").setData(roadChunkPointGeo);
resolve(); resolve();
} }
}); });
a.then(() => { a.then(() => {
// 线条 // 线条
if (!map.getLayer("calibrationTailLine")) { if (!map.getLayer("calibrationTailLine")) {
map.addLayer({ map.addLayer({
id: "calibrationTailLine", id: "calibrationTailLine",
type: "line", type: "line",
source: "calibrationTail", source: "calibrationTail",
paint: { paint: {
"line-color": "yellow", "line-color": "yellow",
"line-width": 1, "line-width": 1,
}, },
}); });
if (map.getLayer("vehicle3D")) { if (map.getLayer("vehicle3D")) {
map.moveLayer("calibrationTailLine", "vehicle3D"); map.moveLayer("calibrationTailLine", "vehicle3D");
} }
} }
// symbol标记 // symbol标记
if (!map.getLayer("chunkSymbol")) { if (!map.getLayer("chunkSymbol")) {
map.addLayer({ map.addLayer({
id: "chunkSymbol", id: "chunkSymbol",
type: "symbol", type: "symbol",
source: "chunkPointGeo", source: "chunkPointGeo",
layout: { layout: {
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
"text-field": "|", // 刻度线的文本标记，可以用符号代替 "text-field": "|", // 刻度线的文本标记，可以用符号代替
"text-size": 12, "text-size": 12,
"text-pitch-alignment": "map", "text-pitch-alignment": "map",
"text-rotate": ["-", ["get", "angle"], 90], "text-rotate": ["-", ["get", "angle"], 90],
"text-rotation-alignment": "map", "text-rotation-alignment": "map",
}, },
paint: { paint: {
"text-color": "yellow", "text-color": "yellow",
}, },
}); });
if (map.getLayer("vehicle3D")) { if (map.getLayer("vehicle3D")) {
map.moveLayer("chunkSymbol", "vehicle3D"); map.moveLayer("chunkSymbol", "vehicle3D");
} }
} }
// text chunk 文本 // text chunk 文本
if (!map.getLayer("chunkText")) { if (!map.getLayer("chunkText")) {
// 添加刻度点编号图层 // 添加刻度点编号图层
map.addLayer({ map.addLayer({
id: "chunkText", id: "chunkText",
type: "symbol", type: "symbol",
source: "chunkPointGeo", source: "chunkPointGeo",
layout: { layout: {
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
"text-field": ["get", "index"], "text-field": ["get", "index"],
"text-size": 10, "text-size": 10,
// 'text-offset': [0, 2], // 调整文本位置 // 'text-offset': [0, 2], // 调整文本位置
"text-offset": [-2, 0], // 调整文本位置 "text-offset": [-2, 0], // 调整文本位置
"text-pitch-alignment": "map", "text-pitch-alignment": "map",
"text-rotate": ["-", ["get", "angle"], 0], "text-rotate": ["-", ["get", "angle"], 0],
"text-rotation-alignment": "map", "text-rotation-alignment": "map",
}, },
paint: { paint: {
"text-color": "yellow", "text-color": "yellow",
"text-halo-color": "black", "text-halo-color": "black",
"text-halo-width": 2, "text-halo-width": 2,
}, },
}); });
if (map.getLayer("vehicle3D")) { if (map.getLayer("vehicle3D")) {
map.moveLayer("chunkText", "vehicle3D"); map.moveLayer("chunkText", "vehicle3D");
} }
} }
}); });
} }
const size = 1000; const size = 1000;
export const vehicleWave = { export const vehicleWave = {
width: size, width: size,
height: size, height: size,
data: new Uint8Array(size * size * 4), // 用来存储图像数据 data: new Uint8Array(size * size * 4), // 用来存储图像数据
onAdd: function () { onAdd: function () {
// 创建一个canvas对象并初始化 // 创建一个canvas对象并初始化
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
canvas.width = this.width; canvas.width = this.width;
canvas.height = this.height; canvas.height = this.height;
this.context = canvas.getContext("2d"); this.context = canvas.getContext("2d");
}, },
// render 不断调用更新canvas对象的半径与fillStyle 以实现波纹效果 // render 不断调用更新canvas对象的半径与fillStyle 以实现波纹效果
render: function () { render: function () {
const duration = 1000; // 动画周期 const duration = 1000; // 动画周期
const t = (performance.now() % duration) / duration; // 当前帧相对于动画周期的时间比例 const t = (performance.now() % duration) / duration; // 当前帧相对于动画周期的时间比例
const outerRadius = (size / 2) * 0.7 * t; const outerRadius = (size / 2) * 0.7 * t;
const context = this.context; const context = this.context;
context.clearRect(0, 0, this.width, this.height); context.clearRect(0, 0, this.width, this.height);
context.beginPath(); context.beginPath();
context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2); context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
context.fillStyle = `rgba(252, 1, 26, ${1 - t})`; context.fillStyle = `rgba(252, 1, 26, ${1 - t})`;
context.lineWidth = 2 + 4 * (1 - t); context.lineWidth = 2 + 4 * (1 - t);
context.fill(); context.fill();
this.data = context.getImageData(0, 0, this.width, this.height).data; this.data = context.getImageData(0, 0, this.width, this.height).data;
map.triggerRepaint(); map.triggerRepaint();
return true; return true;
}, },
}; };
import Vue from 'vue' import Vue from "vue";
import { Message } from 'element-ui' import { Message } from "element-ui";
import eventPopupVue from "@/views/signal/mapPopup/eventPopup.vue"; import eventPopupVue from "@/views/signal/mapPopup/eventPopup.vue";
const EventPopupVue = Vue.extend(eventPopupVue); const EventPopupVue = Vue.extend(eventPopupVue);
let popupEvent = null let popupEvent = null;
export function addPopupEvent(map, prop) { export function addPopupEvent(map, prop) {
popupEvent?.remove() popupEvent?.remove();
if (prop.lng && prop.lat) { if (prop.lng && prop.lat) {
// 添加弹窗 // 添加弹窗
popupEvent = new mapboxgl.Popup({ popupEvent = new mapboxgl.Popup({
closeButton: true, closeButton: true,
anchor: "bottom", anchor: "bottom",
offset: [0, -5], offset: [0, -5],
}).setLngLat([prop.lng, prop.lat]) })
.setHTML(`<div id="event_popup_smartcity"></div>`) .setLngLat([prop.lng, prop.lat])
.addTo(map) .setHTML(`<div id="event_popup_smartcity"></div>`)
.addClassName("eventPopup"); .addTo(map)
new EventPopupVue({ .addClassName("eventPopup");
propsData: { new EventPopupVue({
model: prop, propsData: {
}, model: prop,
}).$mount( },
`#event_popup_smartcity` }).$mount(`#event_popup_smartcity`);
} else {
Message("选中事件无经纬度信息");
}
}
export function convertPointsWktToGeo(arr) {
let features = [];
for (let item of arr) {
if (item.wkt) {
if (item.wkt.split(",").length === 2) {
features.push(
turf.point(
item.wkt.split(",").map((item) => Number(item)),
item
)
); );
} else { }
Message('选中事件无经纬度信息')
} }
}
return turf.featureCollection(features);
} }
wj-smartcity/src/views/dataQueries/rightForm/index.vue
View file @ 6ff4bafe
...@@ -39,7 +39,7 @@ export default { ...@@ -39,7 +39,7 @@ export default {
tabs: [ tabs: [
{'1': '周期数据'}, {'1': '周期数据'},
{'2': '快照数据'}, {'2': '快照数据'},
{'3': '事件数据'}, // {'3': '事件数据'},
], ],
} }
}, },
......
wj-smartcity/src/views/signal/index.vue
View file @ 6ff4bafe
<template> <template>
<div class="full-w-h"> <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" <msgs
@showCrossStatus="showCrossStatus" @openCrossIndexDetail="openCrossIndexDetail" :clickCrossData="clickCrossData"
@showPolygon="showPolygon" :isCrossDetail="isCrossDetail"
@openGreenWaveDialog="openGreenWaveDialog" :show="boxesShow" @showEventPoint="showEventPoint"></msgs> v-if="!loading"
<div :class="boxesShow ? '' : 'hideBackToMain'" @click="backToMain" v-if="isCrossDetail" class="backToMain"></div> @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 <layers-switch
ref="switch" ref="switch"
:show="boxesShow" :show="boxesShow"
@changeCheck="changeCheck" @changeCheck="changeCheck"
@visibleChange="visibleChange" @visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'" :class="boxesShow ? 'generalSwitch' : 'rightSwitch'"
/> />
<!--路口指标详情弹窗--> <!--路口指标详情弹窗-->
<cross-detail :cross-detail-data="crossData" dialogId="crossDetailShow" v-if="dialogVisible.crossDetailShow" <cross-detail
@actionFinished="actionFinished"/> :cross-detail-data="crossData"
dialogId="crossDetailShow"
v-if="dialogVisible.crossDetailShow"
@actionFinished="actionFinished"
/>
<!--路口绿波信息弹窗--> <!--路口绿波信息弹窗-->
<green-wave :greenId="greenId" :waveTitle='waveTitle' dialogId="greenWaveShow" v-if="dialogVisible.greenWaveShow" <green-wave
@actionFinished="actionFinished"/> :greenId="greenId"
:waveTitle="waveTitle"
dialogId="greenWaveShow"
v-if="dialogVisible.greenWaveShow"
@actionFinished="actionFinished"
/>
<!--设备图例控制-->
<equipment-switch
:boxesShow="boxesShow"
@equipmentChange="equipmentChange"
v-if="currentCheck === 'fourth'"
/>
</div> </div>
</template> </template>
<script> <script>
import Vue from "vue"; import Vue from "vue";
import wMap from "../../components/Standard/mapMapbox.vue"; import wMap from "../../components/Standard/mapMapbox.vue";
import msgs from './msgs/index.vue' import msgs from "./msgs/index.vue";
import LayersSwitch from "./layersSwitch.vue"; import LayersSwitch from "./switchers/layersSwitch.vue";
import mapAssets from "@/config/holo/mapAssets"; import mapAssets from "@/config/holo/mapAssets";
import CrossDetail from "@/views/signal/dialogs/crossDetail.vue"; import CrossDetail from "@/views/signal/dialogs/crossDetail.vue";
import GreenWave from "@/views/signal/dialogs/greenWave/index.vue"; import GreenWave from "@/views/signal/dialogs/greenWave/index.vue";
import * as mapTool from '@/utils/mapboxTools' 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 dict from "../../config/holo/dictionary";
import vehicleDetail from "./mapPopup/vehicleDetail.vue"; import vehicleDetail from "./mapPopup/vehicleDetail.vue";
import {addOrUpdateEventPoint1} from "@/utils/mapboxTools"; import { addOrUpdateEventPoint1 } from "@/utils/mapboxTools";
import EquipmentSwitch from "./switchers/equipmentSwitch.vue";
import {
equip_signal,
equip_weather,
equip_camera,
equip_radar,
} from "../../dao/situation";
const EquipmentPopup = Vue.extend(equipmentPopup);
const VehiclePopup = Vue.extend(vehicleDetail); const VehiclePopup = Vue.extend(vehicleDetail);
let map = null; let map = null;
let vehiclePopups = {}, let vehiclePopups = {},
popupVises = {}, popupVises = {},
vehiclePopupInstances = {}, vehiclePopupInstances = {},
licenseLabel = {}, // 车牌号label licenseLabel = {}, // 车牌号label
vehicleModels = {}, // 车辆model vehicleModels = {}, // 车辆model
vehicleModelTypes = {}, vehicleModelTypes = {},
lastFrameTime = null, equipPopup = null,
AlarmPopupIns = {}, equipPopupInstance = null
stopLineData = [],
waitGeo = null,
radarModels = {},
radarModelTypes = {},
radarTimers = [],
trackTimer = null; // 轨迹心跳检测
export default { export default {
components: {GreenWave, CrossDetail, wMap, LayersSwitch, msgs}, components: {
GreenWave,
CrossDetail,
wMap,
LayersSwitch,
msgs,
EquipmentSwitch,
},
computed: {}, computed: {},
data() { data() {
return { return {
currentCheck: "first",
timer: null, timer: null,
licenseState: false, licenseState: false,
lastLocation: [], lastLocation: [],
...@@ -69,16 +105,36 @@ export default { ...@@ -69,16 +105,36 @@ export default {
clickCrossData: {}, clickCrossData: {},
isCrossDetail: false, isCrossDetail: false,
loading: true, loading: true,
crossData: {id: '', name: ''}, crossData: { id: "", name: "" },
waveTitle: '', waveTitle: "",
boxesShow: true, boxesShow: true,
detailShow: false, detailShow: false,
dialogVisible: { dialogVisible: {
crossDetailShow: false, crossDetailShow: false,
greenWaveShow: false greenWaveShow: false,
}, },
selectVehicle: {}, selectVehicle: {},
greenId: '', greenId: "",
layers: {
first: [
"crossStatus",
"milliScope",
"holo_crossPoint",
"vehiclePic",
"vehicle",
"selectVehicleTrack",
"vehicleSelectWave",
"detetorsA",
"detetorsB",
"detetorsC",
"lightLayer",
"lightLayerText",
],
second: ["holo_crossPointS", "vector_road_layer"],
third: ["eventHeat", "eventPoint"],
fourth: ["weather", "camera", "radar", "signal", "milli"],
},
crosses: null,
}; };
}, },
watch: { watch: {
...@@ -86,12 +142,12 @@ export default { ...@@ -86,12 +142,12 @@ export default {
boxesShow(val) { boxesShow(val) {
if (val) { if (val) {
document document
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0] .getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.remove("mapboxgl-ctrl-bottom-right-hide-box"); .classList.remove("mapboxgl-ctrl-bottom-right-hide-box");
} else { } else {
document document
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0] .getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.add("mapboxgl-ctrl-bottom-right-hide-box"); .classList.add("mapboxgl-ctrl-bottom-right-hide-box");
} }
}, },
}, },
...@@ -102,19 +158,46 @@ export default { ...@@ -102,19 +158,46 @@ export default {
"CarType", "CarType",
"PlateColor", "PlateColor",
"EventType", "EventType",
'Direction' "Direction",
]; ];
for (let item of needDicts) { for (let item of needDicts) {
queue.push( queue.push(
this.$store.dispatch("QUERY_DICT", { this.$store.dispatch("QUERY_DICT", {
type: item, type: item,
}) })
); );
} }
Promise.all(queue).then(() => { Promise.all(queue).then(() => {
map = this.$refs.wMap.initMap(); map = this.$refs.wMap.initMap();
map.on("style.load", () => { map.on("style.load", () => {
this.refreshBounds() this.loading = false;
// 快捷键
window.onkeydown = () => {
// alt + 1/2 改变缩放层级
if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
map.flyTo({
zoom: map_config.MAP_ZOOM,
center: map_config.MAP_CENTER,
bearing: map_config.MAP_BEARING,
pitch: map_config.MAP_PITCH,
duration: 1000,
essential: true,
});
this.boxesShow = true;
}
if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
map.flyTo({
zoom: map_config.MAP_ZOOM2,
center: map_config.MAP_CENTER2,
bearing: map_config.MAP_BEARING2,
pitch: map_config.MAP_PITCH2,
duration: 1000, // Animate over 2 seconds
essential: true,
});
}
};
// 设置地图并加载必要资源
this.refreshBounds();
map.setFog({ map.setFog({
color: "#1d3244", // Lower atmosphere color: "#1d3244", // Lower atmosphere
"high-color": "#030b19", // Upper atmosphere "high-color": "#030b19", // Upper atmosphere
...@@ -136,7 +219,6 @@ export default { ...@@ -136,7 +219,6 @@ export default {
// sky: true, // sky: true,
enableSelectingObjects: true, enableSelectingObjects: true,
}); });
map.addLayer({ map.addLayer({
id: "vehicle3D", id: "vehicle3D",
type: "custom", type: "custom",
...@@ -149,7 +231,7 @@ export default { ...@@ -149,7 +231,7 @@ export default {
type: "gltf", type: "gltf",
units: "meters", units: "meters",
scale: 0.8, scale: 0.8,
adjustment: {x: 0.5, y: 1, z: -0.5}, adjustment: { x: 0.5, y: 1, z: -0.5 },
bbox: true, bbox: true,
}; };
window.tb.loadObj(options, (model) => { window.tb.loadObj(options, (model) => {
...@@ -162,61 +244,50 @@ export default { ...@@ -162,61 +244,50 @@ export default {
window.tb.update(); window.tb.update();
}, },
}); });
this.loading = false;
map.addControl( map.addControl(
new mapboxgl.NavigationControl({showZoom: false}), new mapboxgl.NavigationControl({ showZoom: false }),
"bottom-right" "bottom-right"
); );
map.on('dblclick', () => { map.on("dblclick", () => {
console.log('center ' + map.getCenter() + ' pitch ' + map.getPitch() + ' bearing ' + map.getBearing() + ' zoom ' + map.getZoom()) console.log(
}) "center " +
window.map = map map.getCenter() +
map.on('zoomend', () => { " pitch " +
this.mapZoomEnd() map.getPitch() +
if (map.getZoom() < 16.5) { " bearing " +
this.isCrossDetail = false map.getBearing() +
this.removeLayers('eventPoint1') " zoom " +
} map.getZoom()
}) );
map.on('moveend', () => {
this.mapZoomEnd()
})
// 注册车辆实时ws
let socket = initWs({
name: "callCar",
url: ws_config.BASE_URL,
callback: this.callCar,
}); });
socket.ws.onopen = () => { window.map = map;
if (socket.ws.readyState === 1) { map.on("zoomend", () => {
socket.ws.send('{ dataType: "1"}'); this.mapZoomEnd();
this.sockets.push(socket); });
} map.on("moveend", () => {
}; this.mapZoomEnd();
});
this.switchfirst();
}); });
}); });
}, },
methods: { methods: {
showEventPoint(events) { // 设备图例点击
let features = [] equipmentChange(equips) {
for (let item of events) { for (let item of equips) {
if (item.lng && item.lat) { if (map.getLayer(item.label)) {
features.push(turf.point([item.lng, item.lat], item)) map.setLayoutProperty(
item.label,
"visibility",
item.check ? "visible" : "none"
);
} }
} }
// features.push(turf.point([map.getCenter().lng,map.getCenter().lat],{a:1}))
let geo = turf.featureCollection(features)
mapTool.addOrUpdateEventPoint1(map, geo)
map.off('click', 'eventPoint1', this.eventPointClick)
map.on('click', 'eventPoint1', this.eventPointClick)
},
eventPointClick(e) {
mapTool.addPopupEvent(window.map, e.features[0].properties)
}, },
backToMain() { backToMain() {
this.isCrossDetail = false this.isCrossDetail = false;
this.boxesShow = true this.boxesShow = true;
this.removeLayers('eventPoint1') this.removeLayers("eventPoint1");
map?.flyTo({ map?.flyTo({
duration: 1000, duration: 1000,
essential: true, essential: true,
...@@ -224,7 +295,7 @@ export default { ...@@ -224,7 +295,7 @@ export default {
center: map_config.MAP_CENTER, center: map_config.MAP_CENTER,
zoom: map_config.MAP_ZOOM, zoom: map_config.MAP_ZOOM,
pitch: map_config.MAP_PITCH, pitch: map_config.MAP_PITCH,
}) });
}, },
// 更新经纬度-角度-详细信息-弹窗信息 // 更新经纬度-角度-详细信息-弹窗信息
setModel(model, options, setColor) { setModel(model, options, setColor) {
...@@ -236,14 +307,14 @@ export default { ...@@ -236,14 +307,14 @@ export default {
return item.code == options.originalColor; return item.code == options.originalColor;
}); });
let realColor = colorDesc let realColor = colorDesc
? dict.colorMatch[colorDesc.name] ? dict.colorMatch[colorDesc.name]
: "#fff"; : "#fff";
child.material.color.set(realColor); child.material.color.set(realColor);
} }
}); });
} }
model.setCoords([options.longitude, options.latitude]); 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; model.userData.data = options;
}, },
clearLicense() { clearLicense() {
...@@ -255,6 +326,10 @@ export default { ...@@ -255,6 +326,10 @@ export default {
} }
}, },
mapZoomEnd() { mapZoomEnd() {
if (map.getZoom() < 16.5) {
this.isCrossDetail = false;
this.removeLayers("eventPoint1");
}
this.refreshBounds(); this.refreshBounds();
}, },
refreshBounds() { refreshBounds() {
...@@ -288,7 +363,6 @@ export default { ...@@ -288,7 +363,6 @@ export default {
}); });
}, },
callCar(msg) { callCar(msg) {
lastFrameTime = new Date().getTime();
let zoom = map?.getZoom(); let zoom = map?.getZoom();
// 车牌号状态 // 车牌号状态
if (!this.licenseState && Object.keys(licenseLabel).length) { if (!this.licenseState && Object.keys(licenseLabel).length) {
...@@ -299,7 +373,10 @@ export default { ...@@ -299,7 +373,10 @@ export default {
} }
// 筛选可见区域 // 筛选可见区域
for (let i = 0; i < msg.length; i++) { for (let i = 0; i < msg.length; i++) {
if (!msg[i].picLicense || dict.noVehicleTypes.includes(msg[i].originalType)) { if (
!msg[i].picLicense ||
dict.noVehicleTypes.includes(msg[i].originalType)
) {
msg[i].picLicense = ""; msg[i].picLicense = "";
} }
let pt = turf.point([msg[i].longitude, msg[i].latitude]); let pt = turf.point([msg[i].longitude, msg[i].latitude]);
...@@ -312,8 +389,8 @@ export default { ...@@ -312,8 +389,8 @@ export default {
if (msg.length > 0) { if (msg.length > 0) {
// 第一帧 || 时间戳不相同 => 放行 // 第一帧 || 时间戳不相同 => 放行
if ( if (
this.lastLocation.length === 0 || this.lastLocation.length === 0 ||
this.lastLocation[0].dateTime !== msg[0].dateTime this.lastLocation[0].dateTime !== msg[0].dateTime
) { ) {
this.situationTimeVal = msg[0].dateTime; this.situationTimeVal = msg[0].dateTime;
// zoom 大于 17 ： 移除圆点 // zoom 大于 17 ： 移除圆点
...@@ -325,23 +402,14 @@ export default { ...@@ -325,23 +402,14 @@ export default {
this.hideTb(); this.hideTb();
let features = []; let features = [];
for (let item of msg) { for (let item of msg) {
features.push( features.push(turf.point([item.longitude, item.latitude], item));
turf.point([item.longitude, item.latitude], item)
);
} }
let geo = turf.featureCollection(features); let geo = turf.featureCollection(features);
// if (zoom > 17) {
// this.removeLayers("vehicle");
// mapTool.addOrUpdateVehiclePic(map, geo);
// map.on("click", "vehiclePic", this.vehiclePicClick);
// } else {
this.clearLicense(); this.clearLicense();
this.removeLayers( this.removeLayers(
"lightLayer,lightLayerText,vehicleSelectWave,license,licenseBack,vehiclePic" "lightLayer,lightLayerText,vehicleSelectWave,license,licenseBack,vehiclePic"
); );
mapTool.addOrUpdateVehicle(map, geo); mapTool.addOrUpdateVehicle(map, geo);
// map.on("click", "vehicle", this.vehicleCircleClick);
// }
} }
let allData = this.diff(this.lastLocation, msg); let allData = this.diff(this.lastLocation, msg);
for (let item of allData) { for (let item of allData) {
...@@ -364,8 +432,8 @@ export default { ...@@ -364,8 +432,8 @@ export default {
this.modelsEmpty = false; this.modelsEmpty = false;
} }
if ( if (
item.dill === "add" || item.dill === "add" ||
(item.dill === "com" && !vehicleModels[item.id]) (item.dill === "com" && !vehicleModels[item.id])
) { ) {
this.addVehicleModels(item); this.addVehicleModels(item);
if (this.licenseState) this.addVehicleLicenses(item); if (this.licenseState) this.addVehicleLicenses(item);
...@@ -386,8 +454,8 @@ export default { ...@@ -386,8 +454,8 @@ export default {
if (item.dill === "com") { if (item.dill === "com") {
// 车型中途变化 清除并重新创建 // 车型中途变化 清除并重新创建
if ( if (
vehicleModels[key].userData.data.originalType !== vehicleModels[key].userData.data.originalType !==
item.originalType item.originalType
) { ) {
if (vehicleModels[key]) { if (vehicleModels[key]) {
window.tb.clear(item.id, true); window.tb.clear(item.id, true);
...@@ -403,7 +471,8 @@ export default { ...@@ -403,7 +471,8 @@ export default {
if (licenseLabel[`license${item.id}`]) { if (licenseLabel[`license${item.id}`]) {
// 如果车牌model存在且未改变 则setCoords // 如果车牌model存在且未改变 则setCoords
if ( if (
licenseLabel[`license${item.id}`].userData.data.picLicense == item.picLicense licenseLabel[`license${item.id}`].userData.data
.picLicense == item.picLicense
) { ) {
licenseLabel[`license${item.id}`].setCoords([ licenseLabel[`license${item.id}`].setCoords([
item.longitude, item.longitude,
...@@ -418,8 +487,7 @@ export default { ...@@ -418,8 +487,7 @@ export default {
this.addVehicleLicenses(item); this.addVehicleLicenses(item);
} }
} else { } else {
if (this.licenseState) if (this.licenseState) this.addVehicleLicenses(item);
this.addVehicleLicenses(item);
} }
this.setModel(vehicleModels[key], item, true); this.setModel(vehicleModels[key], item, true);
} }
...@@ -454,9 +522,9 @@ export default { ...@@ -454,9 +522,9 @@ export default {
let model = vehicleModelTypes[`car${option.originalType}`].duplicate(); let model = vehicleModelTypes[`car${option.originalType}`].duplicate();
this.setModel(model, option, true); this.setModel(model, option, true);
model.addEventListener( model.addEventListener(
"SelectedChange", "SelectedChange",
this.onSelectedChangeVehicle, this.onSelectedChangeVehicle,
false false
); );
vehicleModels[option.id] = model; vehicleModels[option.id] = model;
window.tb.add(model, option.id); window.tb.add(model, option.id);
...@@ -518,10 +586,10 @@ export default { ...@@ -518,10 +586,10 @@ export default {
offset: [0, -20], offset: [0, -20],
}); });
vehiclePopups[`popup${data.id}`] vehiclePopups[`popup${data.id}`]
.setLngLat([data.longitude, data.latitude]) .setLngLat([data.longitude, data.latitude])
.setHTML(`<div id="vehicle_popup${data.id}"></div>`) .setHTML(`<div id="vehicle_popup${data.id}"></div>`)
.addTo(map) .addTo(map)
.addClassName("vehicleDetailPopup"); .addClassName("vehicleDetailPopup");
vehiclePopups[`popup${data.id}`].on("close", () => { vehiclePopups[`popup${data.id}`].on("close", () => {
vehiclePopups[`popup${data.id}`] = null; vehiclePopups[`popup${data.id}`] = null;
delete vehiclePopups[`popup${data.id}`]; delete vehiclePopups[`popup${data.id}`];
...@@ -536,19 +604,19 @@ export default { ...@@ -536,19 +604,19 @@ export default {
}, },
}); });
vehiclePopupInstances[`popup${data.id}`].$mount( vehiclePopupInstances[`popup${data.id}`].$mount(
`#vehicle_popup${data.id}` `#vehicle_popup${data.id}`
); );
} }
}, },
// 转换轨迹数据为geo 并更新轨迹图层 // 转换轨迹数据为geo 并更新轨迹图层
updateSelectVehcleTrack() { updateSelectVehcleTrack() {
if ( if (
this.selectVehicleTrackData && this.selectVehicleTrackData &&
this.selectVehicleTrackData.lnglat.length > 1 this.selectVehicleTrackData.lnglat.length > 1
) { ) {
let feature = turf.lineString( let feature = turf.lineString(
this.selectVehicleTrackData.lnglat, this.selectVehicleTrackData.lnglat,
this.selectVehicleTrackData.properties this.selectVehicleTrackData.properties
); );
let geo = turf.featureCollection([feature]); let geo = turf.featureCollection([feature]);
mapTool.addOrUpdateSelectVehicleTrack(map, geo); mapTool.addOrUpdateSelectVehicleTrack(map, geo);
...@@ -560,7 +628,7 @@ export default { ...@@ -560,7 +628,7 @@ export default {
ele.style.color = "white"; ele.style.color = "white";
ele.innerText = option.picLicense; ele.innerText = option.picLicense;
ele.style.backgroundImage = `url('${ ele.style.backgroundImage = `url('${
mapAssets.mapIcons[`license${option.licenseColor}`] mapAssets.mapIcons[`license${option.licenseColor}`]
}')`; }')`;
ele.style.backgroundSize = "100% 100%"; ele.style.backgroundSize = "100% 100%";
ele.style.fontSize = "8px"; ele.style.fontSize = "8px";
...@@ -572,7 +640,7 @@ export default { ...@@ -572,7 +640,7 @@ export default {
topMargin: 2, topMargin: 2,
}); });
license.setCoords([option.longitude, option.latitude, 4]); 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}`); window.tb.add(license, `license${option.id}`);
licenseLabel[`license${option.id}`] = license; licenseLabel[`license${option.id}`] = license;
} }
...@@ -590,55 +658,62 @@ export default { ...@@ -590,55 +658,62 @@ export default {
return [...add, ...del, ...com]; return [...add, ...del, ...com];
}, },
openGreenWaveDialog(data) { openGreenWaveDialog(data) {
this.dialogVisible.greenWaveShow = true this.dialogVisible.greenWaveShow = true;
this.greenId = data.id this.greenId = data.id;
this.waveTitle = data.name this.waveTitle = data.name;
}, },
showCrossStatus(data) { showCrossStatus(data) {
console.log('showCrossStatus') if (data) {
this.timer = setInterval(() => { this.crosses = data;
if (map?.hasImage('crossStatus0') && map?.hasImage('crossStatus1') && map?.hasImage('crossStatus2') && map?.hasImage('crossStatus3')) { }
clearInterval(this.timer) if (this.crosses) {
this.timer = setInterval(() => {
console.log('sAddOrUpdateCrossStatus') if (
let features = [] map?.hasImage("crossStatus0") &&
for (let item of data) { map?.hasImage("crossStatus1") &&
features.push(turf.point(item.location, item)) map?.hasImage("crossStatus2") &&
map?.hasImage("crossStatus3")
) {
clearInterval(this.timer);
let features = [];
for (let item of this.crosses) {
features.push(turf.point(item.location, item));
}
let geo = turf.featureCollection(features);
mapTool.sAddOrUpdateCrossStatus(map, geo);
map.on("click", "crossStatus", this.showRightDetail);
} }
let geo = turf.featureCollection(features) }, 100);
mapTool.sAddOrUpdateCrossStatus(map, geo) }
map.on('click', 'crossStatus', this.showRightDetail)
}
}, 100)
}, },
showRightDetail(e) { showRightDetail(e) {
let prop = e.features[0].properties console.log('cross click...',e.features[0]);
this.clickCrossData = prop let prop = e.features[0].properties;
this.isCrossDetail = true this.clickCrossData = prop;
this.isCrossDetail = true;
if (!Array.isArray(prop.location)) { if (!Array.isArray(prop.location)) {
prop.location = JSON.parse(prop.location) prop.location = JSON.parse(prop.location);
} }
map.flyTo({ map.flyTo({
duration: 1000, duration: 1000,
essential: true, essential: true,
center: prop.location, center: prop.location,
zoom: 18.5 zoom: 18.5,
}) });
}, },
crossStatusClick(e) { crossStatusClick(e) {
this.openCrossIndexDetail(e.features[0].properties) this.openCrossIndexDetail(e.features[0].properties);
}, },
convertToPgWithWkt(json) { convertToPgWithWkt(json) {
let features = []; let features = [];
for (let item of json) { for (let item of json) {
if (item.wkt) { if (item.wkt) {
let lnglats = item.wkt.replaceAll(' ', '').split(";"); let lnglats = item.wkt.replaceAll(" ", "").split(";");
for (let i = 0; i < lnglats.length; i++) { for (let i = 0; i < lnglats.length; i++) {
lnglats[i] = lnglats[i].split(",").map((j) => Number(j)); lnglats[i] = lnglats[i].split(",").map((j) => Number(j));
} }
lnglats.pop() lnglats.pop();
lnglats.push(lnglats[0]) lnglats.push(lnglats[0]);
features.push(turf.polygon([lnglats], item)); features.push(turf.polygon([lnglats], item));
} }
} }
...@@ -648,11 +723,11 @@ export default { ...@@ -648,11 +723,11 @@ export default {
let features = []; let features = [];
for (let item of json) { for (let item of json) {
if (item.wkt) { if (item.wkt) {
let lnglats = item.wkt.replaceAll(' ', '').split(";"); let lnglats = item.wkt.replaceAll(" ", "").split(";");
for (let i = 0; i < lnglats.length; i++) { for (let i = 0; i < lnglats.length; i++) {
lnglats[i] = lnglats[i].split(",").map((j) => Number(j)); lnglats[i] = lnglats[i].split(",").map((j) => Number(j));
} }
lnglats.pop() lnglats.pop();
features.push(turf.lineString(lnglats, item)); features.push(turf.lineString(lnglats, item));
} }
} }
...@@ -671,39 +746,188 @@ export default { ...@@ -671,39 +746,188 @@ export default {
} }
}, },
showPolygon(data) { showPolygon(data) {
this.removeLayers('RoadPolygon,RoadLine') this.removeLayers("RoadPolygon,RoadLine");
let polygon = this.convertToPgWithWkt([data]) let polygon = this.convertToPgWithWkt([data]);
let centerPoint = turf.center(polygon) let centerPoint = turf.center(polygon);
let offsetPoint = turf.transformTranslate(centerPoint, 0.5, 180) let offsetPoint = turf.transformTranslate(centerPoint, 0.5, 180);
mapTool.sAddOrUpdateRoadPolygon(map, polygon) mapTool.sAddOrUpdateRoadPolygon(map, polygon);
mapTool.sAddOrUpdateRoadLine(map, this.convertToLineWithWkt([data])) mapTool.sAddOrUpdateRoadLine(map, this.convertToLineWithWkt([data]));
map.flyTo({ map.flyTo({
duration: 1000, duration: 1000,
essential: true, essential: true,
center: offsetPoint.geometry.coordinates, center: offsetPoint.geometry.coordinates,
zoom: 16, zoom: 16,
bearing: map_config.MAP_BEARING, bearing: map_config.MAP_BEARING,
pitch: map_config.MAP_PITCH pitch: map_config.MAP_PITCH,
}) });
}, },
openCrossIndexDetail(crossData) { openCrossIndexDetail(crossData) {
console.log('crossData', crossData) this.showRightDetail({ features: [{ properties: crossData }] });
this.showRightDetail({features: [{properties: crossData}]})
// this.crossData = crossData // this.crossData = crossData
// this.dialogVisible.crossDetailShow = true // this.dialogVisible.crossDetailShow = true
}, },
actionFinished(id) { actionFinished(id) {
this.dialogVisible[id] = false; this.dialogVisible[id] = false;
}, },
switchfirst() {
this.showCrossStatus();
// 注册车辆实时ws
let socket = initWs({
name: "callCar",
url: ws_config.BASE_URL,
callback: this.callCar,
});
socket.ws.onopen = () => {
if (socket.ws.readyState === 1) {
socket.ws.send('{ dataType: "1"}');
this.sockets.push(socket);
}
};
},
closeWs(name) {
return new Promise((resolve) => {
for (let key in this.sockets) {
if (this.sockets[key].name === name) {
this.sockets[key].ws.onclose = () => {
this.sockets.splice(key, 1);
resolve();
};
this.sockets[key].ws.close();
}
}
resolve();
});
},
switchsecond() {
mapTool.addOrUpdateRoadVector(map);
},
switchfourth() {
Promise.all([
equip_radar(),
equip_signal(),
equip_camera(),
equip_weather(),
]).then(([radar, signal, camera, weather]) => {
// console.log("设备。。。", radar, signal, camera, weather);
let milliArray = [];
let radarArray = [];
for (let i = 0; i < radar.content.length; i++) {
if (radar.content[i].sourceEquipType === "2") {
milliArray.push(radar.content[i]);
} else {
radarArray.push(radar.content[i]);
}
}
mapTool.addOrUpdateEquipMilli(map, milliArray);
mapTool.addOrUpdateEquipRadar(map, radarArray);
mapTool.addOrUpdateEquipSignal(map, signal.content);
mapTool.addOrUpdateEquipCamera(map, camera.content);
mapTool.addOrUpdateEquipWeather(map, weather.content);
map.on("click", this.equipmentsClick);
});
},
// 设备点击
equipmentsClick(e) {
event.stopPropagation();
equipPopupInstance?.$destroy();
equipPopupInstance = null;
equipPopup = null;
const features = map.queryRenderedFeatures(e.point, {
layers: ["camera", "milli", "radar", "signal", "weather"],
});
if (features.length) {
let prop = features[0].properties;
let type = features[0].layer.id;
if (prop.status == "1") {
setTimeout(() => {
// 创建新 popup 绑定事件（关闭时清除掉里面的video 防止占用资源）
// 使用 Turf.js 进行平移计算
let distance = 10; // 指定的平移距离（以米为单位）
if (type === "signal") {
//信号机popup窗口高度过高 加大偏移防止超出屏幕
distance = 80;
}
let bearing = map.getBearing(); // 平移方向，0 表示正北方向
let options = { units: "meters" };
let translatedPoint = turf.destination(
prop.wkt.split(","),
distance,
bearing,
options
);
// 将地图中心点设置为平移后的点
map.flyTo({
center: translatedPoint.geometry.coordinates,
zoom: 18,
});
equipPopup = new mapboxgl.Popup({
anchor: "bottom",
offset: [0, -20],
});
equipPopup
.setLngLat(prop.wkt.split(","))
.setHTML('<div id="equipment_popup"></div>')
.addTo(map)
.setMaxWidth("500")
.addClassName("equipmentPopup");
equipPopupInstance = new EquipmentPopup({
propsData: {
model: { equip_type: type, ...prop },
},
});
equipPopupInstance.$mount("#equipment_popup");
equipPopup?.on("close", () => {
popupInstance?.$destroy();
popupInstance = null;
equipPopup = null;
});
}, 100);
} else {
ELEMENT.Message("设备已离线，请联系厂商");
}
}
},
changeCheck(beforeLabel, checkItem) { changeCheck(beforeLabel, checkItem) {
this.refreshBounds();
map.flyTo({
center:map_config.MAP_CENTER2,
zoom:map_config.MAP_ZOOM2,
bearing:map_config.MAP_BEARING2,
pitch:map_config.MAP_PITCH2,
duration: 1000,
essential: true,
})
this.currentCheck = checkItem.label;
if (beforeLabel === "first") {
this.closeWs("callCar").then(() => {
setTimeout(() => {
this.removeLayers("vehicle,crossStatus");
this[`switch${checkItem.label}`]();
this.hideTb();
}, 500);
});
} else {
if (beforeLabel === "fourth") {
equipPopup?.remove();
map.off("click", this.equipmentsClick);
}
for (let key in this.layers) {
if (key !== checkItem.label) {
for (let layer of this.layers[key]) {
this.removeLayers(layer);
}
}
}
this[`switch${checkItem.label}`]();
}
}, },
visibleChange() { visibleChange() {
this.boxesShow = !this.boxesShow; this.boxesShow = !this.boxesShow;
}, },
}, },
beforeDestroy() { beforeDestroy() {
this.timer && clearInterval(this.timer) this.timer && clearInterval(this.timer);
this.closeAllWs(); this.closeWs("callCar");
window.tb.dispose(); window.tb.dispose();
window.tb = null; window.tb = null;
map = null; map = null;
...@@ -727,7 +951,6 @@ export default { ...@@ -727,7 +951,6 @@ export default {
right: 520px; right: 520px;
width: 42px; width: 42px;
height: 42px; height: 42px;
//background-color: #009edd;
font-size: 16px; font-size: 16px;
letter-spacing: 10px; letter-spacing: 10px;
top: 5px; top: 5px;
...@@ -755,5 +978,4 @@ export default { ...@@ -755,5 +978,4 @@ export default {
left: 535px; left: 535px;
transition: 0.5s all ease; transition: 0.5s all ease;
} }
</style> </style>
wj-smartcity/src/views/signal/layersSwitch.vue deleted 100644 → 0
View file @ c6af1ebd
<template>
<div class="layersSwitch" :style="{ left: right }">
<div v-show="true" class="layerIcons">
<el-tooltip
effect="dark"
:content="item.name"
placement="right"
v-for="(item,index) of switchOptions"
:key="index"
>
<div class="item" :key="index" :class="{ check: item.check }">
<img
alt=""
:src="require(`../../assets/images/holo/svg/${item.label}.svg`)"
@click="changeCheck(item)"
class="img"
/>
</div>
</el-tooltip>
</div>
<div
class="visibleControl"
:class="[{ 'expand-i': show }, { 'close-i': !show }]"
@click="changeVisibel"
>
</div>
</div>
</template>
<script>
export default {
data() {
return {
layerIconsShow: true,
switchOptions: [
// { label: "first", check: true, name: "轨迹" },
// { label: "second", check: false, name: "路况" },
// { label: "third", check: false, name: "事件" },
// { label: "fourth", check: false, name: "设备" },
],
};
},
props: ["right", "show"],
mounted() {},
methods: {
changeVisibel() {
this.$emit("visibleChange");
},
getOptions() {
return this.switchOptions;
},
changeCheck(item) {
let beforeItem = "";
this.switchOptions.forEach((e) => {
if (e.label === item.label) {
e.check = !e.check;
} else {
e.check && (beforeItem = e.label);
e.check = false;
}
});
this.$emit("changeCheck", beforeItem, item);
},
},
computed: {},
beforeDestroy() {},
};
</script>
<style lang="less" scoped>
.layersSwitch {
position: absolute;
z-index: 13;
.visibleControl {
margin-top: 10px;
}
.el-icon-document-copy {
font-size: 20px;
cursor: pointer;
color: #aeaeae;
text-align: right;
}
.expand-i {
background: url("../../assets/images/holo/close.png");
cursor: pointer;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
height: 42px;
width: 42px;
}
.close-i {
background: url("../../assets/images/holo/expand.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
height: 42px;
width: 42px;
}
.layerIcons {
width: 42px;
margin-top: 8px;
height: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
.item {
width: 42px;
height: 25%;
display: flex;
align-items: flex-start;
justify-content: center;
cursor: pointer;
background-position-y: bottom;
padding-top: 20%;
}
.item:nth-child(4) {
margin-top: 6px;
}
img {
width: 30px;
}
.check {
background: url("../../assets/images/holo/check.png");
background-size: 100%;
background-repeat: no-repeat;
background-position-y: bottom;
padding-top: 20%;
}
.check img {
filter: drop-shadow(#bedeff 100px 0);
transform: translateX(-100px);
}
}
}
</style>
wj-smartcity/src/views/signal/switchers/equipmentSwitch.vue 0 → 100644
View file @ 6ff4bafe
<template>
<div class="equipmentSwc" :class="boxesShow?'m-b':''">
<div class="legend-container">
<el-tooltip
effect="dark"
:content="item.name"
:key="index"
placement="bottom"
v-for="(item,index) of switchOptions"
>
<div
class="item"
:key="index"
:class="{ check: item.check }"
@click="changeCheck(item)"
>
<img
alt=""
:src="
require(`../../../assets/images/holo/${item.label}${
item.check ? 's' : ''
}.png`)
"
class="img"
style="vertical-align: super"
/>
</div>
</el-tooltip>
</div>
<div class="select-all">
<div class="select-botton" @click="selectAll">
{{ showStatus ? "全选" : "取消" }}
</div>
</div>
</div>
</template>
<script>
export default {
name: "equipmentSwitch",
data() {
return {
layerIconsShow: true,
switchOptions: [
{ label: "signal", check: true, name: "信号机" },
{ label: "camera", check: true, name: "视频相机" },
{ label: "milli", check: true, name: "毫米波雷达" },
{ label: "weather", check: true, name: "气象检测仪" },
{ label: "radar", check: true, name: "激光雷达" },
],
};
},
props: ['boxesShow'],
mounted() {},
methods: {
selectAll() {
if (this.showStatus) {
this.switchOptions.forEach((e) => {
e.check = true;
});
} else {
this.switchOptions.forEach((e) => {
e.check = false;
});
}
this.$emit("equipmentChange", this.switchOptions);
},
changeCheck(item) {
item.check = !item.check;
this.$emit("equipmentChange", this.switchOptions);
},
},
computed: {
showStatus() {
for (let item of this.switchOptions) {
if (!item.check) {
return true;
}
}
return false;
},
},
beforeDestroy() {},
};
</script>
<style lang="less" scoped>
.equipmentSwc {
transition: 0.5s all ease;
position: absolute;
z-index: 12;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
width: 340px;
height: 60px;
background-color: rgba(7, 15, 36, 0.5);
padding: 7px;
font-size: 12px;
border: 1px solid #3c568c;
border-radius: 3px;
display: flex;
justify-content: space-between;
.legend-container {
display: flex;
flex: 0 0 76%;
justify-content: space-between;
height: 100%;
.item {
cursor: pointer;
padding: 10px;
border: 3px solid;
border-image: linear-gradient(
180deg,
rgba(25, 67, 125, 0.54) 0%,
rgba(47, 61, 82, 0.01) 100%
)
1;
background-image: linear-gradient(
180deg,
rgba(25, 67, 125, 0.54) 0%,
rgba(47, 61, 82, 0.01) 100%
);
.img {
height: 100%;
}
}
.check {
border: 3px solid;
border-image: linear-gradient(
rgba(65, 146, 217, 1),
rgba(65, 146, 217, 0.3),
rgba(65, 146, 217, 0.3),
rgba(65, 146, 217, 1)
)
1;
}
}
.select-all {
// width: 50px;
display: flex;
align-items: center;
.select-botton {
background-color: rgba(18, 35, 77, 0.5);
height: 28px;
display: flex;
align-items: center;
justify-content: center;
// line-height: 28px;
text-align: center;
color: white;
border: 1px solid #3c568c;
border-radius: 3px;
width: 66px;
cursor: pointer;
}
.select-botton:hover {
border: 1px solid #45619e;
background-color: rgba(28, 50, 107, 0.5);
}
}
}
.m-b{
bottom: calc(33.3% + 40px);
transition: 0.5s all ease;
}
</style>
\ No newline at end of file
wj-smartcity/src/views/signal/switchers/layersSwitch.vue 0 → 100644
View file @ 6ff4bafe
<template>
<div class="layersSwitch" :style="{ left: right }">
<div v-show="true" class="layerIcons">
<el-tooltip
effect="dark"
:content="item.name"
placement="right"
v-for="(item,index) of switchOptions"
:key="index"
>
<div class="item" :key="index" :class="{ check: item.check }">
<img
alt=""
:src="require(`../../../assets/images/holo/svg/${item.label}.svg`)"
@click="changeCheck(item)"
class="img"
/>
</div>
</el-tooltip>
</div>
<div
class="visibleControl"
:class="[{ 'expand-i': show }, { 'close-i': !show }]"
@click="changeVisibel"
>
</div>
</div>
</template>
<script>
export default {
data() {
return {
layerIconsShow: true,
switchOptions: [
{ label: "first", check: true, name: "轨迹" },
{ label: "second", check: false, name: "路况" },
// { label: "third", check: false, name: "事件" },
{ label: "fourth", check: false, name: "设备" },
],
};
},
props: ["right", "show"],
mounted() {},
methods: {
changeVisibel() {
this.$emit("visibleChange");
},
getOptions() {
return this.switchOptions;
},
changeCheck(item) {
let beforeItem = "";
this.switchOptions.forEach((e) => {
if (e.label === item.label) {
e.check = !e.check;
} else {
e.check && (beforeItem = e.label);
e.check = false;
}
});
this.$emit("changeCheck", beforeItem, item);
},
},
computed: {},
beforeDestroy() {},
};
</script>
<style lang="less" scoped>
.layersSwitch {
position: absolute;
z-index: 13;
.visibleControl {
margin-top: 10px;
}
.el-icon-document-copy {
font-size: 20px;
cursor: pointer;
color: #aeaeae;
text-align: right;
}
.expand-i {
background: url("../../../assets/images/holo/close.png");
cursor: pointer;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
height: 42px;
width: 42px;
}
.close-i {
background: url("../../../assets/images/holo/expand.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
height: 42px;
width: 42px;
}
.layerIcons {
width: 42px;
margin-top: 8px;
height: 135px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
.item {
width: 42px;
height: 33.3%;
display: flex;
align-items: flex-start;
justify-content: center;
cursor: pointer;
background-position-y: bottom;
padding-top: 20%;
}
// .item:nth-child(4) {
// margin-top: 6px;
// }
img {
width: 30px;
}
.check {
background: url("../../../assets/images/holo/check.png");
background-size: 100%;
background-repeat: no-repeat;
background-position-y: bottom;
padding-top: 20%;
}
.check img {
filter: drop-shadow(#bedeff 100px 0);
transform: translateX(-100px);
}
}
}
</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