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 @@
}
.mapboxgl-ctrl-bottom-right {
bottom: 6px !important;
bottom: calc(33.3% + 20px) !important;
right: 515px !important;
z-index: 11 !important;
transition: 0.5s all ease !important;
......@@ -126,6 +126,7 @@
.mapboxgl-ctrl-bottom-right-hide-box {
right: 16px !important;
bottom: 20px !important;
transition: 0.5s all ease !important;
}
......
wj-smartcity/src/utils/mapboxTools.js
View file @ 6ff4bafe
// Function to create a triangle icon (arrow)
function createTriangleIcon(color) {
const canvas = document.createElement("canvas");
canvas.width = 24;
canvas.height = 24;
const context = canvas.getContext("2d");
context.fillStyle = color;
context.beginPath();
context.moveTo(12, 2);
context.lineTo(22, 22);
context.lineTo(2, 22);
context.closePath();
context.fill();
return canvas.toDataURL();
const canvas = document.createElement("canvas");
canvas.width = 24;
canvas.height = 24;
const context = canvas.getContext("2d");
context.fillStyle = color;
context.beginPath();
context.moveTo(12, 2);
context.lineTo(22, 22);
context.lineTo(2, 22);
context.closePath();
context.fill();
return canvas.toDataURL();
}
export function addOrUpdateSelectVehicleTrack(map, geo) {
if (!map.getSource("selectVehicleTrack")) {
map.addSource("selectVehicleTrack", {
type: "geojson",
data: geo,
});
} else {
map.getSource("selectVehicleTrack").setData(geo);
}
if (!map.getLayer("selectVehicleTrack")) {
map.addLayer(
{
id: "selectVehicleTrack",
type: "line",
source: "selectVehicleTrack",
paint: {
"line-color": 'red',
"line-width": 3,
},
},
"vehicle3D"
);
}
if (!map.getSource("selectVehicleTrack")) {
map.addSource("selectVehicleTrack", {
type: "geojson",
data: geo,
});
} else {
map.getSource("selectVehicleTrack").setData(geo);
}
if (!map.getLayer("selectVehicleTrack")) {
map.addLayer(
{
id: "selectVehicleTrack",
type: "line",
source: "selectVehicleTrack",
paint: {
"line-color": "red",
"line-width": 3,
},
},
"vehicle3D"
);
}
}
// 毫米波雷达范围图层
export function addOrUpdateMilliScope(map, geo) {
if (!map.getSource(`milliScope`)) {
map.addSource(`milliScope`, {
type: "geojson",
data: geo,
});
}
if (!map.getLayer(`milliScope`)) {
map.addLayer(
{
id: `milliScope`,
source: `milliScope`,
type: "fill",
paint: {
"fill-color": 'rgba(68, 114, 196, 0.4)', // 默认值，如果没有匹配到上述枚举值]
},
},
"vehicle3D"
);
}
if (!map.getSource(`milliScope`)) {
map.addSource(`milliScope`, {
type: "geojson",
data: geo,
});
}
if (!map.getLayer(`milliScope`)) {
map.addLayer(
{
id: `milliScope`,
source: `milliScope`,
type: "fill",
paint: {
"fill-color": "rgba(68, 114, 196, 0.4)", // 默认值，如果没有匹配到上述枚举值]
},
},
"vehicle3D"
);
}
}
// 更新灯态图层
export function addOrUpdateLightLayers(map, geo) {
if (!map.getSource("lightLayer")) {
map.addSource("lightLayer", {
type: "geojson",
data: geo,
});
} else {
map.getSource("lightLayer").setData(geo);
}
if (!map.getSource("lightLayerText")) {
map.addSource("lightLayerText", {
type: "geojson",
data: geo,
});
} else {
map.getSource("lightLayerText").setData(geo);
}
if (!map.getLayer("lightLayer")) {
map.addLayer(
{
id: "lightLayer",
type: "symbol",
source: "lightLayer",
layout: {
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-size": 0.7,
"icon-image": ["get", "ts"],
"icon-pitch-alignment": "map",
// "icon-rotate": ["+", ["*", ["get", "roadDir"], 45], 180],
'icon-rotate': ['get', 'lightAngle'],
"icon-rotation-alignment": "map",
},
},
"vehicle3D"
);
}
if (!map.getSource("lightLayer")) {
map.addSource("lightLayer", {
type: "geojson",
data: geo,
});
} else {
map.getSource("lightLayer").setData(geo);
}
if (!map.getSource("lightLayerText")) {
map.addSource("lightLayerText", {
type: "geojson",
data: geo,
});
} else {
map.getSource("lightLayerText").setData(geo);
}
if (!map.getLayer("lightLayer")) {
map.addLayer(
{
id: "lightLayer",
type: "symbol",
source: "lightLayer",
layout: {
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-size": 0.7,
"icon-image": ["get", "ts"],
"icon-pitch-alignment": "map",
// "icon-rotate": ["+", ["*", ["get", "roadDir"], 45], 180],
"icon-rotate": ["get", "lightAngle"],
"icon-rotation-alignment": "map",
},
},
"vehicle3D"
);
}
if (!map.getLayer("lightLayerText")) {
map.addLayer(
{
id: "lightLayerText",
type: "symbol",
source: "lightLayerText",
layout: {
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-field": ["get", "remainTime"],
"text-size": 14,
"text-pitch-alignment": "map",
"text-rotation-alignment": "map",
'text-rotate': ['get', 'lightAngle'],
// "text-rotate": ["+", ["*", ["get", "roadDir"], 45], 180],
},
paint: {
"text-color": "white",
"text-halo-blur": 1,
"text-halo-width": 2,
"text-halo-color": [
"match",
["get", "state"], // 属性字段名称
"red",
"rgba(255, 130, 130, 0.5)",
"yellow",
"rgba(255, 179, 0, 0.5)",
"green",
"rgba(48, 255, 141, 0.5)",
"rgba(255,255,255,0)", // 默认值，如果没有匹配到上述枚举值
],
},
},
"vehicle3D"
);
}
if (!map.getLayer("lightLayerText")) {
map.addLayer(
{
id: "lightLayerText",
type: "symbol",
source: "lightLayerText",
layout: {
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-field": ["get", "remainTime"],
"text-size": 14,
"text-pitch-alignment": "map",
"text-rotation-alignment": "map",
"text-rotate": ["get", "lightAngle"],
// "text-rotate": ["+", ["*", ["get", "roadDir"], 45], 180],
},
paint: {
"text-color": "white",
"text-halo-blur": 1,
"text-halo-width": 2,
"text-halo-color": [
"match",
["get", "state"], // 属性字段名称
"red",
"rgba(255, 130, 130, 0.5)",
"yellow",
"rgba(255, 179, 0, 0.5)",
"green",
"rgba(48, 255, 141, 0.5)",
"rgba(255,255,255,0)", // 默认值，如果没有匹配到上述枚举值
],
},
},
"vehicle3D"
);
}
}
// 更新路网 wkt polygon
export function sAddOrUpdateRoadPolygon(map, geo) {
if (!map.getSource("RoadPolygon")) {
map.addSource("RoadPolygon", {
type: "geojson",
data: geo,
});
} else {
map.getSource("RoadPolygon").setData(geo);
}
if (!map.getLayer("RoadPolygon")) {
map.addLayer(
{
id: "RoadPolygon",
type: "fill",
source: "RoadPolygon",
paint: {
"fill-color": 'rgba(85,179,241,0.47)'
},
}, 'crossStatus'
);
if (map.getLayer("vehicle3D")) map.moveLayer("vehicle3D");
if (map.getLayer("vehicle")) map.moveLayer("vehicle");
}
if (!map.getSource("RoadPolygon")) {
map.addSource("RoadPolygon", {
type: "geojson",
data: geo,
});
} else {
map.getSource("RoadPolygon").setData(geo);
}
if (!map.getLayer("RoadPolygon")) {
map.addLayer(
{
id: "RoadPolygon",
type: "fill",
source: "RoadPolygon",
paint: {
"fill-color": "rgba(85,179,241,0.47)",
},
},
"crossStatus"
);
if (map.getLayer("vehicle3D")) map.moveLayer("vehicle3D");
if (map.getLayer("vehicle")) map.moveLayer("vehicle");
}
}
// 更新路网 polygon 边框
export function sAddOrUpdateRoadLine(map, geo) {
if (!map.getSource("RoadLine")) {
map.addSource("RoadLine", {
type: "geojson",
data: geo,
});
} else {
map.getSource("RoadLine").setData(geo);
}
if (!map.getLayer("RoadLine")) {
map.addLayer({
id: "RoadLine",
type: "line",
source: "RoadLine",
paint: {
"line-color": 'rgb(30,164,252)',
"line-width": 2,
'line-dasharray': [2, 6]
},
}, 'crossStatus');
if (map.getLayer("vehicle")) map.moveLayer("vehicle");
if (map.getLayer("vehicle3D")) map.moveLayer("vehicle3D");
}
if (!map.getSource("RoadLine")) {
map.addSource("RoadLine", {
type: "geojson",
data: geo,
});
} else {
map.getSource("RoadLine").setData(geo);
}
if (!map.getLayer("RoadLine")) {
map.addLayer(
{
id: "RoadLine",
type: "line",
source: "RoadLine",
paint: {
"line-color": "rgb(30,164,252)",
"line-width": 2,
"line-dasharray": [2, 6],
},
},
"crossStatus"
);
if (map.getLayer("vehicle")) map.moveLayer("vehicle");
if (map.getLayer("vehicle3D")) map.moveLayer("vehicle3D");
}
}
// 更新状态路口
export function sAddOrUpdateCrossStatus(map, geo) {
if (!map.getSource("crossStatus")) {
map.addSource("crossStatus", {
type: "geojson",
data: geo,
});
} else {
map.getSource("crossStatus").setData(geo);
}
if (!map.getLayer("crossStatus")) {
map.addLayer({
id: "crossStatus",
type: "symbol",
source: "crossStatus",
layout: {
"icon-image": ["concat", "crossStatus", ["get", "realtimeStatus"]],
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-size": 0.7,
"icon-offset": [0, -10],
},
},);
}
if (!map.getSource("crossStatus")) {
map.addSource("crossStatus", {
type: "geojson",
data: geo,
});
} else {
map.getSource("crossStatus").setData(geo);
}
if (!map.getLayer("crossStatus")) {
map.addLayer({
id: "crossStatus",
type: "symbol",
source: "crossStatus",
layout: {
"icon-image": ["concat", "crossStatus", ["get", "realtimeStatus"]],
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-size": 0.7,
"icon-offset": [0, -10],
},
});
}
}
// 更新等待行人区域灯态
export function addOrUpdateWaitingPolygons(map, geo) {
if (!map.getSource("waitingLayer")) {
map.addSource("waitingLayer", {
type: "geojson",
data: geo,
});
} else {
map.getSource("waitingLayer").setData(geo);
}
if (!map.getLayer("waitingLayer")) {
map.addLayer(
{
id: "waitingLayer",
type: "fill",
source: "waitingLayer",
paint: {
"fill-color": [
"match",
["get", "state"], // 属性字段名称
'red',
"rgba(231, 63, 50,0.4)",
'green',
'rgba(35, 148, 67,0.4)',
'yellow',
'rgba(251, 194, 29,0.4)',
"rgba(255,255,255,0)",
], // 默认值，如果没有匹配到上述枚举值]
},
},
"vehicle3D"
);
}
if (!map.getSource("waitingLayer")) {
map.addSource("waitingLayer", {
type: "geojson",
data: geo,
});
} else {
map.getSource("waitingLayer").setData(geo);
}
if (!map.getLayer("waitingLayer")) {
map.addLayer(
{
id: "waitingLayer",
type: "fill",
source: "waitingLayer",
paint: {
"fill-color": [
"match",
["get", "state"], // 属性字段名称
"red",
"rgba(231, 63, 50,0.4)",
"green",
"rgba(35, 148, 67,0.4)",
"yellow",
"rgba(251, 194, 29,0.4)",
"rgba(255,255,255,0)",
], // 默认值，如果没有匹配到上述枚举值]
},
},
"vehicle3D"
);
}
}
// 检测器layer
export function addOrUpdateDetetorA(map, geo) {
if (!map.getSource("detetorsA")) {
map.addSource("detetorsA", {
type: "geojson",
data: geo,
});
} else {
map.getSource("detetorsA").setData(geo);
}
if (!map.getLayer("detetorsA")) {
map.addLayer(
{
id: "detetorsA",
type: "line",
source: "detetorsA",
paint: {
"line-color": [
"match",
["get", "state"],
0,
"green",
1,
"red",
"green",
],
"line-width": 3,
},
},
"vehicle3D"
);
}
if (!map.getSource("detetorsA")) {
map.addSource("detetorsA", {
type: "geojson",
data: geo,
});
} else {
map.getSource("detetorsA").setData(geo);
}
if (!map.getLayer("detetorsA")) {
map.addLayer(
{
id: "detetorsA",
type: "line",
source: "detetorsA",
paint: {
"line-color": [
"match",
["get", "state"],
0,
"green",
1,
"red",
"green",
],
"line-width": 3,
},
},
"vehicle3D"
);
}
}
export function addOrUpdateDetetorB(map, geo) {
if (!map.getSource("detetorsB")) {
map.addSource("detetorsB", {
type: "geojson",
data: geo,
});
} else {
map.getSource("detetorsB").setData(geo);
}
if (!map.getLayer("detetorsB")) {
map.addLayer(
{
id: "detetorsB",
type: "line",
source: "detetorsB",
paint: {
"line-color": [
"match",
["get", "state"],
0,
"green",
1,
"red",
"green",
],
"line-width": 3,
},
},
"vehicle3D"
);
}
if (!map.getSource("detetorsB")) {
map.addSource("detetorsB", {
type: "geojson",
data: geo,
});
} else {
map.getSource("detetorsB").setData(geo);
}
if (!map.getLayer("detetorsB")) {
map.addLayer(
{
id: "detetorsB",
type: "line",
source: "detetorsB",
paint: {
"line-color": [
"match",
["get", "state"],
0,
"green",
1,
"red",
"green",
],
"line-width": 3,
},
},
"vehicle3D"
);
}
}
export function addOrUpdateDetetorC(map, geo) {
if (!map.getSource("detetorsC")) {
map.addSource("detetorsC", {
type: "geojson",
data: geo,
});
} else {
map.getSource("detetorsC").setData(geo);
}
if (!map.getLayer("detetorsC")) {
map.addLayer(
{
id: "detetorsC",
type: "line",
source: "detetorsC",
paint: {
"line-color": [
"match",
["get", "state"],
0,
"green",
1,
"red",
"green",
],
"line-width": 3,
},
},
"vehicle3D"
);
}
if (!map.getSource("detetorsC")) {
map.addSource("detetorsC", {
type: "geojson",
data: geo,
});
} else {
map.getSource("detetorsC").setData(geo);
}
if (!map.getLayer("detetorsC")) {
map.addLayer(
{
id: "detetorsC",
type: "line",
source: "detetorsC",
paint: {
"line-color": [
"match",
["get", "state"],
0,
"green",
1,
"red",
"green",
],
"line-width": 3,
},
},
"vehicle3D"
);
}
}
// 更新路况矢量切片图层
export function addOrUpdateRoadVector(map) {
if (!map.getSource("vector_road")) {
map.addSource("vector_road", {
type: "vector",
tiles: [map_config.VECTOR_ROAD],
});
}
if (!map.getLayer("vector_road_layer")) {
map.addLayer({
id: "vector_road_layer",
source: "vector_road",
"source-layer": "line-layer",
type: "line",
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-width": 3,
"line-color": [
"match",
["get", "status"],
"1",
"green",
"2",
"yellow",
"3",
"orange",
"4",
"red",
"green",
],
},
});
if (map.getLayer("holo_crossPointS")) map.moveLayer("holo_crossPointS");
}
if (!map.getSource("vector_road")) {
map.addSource("vector_road", {
type: "vector",
tiles: [map_config.VECTOR_ROAD],
});
}
if (!map.getLayer("vector_road_layer")) {
map.addLayer({
id: "vector_road_layer",
source: "vector_road",
"source-layer": "line-layer",
type: "line",
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-width": 3,
"line-color": [
"match",
["get", "status"],
"1",
"green",
"2",
"yellow",
"3",
"orange",
"4",
"red",
"green",
],
},
});
}
}
// 更新选中车辆底部闪动波纹
export function addOrUpdateWave(map, geo) {
if (map.getSource("dot-point")) {
map.getSource("dot-point").setData(geo);
} else {
map.addSource("dot-point", {
type: "geojson",
data: geo,
});
}
if (!map.getLayer("vehicleSelectWave")) {
map.addLayer({
id: "vehicleSelectWave",
type: "symbol",
source: "dot-point",
layout: {
"icon-image": "pulsingDot0",
"icon-pitch-alignment": "map",
"icon-rotation-alignment": "map",
},
});
}
if (map.getSource("dot-point")) {
map.getSource("dot-point").setData(geo);
} else {
map.addSource("dot-point", {
type: "geojson",
data: geo,
});
}
if (!map.getLayer("vehicleSelectWave")) {
map.addLayer({
id: "vehicleSelectWave",
type: "symbol",
source: "dot-point",
layout: {
"icon-image": "pulsingDot0",
"icon-pitch-alignment": "map",
"icon-rotation-alignment": "map",
},
});
}
}
// type 4 种颜色 对应 4种告警信息
export function addOrUpdateWarningWave(map, geo, id) {
if (map.getSource(id)) {
map.getSource(id).setData(geo);
} else {
map.addSource(id, {
type: "geojson",
data: geo,
});
}
if (!map.getLayer(id)) {
map.addLayer({
id: id,
type: "symbol",
source: id,
layout: {
'icon-allow-overlap': true,
'icon-ignore-placement': true,
"icon-image": [
"match",
["get", "type"],
1,
"pulsingDot1",
2,
"pulsingDot2",
3,
"pulsingDot3",
4,
"pulsingDot4",
"",
],
"icon-pitch-alignment": "map",
"icon-rotation-alignment": "map",
},
});
}
if (map.getSource(id)) {
map.getSource(id).setData(geo);
} else {
map.addSource(id, {
type: "geojson",
data: geo,
});
}
if (!map.getLayer(id)) {
map.addLayer({
id: id,
type: "symbol",
source: id,
layout: {
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-image": [
"match",
["get", "type"],
1,
"pulsingDot1",
2,
"pulsingDot2",
3,
"pulsingDot3",
4,
"pulsingDot4",
"",
],
"icon-pitch-alignment": "map",
"icon-rotation-alignment": "map",
},
});
}
}
// 更新zoom值较小时的车辆轨迹point
export function addOrUpdateVehicle(map, geo) {
if (!map.getSource("vehicle")) {
map.addSource("vehicle", {
type: "geojson",
data: geo,
});
} else {
map.getSource("vehicle").setData(geo);
}
if (!map.getLayer("vehicle")) {
map.addLayer({
id: "vehicle",
type: "circle",
source: "vehicle",
paint: {
"circle-blur": 1,
"circle-color": "#06f4fe",
"circle-pitch-alignment": "map",
},
});
if (map.getLayer("crossStatus")) map.moveLayer("crossStatus");
}
if (!map.getSource("vehicle")) {
map.addSource("vehicle", {
type: "geojson",
data: geo,
});
} else {
map.getSource("vehicle").setData(geo);
}
if (!map.getLayer("vehicle")) {
map.addLayer({
id: "vehicle",
type: "circle",
source: "vehicle",
paint: {
"circle-blur": 1,
"circle-color": "#06f4fe",
"circle-pitch-alignment": "map",
},
});
if (map.getLayer("crossStatus")) map.moveLayer("crossStatus");
}
}
// 路口icon
export function addOrUpdateCross(map, geo, callback) {
if (!map.getSource("holo_crossPoint")) {
map.addSource("holo_crossPoint", {
type: "geojson",
data: geo,
});
} else {
map.getSource("holo_crossPoint").setData(geo);
}
if (!map.getLayer("holo_crossPoint")) {
map.addLayer({
id: "holo_crossPoint",
type: "symbol",
source: "holo_crossPoint",
layout: {
"icon-image": [
"match",
["get", "isSignal"], // 属性字段名称
1,
"crossNormal",
0,
"crossFalse",
"crossSelect", // 默认值，如果没有匹配到上述枚举值
],
"icon-size": 0.7,
"icon-offset": [0, -10],
},
});
map.on("click", "holo_crossPoint", (aaa) => callback(aaa));
}
if (!map.getSource("holo_crossPoint")) {
map.addSource("holo_crossPoint", {
type: "geojson",
data: geo,
});
} else {
map.getSource("holo_crossPoint").setData(geo);
}
if (!map.getLayer("holo_crossPoint")) {
map.addLayer({
id: "holo_crossPoint",
type: "symbol",
source: "holo_crossPoint",
layout: {
"icon-image": [
"match",
["get", "isSignal"], // 属性字段名称
1,
"crossNormal",
0,
"crossFalse",
"crossSelect", // 默认值，如果没有匹配到上述枚举值
],
"icon-size": 0.7,
"icon-offset": [0, -10],
},
});
map.on("click", "holo_crossPoint", (aaa) => callback(aaa));
}
}
// second 路口icon
export function addOrUpdateCrossS(map, geo, callback) {
if (!map.getSource("holo_crossPointS")) {
map.addSource("holo_crossPointS", {
type: "geojson",
data: geo,
});
} else {
map.getSource("holo_crossPointS").setData(geo);
}
if (!map.getLayer("holo_crossPointS")) {
map.addLayer({
id: "holo_crossPointS",
type: "symbol",
source: "holo_crossPointS",
layout: {
"icon-image": [
"match",
["get", "isSignal"], // 属性字段名称
1,
"crossNormal",
0,
"crossFalse",
"crossSelect", // 默认值，如果没有匹配到上述枚举值
],
"icon-size": 0.7,
"icon-offset": [0, -10],
},
});
map.on("click", "holo_crossPointS", (aaa) => callback(aaa));
}
if (!map.getSource("holo_crossPointS")) {
map.addSource("holo_crossPointS", {
type: "geojson",
data: geo,
});
} else {
map.getSource("holo_crossPointS").setData(geo);
}
if (!map.getLayer("holo_crossPointS")) {
map.addLayer({
id: "holo_crossPointS",
type: "symbol",
source: "holo_crossPointS",
layout: {
"icon-image": [
"match",
["get", "isSignal"], // 属性字段名称
1,
"crossNormal",
0,
"crossFalse",
"crossSelect", // 默认值，如果没有匹配到上述枚举值
],
"icon-size": 0.7,
"icon-offset": [0, -10],
},
});
}
}
// 路口名称
export function addOrUpdateCrossName(map, geo) {
if (!map.getSource("holo_crossPoint")) {
map.addSource("holo_crossPoint", {
type: "geojson",
data: geo,
});
} else {
map.getSource("holo_crossPoint").setData(geo);
}
if (!map.getLayer("holo_crossName")) {
map.addLayer({
id: "holo_crossName",
type: "symbol",
source: "holo_crossPoint",
layout: {
"text-field": ["get", "name"],
"text-size": 12,
"text-offset": [0, 1.5],
"text-allow-overlap": true,
"text-ignore-placement": true,
},
paint: {
"text-color": "white",
"text-halo-blur": 1,
"text-halo-width": 2,
if (!map.getSource("holo_crossPoint")) {
map.addSource("holo_crossPoint", {
type: "geojson",
data: geo,
});
} else {
map.getSource("holo_crossPoint").setData(geo);
}
if (!map.getLayer("holo_crossName")) {
map.addLayer({
id: "holo_crossName",
type: "symbol",
source: "holo_crossPoint",
layout: {
"text-field": ["get", "name"],
"text-size": 12,
"text-offset": [0, 1.5],
"text-allow-overlap": true,
"text-ignore-placement": true,
},
paint: {
"text-color": "white",
"text-halo-blur": 1,
"text-halo-width": 2,
"text-halo-color": "black",
},
});
}
"text-halo-color": "black",
},
});
}
}
// 交通事件热力图
export function addOrUpdateEventHeat(map, geo, callback) {
console.log(geo, 7777777777777777777);
if (!map.getSource("eventHeat")) {
map.addSource("eventHeat", {
type: "geojson",
data: geo,
});
} else {
map.getSource("eventHeat").setData(geo);
}
if (!map.getLayer("eventHeat")) {
map.addLayer({
id: "eventHeat",
type: "heatmap",
source: "eventHeat",
paint: {
"heatmap-color": [
"interpolate",
["linear"],
["heatmap-density"],
0,
"rgba(38, 233, 251,0.0)",
0.1,
"rgba(38, 233, 251,0.2)", // 低密度的颜色
0.2,
"rgba(36, 239, 219,0.7)",
0.4,
"rgba(83, 231, 169,0.8)",
0.6,
"rgba(190, 236, 68,0.9)",
0.8,
"rgba(252, 145, 3,0.9)",
1,
"rgba(253, 108, 3,1)", // 高密度的颜色
],
},
});
if (map.getLayer("vehicle3D")) {
map.moveLayer("eventHeat", "vehicle3D");
}
console.log(geo, 7777777777777777777);
if (!map.getSource("eventHeat")) {
map.addSource("eventHeat", {
type: "geojson",
data: geo,
});
} else {
map.getSource("eventHeat").setData(geo);
}
if (!map.getLayer("eventHeat")) {
map.addLayer({
id: "eventHeat",
type: "heatmap",
source: "eventHeat",
paint: {
"heatmap-color": [
"interpolate",
["linear"],
["heatmap-density"],
0,
"rgba(38, 233, 251,0.0)",
0.1,
"rgba(38, 233, 251,0.2)", // 低密度的颜色
0.2,
"rgba(36, 239, 219,0.7)",
0.4,
"rgba(83, 231, 169,0.8)",
0.6,
"rgba(190, 236, 68,0.9)",
0.8,
"rgba(252, 145, 3,0.9)",
1,
"rgba(253, 108, 3,1)", // 高密度的颜色
],
},
});
if (map.getLayer("vehicle3D")) {
map.moveLayer("eventHeat", "vehicle3D");
}
}
}
// 交通事件点图
export function addOrUpdateEventPoint(map, geo, callback) {
if (!map.getSource("eventPoint")) {
map.addSource("eventPoint", {
type: "geojson",
data: geo,
});
} else {
map.getSource("eventPoint").setData(geo);
}
if (!map.getLayer("eventPoint")) {
map.addLayer({
id: "eventPoint",
type: "symbol",
source: "eventPoint",
layout: {
"icon-image": "event",
"icon-size": 1,
"icon-offset": [0, -10],
},
});
map.on("click", "eventPoint", (aaa) => callback(aaa));
}
if (!map.getSource("eventPoint")) {
map.addSource("eventPoint", {
type: "geojson",
data: geo,
});
} else {
map.getSource("eventPoint").setData(geo);
}
if (!map.getLayer("eventPoint")) {
map.addLayer({
id: "eventPoint",
type: "symbol",
source: "eventPoint",
layout: {
"icon-image": "event",
"icon-size": 1,
"icon-offset": [0, -10],
},
});
map.on("click", "eventPoint", (aaa) => callback(aaa));
}
}
export function addOrUpdateEventPoint1(map, geo, callback) {
if (!map.getSource("eventPoint1")) {
map.addSource("eventPoint1", {
type: "geojson",
data: geo,
});
} else {
map.getSource("eventPoint1").setData(geo);
}
if (!map.getLayer("eventPoint1")) {
map.addLayer({
id: "eventPoint1",
type: "symbol",
source: "eventPoint1",
layout: {
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-image": "event",
"icon-size": 1,
"icon-offset": [0, -10],
},
});
}
if (!map.getSource("eventPoint1")) {
map.addSource("eventPoint1", {
type: "geojson",
data: geo,
});
} else {
map.getSource("eventPoint1").setData(geo);
}
if (!map.getLayer("eventPoint1")) {
map.addLayer({
id: "eventPoint1",
type: "symbol",
source: "eventPoint1",
layout: {
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-image": "event",
"icon-size": 1,
"icon-offset": [0, -10],
},
});
}
}
// 相机设备
export function addOrUpdateEquipCamera(map, geo, callback) {
if (!map.getSource("camera")) {
console.log("addsource");
map.addSource("camera", {
type: "geojson",
data: geo,
});
} else {
console.log("setData");
map.getSource("camera").setData(geo);
}
if (!map.getLayer("camera")) {
console.log("addLayer");
map.addLayer({
id: "camera",
type: "symbol",
source: "camera",
layout: {
// "icon-image": [
// "match",
// ["get", "status"], // 属性字段名称
// '0',
// "cameraFalse",
// '1',
// 'camera',
// "cameraFalse",
// ], // 默认值，如果没有匹配到上述枚举值]
"icon-image": "camera",
"icon-size": 0.6,
"icon-ignore-placement": true,
// 'icon-offset': [0, -10]
},
});
// map.on("click", "camera", (aaa) => callback(aaa, "camera"));
}
if (!map.getSource("camera")) {
console.log("addsource");
map.addSource("camera", {
type: "geojson",
data: geo,
});
} else {
console.log("setData");
map.getSource("camera").setData(geo);
}
if (!map.getLayer("camera")) {
console.log("addLayer");
map.addLayer({
id: "camera",
type: "symbol",
source: "camera",
layout: {
// "icon-image": [
// "match",
// ["get", "status"], // 属性字段名称
// '0',
// "cameraFalse",
// '1',
// 'camera',
// "cameraFalse",
// ], // 默认值，如果没有匹配到上述枚举值]
"icon-image": "camera",
"icon-size": 0.6,
"icon-ignore-placement": true,
// 'icon-offset': [0, -10]
},
});
// map.on("click", "camera", (aaa) => callback(aaa, "camera"));
}
}
// 设备...
export function addOrUpdateEquipMilli(map, geo, callback) {
if (!map.getSource("milli")) {
map.addSource("milli", {
type: "geojson",
data: geo,
});
} else {
map.getSource("milli").setData(geo);
}
if (!map.getLayer("milli")) {
map.addLayer({
id: "milli",
type: "symbol",
source: "milli",
layout: {
"icon-image": [
"match",
["get", "status"], // 属性字段名称
'0',
"milliFalse",
'1',
'milli',
"milliFalse",
], // 默认值，如果没有匹配到上述枚举值]
// "icon-image": "milli",
"icon-size": 0.6,
"icon-ignore-placement": true,
},
});
// map.on("click", "milli", (aaa) => callback(aaa, "milli"));
}
export function addOrUpdateEquipMilli(map, arr, callback) {
let geo = convertPointsWktToGeo(arr);
if (!map.getSource("milli")) {
map.addSource("milli", {
type: "geojson",
data: geo,
});
} else {
map.getSource("milli").setData(geo);
}
if (!map.getLayer("milli")) {
map.addLayer({
id: "milli",
type: "symbol",
source: "milli",
layout: {
"icon-image": [
"match",
["get", "status"], // 属性字段名称
"0",
"milliFalse",
"1",
"milli",
"milliFalse",
], // 默认值，如果没有匹配到上述枚举值]
// "icon-image": "milli",
"icon-size": 0.6,
"icon-ignore-placement": true,
},
});
// map.on("click", "milli", (aaa) => callback(aaa, "milli"));
}
}
export function addOrUpdateEquipRadar(map, geo, callback) {
if (!map.getSource("radar")) {
map.addSource("radar", {
type: "geojson",
data: geo,
});
} else {
map.getSource("radar").setData(geo);
}
if (!map.getLayer("radar")) {
map.addLayer({
id: "radar",
type: "symbol",
source: "radar",
layout: {
"icon-image": [
"match",
["get", "status"], // 属性字段名称
'0',
"radarFalse",
'1',
'radar',
"radarFalse",
], // 默认值，如果没有匹配到上述枚举值]
// "icon-image": "radar",
"icon-size": 0.6,
"icon-ignore-placement": true,
},
});
// map.on("click", "radar", (aaa) => callback(aaa, "radar"));
}
export function addOrUpdateEquipRadar(map, arr, callback) {
let geo = convertPointsWktToGeo(arr);
if (!map.getSource("radar")) {
map.addSource("radar", {
type: "geojson",
data: geo,
});
} else {
map.getSource("radar").setData(geo);
}
if (!map.getLayer("radar")) {
map.addLayer({
id: "radar",
type: "symbol",
source: "radar",
layout: {
"icon-image": [
"match",
["get", "status"], // 属性字段名称
"0",
"radarFalse",
"1",
"radar",
"radarFalse",
], // 默认值，如果没有匹配到上述枚举值]
// "icon-image": "radar",
"icon-size": 0.6,
"icon-ignore-placement": true,
},
});
// map.on("click", "radar", (aaa) => callback(aaa, "radar"));
}
}
export function addOrUpdateEquipSignal(map, geo, callback) {
if (!map.getSource("signal")) {
map.addSource("signal", {
type: "geojson",
data: geo,
});
} else {
map.getSource("signal").setData(geo);
}
if (!map.getLayer("signal")) {
map.addLayer({
id: "signal",
type: "symbol",
source: "signal",
layout: {
// "icon-image": "signal",
"icon-image": [
"match",
["get", "status"], // 属性字段名称
'0',
"signalFalse",
'1',
'signal',
"signalFalse",
], // 默认值，如果没有匹配到上述枚举值]
"icon-size": 0.6,
"icon-ignore-placement": true,
},
});
// map.on("click", "signal", (aaa) => callback(aaa, "signal"));
}
export function addOrUpdateEquipSignal(map, arr, callback) {
let geo = convertPointsWktToGeo(arr);
if (!map.getSource("signal")) {
map.addSource("signal", {
type: "geojson",
data: geo,
});
} else {
map.getSource("signal").setData(geo);
}
if (!map.getLayer("signal")) {
map.addLayer({
id: "signal",
type: "symbol",
source: "signal",
layout: {
// "icon-image": "signal",
"icon-image": [
"match",
["get", "status"], // 属性字段名称
"0",
"signalFalse",
"1",
"signal",
"signalFalse",
], // 默认值，如果没有匹配到上述枚举值]
"icon-size": 0.6,
"icon-ignore-placement": true,
},
});
// map.on("click", "signal", (aaa) => callback(aaa, "signal"));
}
}
export function addOrUpdateEquipWeather(map, geo, callback) {
if (!map.getSource("weather")) {
map.addSource("weather", {
type: "geojson",
data: geo,
});
} else {
map.getSource("weather").setData(geo);
}
if (!map.getLayer("weather")) {
map.addLayer({
id: "weather",
type: "symbol",
source: "weather",
layout: {
// "icon-image": "weather",
"icon-image": [
"match",
["get", "status"], // 属性字段名称
'0',
"weatherFalse",
'1',
'weather',
"weatherFalse",
], // 默认值，如果没有匹配到上述枚举值]
"icon-size": 0.6,
"icon-ignore-placement": true,
},
});
// map.on("click", "weather", (aaa) => callback(aaa, "weather"));
}
export function addOrUpdateEquipWeather(map, arr, callback) {
let geo = convertPointsWktToGeo(arr);
if (!map.getSource("weather")) {
map.addSource("weather", {
type: "geojson",
data: geo,
});
} else {
map.getSource("weather").setData(geo);
}
if (!map.getLayer("weather")) {
map.addLayer({
id: "weather",
type: "symbol",
source: "weather",
layout: {
// "icon-image": "weather",
"icon-image": [
"match",
["get", "status"], // 属性字段名称
"0",
"weatherFalse",
"1",
"weather",
"weatherFalse",
], // 默认值，如果没有匹配到上述枚举值]
"icon-size": 0.6,
"icon-ignore-placement": true,
},
});
// map.on("click", "weather", (aaa) => callback(aaa, "weather"));
}
}
// 车牌号及其背景图片
export function addOrUpdateLicense(map, geo) {
if (!map.getSource("license")) {
map.addSource("license", {
type: "geojson",
data: geo,
});
} else {
map.getSource("license").setData(geo);
}
if (!map.getLayer("licenseBack")) {
map.addLayer({
id: "licenseBack",
type: "symbol",
source: "license",
layout: {
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-size": 0.4,
"icon-image": ["concat", "license", ["get", "licenseColor"]],
"icon-offset": [0, -80],
},
paint: {
// 'icon-translate': [-80, 0],
// 'icon-translate-anchor': 'viewport'
},
});
}
if (!map.getLayer("license")) {
map.addLayer({
id: "license",
type: "symbol",
source: "license",
layout: {
"text-field": ["get", "picLicense"],
"text-size": 10,
"text-offset": [0, -3.5],
"text-allow-overlap": true,
"text-ignore-placement": true,
},
paint: {
"text-color": "white",
"text-halo-width": 0.3,
"text-halo-color": "white",
},
});
}
if (!map.getSource("license")) {
map.addSource("license", {
type: "geojson",
data: geo,
});
} else {
map.getSource("license").setData(geo);
}
if (!map.getLayer("licenseBack")) {
map.addLayer({
id: "licenseBack",
type: "symbol",
source: "license",
layout: {
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-size": 0.4,
"icon-image": ["concat", "license", ["get", "licenseColor"]],
"icon-offset": [0, -80],
},
paint: {
// 'icon-translate': [-80, 0],
// 'icon-translate-anchor': 'viewport'
},
});
}
if (!map.getLayer("license")) {
map.addLayer({
id: "license",
type: "symbol",
source: "license",
layout: {
"text-field": ["get", "picLicense"],
"text-size": 10,
"text-offset": [0, -3.5],
"text-allow-overlap": true,
"text-ignore-placement": true,
},
paint: {
"text-color": "white",
"text-halo-width": 0.3,
"text-halo-color": "white",
},
});
}
}
// 中间层级车辆图片图层
export function addOrUpdateVehiclePic(map, geo) {
if (!map.getSource("vehiclePic")) {
map.addSource("vehiclePic", {
type: "geojson",
data: geo,
});
} else {
map.getSource("vehiclePic").setData(geo);
}
if (!map.getLayer("vehiclePic")) {
map.addLayer(
{
id: "vehiclePic",
type: "symbol",
source: "vehiclePic",
layout: {
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-size": 0.2,
"icon-image": ["concat", "car", ["get", "originalType"]],
"icon-pitch-alignment": "map",
"icon-rotate": ["get", "courseAngle"],
"icon-rotation-alignment": "map",
// 'icon-offset': [0, -20]
},
},
"vehicle3D"
);
}
if (!map.getSource("vehiclePic")) {
map.addSource("vehiclePic", {
type: "geojson",
data: geo,
});
} else {
map.getSource("vehiclePic").setData(geo);
}
if (!map.getLayer("vehiclePic")) {
map.addLayer(
{
id: "vehiclePic",
type: "symbol",
source: "vehiclePic",
layout: {
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-size": 0.2,
"icon-image": ["concat", "car", ["get", "originalType"]],
"icon-pitch-alignment": "map",
"icon-rotate": ["get", "courseAngle"],
"icon-rotation-alignment": "map",
// 'icon-offset': [0, -20]
},
},
"vehicle3D"
);
}
}
// 车道面
export function addOrUpdateRoadPolygon(map, geo, callback) {
if (!map.getSource("roadPolygon")) {
map.addSource("roadPolygon", {
type: "geojson",
data: geo,
});
} else {
map.getSource("roadPolygon").setData(geo);
}
if (!map.getLayer("roadPolygon")) {
map.addLayer(
{
id: "roadPolygon",
type: "fill",
source: "roadPolygon",
paint: {
"fill-color": [
"match",
["get", "select"], // 属性字段名称
0,
"rgba(114, 186, 190,0.4)",
1,
// "rgba(114, 186, 190,0.8)",
'rgba(213, 44, 54,0.8)',
"rgba(255,255,255,1)",
], // 默认值，如果没有匹配到上述枚举值]
},
}
// "vehicle3D"
);
// map.on("click", "roadPolygon", (aaa) => callback(aaa));
}
if (!map.getSource("roadPolygon")) {
map.addSource("roadPolygon", {
type: "geojson",
data: geo,
});
} else {
map.getSource("roadPolygon").setData(geo);
}
if (!map.getLayer("roadPolygon")) {
map.addLayer(
{
id: "roadPolygon",
type: "fill",
source: "roadPolygon",
paint: {
"fill-color": [
"match",
["get", "select"], // 属性字段名称
0,
"rgba(114, 186, 190,0.4)",
1,
// "rgba(114, 186, 190,0.8)",
"rgba(213, 44, 54,0.8)",
"rgba(255,255,255,1)",
], // 默认值，如果没有匹配到上述枚举值]
},
}
// "vehicle3D"
);
// map.on("click", "roadPolygon", (aaa) => callback(aaa));
}
}
// 轨迹点集合 vector图层
export function addOrUpdateTrackPointVector(map, startTime, endTime, crossId) {
if (!map.getSource("myMVTLayer")) {
map.addSource("myMVTLayer", {
type: "vector",
tiles: [
`${map_config.MVT_TILEURL}/holo/histrory-track/tile?z={z}&x={x}&y={y}&startTime=${startTime}&endTime=${endTime}&crossId=${crossId}`,
],
});
}
if (!map.getLayer("myMVTLayer")) {
map.addLayer({
id: "myMVTLayer",
type: "circle",
source: "myMVTLayer",
"source-layer": "track-point",
paint: {
"circle-color": "#00fff1",
"circle-radius": 1,
},
});
}
if (!map.getSource("myMVTLayer")) {
map.addSource("myMVTLayer", {
type: "vector",
tiles: [
`${map_config.MVT_TILEURL}/holo/histrory-track/tile?z={z}&x={x}&y={y}&startTime=${startTime}&endTime=${endTime}&crossId=${crossId}`,
],
});
}
if (!map.getLayer("myMVTLayer")) {
map.addLayer({
id: "myMVTLayer",
type: "circle",
source: "myMVTLayer",
"source-layer": "track-point",
paint: {
"circle-color": "#00fff1",
"circle-radius": 1,
},
});
}
}
// 组织评价 - 流量线
export function addOrUpdateFlowLine(map, geo) {
if (!map.getSource("flowLine")) {
map.addSource("flowLine", {
type: "geojson",
data: geo,
});
} else {
map.getSource("flowLine").setData(geo);
}
if (!map.getLayer("flowLine")) {
map.addLayer({
id: "flowLine",
type: "line",
source: "flowLine",
paint: {
"line-color": [
"match",
["get", "select"], // 属性字段名称
1,
"rgba(152, 234, 35, 1)",
0,
"rgba(1,1,1,0)",
"rgba(1,1,1,0)", // 默认值，如果没有匹配到上述枚举值
],
"line-width": 2,
},
});
}
if (!map.getSource("flowLine")) {
map.addSource("flowLine", {
type: "geojson",
data: geo,
});
} else {
map.getSource("flowLine").setData(geo);
}
if (!map.getLayer("flowLine")) {
map.addLayer({
id: "flowLine",
type: "line",
source: "flowLine",
paint: {
"line-color": [
"match",
["get", "select"], // 属性字段名称
1,
"rgba(152, 234, 35, 1)",
0,
"rgba(1,1,1,0)",
"rgba(1,1,1,0)", // 默认值，如果没有匹配到上述枚举值
],
"line-width": 2,
},
});
}
}
// 分析报告 - 流量线
export function addOrUpdateFlowLineR(map, geo) {
if (!map.getSource("flowLineR")) {
map.addSource("flowLineR", {
type: "geojson",
data: geo,
});
} else {
map.getSource("flowLineR").setData(geo);
}
if (!map.getLayer("flowLineR")) {
map.addLayer({
id: "flowLineR",
type: "line",
source: "flowLineR",
paint: {
// 'line-color':'rgba(152, 234, 35, 1)',
"line-color": [
"match",
["get", "ridDir"], // 属性字段名称
1,
"#d10401",
2,
"#d10401",
3,
"#08a24d",
4,
"#08a24d",
5,
"#5440b8",
6,
"#5440b8",
7,
"#f37c0b",
8,
"#f37c0b",
"rgba(1,1,1,0)", // 默认值，如果没有匹配到上述枚举值
],
"line-width": 4,
},
});
}
if (!map.getSource("flowLineR")) {
map.addSource("flowLineR", {
type: "geojson",
data: geo,
});
} else {
map.getSource("flowLineR").setData(geo);
}
if (!map.getLayer("flowLineR")) {
map.addLayer({
id: "flowLineR",
type: "line",
source: "flowLineR",
paint: {
// 'line-color':'rgba(152, 234, 35, 1)',
"line-color": [
"match",
["get", "ridDir"], // 属性字段名称
1,
"#d10401",
2,
"#d10401",
3,
"#08a24d",
4,
"#08a24d",
5,
"#5440b8",
6,
"#5440b8",
7,
"#f37c0b",
8,
"#f37c0b",
"rgba(1,1,1,0)", // 默认值，如果没有匹配到上述枚举值
],
"line-width": 4,
},
});
}
}
// 分析报告 - 流量值
export function addOrUpdateFlowLineRText(map, geo) {
if (!map.getSource("flowLineRText")) {
map.addSource("flowLineRText", {
type: "geojson",
data: geo,
});
} else {
map.getSource("flowLineRText").setData(geo);
}
if (!map.getLayer("flowLineRText")) {
map.addLayer({
id: "flowLineRText",
type: "symbol",
source: "flowLineRText",
layout: {
"text-field": ["get", "flowVal"],
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-size": 12,
},
paint: {
"text-color": "rgba(255, 225, 0, 1)",
"text-halo-color": "black",
"text-halo-width": 2,
},
});
}
if (!map.getSource("flowLineRText")) {
map.addSource("flowLineRText", {
type: "geojson",
data: geo,
});
} else {
map.getSource("flowLineRText").setData(geo);
}
if (!map.getLayer("flowLineRText")) {
map.addLayer({
id: "flowLineRText",
type: "symbol",
source: "flowLineRText",
layout: {
"text-field": ["get", "flowVal"],
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-size": 12,
},
paint: {
"text-color": "rgba(255, 225, 0, 1)",
"text-halo-color": "black",
"text-halo-width": 2,
},
});
}
}
// 分析报告 - 流量线箭头
export function addOrUpdateFlowLineRArrow(map, points) {
if (!map.getSource("flowLineArrowR")) {
map.addSource('flowLineArrowR', {
type: 'geojson',
data: points
});
} else {
map.getSource("flowLineArrowR").setData(points);
}
if (!map.getLayer("flowLineArrowR")) {
// console.log('has.............');
if (!map.hasImage('arrowIcon1')) {
const arrowIcons = [];
// Create a triangle icon (arrow) with a specified color
// const arrowIcon0 = createTriangleIcon("#d10401");
const arrowIcon0 = createTriangleIcon("yellow");
const arrowIcon1 = createTriangleIcon("#08a24d");
const arrowIcon2 = createTriangleIcon("#5440b8");
const arrowIcon3 = createTriangleIcon("#f37c0b");
arrowIcons.push(arrowIcon0, arrowIcon2, arrowIcon3, arrowIcon1);
for (let i = 0; i < arrowIcons.length; i++) {
map.loadImage(arrowIcons[i], (error, image) => {
if (error) throw error;
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
},
if (!map.getSource("flowLineArrowR")) {
map.addSource("flowLineArrowR", {
type: "geojson",
data: points,
});
} else {
map.getSource("flowLineArrowR").setData(points);
}
if (!map.getLayer("flowLineArrowR")) {
// console.log('has.............');
if (!map.hasImage("arrowIcon1")) {
const arrowIcons = [];
// Create a triangle icon (arrow) with a specified color
// const arrowIcon0 = createTriangleIcon("#d10401");
const arrowIcon0 = createTriangleIcon("yellow");
const arrowIcon1 = createTriangleIcon("#08a24d");
const arrowIcon2 = createTriangleIcon("#5440b8");
const arrowIcon3 = createTriangleIcon("#f37c0b");
arrowIcons.push(arrowIcon0, arrowIcon2, arrowIcon3, arrowIcon1);
for (let i = 0; i < arrowIcons.length; i++) {
map.loadImage(arrowIcons[i], (error, image) => {
if (error) throw error;
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
},
});
}
}
// 组织评价 - 流量线箭头
export function addOrUpdateFlowLineArrow(map, json) {
let features = [];
for (let item of json) {
if (item.select) {
let angle = turf.bearing(
turf.point(item.lineArray[0]),
turf.point(item.lineArray[1])
);
features.push(
turf.point([item.endLng, item.endLat], {...item, angle: angle})
);
}
}
let geo = turf.featureCollection(features);
if (!map.getSource("flowLineArrow")) {
map.addSource("flowLineArrow", {
type: "geojson",
data: geo,
});
} else {
map.getSource("flowLineArrow").setData(geo);
}
if (!map.getLayer("flowLineArrow")) {
map.addLayer({
id: "flowLineArrow",
type: "symbol",
source: "flowLineArrow",
layout: {
"icon-image": "lineArrow",
"icon-rotate": ["get", "angle"],
"icon-ignore-placement": true,
"icon-allow-overlap": true,
"icon-pitch-alignment": "map",
"icon-rotation-alignment": "map",
"icon-size": 0.5,
},
});
}
let features = [];
for (let item of json) {
if (item.select) {
let angle = turf.bearing(
turf.point(item.lineArray[0]),
turf.point(item.lineArray[1])
);
features.push(
turf.point([item.endLng, item.endLat], { ...item, angle: angle })
);
}
}
let geo = turf.featureCollection(features);
if (!map.getSource("flowLineArrow")) {
map.addSource("flowLineArrow", {
type: "geojson",
data: geo,
});
} else {
map.getSource("flowLineArrow").setData(geo);
}
if (!map.getLayer("flowLineArrow")) {
map.addLayer({
id: "flowLineArrow",
type: "symbol",
source: "flowLineArrow",
layout: {
"icon-image": "lineArrow",
"icon-rotate": ["get", "angle"],
"icon-ignore-placement": true,
"icon-allow-overlap": true,
"icon-pitch-alignment": "map",
"icon-rotation-alignment": "map",
"icon-size": 0.5,
},
});
}
}
// 流量存在分流 一个起始值对应多个分流末尾
// 组织评价 - 流量值（起始
export function addOrUpdateFlowText(map, json) {
let features = [];
for (let item of json) {
if (item.select) {
features.push(turf.point([item.startLng, item.startLat], item));
}
}
let geo = turf.featureCollection(features);
if (!map.getSource("flowText")) {
map.addSource("flowText", {
type: "geojson",
data: geo,
});
} else {
map.getSource("flowText").setData(geo);
}
if (!map.getLayer("flowText")) {
map.addLayer({
id: "flowText",
type: "symbol",
source: "flowText",
layout: {
"text-field": ["get", "flow"],
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-size": 12,
},
paint: {
"text-color": "rgba(255, 225, 0, 1)",
"text-halo-color": "black",
"text-halo-width": 2,
},
});
}
let features = [];
for (let item of json) {
if (item.select) {
features.push(turf.point([item.startLng, item.startLat], item));
}
}
let geo = turf.featureCollection(features);
if (!map.getSource("flowText")) {
map.addSource("flowText", {
type: "geojson",
data: geo,
});
} else {
map.getSource("flowText").setData(geo);
}
if (!map.getLayer("flowText")) {
map.addLayer({
id: "flowText",
type: "symbol",
source: "flowText",
layout: {
"text-field": ["get", "flow"],
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-size": 12,
},
paint: {
"text-color": "rgba(255, 225, 0, 1)",
"text-halo-color": "black",
"text-halo-width": 2,
},
});
}
}
// 组织评价 - 流量值（结束
export function addOrUpdateFlowTextEnd(map, json) {
let features = [];
for (let item of json) {
if (item.select) {
features.push(turf.point([item.endLng, item.endLat], item));
}
}
let geo = turf.featureCollection(features);
if (!map.getSource("flowTextEnd")) {
map.addSource("flowTextEnd", {
type: "geojson",
data: geo,
});
} else {
map.getSource("flowTextEnd").setData(geo);
}
if (!map.getLayer("flowTextEnd")) {
map.addLayer({
id: "flowTextEnd",
type: "symbol",
source: "flowTextEnd",
layout: {
"text-field": ["get", "endFlow"],
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-size": 12,
},
paint: {
"text-color": "rgba(255, 225, 0, 1)",
"text-halo-color": "black",
"text-halo-width": 2,
},
});
}
let features = [];
for (let item of json) {
if (item.select) {
features.push(turf.point([item.endLng, item.endLat], item));
}
}
let geo = turf.featureCollection(features);
if (!map.getSource("flowTextEnd")) {
map.addSource("flowTextEnd", {
type: "geojson",
data: geo,
});
} else {
map.getSource("flowTextEnd").setData(geo);
}
if (!map.getLayer("flowTextEnd")) {
map.addLayer({
id: "flowTextEnd",
type: "symbol",
source: "flowTextEnd",
layout: {
"text-field": ["get", "endFlow"],
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-size": 12,
},
paint: {
"text-color": "rgba(255, 225, 0, 1)",
"text-halo-color": "black",
"text-halo-width": 2,
},
});
}
}
// let roadLineGeo = null, roadChunkPointGeo = null
......@@ -1395,158 +1398,174 @@ export function addOrUpdateFlowTextEnd(map, json) {
// }
export function addCalibrationTail(map) {
let roadLineGeo, roadChunkPointGeo;
let a = new Promise((resolve) => {
if (!map.getSource("calibrationTail") && !map.getSource("chunkPointGeo")) {
fetch("roadLineChunk.json").then((res) => {
console.log("res...", res);
res.json().then((data) => {
console.log("data...", data);
roadLineGeo = data.roadLineGeo;
roadChunkPointGeo = data.roadChunkPointGeo;
map.addSource("calibrationTail", {
type: "geojson",
data: roadLineGeo,
});
map.addSource("chunkPointGeo", {
type: "geojson",
data: roadChunkPointGeo,
});
resolve();
});
});
} else {
map.getSource("calibrationTail").setData(roadLineGeo);
map.getSource("chunkPointGeo").setData(roadChunkPointGeo);
resolve();
}
});
a.then(() => {
// 线条
if (!map.getLayer("calibrationTailLine")) {
map.addLayer({
id: "calibrationTailLine",
type: "line",
source: "calibrationTail",
paint: {
"line-color": "yellow",
"line-width": 1,
},
});
if (map.getLayer("vehicle3D")) {
map.moveLayer("calibrationTailLine", "vehicle3D");
}
}
// symbol标记
if (!map.getLayer("chunkSymbol")) {
map.addLayer({
id: "chunkSymbol",
type: "symbol",
source: "chunkPointGeo",
layout: {
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-field": "|", // 刻度线的文本标记，可以用符号代替
"text-size": 12,
"text-pitch-alignment": "map",
"text-rotate": ["-", ["get", "angle"], 90],
"text-rotation-alignment": "map",
},
paint: {
"text-color": "yellow",
},
});
if (map.getLayer("vehicle3D")) {
map.moveLayer("chunkSymbol", "vehicle3D");
}
}
// text chunk 文本
if (!map.getLayer("chunkText")) {
// 添加刻度点编号图层
map.addLayer({
id: "chunkText",
type: "symbol",
source: "chunkPointGeo",
layout: {
"text-allow-overlap": true,
"text-ignore-placement": true,
let roadLineGeo, roadChunkPointGeo;
let a = new Promise((resolve) => {
if (!map.getSource("calibrationTail") && !map.getSource("chunkPointGeo")) {
fetch("roadLineChunk.json").then((res) => {
console.log("res...", res);
res.json().then((data) => {
console.log("data...", data);
roadLineGeo = data.roadLineGeo;
roadChunkPointGeo = data.roadChunkPointGeo;
map.addSource("calibrationTail", {
type: "geojson",
data: roadLineGeo,
});
map.addSource("chunkPointGeo", {
type: "geojson",
data: roadChunkPointGeo,
});
resolve();
});
});
} else {
map.getSource("calibrationTail").setData(roadLineGeo);
map.getSource("chunkPointGeo").setData(roadChunkPointGeo);
resolve();
}
});
a.then(() => {
// 线条
if (!map.getLayer("calibrationTailLine")) {
map.addLayer({
id: "calibrationTailLine",
type: "line",
source: "calibrationTail",
paint: {
"line-color": "yellow",
"line-width": 1,
},
});
if (map.getLayer("vehicle3D")) {
map.moveLayer("calibrationTailLine", "vehicle3D");
}
}
// symbol标记
if (!map.getLayer("chunkSymbol")) {
map.addLayer({
id: "chunkSymbol",
type: "symbol",
source: "chunkPointGeo",
layout: {
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-field": "|", // 刻度线的文本标记，可以用符号代替
"text-size": 12,
"text-pitch-alignment": "map",
"text-rotate": ["-", ["get", "angle"], 90],
"text-rotation-alignment": "map",
},
paint: {
"text-color": "yellow",
},
});
if (map.getLayer("vehicle3D")) {
map.moveLayer("chunkSymbol", "vehicle3D");
}
}
// text chunk 文本
if (!map.getLayer("chunkText")) {
// 添加刻度点编号图层
map.addLayer({
id: "chunkText",
type: "symbol",
source: "chunkPointGeo",
layout: {
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-field": ["get", "index"],
"text-field": ["get", "index"],
"text-size": 10,
// 'text-offset': [0, 2], // 调整文本位置
"text-offset": [-2, 0], // 调整文本位置
"text-pitch-alignment": "map",
"text-rotate": ["-", ["get", "angle"], 0],
"text-rotation-alignment": "map",
},
paint: {
"text-color": "yellow",
"text-halo-color": "black",
"text-halo-width": 2,
},
});
if (map.getLayer("vehicle3D")) {
map.moveLayer("chunkText", "vehicle3D");
}
}
});
"text-size": 10,
// 'text-offset': [0, 2], // 调整文本位置
"text-offset": [-2, 0], // 调整文本位置
"text-pitch-alignment": "map",
"text-rotate": ["-", ["get", "angle"], 0],
"text-rotation-alignment": "map",
},
paint: {
"text-color": "yellow",
"text-halo-color": "black",
"text-halo-width": 2,
},
});
if (map.getLayer("vehicle3D")) {
map.moveLayer("chunkText", "vehicle3D");
}
}
});
}
const size = 1000;
export const vehicleWave = {
width: size,
height: size,
data: new Uint8Array(size * size * 4), // 用来存储图像数据
onAdd: function () {
// 创建一个canvas对象并初始化
const canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
this.context = canvas.getContext("2d");
},
// render 不断调用更新canvas对象的半径与fillStyle 以实现波纹效果
render: function () {
const duration = 1000; // 动画周期
const t = (performance.now() % duration) / duration; // 当前帧相对于动画周期的时间比例
const outerRadius = (size / 2) * 0.7 * t;
const context = this.context;
context.clearRect(0, 0, this.width, this.height);
context.beginPath();
context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
context.fillStyle = `rgba(252, 1, 26, ${1 - t})`;
context.lineWidth = 2 + 4 * (1 - t);
context.fill();
this.data = context.getImageData(0, 0, this.width, this.height).data;
map.triggerRepaint();
return true;
},
width: size,
height: size,
data: new Uint8Array(size * size * 4), // 用来存储图像数据
onAdd: function () {
// 创建一个canvas对象并初始化
const canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
this.context = canvas.getContext("2d");
},
// render 不断调用更新canvas对象的半径与fillStyle 以实现波纹效果
render: function () {
const duration = 1000; // 动画周期
const t = (performance.now() % duration) / duration; // 当前帧相对于动画周期的时间比例
const outerRadius = (size / 2) * 0.7 * t;
const context = this.context;
context.clearRect(0, 0, this.width, this.height);
context.beginPath();
context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
context.fillStyle = `rgba(252, 1, 26, ${1 - t})`;
context.lineWidth = 2 + 4 * (1 - t);
context.fill();
this.data = context.getImageData(0, 0, this.width, this.height).data;
map.triggerRepaint();
return true;
},
};
import Vue from 'vue'
import { Message } from 'element-ui'
import Vue from "vue";
import { Message } from "element-ui";
import eventPopupVue from "@/views/signal/mapPopup/eventPopup.vue";
const EventPopupVue = Vue.extend(eventPopupVue);
let popupEvent = null
let popupEvent = null;
export function addPopupEvent(map, prop) {
popupEvent?.remove()
if (prop.lng && prop.lat) {
// 添加弹窗
popupEvent = new mapboxgl.Popup({
closeButton: true,
anchor: "bottom",
offset: [0, -5],
}).setLngLat([prop.lng, prop.lat])
.setHTML(`<div id="event_popup_smartcity"></div>`)
.addTo(map)
.addClassName("eventPopup");
new EventPopupVue({
propsData: {
model: prop,
},
}).$mount(
`#event_popup_smartcity`
popupEvent?.remove();
if (prop.lng && prop.lat) {
// 添加弹窗
popupEvent = new mapboxgl.Popup({
closeButton: true,
anchor: "bottom",
offset: [0, -5],
})
.setLngLat([prop.lng, prop.lat])
.setHTML(`<div id="event_popup_smartcity"></div>`)
.addTo(map)
.addClassName("eventPopup");
new EventPopupVue({
propsData: {
model: prop,
},
}).$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 {
tabs: [
{'1': '周期数据'},
{'2': '快照数据'},
{'3': '事件数据'},
// {'3': '事件数据'},
],
}
},
......
wj-smartcity/src/views/signal/index.vue
View file @ 6ff4bafe
<template>
<div class="full-w-h">
<wMap :mapId="'situation-map'" ref="wMap"/>
<msgs :clickCrossData="clickCrossData" :isCrossDetail="isCrossDetail" v-if="!loading"
@showCrossStatus="showCrossStatus" @openCrossIndexDetail="openCrossIndexDetail"
@showPolygon="showPolygon"
@openGreenWaveDialog="openGreenWaveDialog" :show="boxesShow" @showEventPoint="showEventPoint"></msgs>
<div :class="boxesShow ? '' : 'hideBackToMain'" @click="backToMain" v-if="isCrossDetail" class="backToMain"></div>
<wMap :mapId="'situation-map'" ref="wMap" />
<msgs
:clickCrossData="clickCrossData"
:isCrossDetail="isCrossDetail"
v-if="!loading"
@showCrossStatus="showCrossStatus"
@openCrossIndexDetail="openCrossIndexDetail"
@showPolygon="showPolygon"
@openGreenWaveDialog="openGreenWaveDialog"
:show="boxesShow"
></msgs>
<div
:class="boxesShow ? '' : 'hideBackToMain'"
@click="backToMain"
v-if="isCrossDetail"
class="backToMain"
></div>
<!--切换图层 收起放开侧边栏-->
<layers-switch
ref="switch"
:show="boxesShow"
@changeCheck="changeCheck"
@visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'"
ref="switch"
:show="boxesShow"
@changeCheck="changeCheck"
@visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'"
/>
<!--路口指标详情弹窗-->
<cross-detail :cross-detail-data="crossData" dialogId="crossDetailShow" v-if="dialogVisible.crossDetailShow"
@actionFinished="actionFinished"/>
<cross-detail
:cross-detail-data="crossData"
dialogId="crossDetailShow"
v-if="dialogVisible.crossDetailShow"
@actionFinished="actionFinished"
/>
<!--路口绿波信息弹窗-->
<green-wave :greenId="greenId" :waveTitle='waveTitle' dialogId="greenWaveShow" v-if="dialogVisible.greenWaveShow"
@actionFinished="actionFinished"/>
<green-wave
:greenId="greenId"
:waveTitle="waveTitle"
dialogId="greenWaveShow"
v-if="dialogVisible.greenWaveShow"
@actionFinished="actionFinished"
/>
<!--设备图例控制-->
<equipment-switch
:boxesShow="boxesShow"
@equipmentChange="equipmentChange"
v-if="currentCheck === 'fourth'"
/>
</div>
</template>
<script>
import Vue from "vue";
import wMap from "../../components/Standard/mapMapbox.vue";
import msgs from './msgs/index.vue'
import LayersSwitch from "./layersSwitch.vue";
import msgs from "./msgs/index.vue";
import LayersSwitch from "./switchers/layersSwitch.vue";
import mapAssets from "@/config/holo/mapAssets";
import CrossDetail from "@/views/signal/dialogs/crossDetail.vue";
import GreenWave from "@/views/signal/dialogs/greenWave/index.vue";
import * as mapTool from '@/utils/mapboxTools'
import {initWs} from "@/config/holo/websocket";
import * as mapTool from "@/utils/mapboxTools";
import { initWs } from "@/config/holo/websocket";
import equipmentPopup from "./mapPopup/equipmentPopup.vue";
import dict from "../../config/holo/dictionary";
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);
let map = null;
let vehiclePopups = {},
popupVises = {},
vehiclePopupInstances = {},
licenseLabel = {}, // 车牌号label
vehicleModels = {}, // 车辆model
vehicleModelTypes = {},
lastFrameTime = null,
AlarmPopupIns = {},
stopLineData = [],
waitGeo = null,
radarModels = {},
radarModelTypes = {},
radarTimers = [],
trackTimer = null; // 轨迹心跳检测
popupVises = {},
vehiclePopupInstances = {},
licenseLabel = {}, // 车牌号label
vehicleModels = {}, // 车辆model
vehicleModelTypes = {},
equipPopup = null,
equipPopupInstance = null
export default {
components: {GreenWave, CrossDetail, wMap, LayersSwitch, msgs},
components: {
GreenWave,
CrossDetail,
wMap,
LayersSwitch,
msgs,
EquipmentSwitch,
},
computed: {},
data() {
return {
currentCheck: "first",
timer: null,
licenseState: false,
lastLocation: [],
......@@ -69,16 +105,36 @@ export default {
clickCrossData: {},
isCrossDetail: false,
loading: true,
crossData: {id: '', name: ''},
waveTitle: '',
crossData: { id: "", name: "" },
waveTitle: "",
boxesShow: true,
detailShow: false,
dialogVisible: {
crossDetailShow: false,
greenWaveShow: false
greenWaveShow: false,
},
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: {
......@@ -86,12 +142,12 @@ export default {
boxesShow(val) {
if (val) {
document
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.remove("mapboxgl-ctrl-bottom-right-hide-box");
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.remove("mapboxgl-ctrl-bottom-right-hide-box");
} else {
document
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.add("mapboxgl-ctrl-bottom-right-hide-box");
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.add("mapboxgl-ctrl-bottom-right-hide-box");
}
},
},
......@@ -102,19 +158,46 @@ export default {
"CarType",
"PlateColor",
"EventType",
'Direction'
"Direction",
];
for (let item of needDicts) {
queue.push(
this.$store.dispatch("QUERY_DICT", {
type: item,
})
this.$store.dispatch("QUERY_DICT", {
type: item,
})
);
}
Promise.all(queue).then(() => {
map = this.$refs.wMap.initMap();
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({
color: "#1d3244", // Lower atmosphere
"high-color": "#030b19", // Upper atmosphere
......@@ -136,7 +219,6 @@ export default {
// sky: true,
enableSelectingObjects: true,
});
map.addLayer({
id: "vehicle3D",
type: "custom",
......@@ -149,7 +231,7 @@ export default {
type: "gltf",
units: "meters",
scale: 0.8,
adjustment: {x: 0.5, y: 1, z: -0.5},
adjustment: { x: 0.5, y: 1, z: -0.5 },
bbox: true,
};
window.tb.loadObj(options, (model) => {
......@@ -162,61 +244,50 @@ export default {
window.tb.update();
},
});
this.loading = false;
map.addControl(
new mapboxgl.NavigationControl({showZoom: false}),
"bottom-right"
new mapboxgl.NavigationControl({ showZoom: false }),
"bottom-right"
);
map.on('dblclick', () => {
console.log('center ' + map.getCenter() + ' pitch ' + map.getPitch() + ' bearing ' + map.getBearing() + ' zoom ' + map.getZoom())
})
window.map = map
map.on('zoomend', () => {
this.mapZoomEnd()
if (map.getZoom() < 16.5) {
this.isCrossDetail = false
this.removeLayers('eventPoint1')
}
})
map.on('moveend', () => {
this.mapZoomEnd()
})
// 注册车辆实时ws
let socket = initWs({
name: "callCar",
url: ws_config.BASE_URL,
callback: this.callCar,
map.on("dblclick", () => {
console.log(
"center " +
map.getCenter() +
" pitch " +
map.getPitch() +
" bearing " +
map.getBearing() +
" zoom " +
map.getZoom()
);
});
socket.ws.onopen = () => {
if (socket.ws.readyState === 1) {
socket.ws.send('{ dataType: "1"}');
this.sockets.push(socket);
}
};
window.map = map;
map.on("zoomend", () => {
this.mapZoomEnd();
});
map.on("moveend", () => {
this.mapZoomEnd();
});
this.switchfirst();
});
});
},
methods: {
showEventPoint(events) {
let features = []
for (let item of events) {
if (item.lng && item.lat) {
features.push(turf.point([item.lng, item.lat], item))
// 设备图例点击
equipmentChange(equips) {
for (let item of equips) {
if (map.getLayer(item.label)) {
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() {
this.isCrossDetail = false
this.boxesShow = true
this.removeLayers('eventPoint1')
this.isCrossDetail = false;
this.boxesShow = true;
this.removeLayers("eventPoint1");
map?.flyTo({
duration: 1000,
essential: true,
......@@ -224,7 +295,7 @@ export default {
center: map_config.MAP_CENTER,
zoom: map_config.MAP_ZOOM,
pitch: map_config.MAP_PITCH,
})
});
},
// 更新经纬度-角度-详细信息-弹窗信息
setModel(model, options, setColor) {
......@@ -236,14 +307,14 @@ export default {
return item.code == options.originalColor;
});
let realColor = colorDesc
? dict.colorMatch[colorDesc.name]
: "#fff";
? dict.colorMatch[colorDesc.name]
: "#fff";
child.material.color.set(realColor);
}
});
}
model.setCoords([options.longitude, options.latitude]);
model.setRotation({x: 90, y: 360 - options.courseAngle - 90, z: 0});
model.setRotation({ x: 90, y: 360 - options.courseAngle - 90, z: 0 });
model.userData.data = options;
},
clearLicense() {
......@@ -255,6 +326,10 @@ export default {
}
},
mapZoomEnd() {
if (map.getZoom() < 16.5) {
this.isCrossDetail = false;
this.removeLayers("eventPoint1");
}
this.refreshBounds();
},
refreshBounds() {
......@@ -288,7 +363,6 @@ export default {
});
},
callCar(msg) {
lastFrameTime = new Date().getTime();
let zoom = map?.getZoom();
// 车牌号状态
if (!this.licenseState && Object.keys(licenseLabel).length) {
......@@ -299,7 +373,10 @@ export default {
}
// 筛选可见区域
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 = "";
}
let pt = turf.point([msg[i].longitude, msg[i].latitude]);
......@@ -312,8 +389,8 @@ export default {
if (msg.length > 0) {
// 第一帧 || 时间戳不相同 => 放行
if (
this.lastLocation.length === 0 ||
this.lastLocation[0].dateTime !== msg[0].dateTime
this.lastLocation.length === 0 ||
this.lastLocation[0].dateTime !== msg[0].dateTime
) {
this.situationTimeVal = msg[0].dateTime;
// zoom 大于 17 ： 移除圆点
......@@ -325,23 +402,14 @@ export default {
this.hideTb();
let features = [];
for (let item of msg) {
features.push(
turf.point([item.longitude, item.latitude], item)
);
features.push(turf.point([item.longitude, item.latitude], item));
}
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.removeLayers(
"lightLayer,lightLayerText,vehicleSelectWave,license,licenseBack,vehiclePic"
"lightLayer,lightLayerText,vehicleSelectWave,license,licenseBack,vehiclePic"
);
mapTool.addOrUpdateVehicle(map, geo);
// map.on("click", "vehicle", this.vehicleCircleClick);
// }
}
let allData = this.diff(this.lastLocation, msg);
for (let item of allData) {
......@@ -364,8 +432,8 @@ export default {
this.modelsEmpty = false;
}
if (
item.dill === "add" ||
(item.dill === "com" && !vehicleModels[item.id])
item.dill === "add" ||
(item.dill === "com" && !vehicleModels[item.id])
) {
this.addVehicleModels(item);
if (this.licenseState) this.addVehicleLicenses(item);
......@@ -386,8 +454,8 @@ export default {
if (item.dill === "com") {
// 车型中途变化 清除并重新创建
if (
vehicleModels[key].userData.data.originalType !==
item.originalType
vehicleModels[key].userData.data.originalType !==
item.originalType
) {
if (vehicleModels[key]) {
window.tb.clear(item.id, true);
......@@ -403,7 +471,8 @@ export default {
if (licenseLabel[`license${item.id}`]) {
// 如果车牌model存在且未改变 则setCoords
if (
licenseLabel[`license${item.id}`].userData.data.picLicense == item.picLicense
licenseLabel[`license${item.id}`].userData.data
.picLicense == item.picLicense
) {
licenseLabel[`license${item.id}`].setCoords([
item.longitude,
......@@ -418,8 +487,7 @@ export default {
this.addVehicleLicenses(item);
}
} else {
if (this.licenseState)
this.addVehicleLicenses(item);
if (this.licenseState) this.addVehicleLicenses(item);
}
this.setModel(vehicleModels[key], item, true);
}
......@@ -454,9 +522,9 @@ export default {
let model = vehicleModelTypes[`car${option.originalType}`].duplicate();
this.setModel(model, option, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
vehicleModels[option.id] = model;
window.tb.add(model, option.id);
......@@ -518,10 +586,10 @@ export default {
offset: [0, -20],
});
vehiclePopups[`popup${data.id}`]
.setLngLat([data.longitude, data.latitude])
.setHTML(`<div id="vehicle_popup${data.id}"></div>`)
.addTo(map)
.addClassName("vehicleDetailPopup");
.setLngLat([data.longitude, data.latitude])
.setHTML(`<div id="vehicle_popup${data.id}"></div>`)
.addTo(map)
.addClassName("vehicleDetailPopup");
vehiclePopups[`popup${data.id}`].on("close", () => {
vehiclePopups[`popup${data.id}`] = null;
delete vehiclePopups[`popup${data.id}`];
......@@ -536,19 +604,19 @@ export default {
},
});
vehiclePopupInstances[`popup${data.id}`].$mount(
`#vehicle_popup${data.id}`
`#vehicle_popup${data.id}`
);
}
},
// 转换轨迹数据为geo 并更新轨迹图层
updateSelectVehcleTrack() {
if (
this.selectVehicleTrackData &&
this.selectVehicleTrackData.lnglat.length > 1
this.selectVehicleTrackData &&
this.selectVehicleTrackData.lnglat.length > 1
) {
let feature = turf.lineString(
this.selectVehicleTrackData.lnglat,
this.selectVehicleTrackData.properties
this.selectVehicleTrackData.lnglat,
this.selectVehicleTrackData.properties
);
let geo = turf.featureCollection([feature]);
mapTool.addOrUpdateSelectVehicleTrack(map, geo);
......@@ -560,7 +628,7 @@ export default {
ele.style.color = "white";
ele.innerText = option.picLicense;
ele.style.backgroundImage = `url('${
mapAssets.mapIcons[`license${option.licenseColor}`]
mapAssets.mapIcons[`license${option.licenseColor}`]
}')`;
ele.style.backgroundSize = "100% 100%";
ele.style.fontSize = "8px";
......@@ -572,7 +640,7 @@ export default {
topMargin: 2,
});
license.setCoords([option.longitude, option.latitude, 4]);
license.userData.data = {picLicense: option.picLicense};
license.userData.data = { picLicense: option.picLicense };
window.tb.add(license, `license${option.id}`);
licenseLabel[`license${option.id}`] = license;
}
......@@ -590,55 +658,62 @@ export default {
return [...add, ...del, ...com];
},
openGreenWaveDialog(data) {
this.dialogVisible.greenWaveShow = true
this.greenId = data.id
this.waveTitle = data.name
this.dialogVisible.greenWaveShow = true;
this.greenId = data.id;
this.waveTitle = data.name;
},
showCrossStatus(data) {
console.log('showCrossStatus')
this.timer = setInterval(() => {
if (map?.hasImage('crossStatus0') && map?.hasImage('crossStatus1') && map?.hasImage('crossStatus2') && map?.hasImage('crossStatus3')) {
clearInterval(this.timer)
console.log('sAddOrUpdateCrossStatus')
let features = []
for (let item of data) {
features.push(turf.point(item.location, item))
if (data) {
this.crosses = data;
}
if (this.crosses) {
this.timer = setInterval(() => {
if (
map?.hasImage("crossStatus0") &&
map?.hasImage("crossStatus1") &&
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)
mapTool.sAddOrUpdateCrossStatus(map, geo)
map.on('click', 'crossStatus', this.showRightDetail)
}
}, 100)
}, 100);
}
},
showRightDetail(e) {
let prop = e.features[0].properties
this.clickCrossData = prop
this.isCrossDetail = true
console.log('cross click...',e.features[0]);
let prop = e.features[0].properties;
this.clickCrossData = prop;
this.isCrossDetail = true;
if (!Array.isArray(prop.location)) {
prop.location = JSON.parse(prop.location)
prop.location = JSON.parse(prop.location);
}
map.flyTo({
duration: 1000,
essential: true,
center: prop.location,
zoom: 18.5
})
zoom: 18.5,
});
},
crossStatusClick(e) {
this.openCrossIndexDetail(e.features[0].properties)
this.openCrossIndexDetail(e.features[0].properties);
},
convertToPgWithWkt(json) {
let features = [];
for (let item of json) {
if (item.wkt) {
let lnglats = item.wkt.replaceAll(' ', '').split(";");
let lnglats = item.wkt.replaceAll(" ", "").split(";");
for (let i = 0; i < lnglats.length; i++) {
lnglats[i] = lnglats[i].split(",").map((j) => Number(j));
}
lnglats.pop()
lnglats.push(lnglats[0])
lnglats.pop();
lnglats.push(lnglats[0]);
features.push(turf.polygon([lnglats], item));
}
}
......@@ -648,11 +723,11 @@ export default {
let features = [];
for (let item of json) {
if (item.wkt) {
let lnglats = item.wkt.replaceAll(' ', '').split(";");
let lnglats = item.wkt.replaceAll(" ", "").split(";");
for (let i = 0; i < lnglats.length; i++) {
lnglats[i] = lnglats[i].split(",").map((j) => Number(j));
}
lnglats.pop()
lnglats.pop();
features.push(turf.lineString(lnglats, item));
}
}
......@@ -671,39 +746,188 @@ export default {
}
},
showPolygon(data) {
this.removeLayers('RoadPolygon,RoadLine')
let polygon = this.convertToPgWithWkt([data])
let centerPoint = turf.center(polygon)
let offsetPoint = turf.transformTranslate(centerPoint, 0.5, 180)
mapTool.sAddOrUpdateRoadPolygon(map, polygon)
mapTool.sAddOrUpdateRoadLine(map, this.convertToLineWithWkt([data]))
this.removeLayers("RoadPolygon,RoadLine");
let polygon = this.convertToPgWithWkt([data]);
let centerPoint = turf.center(polygon);
let offsetPoint = turf.transformTranslate(centerPoint, 0.5, 180);
mapTool.sAddOrUpdateRoadPolygon(map, polygon);
mapTool.sAddOrUpdateRoadLine(map, this.convertToLineWithWkt([data]));
map.flyTo({
duration: 1000,
essential: true,
center: offsetPoint.geometry.coordinates,
zoom: 16,
bearing: map_config.MAP_BEARING,
pitch: map_config.MAP_PITCH
})
pitch: map_config.MAP_PITCH,
});
},
openCrossIndexDetail(crossData) {
console.log('crossData', crossData)
this.showRightDetail({features: [{properties: crossData}]})
this.showRightDetail({ features: [{ properties: crossData }] });
// this.crossData = crossData
// this.dialogVisible.crossDetailShow = true
},
actionFinished(id) {
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) {
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() {
this.boxesShow = !this.boxesShow;
},
},
beforeDestroy() {
this.timer && clearInterval(this.timer)
this.closeAllWs();
this.timer && clearInterval(this.timer);
this.closeWs("callCar");
window.tb.dispose();
window.tb = null;
map = null;
......@@ -727,7 +951,6 @@ export default {
right: 520px;
width: 42px;
height: 42px;
//background-color: #009edd;
font-size: 16px;
letter-spacing: 10px;
top: 5px;
......@@ -755,5 +978,4 @@ export default {
left: 535px;
transition: 0.5s all ease;
}
</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