Skip to content

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

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

parent 7764ca9d
Hide whitespace changes
Inline Side-by-side
Showing with 1438 additions and 1374 deletions
wj-smartcity/src/utils/mapboxTools.js
View file @ bc0726c1
// 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 convertPointsToGeo(arr){
let features = [] export function convertPointsToGeo(arr) {
for(let item of arr){ let features = []
features.push(turf.point([item.longitude,item.latitude],item)) for (let item of arr) {
} features.push(turf.point([item.longitude, item.latitude], item))
return turf.featureCollection(features) }
return turf.featureCollection(features)
} }
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("vehicle3D")) map.moveLayer("vehicle3D");
if (map.getLayer("vehicle")) map.moveLayer("vehicle"); 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", id: "RoadLine",
type: "line", type: "line",
source: "RoadLine", source: "RoadLine",
paint: { paint: {
"line-color": "rgb(30,164,252)", "line-color": "rgb(30,164,252)",
"line-width": 2, "line-width": 2,
"line-dasharray": [2, 6], "line-dasharray": [2, 6],
}, },
}, },
"crossStatus" "crossStatus"
); );
if (map.getLayer("vehicle")) map.moveLayer("vehicle"); if (map.getLayer("vehicle")) map.moveLayer("vehicle");
if (map.getLayer("vehicle3D")) map.moveLayer("vehicle3D"); 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",
], ],
}, },
}); });
} }
let timer = setInterval(() => {
// 1. 清除重新创建
// if (map) {
// if (map.getLayer('vector_road_layer')) {
// map.removeLayer('vector_road_layer')
// }
// if (map.getSource('vector_road')) {
// map.removeSource('vector_road')
// }
// setTimeout(() => {
// if (!map.getSource("vector_road")) {
// map.addSource("vector_road", {
// type: "vector",
// tiles: [map_config.VECTOR_ROAD],
// });
// }
// if (!map.getLayer("vector_road_layer")) {
// map.addLayer({
// id: "vector_road_layer",
// source: "vector_road",
// "source-layer": "line-layer",
// type: "line",
// layout: {
// "line-join": "round",
// "line-cap": "round",
// },
// paint: {
// "line-width": 3,
// "line-color": [
// "match",
// ["get", "status"],
// "1",
// "green",
// "2",
// "yellow",
// "3",
// "orange",
// "4",
// "red",
// "green",
// ],
// },
// });
// }
// }, 0)
// }
// 2. 只更新source
if (map?.getSource("vector_road")) {
map.getSource("vector_road").reload()
}
}, 1000 * 30)
return timer
} }
// 更新选中车辆底部闪动波纹 // 更新选中车辆底部闪动波纹
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({ map.addLayer({
id: "holo_crossPoint", id: "holo_crossPoint",
type: "symbol", type: "symbol",
source: "holo_crossPoint", source: "holo_crossPoint",
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_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],
}, },
}); });
} }
} }
// 路口名称 // 路口名称
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, arr, callback) { export function addOrUpdateEquipCamera(map, arr, callback) {
let geo = convertPointsWktToGeo(arr); let geo = convertPointsWktToGeo(arr);
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, arr, callback) { export function addOrUpdateEquipMilli(map, arr, callback) {
let geo = convertPointsWktToGeo(arr); let geo = convertPointsWktToGeo(arr);
if (!map.getSource("milli")) { if (!map.getSource("milli")) {
map.addSource("milli", { map.addSource("milli", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("milli").setData(geo); map.getSource("milli").setData(geo);
} }
if (!map.getLayer("milli")) { if (!map.getLayer("milli")) {
map.addLayer({ map.addLayer({
id: "milli", id: "milli",
type: "symbol", type: "symbol",
source: "milli", source: "milli",
layout: { layout: {
"icon-image": [ "icon-image": [
"match", "match",
["get", "status"], // 属性字段名称 ["get", "status"], // 属性字段名称
"0", "0",
"milliFalse", "milliFalse",
"1", "1",
"milli", "milli",
"milliFalse", "milliFalse",
], // 默认值，如果没有匹配到上述枚举值] ], // 默认值，如果没有匹配到上述枚举值]
// "icon-image": "milli", // "icon-image": "milli",
"icon-size": 0.6, "icon-size": 0.6,
"icon-ignore-placement": true, "icon-ignore-placement": true,
}, },
}); });
// map.on("click", "milli", (aaa) => callback(aaa, "milli")); // map.on("click", "milli", (aaa) => callback(aaa, "milli"));
} }
} }
export function addOrUpdateEquipRadar(map, arr, callback) { export function addOrUpdateEquipRadar(map, arr, callback) {
let geo = convertPointsWktToGeo(arr); let geo = convertPointsWktToGeo(arr);
if (!map.getSource("radar")) { if (!map.getSource("radar")) {
map.addSource("radar", { map.addSource("radar", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("radar").setData(geo); map.getSource("radar").setData(geo);
} }
if (!map.getLayer("radar")) { if (!map.getLayer("radar")) {
map.addLayer({ map.addLayer({
id: "radar", id: "radar",
type: "symbol", type: "symbol",
source: "radar", source: "radar",
layout: { layout: {
"icon-image": [ "icon-image": [
"match", "match",
["get", "status"], // 属性字段名称 ["get", "status"], // 属性字段名称
"0", "0",
"radarFalse", "radarFalse",
"1", "1",
"radar", "radar",
"radarFalse", "radarFalse",
], // 默认值，如果没有匹配到上述枚举值] ], // 默认值，如果没有匹配到上述枚举值]
// "icon-image": "radar", // "icon-image": "radar",
"icon-size": 0.6, "icon-size": 0.6,
"icon-ignore-placement": true, "icon-ignore-placement": true,
}, },
}); });
// map.on("click", "radar", (aaa) => callback(aaa, "radar")); // map.on("click", "radar", (aaa) => callback(aaa, "radar"));
} }
} }
export function addOrUpdateEquipSignal(map, arr, callback) { export function addOrUpdateEquipSignal(map, arr, callback) {
let geo = convertPointsWktToGeo(arr); let geo = convertPointsWktToGeo(arr);
if (!map.getSource("signal")) { if (!map.getSource("signal")) {
map.addSource("signal", { map.addSource("signal", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("signal").setData(geo); map.getSource("signal").setData(geo);
} }
if (!map.getLayer("signal")) { if (!map.getLayer("signal")) {
map.addLayer({ map.addLayer({
id: "signal", id: "signal",
type: "symbol", type: "symbol",
source: "signal", source: "signal",
layout: { layout: {
// "icon-image": "signal", // "icon-image": "signal",
"icon-image": [ "icon-image": [
"match", "match",
["get", "status"], // 属性字段名称 ["get", "status"], // 属性字段名称
"0", "0",
"signalFalse", "signalFalse",
"1", "1",
"signal", "signal",
"signalFalse", "signalFalse",
], // 默认值，如果没有匹配到上述枚举值] ], // 默认值，如果没有匹配到上述枚举值]
"icon-size": 0.6, "icon-size": 0.6,
"icon-ignore-placement": true, "icon-ignore-placement": true,
}, },
}); });
// map.on("click", "signal", (aaa) => callback(aaa, "signal")); // map.on("click", "signal", (aaa) => callback(aaa, "signal"));
} }
} }
export function addOrUpdateEquipWeather(map, arr, callback) { export function addOrUpdateEquipWeather(map, arr, callback) {
let geo = convertPointsWktToGeo(arr); let geo = convertPointsWktToGeo(arr);
if (!map.getSource("weather")) { if (!map.getSource("weather")) {
map.addSource("weather", { map.addSource("weather", {
type: "geojson", type: "geojson",
data: geo, data: geo,
}); });
} else { } else {
map.getSource("weather").setData(geo); map.getSource("weather").setData(geo);
} }
if (!map.getLayer("weather")) { if (!map.getLayer("weather")) {
map.addLayer({ map.addLayer({
id: "weather", id: "weather",
type: "symbol", type: "symbol",
source: "weather", source: "weather",
layout: { layout: {
// "icon-image": "weather", // "icon-image": "weather",
"icon-image": [ "icon-image": [
"match", "match",
["get", "status"], // 属性字段名称 ["get", "status"], // 属性字段名称
"0", "0",
"weatherFalse", "weatherFalse",
"1", "1",
"weather", "weather",
"weatherFalse", "weatherFalse",
], // 默认值，如果没有匹配到上述枚举值] ], // 默认值，如果没有匹配到上述枚举值]
"icon-size": 0.6, "icon-size": 0.6,
"icon-ignore-placement": true, "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 {
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);
}); });
} } else {
} map.getSource("flowLineArrowR").setData(points);
map.addLayer({ }
id: "flowLineArrowR", if (!map.getLayer("flowLineArrowR")) {
type: "symbol", // console.log('has.............');
source: "flowLineArrowR", if (!map.hasImage("arrowIcon1")) {
layout: { const arrowIcons = [];
// 'icon-image': [ // Create a triangle icon (arrow) with a specified color
// "match", // const arrowIcon0 = createTriangleIcon("#d10401");
// ["get", "ridDir"], // 属性字段名称 const arrowIcon0 = createTriangleIcon("yellow");
// 1, const arrowIcon1 = createTriangleIcon("#08a24d");
// "arrowIcon0", const arrowIcon2 = createTriangleIcon("#5440b8");
// 2, const arrowIcon3 = createTriangleIcon("#f37c0b");
// "arrowIcon0", arrowIcons.push(arrowIcon0, arrowIcon2, arrowIcon3, arrowIcon1);
// 3, for (let i = 0; i < arrowIcons.length; i++) {
// "arrowIcon1", map.loadImage(arrowIcons[i], (error, image) => {
// 4, if (error) throw error;
// "arrowIcon1", map.addImage(`arrowIcon${i}`, image);
// 5, });
// "arrowIcon2", }
// 6, }
// "arrowIcon2", map.addLayer({
// 7, id: "flowLineArrowR",
// "arrowIcon3", type: "symbol",
// 8, source: "flowLineArrowR",
// "arrowIcon3", layout: {
// "arrowIcon1", // 'icon-image': [
// ], // "match",
"icon-image": "arrowIcon0", // ["get", "ridDir"], // 属性字段名称
"icon-size": 0.5, // Adjust the size of the arrow // 1,
"icon-rotation-alignment": "map", // "arrowIcon0",
"icon-rotate": ["get", "bearing"], // Rotate the arrow based on bearing // 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
...@@ -1405,174 +1459,176 @@ export function addOrUpdateFlowTextEnd(map, json) { ...@@ -1405,174 +1459,176 @@ 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]) .setLngLat([prop.lng, prop.lat])
.setHTML(`<div id="event_popup_smartcity"></div>`) .setHTML(`<div id="event_popup_smartcity"></div>`)
.addTo(map) .addTo(map)
.addClassName("eventPopup"); .addClassName("eventPopup");
new EventPopupVue({ new EventPopupVue({
propsData: { propsData: {
model: prop, model: prop,
}, },
}).$mount(`#event_popup_smartcity`); }).$mount(`#event_popup_smartcity`);
} else { } else {
Message("选中事件无经纬度信息"); Message("选中事件无经纬度信息");
} }
} }
export function convertPointsWktToGeo(arr) { export function convertPointsWktToGeo(arr) {
let features = []; let features = [];
for (let item of arr) { for (let item of arr) {
if (item.wkt) { if (item.wkt) {
if (item.wkt.split(",").length === 2) { if (item.wkt.split(",").length === 2) {
features.push( features.push(
turf.point( turf.point(
item.wkt.split(",").map((item) => Number(item)), item.wkt.split(",").map((item) => Number(item)),
item item
) )
); );
} }
}
} }
} return turf.featureCollection(features);
return turf.featureCollection(features);
} }
wj-smartcity/src/views/signal/index.vue
View file @ bc0726c1
<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 :clickCrossData="clickCrossData" :isCrossDetail="isCrossDetail" v-if="!loading"
@showCrossStatus="showCrossStatus" @openCrossIndexDetail="openCrossIndexDetail" @showPolygon="showPolygon" @showCrossStatus="showCrossStatus" @openCrossIndexDetail="openCrossIndexDetail" @showPolygon="showPolygon"
@openGreenWaveDialog="openGreenWaveDialog" :show="boxesShow"></msgs> @openGreenWaveDialog="openGreenWaveDialog" :show="boxesShow"></msgs>
<div :class="boxesShow ? '' : 'hideBackToMain'" @click="backToMain" v-if="isCrossDetail" class="backToMain"></div> <div :class="boxesShow ? '' : 'hideBackToMain'" @click="backToMain" v-if="isCrossDetail" class="backToMain"></div>
<!--切换图层 收起放开侧边栏--> <!--切换图层 收起放开侧边栏-->
<layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange" <layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'" /> :class="boxesShow ? 'generalSwitch' : 'rightSwitch'"/>
<!--路口指标详情弹窗--> <!--路口指标详情弹窗-->
<cross-detail :cross-detail-data="crossData" dialogId="crossDetailShow" v-if="dialogVisible.crossDetailShow" <cross-detail :cross-detail-data="crossData" dialogId="crossDetailShow" v-if="dialogVisible.crossDetailShow"
@actionFinished="actionFinished" /> @actionFinished="actionFinished"/>
<!--路口绿波信息弹窗--> <!--路口绿波信息弹窗-->
<green-wave :greenId="greenId" :waveTitle="waveTitle" dialogId="greenWaveShow" v-if="dialogVisible.greenWaveShow" <green-wave :greenId="greenId" :waveTitle="waveTitle" dialogId="greenWaveShow" v-if="dialogVisible.greenWaveShow"
@actionFinished="actionFinished" /> @actionFinished="actionFinished"/>
<!--设备图例控制--> <!--设备图例控制-->
<equipment-switch :boxesShow="boxesShow" @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'" /> <equipment-switch :boxesShow="boxesShow" @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'"/>
</div> </div>
</template> </template>
...@@ -28,7 +28,7 @@ import mapAssets from "@/config/holo/mapAssets"; ...@@ -28,7 +28,7 @@ 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 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";
...@@ -39,6 +39,7 @@ import { ...@@ -39,6 +39,7 @@ import {
equip_camera, equip_camera,
equip_radar, equip_radar,
} from "../../dao/situation"; } from "../../dao/situation";
const EquipmentPopup = Vue.extend(equipmentPopup); const EquipmentPopup = Vue.extend(equipmentPopup);
const VehiclePopup = Vue.extend(vehicleDetail); const VehiclePopup = Vue.extend(vehicleDetail);
...@@ -46,13 +47,13 @@ import lightMixin from "../../mixin/lightMixin"; ...@@ -46,13 +47,13 @@ import lightMixin from "../../mixin/lightMixin";
let map = null; let map = null;
let vehiclePopups = {}, let vehiclePopups = {},
popupVises = {}, popupVises = {},
vehiclePopupInstances = {}, vehiclePopupInstances = {},
licenseLabel = {}, // 车牌号label licenseLabel = {}, // 车牌号label
vehicleModels = {}, // 车辆model vehicleModels = {}, // 车辆model
vehicleModelTypes = {}, vehicleModelTypes = {},
equipPopup = null, equipPopup = null,
equipPopupInstance = null equipPopupInstance = null
export default { export default {
components: { components: {
...@@ -63,10 +64,11 @@ export default { ...@@ -63,10 +64,11 @@ export default {
msgs, msgs,
EquipmentSwitch, EquipmentSwitch,
}, },
mixins:[lightMixin], mixins: [lightMixin],
computed: {}, computed: {},
data() { data() {
return { return {
roadTimer: null,
currentCheck: "first", currentCheck: "first",
timer: null, timer: null,
licenseState: false, licenseState: false,
...@@ -77,7 +79,7 @@ export default { ...@@ -77,7 +79,7 @@ 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,
...@@ -115,12 +117,12 @@ export default { ...@@ -115,12 +117,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");
} }
}, },
}, },
...@@ -135,9 +137,9 @@ export default { ...@@ -135,9 +137,9 @@ export default {
]; ];
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(() => {
...@@ -200,7 +202,8 @@ export default { ...@@ -200,7 +202,8 @@ export default {
map.loadImage(mapAssets.lightIcons[key], (error, image) => { map.loadImage(mapAssets.lightIcons[key], (error, image) => {
if (map && !map.hasImage(key)) map.addImage(key, image); if (map && !map.hasImage(key)) map.addImage(key, image);
}); });
}; }
;
window.tb = new Threebox(map, map.getCanvas().getContext("webgl"), { window.tb = new Threebox(map, map.getCanvas().getContext("webgl"), {
defaultLights: true, defaultLights: true,
realSunlight: true, realSunlight: true,
...@@ -220,7 +223,7 @@ export default { ...@@ -220,7 +223,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) => {
...@@ -234,25 +237,25 @@ export default { ...@@ -234,25 +237,25 @@ export default {
}, },
}); });
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( console.log(
"center " + "center " +
map.getCenter() + map.getCenter() +
" pitch " + " pitch " +
map.getPitch() + map.getPitch() +
" bearing " + " bearing " +
map.getBearing() + map.getBearing() +
" zoom " + " zoom " +
map.getZoom() map.getZoom()
); );
}); });
window.map = map; window.map = map;
map.on("zoomend", () => { map.on("zoomend", () => {
this.mapZoomEnd(); this.mapZoomEnd();
this.refreshLightWs() this.refreshLightWs()
}); });
map.on("moveend", () => { map.on("moveend", () => {
...@@ -269,9 +272,9 @@ export default { ...@@ -269,9 +272,9 @@ export default {
for (let item of equips) { for (let item of equips) {
if (map.getLayer(item.label)) { if (map.getLayer(item.label)) {
map.setLayoutProperty( map.setLayoutProperty(
item.label, item.label,
"visibility", "visibility",
item.check ? "visible" : "none" item.check ? "visible" : "none"
); );
} }
} }
...@@ -299,14 +302,14 @@ export default { ...@@ -299,14 +302,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() {
...@@ -367,8 +370,8 @@ export default { ...@@ -367,8 +370,8 @@ export default {
// 筛选可见区域 // 筛选可见区域
for (let i = 0; i < msg.length; i++) { for (let i = 0; i < msg.length; i++) {
if ( if (
!msg[i].picLicense || !msg[i].picLicense ||
dict.noVehicleTypes.includes(msg[i].originalType) dict.noVehicleTypes.includes(msg[i].originalType)
) { ) {
msg[i].picLicense = ""; msg[i].picLicense = "";
} }
...@@ -382,8 +385,8 @@ export default { ...@@ -382,8 +385,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 ： 移除圆点
...@@ -400,7 +403,7 @@ export default { ...@@ -400,7 +403,7 @@ export default {
let geo = turf.featureCollection(features); let geo = turf.featureCollection(features);
this.clearLicense(); this.clearLicense();
this.removeLayers( this.removeLayers(
"vehicleSelectWave,license,licenseBack,vehiclePic" "vehicleSelectWave,license,licenseBack,vehiclePic"
); );
mapTool.addOrUpdateVehicle(map, geo); mapTool.addOrUpdateVehicle(map, geo);
} }
...@@ -425,8 +428,8 @@ export default { ...@@ -425,8 +428,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);
...@@ -447,8 +450,8 @@ export default { ...@@ -447,8 +450,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);
...@@ -464,8 +467,8 @@ export default { ...@@ -464,8 +467,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 licenseLabel[`license${item.id}`].userData.data
.picLicense == item.picLicense .picLicense == item.picLicense
) { ) {
licenseLabel[`license${item.id}`].setCoords([ licenseLabel[`license${item.id}`].setCoords([
item.longitude, item.longitude,
...@@ -515,9 +518,9 @@ export default { ...@@ -515,9 +518,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);
...@@ -579,10 +582,10 @@ export default { ...@@ -579,10 +582,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}`];
...@@ -597,19 +600,19 @@ export default { ...@@ -597,19 +600,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);
...@@ -621,7 +624,7 @@ export default { ...@@ -621,7 +624,7 @@ export default {
ele.style.color = "white"; ele.style.color = "white";
ele.innerText = option.picLicense; ele.innerText = option.picLicense;
ele.style.backgroundImage = `url('${mapAssets.mapIcons[`license${option.licenseColor}`] ele.style.backgroundImage = `url('${mapAssets.mapIcons[`license${option.licenseColor}`]
}')`; }')`;
ele.style.backgroundSize = "100% 100%"; ele.style.backgroundSize = "100% 100%";
ele.style.fontSize = "8px"; ele.style.fontSize = "8px";
ele.style.textAlign = "center"; ele.style.textAlign = "center";
...@@ -632,7 +635,7 @@ export default { ...@@ -632,7 +635,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;
} }
...@@ -666,10 +669,10 @@ export default { ...@@ -666,10 +669,10 @@ export default {
if (this.crosses) { if (this.crosses) {
this.timer = setInterval(() => { this.timer = setInterval(() => {
if ( if (
map?.hasImage("crossStatus0") && map?.hasImage("crossStatus0") &&
map?.hasImage("crossStatus1") && map?.hasImage("crossStatus1") &&
map?.hasImage("crossStatus2") && map?.hasImage("crossStatus2") &&
map?.hasImage("crossStatus3") map?.hasImage("crossStatus3")
) { ) {
clearInterval(this.timer); clearInterval(this.timer);
let features = []; let features = [];
...@@ -759,7 +762,7 @@ export default { ...@@ -759,7 +762,7 @@ export default {
}); });
}, },
openCrossIndexDetail(crossData) { openCrossIndexDetail(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
}, },
...@@ -796,7 +799,8 @@ export default { ...@@ -796,7 +799,8 @@ export default {
}); });
}, },
switchsecond() { switchsecond() {
mapTool.addOrUpdateRoadVector(map); // 返回刷新定时器 供页面销毁
this.roadTimer = mapTool.addOrUpdateRoadVector(map);
}, },
switchfourth() { switchfourth() {
Promise.all([ Promise.all([
...@@ -845,12 +849,12 @@ export default { ...@@ -845,12 +849,12 @@ export default {
distance = 80; distance = 80;
} }
let bearing = map.getBearing(); // 平移方向，0 表示正北方向 let bearing = map.getBearing(); // 平移方向，0 表示正北方向
let options = { units: "meters" }; let options = {units: "meters"};
let translatedPoint = turf.destination( let translatedPoint = turf.destination(
prop.wkt.split(","), prop.wkt.split(","),
distance, distance,
bearing, bearing,
options options
); );
// 将地图中心点设置为平移后的点 // 将地图中心点设置为平移后的点
map.flyTo({ map.flyTo({
...@@ -862,14 +866,14 @@ export default { ...@@ -862,14 +866,14 @@ export default {
offset: [0, -20], offset: [0, -20],
}); });
equipPopup equipPopup
.setLngLat(prop.wkt.split(",")) .setLngLat(prop.wkt.split(","))
.setHTML('<div id="equipment_popup"></div>') .setHTML('<div id="equipment_popup"></div>')
.addTo(map) .addTo(map)
.setMaxWidth("500") .setMaxWidth("500")
.addClassName("equipmentPopup"); .addClassName("equipmentPopup");
equipPopupInstance = new EquipmentPopup({ equipPopupInstance = new EquipmentPopup({
propsData: { propsData: {
model: { equip_type: type, ...prop }, model: {equip_type: type, ...prop},
}, },
}); });
equipPopupInstance.$mount("#equipment_popup"); equipPopupInstance.$mount("#equipment_popup");
...@@ -908,6 +912,9 @@ export default { ...@@ -908,6 +912,9 @@ export default {
equipPopup?.remove(); equipPopup?.remove();
map.off("click", this.equipmentsClick); map.off("click", this.equipmentsClick);
} }
if (beforeLabel === 'second') {
if (this.roadTimer) clearInterval(this.roadTimer)
}
for (let key in this.layers) { for (let key in this.layers) {
if (key !== checkItem.label) { if (key !== checkItem.label) {
for (let layer of this.layers[key]) { for (let layer of this.layers[key]) {
...@@ -923,6 +930,7 @@ export default { ...@@ -923,6 +930,7 @@ export default {
}, },
}, },
beforeDestroy() { beforeDestroy() {
if (this.roadTimer) clearInterval(this.roadTimer)
this.timer && clearInterval(this.timer); this.timer && clearInterval(this.timer);
this.closeAllWs() this.closeAllWs()
window.tb.dispose(); window.tb.dispose();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment