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 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 convertPointsToGeo(arr){
let features = []
for(let item of arr){
features.push(turf.point([item.longitude,item.latitude],item))
}
return turf.featureCollection(features)
export function convertPointsToGeo(arr) {
let features = []
for (let item of arr) {
features.push(turf.point([item.longitude, item.latitude], item))
}
return turf.featureCollection(features)
}
export function addOrUpdateSelectVehicleTrack(map, geo) {
if (!map.getSource("selectVehicleTrack")) {
map.addSource("selectVehicleTrack", {
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.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",
],
},
});
}
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) {
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],
},
});
}
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, arr, callback) {
let geo = convertPointsWktToGeo(arr);
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"));
}
let geo = convertPointsWktToGeo(arr);
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, 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"));
}
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, 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"));
}
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, 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"));
}
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, 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"));
}
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);
if (!map.getSource("flowLineArrowR")) {
map.addSource("flowLineArrowR", {
type: "geojson",
data: points,
});
}
}
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
},
});
}
} 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
......@@ -1405,174 +1459,176 @@ 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 {Message} from "element-ui";
import eventPopupVue from "@/views/signal/mapPopup/eventPopup.vue";
const EventPopupVue = Vue.extend(eventPopupVue);
let popupEvent = null;
export function addPopupEvent(map, prop) {
popupEvent?.remove();
if (prop.lng && prop.lat) {
// 添加弹窗
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("选中事件无经纬度信息");
}
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
)
);
}
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
)
);
}
}
}
}
return turf.featureCollection(features);
return turf.featureCollection(features);
}
wj-smartcity/src/views/signal/index.vue
View file @ bc0726c1
<template>
<div class="full-w-h">
<wMap :mapId="'situation-map'" ref="wMap" />
<wMap :mapId="'situation-map'" ref="wMap"/>
<msgs :clickCrossData="clickCrossData" :isCrossDetail="isCrossDetail" v-if="!loading"
@showCrossStatus="showCrossStatus" @openCrossIndexDetail="openCrossIndexDetail" @showPolygon="showPolygon"
@openGreenWaveDialog="openGreenWaveDialog" :show="boxesShow"></msgs>
@showCrossStatus="showCrossStatus" @openCrossIndexDetail="openCrossIndexDetail" @showPolygon="showPolygon"
@openGreenWaveDialog="openGreenWaveDialog" :show="boxesShow"></msgs>
<div :class="boxesShow ? '' : 'hideBackToMain'" @click="backToMain" v-if="isCrossDetail" class="backToMain"></div>
<!--切换图层 收起放开侧边栏-->
<layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'" />
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'"/>
<!--路口指标详情弹窗-->
<cross-detail :cross-detail-data="crossData" dialogId="crossDetailShow" v-if="dialogVisible.crossDetailShow"
@actionFinished="actionFinished" />
@actionFinished="actionFinished"/>
<!--路口绿波信息弹窗-->
<green-wave :greenId="greenId" :waveTitle="waveTitle" dialogId="greenWaveShow" v-if="dialogVisible.greenWaveShow"
@actionFinished="actionFinished" />
@actionFinished="actionFinished"/>
<!--设备图例控制-->
<equipment-switch :boxesShow="boxesShow" @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'" />
<equipment-switch :boxesShow="boxesShow" @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'"/>
</div>
</template>
......@@ -28,7 +28,7 @@ import mapAssets from "@/config/holo/mapAssets";
import CrossDetail from "@/views/signal/dialogs/crossDetail.vue";
import GreenWave from "@/views/signal/dialogs/greenWave/index.vue";
import * as mapTool from "@/utils/mapboxTools";
import { initWs } from "@/config/holo/websocket";
import {initWs} from "@/config/holo/websocket";
import equipmentPopup from "./mapPopup/equipmentPopup.vue";
import dict from "../../config/holo/dictionary";
import vehicleDetail from "./mapPopup/vehicleDetail.vue";
......@@ -39,6 +39,7 @@ import {
equip_camera,
equip_radar,
} from "../../dao/situation";
const EquipmentPopup = Vue.extend(equipmentPopup);
const VehiclePopup = Vue.extend(vehicleDetail);
......@@ -46,13 +47,13 @@ import lightMixin from "../../mixin/lightMixin";
let map = null;
let vehiclePopups = {},
popupVises = {},
vehiclePopupInstances = {},
licenseLabel = {}, // 车牌号label
vehicleModels = {}, // 车辆model
vehicleModelTypes = {},
equipPopup = null,
equipPopupInstance = null
popupVises = {},
vehiclePopupInstances = {},
licenseLabel = {}, // 车牌号label
vehicleModels = {}, // 车辆model
vehicleModelTypes = {},
equipPopup = null,
equipPopupInstance = null
export default {
components: {
......@@ -63,10 +64,11 @@ export default {
msgs,
EquipmentSwitch,
},
mixins:[lightMixin],
mixins: [lightMixin],
computed: {},
data() {
return {
roadTimer: null,
currentCheck: "first",
timer: null,
licenseState: false,
......@@ -77,7 +79,7 @@ export default {
clickCrossData: {},
isCrossDetail: false,
loading: true,
crossData: { id: "", name: "" },
crossData: {id: "", name: ""},
waveTitle: "",
boxesShow: true,
detailShow: false,
......@@ -115,12 +117,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");
}
},
},
......@@ -135,9 +137,9 @@ export default {
];
for (let item of needDicts) {
queue.push(
this.$store.dispatch("QUERY_DICT", {
type: item,
})
this.$store.dispatch("QUERY_DICT", {
type: item,
})
);
}
Promise.all(queue).then(() => {
......@@ -200,7 +202,8 @@ export default {
map.loadImage(mapAssets.lightIcons[key], (error, image) => {
if (map && !map.hasImage(key)) map.addImage(key, image);
});
};
}
;
window.tb = new Threebox(map, map.getCanvas().getContext("webgl"), {
defaultLights: true,
realSunlight: true,
......@@ -220,7 +223,7 @@ export default {
type: "gltf",
units: "meters",
scale: 0.8,
adjustment: { x: 0.5, y: 1, z: -0.5 },
adjustment: {x: 0.5, y: 1, z: -0.5},
bbox: true,
};
window.tb.loadObj(options, (model) => {
......@@ -234,25 +237,25 @@ export default {
},
});
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()
"center " +
map.getCenter() +
" pitch " +
map.getPitch() +
" bearing " +
map.getBearing() +
" zoom " +
map.getZoom()
);
});
window.map = map;
map.on("zoomend", () => {
this.mapZoomEnd();
this.refreshLightWs()
});
map.on("moveend", () => {
......@@ -269,9 +272,9 @@ export default {
for (let item of equips) {
if (map.getLayer(item.label)) {
map.setLayoutProperty(
item.label,
"visibility",
item.check ? "visible" : "none"
item.label,
"visibility",
item.check ? "visible" : "none"
);
}
}
......@@ -299,14 +302,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() {
......@@ -367,8 +370,8 @@ export default {
// 筛选可见区域
for (let i = 0; i < msg.length; i++) {
if (
!msg[i].picLicense ||
dict.noVehicleTypes.includes(msg[i].originalType)
!msg[i].picLicense ||
dict.noVehicleTypes.includes(msg[i].originalType)
) {
msg[i].picLicense = "";
}
......@@ -382,8 +385,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 ： 移除圆点
......@@ -400,7 +403,7 @@ export default {
let geo = turf.featureCollection(features);
this.clearLicense();
this.removeLayers(
"vehicleSelectWave,license,licenseBack,vehiclePic"
"vehicleSelectWave,license,licenseBack,vehiclePic"
);
mapTool.addOrUpdateVehicle(map, geo);
}
......@@ -425,8 +428,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);
......@@ -447,8 +450,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);
......@@ -464,8 +467,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,
......@@ -515,9 +518,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);
......@@ -579,10 +582,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}`];
......@@ -597,19 +600,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);
......@@ -621,7 +624,7 @@ export default {
ele.style.color = "white";
ele.innerText = option.picLicense;
ele.style.backgroundImage = `url('${mapAssets.mapIcons[`license${option.licenseColor}`]
}')`;
}')`;
ele.style.backgroundSize = "100% 100%";
ele.style.fontSize = "8px";
ele.style.textAlign = "center";
......@@ -632,7 +635,7 @@ export default {
topMargin: 2,
});
license.setCoords([option.longitude, option.latitude, 4]);
license.userData.data = { picLicense: option.picLicense };
license.userData.data = {picLicense: option.picLicense};
window.tb.add(license, `license${option.id}`);
licenseLabel[`license${option.id}`] = license;
}
......@@ -666,10 +669,10 @@ export default {
if (this.crosses) {
this.timer = setInterval(() => {
if (
map?.hasImage("crossStatus0") &&
map?.hasImage("crossStatus1") &&
map?.hasImage("crossStatus2") &&
map?.hasImage("crossStatus3")
map?.hasImage("crossStatus0") &&
map?.hasImage("crossStatus1") &&
map?.hasImage("crossStatus2") &&
map?.hasImage("crossStatus3")
) {
clearInterval(this.timer);
let features = [];
......@@ -759,7 +762,7 @@ export default {
});
},
openCrossIndexDetail(crossData) {
this.showRightDetail({ features: [{ properties: crossData }] });
this.showRightDetail({features: [{properties: crossData}]});
// this.crossData = crossData
// this.dialogVisible.crossDetailShow = true
},
......@@ -796,7 +799,8 @@ export default {
});
},
switchsecond() {
mapTool.addOrUpdateRoadVector(map);
// 返回刷新定时器 供页面销毁
this.roadTimer = mapTool.addOrUpdateRoadVector(map);
},
switchfourth() {
Promise.all([
......@@ -845,12 +849,12 @@ export default {
distance = 80;
}
let bearing = map.getBearing(); // 平移方向，0 表示正北方向
let options = { units: "meters" };
let options = {units: "meters"};
let translatedPoint = turf.destination(
prop.wkt.split(","),
distance,
bearing,
options
prop.wkt.split(","),
distance,
bearing,
options
);
// 将地图中心点设置为平移后的点
map.flyTo({
......@@ -862,14 +866,14 @@ export default {
offset: [0, -20],
});
equipPopup
.setLngLat(prop.wkt.split(","))
.setHTML('<div id="equipment_popup"></div>')
.addTo(map)
.setMaxWidth("500")
.addClassName("equipmentPopup");
.setLngLat(prop.wkt.split(","))
.setHTML('<div id="equipment_popup"></div>')
.addTo(map)
.setMaxWidth("500")
.addClassName("equipmentPopup");
equipPopupInstance = new EquipmentPopup({
propsData: {
model: { equip_type: type, ...prop },
model: {equip_type: type, ...prop},
},
});
equipPopupInstance.$mount("#equipment_popup");
......@@ -908,6 +912,9 @@ export default {
equipPopup?.remove();
map.off("click", this.equipmentsClick);
}
if (beforeLabel === 'second') {
if (this.roadTimer) clearInterval(this.roadTimer)
}
for (let key in this.layers) {
if (key !== checkItem.label) {
for (let layer of this.layers[key]) {
......@@ -923,6 +930,7 @@ export default {
},
},
beforeDestroy() {
if (this.roadTimer) clearInterval(this.roadTimer)
this.timer && clearInterval(this.timer);
this.closeAllWs()
window.tb.dispose();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment