fix：慢点连线
This commit is contained in:
liyuanhu
parent
bab441979f
commit
a9d30c05c8
@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useRef, memo } from "react";
|
||||
import { useEffect, useMemo, useRef, memo, useState } from "react";
|
||||
import * as echarts from "echarts";
|
||||
// import 'echarts-gl';
|
||||
// import { useQueryClient } from "@tanstack/react-query";
|
||||
@ -6,9 +6,8 @@ import type { EChartsType } from "echarts";
|
||||
import worldGeoJson from "@/assets/echarts-map/json/world.json";
|
||||
import { geoCoordMap, countryNameMap, countryCodeMap } from "@/data";
|
||||
import { getUrl } from "@/lib/utils";
|
||||
import { CONST_TOOLTIP_TYPE } from "@/pages/anti-forensics-forwarding";
|
||||
const planePathImg =
|
||||
"image://data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iMTAyIiB2aWV3Qm94PSIwIDAgNjcgMTAyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBmaWx0ZXI9InVybCgjZmlsdGVyMF9mXzYxMTdfMjEyNDA3KSI+CjxwYXRoIGQ9Ik0zNC4yMTA5IDkxLjE4ODZMNTMuNjU3OCA0MC45NThDNTQuOTM4IDM3LjY1MTMgNTUuNzk4MyAzNC4xNTkyIDU1LjM1NjMgMzAuNjQxQzU0LjQzNTcgMjMuMzEyOCA1MC40Njg0IDExLjAyMDggMzQuMjExMiAxMS4wMjA4QzE5LjE5MDMgMTEuMDIwOCAxMy45MTEgMjEuNTE0NiAxMi4wNTU0IDI4Ljg5MTJDMTAuOTAxIDMzLjQ4MDYgMTEuOTkyNiAzOC4yMTg2IDEzLjgyMzEgNDIuNTgyN0wzNC4yMTA5IDkxLjE4ODZaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfNjExN18yMTI0MDcpIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZl82MTE3XzIxMjQwNyIgeD0iMC44OTE3NDQiIHk9IjAuMzMxOTkiIHdpZHRoPSI2NS4yNzA3IiBoZWlnaHQ9IjEwMS41NDUiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNS4zNDQ0MSIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzYxMTdfMjEyNDA3Ii8+CjwvZmlsdGVyPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNjExN18yMTI0MDciIHgxPSIzNS4yODI2IiB5MT0iMTAuODU2NCIgeDI9IjM1LjI4MjYiIHkyPSI4Ni44NTY0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiMwMEYyRkYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMTUwMEZGIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==";
|
||||
// 连线动画的间隔时间（毫秒）
|
||||
const LINE_ANIMATION_INTERVAL = 500; // 3秒
|
||||
interface LinesItemType {
|
||||
name: string;
|
||||
country_code: string;
|
||||
@ -30,23 +29,21 @@ const createCountryRipple = (countryCode: string, color?: string) => {
|
||||
};
|
||||
export const WorldGeo = memo(
|
||||
({
|
||||
currentValue,
|
||||
newHomeProxies,
|
||||
tooltipType,
|
||||
tooltipClosed,
|
||||
nestedEncryption,
|
||||
passAuthentication,
|
||||
dynamicRouteGeneration,
|
||||
setTooltipClosed,
|
||||
}: {
|
||||
currentValue: any;
|
||||
newHomeProxies: any;
|
||||
nestedEncryption: any;
|
||||
passAuthentication: any;
|
||||
dynamicRouteGeneration: any;
|
||||
tooltipType: string;
|
||||
tooltipClosed: boolean;
|
||||
setTooltipClosed: (value: boolean) => void;
|
||||
}) => {
|
||||
// const queryClient = useQueryClient()
|
||||
// 嵌套加密ref
|
||||
const customTooltipRef = useRef<HTMLDivElement | null>(null);
|
||||
// 流量混淆ref
|
||||
const customTooltip2Ref = useRef<HTMLDivElement | null>(null);
|
||||
const proxyGeoRef = useRef<EChartsType | null>(null);
|
||||
const preMainToData = useRef<{ country_code: string }[]>([]);
|
||||
const lineMidpointsRef = useRef<
|
||||
@ -59,46 +56,405 @@ export const WorldGeo = memo(
|
||||
>([]);
|
||||
const labelContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
const labelsRef = useRef<HTMLDivElement[]>([]);
|
||||
const mainToData = useMemo(() => {
|
||||
// 使用新的数据结构
|
||||
const proxiesList = currentValue ?? [];
|
||||
// 初始化数据数组 - 不再包含 startCountry
|
||||
const data: any = [];
|
||||
// 遍历代理列表
|
||||
proxiesList.forEach((proxyItem: any) => {
|
||||
// 检查是否有数据数组
|
||||
if (proxyItem.data && Array.isArray(proxyItem.data)) {
|
||||
// 遍历数据数组中的每个项目
|
||||
proxyItem.data.forEach((item: any) => {
|
||||
// 如果有 ingress_country_code，则添加一对起点和终点
|
||||
if (item.ingress_country_code) {
|
||||
// 添加起点（country_code）
|
||||
data.push({
|
||||
country_code: item.country_code,
|
||||
type: "start",
|
||||
isLine: proxyItem.isLine, // 保存连线标志
|
||||
color: proxyItem.color || item.color, // 添加颜色属性
|
||||
});
|
||||
// 添加终点（ingress_country_code）
|
||||
data.push({
|
||||
country_code: item.ingress_country_code,
|
||||
type: "end",
|
||||
isLine: proxyItem.isLine, // 保存连线标志
|
||||
color: proxyItem.color || item.color, // 添加颜色属性
|
||||
});
|
||||
|
||||
// 添加状态来跟踪当前显示的连线索引
|
||||
const [nestedEncryptionLineIndex, setNestedEncryptionLineIndex] = useState(-1);
|
||||
const [dynamicRouteLineIndex, setDynamicRouteLineIndex] = useState(-1);
|
||||
|
||||
// 添加状态来存储所有连线数据
|
||||
const [nestedEncryptionLines, setNestedEncryptionLines] = useState<{from: string, to: string, color?: string}[]>([]);
|
||||
const [dynamicRouteLines, setDynamicRouteLines] = useState<{from: string, to: string, color?: string}[]>([]);
|
||||
|
||||
// 添加状态来存储所有点
|
||||
const [allPoints, setAllPoints] = useState<any[]>([]);
|
||||
|
||||
// 使用ref来跟踪动画状态，避免重新渲染
|
||||
const animationTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const dynamicAnimationTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// 添加状态来跟踪数据是否已经变化
|
||||
const nestedEncryptionKeyRef = useRef<string>("");
|
||||
const dynamicRouteKeyRef = useRef<string>("");
|
||||
|
||||
// 初始化时提取所有点的函数
|
||||
const extractAllPoints = () => {
|
||||
const points: any[] = [];
|
||||
|
||||
// console.log("Extracting points from nestedEncryption:", nestedEncryption);
|
||||
// console.log("Extracting points from dynamicRouteGeneration:", dynamicRouteGeneration);
|
||||
|
||||
// 从嵌套加密数据中提取点
|
||||
if (nestedEncryption && Array.isArray(nestedEncryption)) {
|
||||
nestedEncryption.forEach((item: any) => {
|
||||
if (item.data && Array.isArray(item.data)) {
|
||||
item.data.forEach((dataItem: any) => {
|
||||
// 添加起点到点集合
|
||||
const fromCode = dataItem.country_code.toUpperCase();
|
||||
const fromPoint = createCountryRipple(fromCode, item.color);
|
||||
if (fromPoint && !points.some(p => p.country_code === fromCode)) {
|
||||
points.push(fromPoint);
|
||||
}
|
||||
|
||||
// 如果有终点，也添加到点集合
|
||||
if (dataItem.ingress_country_code) {
|
||||
const toCode = dataItem.ingress_country_code.toUpperCase();
|
||||
const toPoint = createCountryRipple(toCode, item.color);
|
||||
if (toPoint && !points.some(p => p.country_code === toCode)) {
|
||||
points.push(toPoint);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 从动态路由数据中提取点
|
||||
if (dynamicRouteGeneration && Array.isArray(dynamicRouteGeneration)) {
|
||||
dynamicRouteGeneration.forEach((item: any) => {
|
||||
if (item.data && Array.isArray(item.data)) {
|
||||
item.data.forEach((dataItem: any) => {
|
||||
// 添加起点到点集合
|
||||
const fromCode = dataItem.country_code.toUpperCase();
|
||||
const fromPoint = createCountryRipple(fromCode, item.color);
|
||||
if (fromPoint && !points.some(p => p.country_code === fromCode)) {
|
||||
points.push(fromPoint);
|
||||
}
|
||||
|
||||
// 如果有终点，也添加到点集合
|
||||
if (dataItem.ingress_country_code) {
|
||||
const toCode = dataItem.ingress_country_code.toUpperCase();
|
||||
const toPoint = createCountryRipple(toCode, item.color);
|
||||
if (toPoint && !points.some(p => p.country_code === toCode)) {
|
||||
points.push(toPoint);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
console.log("Extracted points:", points);
|
||||
return points;
|
||||
};
|
||||
|
||||
// 修改初始化逻辑，确保在数据变化时立即提取点
|
||||
useEffect(() => {
|
||||
// 提取所有点
|
||||
const points = extractAllPoints();
|
||||
if (points.length > 0) {
|
||||
setAllPoints(points);
|
||||
}
|
||||
}, [nestedEncryption, dynamicRouteGeneration]); // 监听数据变化
|
||||
|
||||
// 启动嵌套加密连线动画的函数
|
||||
const startNestedEncryptionAnimation = (connections: {from: string, to: string, color?: string}[]) => {
|
||||
if (connections.length === 0) return;
|
||||
|
||||
let index = 0;
|
||||
|
||||
// 递归函数，用于按顺序显示连线
|
||||
const animateNextLine = () => {
|
||||
setNestedEncryptionLineIndex(index);
|
||||
|
||||
index++;
|
||||
|
||||
if (index < connections.length) {
|
||||
animationTimerRef.current = setTimeout(animateNextLine, LINE_ANIMATION_INTERVAL);
|
||||
}
|
||||
};
|
||||
|
||||
// 开始动画
|
||||
animateNextLine();
|
||||
};
|
||||
|
||||
// 处理嵌套加密数据变化
|
||||
useEffect(() => {
|
||||
// 清除任何现有的动画定时器
|
||||
if (animationTimerRef.current) {
|
||||
clearTimeout(animationTimerRef.current);
|
||||
animationTimerRef.current = null;
|
||||
}
|
||||
|
||||
const allExtractedPoints: any[] = [];
|
||||
|
||||
// 处理嵌套加密数据
|
||||
if (nestedEncryption && Array.isArray(nestedEncryption)) {
|
||||
const points: any[] = [];
|
||||
const connections: {from: string, to: string, color?: string}[] = [];
|
||||
let shouldStartAnimation = false;
|
||||
|
||||
nestedEncryption.forEach((item: any) => {
|
||||
if (item.data && Array.isArray(item.data)) {
|
||||
item.data.forEach((dataItem: any) => {
|
||||
// 添加起点到点集合
|
||||
const fromCode = dataItem.country_code.toUpperCase();
|
||||
const fromPoint = createCountryRipple(fromCode, item.color);
|
||||
if (fromPoint && !points.some(p => p.country_code === fromCode)) {
|
||||
points.push(fromPoint);
|
||||
if (!allExtractedPoints.some(p => p.country_code === fromCode)) {
|
||||
allExtractedPoints.push(fromPoint);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果有终点，也添加到点集合
|
||||
if (dataItem.ingress_country_code) {
|
||||
const toCode = dataItem.ingress_country_code.toUpperCase();
|
||||
const toPoint = createCountryRipple(toCode, item.color);
|
||||
if (toPoint && !points.some(p => p.country_code === toCode)) {
|
||||
points.push(toPoint);
|
||||
if (!allExtractedPoints.some(p => p.country_code === toCode)) {
|
||||
allExtractedPoints.push(toPoint);
|
||||
}
|
||||
}
|
||||
|
||||
// 检查是否需要开始连线动画
|
||||
if (item.isLine === true) {
|
||||
connections.push({
|
||||
from: fromCode,
|
||||
to: toCode,
|
||||
color: item.color
|
||||
});
|
||||
shouldStartAnimation = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 生成当前数据的唯一键
|
||||
const currentKey = JSON.stringify(nestedEncryption);
|
||||
|
||||
// 检查数据是否变化
|
||||
if (currentKey !== nestedEncryptionKeyRef.current || shouldStartAnimation) {
|
||||
nestedEncryptionKeyRef.current = currentKey;
|
||||
setNestedEncryptionLines(connections);
|
||||
|
||||
// 如果有连线数据且需要开始动画，重置索引并启动动画
|
||||
if (connections.length > 0 && shouldStartAnimation) {
|
||||
setNestedEncryptionLineIndex(-1); // 重置索引
|
||||
|
||||
// 启动连线动画
|
||||
setTimeout(() => {
|
||||
startNestedEncryptionAnimation(connections);
|
||||
}, 500);
|
||||
} else if (!shouldStartAnimation) {
|
||||
// 如果不需要连线，设置索引为-1
|
||||
setNestedEncryptionLineIndex(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 更新所有点
|
||||
if (allExtractedPoints.length > 0) {
|
||||
setAllPoints(prevPoints => {
|
||||
const newPoints = [...prevPoints];
|
||||
allExtractedPoints.forEach(point => {
|
||||
if (!newPoints.some(p => p.country_code === point.country_code)) {
|
||||
newPoints.push(point);
|
||||
} else {
|
||||
// 如果没有 ingress_country_code，只添加 country_code
|
||||
data.push({
|
||||
country_code: item.country_code,
|
||||
isLine: proxyItem.isLine, // 保存连线标志
|
||||
color: proxyItem.color || item.color, // 添加颜色属性
|
||||
});
|
||||
// 更新已存在点的颜色
|
||||
const existingIndex = newPoints.findIndex(p => p.country_code === point.country_code);
|
||||
if (existingIndex !== -1 && point.color) {
|
||||
newPoints[existingIndex].color = point.color;
|
||||
}
|
||||
}
|
||||
});
|
||||
return newPoints;
|
||||
});
|
||||
}
|
||||
}, [nestedEncryption]);
|
||||
|
||||
// 处理动态路由数据变化
|
||||
useEffect(() => {
|
||||
// 清除任何现有的动画定时器
|
||||
if (dynamicAnimationTimerRef.current) {
|
||||
clearTimeout(dynamicAnimationTimerRef.current);
|
||||
dynamicAnimationTimerRef.current = null;
|
||||
}
|
||||
|
||||
const allExtractedPoints: any[] = [];
|
||||
|
||||
// 处理动态路由数据
|
||||
if (dynamicRouteGeneration && Array.isArray(dynamicRouteGeneration)) {
|
||||
const points: any[] = [];
|
||||
const connections: {from: string, to: string, color?: string}[] = [];
|
||||
let shouldStartAnimation = false;
|
||||
|
||||
dynamicRouteGeneration.forEach((item: any) => {
|
||||
if (item.data && Array.isArray(item.data)) {
|
||||
item.data.forEach((dataItem: any) => {
|
||||
// 添加起点到点集合
|
||||
const fromCode = dataItem.country_code.toUpperCase();
|
||||
const fromPoint = createCountryRipple(fromCode, item.color);
|
||||
if (fromPoint && !points.some(p => p.country_code === fromCode)) {
|
||||
points.push(fromPoint);
|
||||
if (!allExtractedPoints.some(p => p.country_code === fromCode)) {
|
||||
allExtractedPoints.push(fromPoint);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果有终点，也添加到点集合
|
||||
if (dataItem.ingress_country_code) {
|
||||
const toCode = dataItem.ingress_country_code.toUpperCase();
|
||||
const toPoint = createCountryRipple(toCode, item.color);
|
||||
if (toPoint && !points.some(p => p.country_code === toCode)) {
|
||||
points.push(toPoint);
|
||||
if (!allExtractedPoints.some(p => p.country_code === toCode)) {
|
||||
allExtractedPoints.push(toPoint);
|
||||
}
|
||||
}
|
||||
|
||||
// 检查是否需要开始连线动画
|
||||
if (item.isLine === true) {
|
||||
connections.push({
|
||||
from: fromCode,
|
||||
to: toCode,
|
||||
color: item.color
|
||||
});
|
||||
shouldStartAnimation = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 生成当前数据的唯一键
|
||||
const currentKey = JSON.stringify(dynamicRouteGeneration);
|
||||
|
||||
// 检查数据是否变化
|
||||
if (currentKey !== dynamicRouteKeyRef.current || shouldStartAnimation) {
|
||||
dynamicRouteKeyRef.current = currentKey;
|
||||
setDynamicRouteLines(connections);
|
||||
|
||||
// 如果有连线数据且需要开始动画，重置索引并启动动画
|
||||
if (connections.length > 0 && shouldStartAnimation) {
|
||||
setDynamicRouteLineIndex(-1); // 重置索引
|
||||
|
||||
// 启动连线动画
|
||||
setTimeout(() => {
|
||||
startDynamicRouteAnimation(connections);
|
||||
}, 500);
|
||||
} else if (!shouldStartAnimation) {
|
||||
// 如果不需要连线，设置索引为-1
|
||||
setDynamicRouteLineIndex(-1);
|
||||
}
|
||||
}
|
||||
});
|
||||
return data;
|
||||
}, [currentValue]);
|
||||
}
|
||||
|
||||
// 更新所有点
|
||||
if (allExtractedPoints.length > 0) {
|
||||
setAllPoints(prevPoints => {
|
||||
const newPoints = [...prevPoints];
|
||||
allExtractedPoints.forEach(point => {
|
||||
if (!newPoints.some(p => p.country_code === point.country_code)) {
|
||||
newPoints.push(point);
|
||||
} else {
|
||||
// 更新已存在点的颜色
|
||||
const existingIndex = newPoints.findIndex(p => p.country_code === point.country_code);
|
||||
if (existingIndex !== -1 && point.color) {
|
||||
newPoints[existingIndex].color = point.color;
|
||||
}
|
||||
}
|
||||
});
|
||||
return newPoints;
|
||||
});
|
||||
}
|
||||
}, [dynamicRouteGeneration]);
|
||||
|
||||
// 启动动态路由连线动画的函数
|
||||
const startDynamicRouteAnimation = (connections: {from: string, to: string, color?: string}[]) => {
|
||||
if (connections.length === 0) return;
|
||||
|
||||
let index = 0;
|
||||
|
||||
// 递归函数，用于按顺序显示连线
|
||||
const animateNextLine = () => {
|
||||
setDynamicRouteLineIndex(index);
|
||||
|
||||
index++;
|
||||
|
||||
if (index < connections.length) {
|
||||
dynamicAnimationTimerRef.current = setTimeout(animateNextLine, LINE_ANIMATION_INTERVAL);
|
||||
}
|
||||
};
|
||||
|
||||
// 开始动画
|
||||
animateNextLine();
|
||||
};
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (animationTimerRef.current) {
|
||||
clearTimeout(animationTimerRef.current);
|
||||
animationTimerRef.current = null;
|
||||
}
|
||||
if (dynamicAnimationTimerRef.current) {
|
||||
clearTimeout(dynamicAnimationTimerRef.current);
|
||||
dynamicAnimationTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const getLineItem = (
|
||||
preCode: string,
|
||||
nextCode: string,
|
||||
color?: string
|
||||
): [LinesItemType, LinesItemType] => {
|
||||
return [
|
||||
{
|
||||
name: countryCodeMap[preCode] ?? "",
|
||||
value: geoCoordMap[preCode] ?? [],
|
||||
country_code: preCode,
|
||||
color: color,
|
||||
},
|
||||
{
|
||||
name: countryCodeMap[nextCode] ?? "",
|
||||
value: geoCoordMap[nextCode] ?? [],
|
||||
country_code: nextCode,
|
||||
color: color,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const getLine = () => {
|
||||
// 实现数据处理
|
||||
const solidData: LinesType[] = []; // 不再使用单一数组，而是分开存储
|
||||
|
||||
// 处理嵌套加密连线 - 放入单独的数组
|
||||
if (nestedEncryptionLineIndex >= 0 && nestedEncryptionLines.length > 0) {
|
||||
const nestedLines: LinesDataType[] = [];
|
||||
for (let i = 0; i <= nestedEncryptionLineIndex && i < nestedEncryptionLines.length; i++) {
|
||||
const connection = nestedEncryptionLines[i];
|
||||
nestedLines.push(getLineItem(connection.from, connection.to, connection.color));
|
||||
}
|
||||
if (nestedLines.length > 0) {
|
||||
solidData.push(["nested", nestedLines]);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理动态路由连线 - 放入单独的数组
|
||||
if (dynamicRouteLineIndex >= 0 && dynamicRouteLines.length > 0) {
|
||||
const dynamicLines: LinesDataType[] = [];
|
||||
for (let i = 0; i <= dynamicRouteLineIndex && i < dynamicRouteLines.length; i++) {
|
||||
const connection = dynamicRouteLines[i];
|
||||
dynamicLines.push(getLineItem(connection.from, connection.to, connection.color));
|
||||
}
|
||||
if (dynamicLines.length > 0) {
|
||||
solidData.push(["dynamic", dynamicLines]);
|
||||
}
|
||||
}
|
||||
|
||||
// 虚线数据处理（保持原有逻辑）
|
||||
const otherLineList: any = [];
|
||||
|
||||
return {
|
||||
solidData,
|
||||
otherLineList,
|
||||
ripplePoints: allPoints, // 使用 allPoints 确保点始终显示
|
||||
};
|
||||
};
|
||||
|
||||
// 创建自定义提示框DOM元素
|
||||
const createCustomTooltip = () => {
|
||||
// 如果已经存在自定义提示框，则移除它
|
||||
@ -112,10 +468,6 @@ export const WorldGeo = memo(
|
||||
tooltip.style.zIndex = "1000";
|
||||
tooltip.style.pointerEvents = "auto";
|
||||
tooltip.style.backgroundColor = "transparent";
|
||||
// 设置提示框内容
|
||||
const currentTooltipType =
|
||||
CONST_TOOLTIP_TYPE[tooltipType as keyof typeof CONST_TOOLTIP_TYPE] ||
|
||||
CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION;
|
||||
tooltip.innerHTML = `
|
||||
<div class="tooltip-content">
|
||||
<img class="line-img" src="${getUrl(
|
||||
@ -124,25 +476,15 @@ export const WorldGeo = memo(
|
||||
<div class="fill"></div>
|
||||
<div class="tip-box">
|
||||
<div>
|
||||
<div class="label" style="color: white; font-weight: bold;">${
|
||||
currentTooltipType.title
|
||||
}</div>
|
||||
<div class="label" style="color: white; font-weight: bold;">嵌套加密</div>
|
||||
<img class="close-icon" src="${getUrl(
|
||||
"svg/Xwhite.svg"
|
||||
)}" alt=""
|
||||
style="cursor: pointer; " />
|
||||
</div>
|
||||
|
||||
<img class="${
|
||||
CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type ===
|
||||
currentTooltipType.type
|
||||
? "encryption-img"
|
||||
: "traffic-obfuscation-img"
|
||||
}" src="${getUrl(
|
||||
CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type === currentTooltipType.type
|
||||
? "image/nested-encryption.png"
|
||||
: "image/traffic-obfuscation.png"
|
||||
)}" alt="" />
|
||||
<img class="encryption-img"
|
||||
}" src="${getUrl("image/nested-encryption.png")}" alt="" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -162,11 +504,12 @@ export const WorldGeo = memo(
|
||||
// 定位提示框
|
||||
positionCustomTooltip();
|
||||
};
|
||||
|
||||
// 定位自定义提示框 - 优化版本
|
||||
const positionCustomTooltip = () => {
|
||||
if (!customTooltipRef.current || !proxyGeoRef.current) return;
|
||||
// 找到US点
|
||||
const coords = geoCoordMap[currentValue?.[0]?.code ?? "GL"];
|
||||
const coords = geoCoordMap[nestedEncryption?.[0]?.code ?? "GL"];
|
||||
if (!coords) return;
|
||||
try {
|
||||
// 将地理坐标转换为屏幕坐标
|
||||
@ -184,174 +527,7 @@ export const WorldGeo = memo(
|
||||
console.error("Error positioning tooltip:", error);
|
||||
}
|
||||
};
|
||||
// 创建自定义提示框DOM元素
|
||||
const createCustomTooltip2 = () => {
|
||||
// 如果已经存在自定义提示框，则移除它
|
||||
if (document.getElementById("custom-fixed-tooltip2")) {
|
||||
document.getElementById("custom-fixed-tooltip2")?.remove();
|
||||
}
|
||||
// 创建自定义提示框
|
||||
const tooltip = document.createElement("div");
|
||||
tooltip.id = "custom-fixed-tooltip2";
|
||||
tooltip.style.position = "fixed";
|
||||
tooltip.style.zIndex = "1000";
|
||||
tooltip.style.pointerEvents = "auto";
|
||||
tooltip.style.backgroundColor = "transparent";
|
||||
tooltip.innerHTML = `
|
||||
<div class="tooltip-content">
|
||||
<div class="fill-left"></div>
|
||||
<div class="tip-box">
|
||||
<div>
|
||||
<div class="label" style="color: white; font-weight: bold;">流量混淆</div>
|
||||
<img class="close-icon" src="${getUrl(
|
||||
"svg/Xwhite.svg"
|
||||
)}" alt=""
|
||||
style="cursor: pointer; " />
|
||||
</div>
|
||||
|
||||
<img class="traffic-obfuscation-img" src="${getUrl(
|
||||
"image/traffic-obfuscation.png"
|
||||
)}" alt="" />
|
||||
|
||||
</div>
|
||||
<img class="line-img-left" src="${getUrl(
|
||||
"svg/anti-forensics-forwarding/LineLeft.svg"
|
||||
)}" alt="" />
|
||||
</div>
|
||||
`;
|
||||
// 添加到DOM
|
||||
document.body.appendChild(tooltip);
|
||||
customTooltip2Ref.current = tooltip;
|
||||
// 添加关闭按钮事件
|
||||
const closeButton = tooltip.querySelector(".close-icon");
|
||||
if (closeButton) {
|
||||
closeButton.addEventListener("click", () => {
|
||||
setTooltipClosed(false);
|
||||
tooltip.remove();
|
||||
customTooltip2Ref.current = null;
|
||||
});
|
||||
}
|
||||
// 定位提示框
|
||||
positionCustomTooltip2();
|
||||
};
|
||||
// 定位自定义提示框 - 优化版本
|
||||
const positionCustomTooltip2 = () => {
|
||||
if (!customTooltip2Ref.current || !proxyGeoRef.current) return;
|
||||
// 找到US点
|
||||
const coords = geoCoordMap[currentValue?.[0]?.code ?? "ZA"];
|
||||
if (!coords) return;
|
||||
try {
|
||||
// 将地理坐标转换为屏幕坐标
|
||||
const screenCoord = proxyGeoRef.current.convertToPixel("geo", coords);
|
||||
if (
|
||||
screenCoord &&
|
||||
Array.isArray(screenCoord) &&
|
||||
screenCoord.length === 2
|
||||
) {
|
||||
// 设置提示框位置
|
||||
customTooltip2Ref.current.style.left = `${
|
||||
screenCoord[0] - 626 + 20
|
||||
}px`;
|
||||
customTooltip2Ref.current.style.top = `${
|
||||
screenCoord[1] + 40 - 218
|
||||
}px`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error positioning tooltip:", error);
|
||||
}
|
||||
};
|
||||
const getLineItem = (
|
||||
preCode: string,
|
||||
nextCode: string
|
||||
): [LinesItemType, LinesItemType] => {
|
||||
return [
|
||||
{
|
||||
name: countryCodeMap[preCode] ?? "",
|
||||
value: geoCoordMap[preCode] ?? [],
|
||||
country_code: preCode,
|
||||
},
|
||||
{
|
||||
name: countryCodeMap[nextCode] ?? "",
|
||||
value: geoCoordMap[nextCode] ?? [],
|
||||
country_code: nextCode,
|
||||
},
|
||||
];
|
||||
};
|
||||
const getLine = () => {
|
||||
// 实现数据处理
|
||||
const solidData: LinesType[] = [["main", []]]; // 使用"main"替代startCountry.country_code
|
||||
// 收集需要显示涟漪效果的所有点（包括连线和不连线的）
|
||||
const ripplePoints: any[] = [];
|
||||
|
||||
// 处理主路径数据
|
||||
for (let i = 0; i < mainToData.length; i++) {
|
||||
// 如果是最后一个元素，则跳过（因为没有下一个元素作为终点）
|
||||
if (i === mainToData.length - 1) continue;
|
||||
const currentItem = mainToData[i];
|
||||
const nextItem = mainToData[i + 1];
|
||||
|
||||
// 获取当前国家代码和颜色
|
||||
const countryCode = currentItem.country_code.toUpperCase();
|
||||
const color = currentItem.color || "#0ea5e9"; // 获取颜色，如果没有则使用默认颜色
|
||||
|
||||
// 如果当前项是起点，下一项是终点
|
||||
if (currentItem.type === "start" && nextItem.type === "end") {
|
||||
const startCode = countryCode;
|
||||
const endCode = nextItem.country_code.toUpperCase();
|
||||
|
||||
// 无论是否连线，都添加点的涟漪效果
|
||||
const startPoint = createCountryRipple(startCode, color);
|
||||
const endPoint = createCountryRipple(
|
||||
endCode,
|
||||
nextItem.color || color
|
||||
);
|
||||
if (startPoint) ripplePoints.push(startPoint);
|
||||
if (endPoint) ripplePoints.push(endPoint);
|
||||
|
||||
// 检查是否应该绘制连线
|
||||
if (currentItem.isLine !== false) {
|
||||
const lineItem = getLineItem(startCode, endCode);
|
||||
// 添加颜色属性
|
||||
lineItem[0].color = color;
|
||||
lineItem[1].color = nextItem.color || color;
|
||||
solidData[0]?.[1].push(lineItem);
|
||||
}
|
||||
|
||||
// 跳过下一项，因为已经处理了
|
||||
i++;
|
||||
}
|
||||
// 常规情况：当前项到下一项
|
||||
else {
|
||||
const nextCountryCode = nextItem.country_code.toUpperCase();
|
||||
|
||||
// 无论是否连线，都添加点的涟漪效果
|
||||
const currentPoint = createCountryRipple(countryCode, color);
|
||||
const nextPoint = createCountryRipple(
|
||||
nextCountryCode,
|
||||
nextItem.color || color
|
||||
);
|
||||
if (currentPoint) ripplePoints.push(currentPoint);
|
||||
if (nextPoint) ripplePoints.push(nextPoint);
|
||||
|
||||
// 检查是否应该绘制连线
|
||||
if (currentItem.isLine !== false) {
|
||||
const lineItem = getLineItem(countryCode, nextCountryCode);
|
||||
// 添加颜色属性
|
||||
lineItem[0].color = color;
|
||||
lineItem[1].color = nextItem.color || color;
|
||||
solidData[0]?.[1].push(lineItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 虚线数据处理（保持原有逻辑）
|
||||
const otherLineList: any = [];
|
||||
return {
|
||||
solidData,
|
||||
otherLineList,
|
||||
ripplePoints,
|
||||
};
|
||||
};
|
||||
|
||||
// 获取连线经纬度数据
|
||||
const convertData = (data: LinesDataType[]) => {
|
||||
const res = [];
|
||||
@ -394,6 +570,7 @@ export const WorldGeo = memo(
|
||||
// lineMidpointsRef.current = midpoints;
|
||||
return res;
|
||||
};
|
||||
|
||||
// 创建双层点效果 - 大点
|
||||
const createDualLayerPoint = (
|
||||
lastExit: LinesItemType,
|
||||
@ -480,6 +657,7 @@ export const WorldGeo = memo(
|
||||
} as echarts.SeriesOption,
|
||||
];
|
||||
};
|
||||
|
||||
// 添加新方法：根据经纬度数组创建蓝色涟漪小点（不包含白色内层点）
|
||||
const createRipplePointsFromCoordinates = (
|
||||
coordinates: [number, number][],
|
||||
@ -511,6 +689,7 @@ export const WorldGeo = memo(
|
||||
})),
|
||||
} as echarts.SeriesOption);
|
||||
};
|
||||
|
||||
// 创建路径点的双层效果
|
||||
const createPathPoints = (
|
||||
dataItems: LinesDataType[],
|
||||
@ -593,6 +772,7 @@ export const WorldGeo = memo(
|
||||
} as echarts.SeriesOption,
|
||||
];
|
||||
};
|
||||
|
||||
// 创建带自定义提示框的涟漪点
|
||||
const createRipplePointsWithTooltip = (ripplePoints: any) => {
|
||||
return {
|
||||
@ -652,9 +832,11 @@ export const WorldGeo = memo(
|
||||
})),
|
||||
} as echarts.SeriesOption;
|
||||
};
|
||||
|
||||
// 连线 series
|
||||
const getLianData = (series: echarts.SeriesOption[]) => {
|
||||
const { solidData, otherLineList, ripplePoints } = getLine();
|
||||
|
||||
// 如果有需要显示涟漪效果的点，添加它们
|
||||
if (ripplePoints.length > 0) {
|
||||
// 添加带自定义提示框的外层蓝色点
|
||||
@ -680,15 +862,17 @@ export const WorldGeo = memo(
|
||||
})),
|
||||
} as echarts.SeriesOption);
|
||||
}
|
||||
|
||||
// 处理每个连线组
|
||||
solidData.forEach((item) => {
|
||||
// 如果没有连线数据，则跳过
|
||||
if (item[1].length === 0) {
|
||||
return;
|
||||
}
|
||||
const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null;
|
||||
// 获取当前路径的颜色
|
||||
const pathColor = item[1]?.[0]?.[0]?.color || "#0ea5e9"; // 从第一个点获取颜色，如果没有则使用默认颜色
|
||||
|
||||
|
||||
// 为每条连线创建飞行线
|
||||
const pathColor = item[0] === "nested" ? "#0ea5e9" : "#F0FFA2"; // 根据类型设置默认颜色
|
||||
|
||||
// 添加飞行线
|
||||
series.push({
|
||||
name: item[0],
|
||||
@ -703,7 +887,6 @@ export const WorldGeo = memo(
|
||||
period: 4, // 特效动画时间
|
||||
trailLength: 0.7, // 特效尾迹长度。取从 0 到 1 的值，数值越大尾迹越长
|
||||
color: pathColor, // 特效颜色
|
||||
// symbol: planePathImg, // 特效图形标记
|
||||
symbolSize: [10, 20],
|
||||
},
|
||||
// 线条样式
|
||||
@ -716,23 +899,27 @@ export const WorldGeo = memo(
|
||||
},
|
||||
data: convertData(item[1]) as echarts.LinesSeriesOption["data"],
|
||||
});
|
||||
|
||||
|
||||
// 添加路径点的双层效果
|
||||
const pathPoints = createPathPoints(item[1], true, pathColor);
|
||||
series.push(...pathPoints);
|
||||
|
||||
|
||||
// 添加出口节点的双层效果
|
||||
if (lastExit) {
|
||||
const exitNodes = createDualLayerPoint(lastExit, true, pathColor);
|
||||
series.push(...exitNodes);
|
||||
}
|
||||
item[1].forEach(lineData => {
|
||||
const lastExit = lineData[1];
|
||||
if (lastExit) {
|
||||
const exitNodes = createDualLayerPoint(lastExit, true, lastExit.color || pathColor);
|
||||
series.push(...exitNodes);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 处理其他线（保持原有逻辑）
|
||||
otherLineList.forEach((line: any) => {
|
||||
line.forEach((item: any) => {
|
||||
const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null;
|
||||
// 获取当前路径的颜色
|
||||
const pathColor = item[1]?.[0]?.[0]?.color || "#F0FFA2"; // 从第一个点获取颜色，如果没有则使用默认颜色
|
||||
|
||||
// 添加虚线
|
||||
series.push({
|
||||
name: item[0],
|
||||
@ -761,14 +948,15 @@ export const WorldGeo = memo(
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
// 创建A点和B点，并添加飞线和标签
|
||||
const createSpecialPoints = (series: echarts.SeriesOption[]) => {
|
||||
// 定义点A和点B的坐标
|
||||
const pointA = geoCoordMap[currentValue[0]?.startPoint ?? "GL"];
|
||||
const pointB = geoCoordMap[currentValue[0]?.endPoint ?? "CA"];
|
||||
const pointA = geoCoordMap[passAuthentication[0]?.startPoint ?? "GL"];
|
||||
const pointB = geoCoordMap[passAuthentication[0]?.endPoint ?? "CA"];
|
||||
const newPointB = [pointB[0] + 14, pointB[1] + 10];
|
||||
// 添加A点 - 带涟漪效果的双层点
|
||||
series.push(
|
||||
@ -906,25 +1094,21 @@ export const WorldGeo = memo(
|
||||
});
|
||||
return series;
|
||||
};
|
||||
|
||||
const getOption = () => {
|
||||
const series: echarts.SeriesOption[] = [];
|
||||
getLianData(series);
|
||||
// getMianLineTipData(series); // 添加主线tip 暂时隐藏
|
||||
if (
|
||||
tooltipType === "PASS_AUTHENTICATION" &&
|
||||
currentValue &&
|
||||
currentValue.length &&
|
||||
currentValue[0]?.authenticationPoint
|
||||
passAuthentication.length &&
|
||||
passAuthentication[0]?.authenticationPoint
|
||||
) {
|
||||
console.log(currentValue, "values");
|
||||
|
||||
createSpecialPoints(series); // 添加特殊点和飞线
|
||||
createRipplePointsFromCoordinates(
|
||||
currentValue[0]?.authenticationPoint || [],
|
||||
passAuthentication[0]?.authenticationPoint || [],
|
||||
series
|
||||
);
|
||||
}
|
||||
|
||||
const option = {
|
||||
backgroundColor: "transparent",
|
||||
// 全局提示框配置
|
||||
@ -1000,6 +1184,7 @@ export const WorldGeo = memo(
|
||||
};
|
||||
return option;
|
||||
};
|
||||
|
||||
// 创建DOM标签
|
||||
const createDOMLabels = () => {
|
||||
// 清除现有标签
|
||||
@ -1065,6 +1250,7 @@ export const WorldGeo = memo(
|
||||
// 更新标签位置
|
||||
updateLabelPositions();
|
||||
};
|
||||
|
||||
// 更新标签位置
|
||||
const updateLabelPositions = () => {
|
||||
if (!proxyGeoRef.current || !labelContainerRef.current) return;
|
||||
@ -1081,20 +1267,27 @@ export const WorldGeo = memo(
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
proxyGeoRef.current?.resize();
|
||||
updateLabelPositions();
|
||||
positionCustomTooltip();
|
||||
};
|
||||
|
||||
// 更新图表
|
||||
useEffect(() => {
|
||||
preMainToData.current?.some(
|
||||
(item, index) => item.country_code !== mainToData[index]?.country_code
|
||||
) && proxyGeoRef.current?.clear();
|
||||
preMainToData.current = mainToData;
|
||||
const option = getOption();
|
||||
proxyGeoRef.current?.setOption(option);
|
||||
}, [nestedEncryptionLineIndex, dynamicRouteLineIndex, allPoints]); // 当连线索引或点变化时更新图表
|
||||
|
||||
useEffect(() => {
|
||||
lineMidpointsRef.current = []; // 重置中点数据
|
||||
const option = getOption();
|
||||
proxyGeoRef.current?.setOption(option);
|
||||
// 创建DOM标签
|
||||
setTimeout(createDOMLabels, 100);
|
||||
}, [newHomeProxies, mainToData]);
|
||||
}, [nestedEncryption, dynamicRouteGeneration, passAuthentication]);
|
||||
|
||||
useEffect(() => {
|
||||
const chartDom = document.getElementById("screenGeo");
|
||||
proxyGeoRef.current = echarts.init(chartDom);
|
||||
@ -1102,6 +1295,13 @@ export const WorldGeo = memo(
|
||||
"world",
|
||||
worldGeoJson as unknown as Parameters<typeof echarts.registerMap>[1]
|
||||
);
|
||||
|
||||
// 初始化时提取所有点
|
||||
const initialPoints = extractAllPoints();
|
||||
if (initialPoints.length > 0) {
|
||||
setAllPoints(initialPoints);
|
||||
}
|
||||
|
||||
const option = getOption();
|
||||
option && proxyGeoRef.current?.setOption(option);
|
||||
// 添加地图交互事件监听器
|
||||
@ -1121,34 +1321,19 @@ export const WorldGeo = memo(
|
||||
proxyGeoRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (tooltipType !== "PASS_AUTHENTICATION") {
|
||||
lineMidpointsRef.current = [];
|
||||
}
|
||||
if (tooltipClosed) {
|
||||
if (tooltipType === "NESTED_ENCRYPTION") {
|
||||
createCustomTooltip();
|
||||
}
|
||||
if (tooltipType === "TRAFFIC_OBFUSCATION") {
|
||||
createCustomTooltip2();
|
||||
}
|
||||
} else {
|
||||
customTooltipRef.current?.remove();
|
||||
customTooltip2Ref.current?.remove();
|
||||
customTooltipRef.current = null;
|
||||
customTooltip2Ref.current = null;
|
||||
}
|
||||
createCustomTooltip();
|
||||
return () => {
|
||||
customTooltipRef.current?.remove();
|
||||
customTooltip2Ref.current?.remove();
|
||||
customTooltipRef.current = null;
|
||||
customTooltip2Ref.current = null;
|
||||
};
|
||||
}, [tooltipClosed, tooltipType, currentValue]);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex-1 h-full flex flex-col">
|
||||
<div id="screenGeo" className="flex-1"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
);
|
||||
@ -21,7 +21,7 @@ export const TRAFFIC_OBFUSCATION = {
|
||||
ingress_country_code: "cn",
|
||||
},
|
||||
],
|
||||
isLine: true,
|
||||
isLine: false,
|
||||
};
|
||||
export const NESTED_ENCRYPTION = {
|
||||
type: "NESTED_ENCRYPTION",
|
||||
@ -45,34 +45,34 @@ export const NESTED_ENCRYPTION = {
|
||||
ingress_country_code: "cn",
|
||||
},
|
||||
],
|
||||
isLine: true,
|
||||
isLine: false,
|
||||
};
|
||||
|
||||
export const DYNAMIC_ROUTE_GENERATOR = [
|
||||
{
|
||||
type: "DYNAMIC_ROUTE_GENERATOR",
|
||||
name: "动态路由生成",
|
||||
data: [
|
||||
{
|
||||
country_code: "us",
|
||||
ingress_country_code: "ca",
|
||||
},
|
||||
{
|
||||
country_code: "ca",
|
||||
ingress_country_code: "gl",
|
||||
},
|
||||
{
|
||||
country_code: "gl",
|
||||
ingress_country_code: "by",
|
||||
},
|
||||
{
|
||||
country_code: "dz",
|
||||
ingress_country_code: "cn",
|
||||
},
|
||||
],
|
||||
color: "#48D3D5",
|
||||
isLine: true,
|
||||
},
|
||||
// {
|
||||
// type: "DYNAMIC_ROUTE_GENERATOR",
|
||||
// name: "动态路由生成",
|
||||
// data: [
|
||||
// {
|
||||
// country_code: "us",
|
||||
// ingress_country_code: "ca",
|
||||
// },
|
||||
// {
|
||||
// country_code: "ca",
|
||||
// ingress_country_code: "gl",
|
||||
// },
|
||||
// {
|
||||
// country_code: "gl",
|
||||
// ingress_country_code: "by",
|
||||
// },
|
||||
// {
|
||||
// country_code: "dz",
|
||||
// ingress_country_code: "cn",
|
||||
// },
|
||||
// ],
|
||||
// color: "#48D3D5",
|
||||
// isLine: true,
|
||||
// },
|
||||
{
|
||||
type: "DYNAMIC_ROUTE_GENERATOR",
|
||||
name: "动态路由生成2",
|
||||
@ -95,7 +95,7 @@ export const DYNAMIC_ROUTE_GENERATOR = [
|
||||
},
|
||||
],
|
||||
color: "#50FE35",
|
||||
isLine: true,
|
||||
isLine: false,
|
||||
},
|
||||
];
|
||||
|
||||
@ -401,7 +401,7 @@ export const APP_DIVERSION = [
|
||||
},
|
||||
];
|
||||
|
||||
export const PASS_AUTHENTICATION = {
|
||||
export const PASS_AUTHENTICATION = {
|
||||
type: "PASS_AUTHENTICATION",
|
||||
name: "通信认证",
|
||||
startPoint: "GL",
|
||||
@ -424,26 +424,7 @@ export const PASS_AUTHENTICATION = {
|
||||
[-102.346771, 68.130366],
|
||||
],
|
||||
data: [
|
||||
{
|
||||
country_code: "gl",
|
||||
ingress_country_code: "dz",
|
||||
},
|
||||
{
|
||||
country_code: "br",
|
||||
ingress_country_code: "dz",
|
||||
},
|
||||
{
|
||||
country_code: "dz",
|
||||
ingress_country_code: "ru",
|
||||
},
|
||||
{
|
||||
country_code: "dz",
|
||||
ingress_country_code: "cn",
|
||||
},
|
||||
{
|
||||
country_code: "ru",
|
||||
ingress_country_code: "za",
|
||||
},
|
||||
|
||||
],
|
||||
isLine: true,
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { WorldGeo } from "./components/world-geo";
|
||||
|
||||
import NetflixSvg from "@/assets/svg/anti-forensics-forwarding/Netflix.svg?react";
|
||||
import NetflixActiveSvg from "@/assets/svg/anti-forensics-forwarding/NetflixActive.svg?react";
|
||||
@ -28,24 +26,20 @@ import YouTubeSvg from "@/assets/svg/anti-forensics-forwarding/YouTube.svg?react
|
||||
import YouTubeActiveSvg from "@/assets/svg/anti-forensics-forwarding/YouTubeActive.svg?react";
|
||||
import FacebookSvg from "@/assets/svg/anti-forensics-forwarding/Facebook.svg?react";
|
||||
import FacebookActiveSvg from "@/assets/svg/anti-forensics-forwarding/FacebookActive.svg?react";
|
||||
import { RootState } from "@/store";
|
||||
|
||||
import {
|
||||
TRAFFIC_OBFUSCATION,
|
||||
NESTED_ENCRYPTION,
|
||||
DYNAMIC_ROUTE_GENERATOR,
|
||||
APP_DIVERSION,
|
||||
PASS_AUTHENTICATION,
|
||||
} from "./data/mockData";
|
||||
|
||||
import "./index.scss";
|
||||
import {
|
||||
getApplicationDiversion,
|
||||
getDynamicRouteGeneration,
|
||||
getNestedEncryption,
|
||||
getPassAuthentication,
|
||||
getTrafficObfuscation,
|
||||
} from "@/api/flying-line";
|
||||
import { WorldGeo } from "./components/world-geo";
|
||||
|
||||
export const DIALOGTYPE = {
|
||||
ADDNode: {
|
||||
@ -167,92 +161,67 @@ export const CONST_TOOLTIP_TYPE = {
|
||||
};
|
||||
|
||||
const DecentralizedElasticNetwork = () => {
|
||||
const { newHomeProxies } = useSelector(
|
||||
(state: RootState) => state.web3Reducer
|
||||
);
|
||||
|
||||
const [tooltipType, setTooltipType] = useState(
|
||||
CONST_TOOLTIP_TYPE.PASS_AUTHENTICATION.type
|
||||
);
|
||||
const [tooltipClosed, setTooltipClosed] = useState(false);
|
||||
|
||||
const [selectedApp, setSelectedApp] = useState<any>(null);
|
||||
const [dataInfo, setDataInfo] = useState<any>(null);
|
||||
const [dataInfo, setDataInfo] = useState<any>({
|
||||
passAuthentication: [
|
||||
{
|
||||
...PASS_AUTHENTICATION,
|
||||
},
|
||||
],
|
||||
nestedEncryption: [NESTED_ENCRYPTION],
|
||||
dynamicRouteGeneration: DYNAMIC_ROUTE_GENERATOR,
|
||||
});
|
||||
let istrue = useRef(false);
|
||||
const [nestedEncryption, setNestedEncryption] = useState<any>([]);
|
||||
const [dynamicRouteGeneration, setDynamicRouteGeneration] = useState<any>([]);
|
||||
// const [dataInfo, setDataInfo] = useState<any>({
|
||||
// passAuthentication: {
|
||||
// ...PASS_AUTHENTICATION,
|
||||
// },
|
||||
// nestedEncryption: [NESTED_ENCRYPTION],
|
||||
// dynamicRouteGeneration: DYNAMIC_ROUTE_GENERATOR,
|
||||
// });
|
||||
|
||||
const currentValue = useMemo(() => {
|
||||
let value = dataInfo;
|
||||
|
||||
switch (tooltipType) {
|
||||
case CONST_TOOLTIP_TYPE.APP_DIVERSION.type:
|
||||
value = selectedApp ? [selectedApp] : [];
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return value;
|
||||
}, [tooltipType, selectedApp,dataInfo]);
|
||||
|
||||
const handleClickApp = (item: any) => {
|
||||
setSelectedApp(item);
|
||||
};
|
||||
|
||||
const getDataInfo = async () => {
|
||||
let value = [];
|
||||
|
||||
switch (tooltipType) {
|
||||
case CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type:
|
||||
const nestedEncryption = await getNestedEncryption();
|
||||
value = [nestedEncryption.data];
|
||||
break;
|
||||
case CONST_TOOLTIP_TYPE.TRAFFIC_OBFUSCATION.type:
|
||||
const trafficObfuscation = await getTrafficObfuscation();
|
||||
value = [trafficObfuscation.data];
|
||||
break;
|
||||
case CONST_TOOLTIP_TYPE.DYNAMIC_ROUTE_GENERATOR.type:
|
||||
const dynamicRouteGeneration = await getDynamicRouteGeneration();
|
||||
value = dynamicRouteGeneration.data;
|
||||
break;
|
||||
// case CONST_TOOLTIP_TYPE.APP_DIVERSION.type:
|
||||
// const applicationDiversion = await getApplicationDiversion();
|
||||
|
||||
// value = selectedApp ? [selectedApp] : [];
|
||||
// break;
|
||||
case CONST_TOOLTIP_TYPE.PASS_AUTHENTICATION.type:
|
||||
const passAuthentication = await getPassAuthentication();
|
||||
value = [passAuthentication.data];
|
||||
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
console.log(value,'valuevalue')
|
||||
setDataInfo(value);
|
||||
};
|
||||
|
||||
const [appData, setAppData] = useState<any>([]);
|
||||
const appDiversion = useMemo(() => {
|
||||
return Apps.map((item) => {
|
||||
const findApp = appData.find(
|
||||
(appItem:any) => item.name === appItem.name
|
||||
);
|
||||
return {
|
||||
...item,
|
||||
...findApp,
|
||||
};
|
||||
});
|
||||
}, [appData]);
|
||||
const initData = async () => {
|
||||
const applicationDiversion = await getApplicationDiversion();
|
||||
|
||||
setAppData(applicationDiversion.data);
|
||||
try {
|
||||
const passAuthentication = await getPassAuthentication();
|
||||
const dynamicRouteGeneration = await getDynamicRouteGeneration();
|
||||
const nestedEncryption = await getNestedEncryption();
|
||||
nestedEncryption.data.isLine = false;
|
||||
dynamicRouteGeneration.data[0].isLine = false;
|
||||
setNestedEncryption([nestedEncryption.data]);
|
||||
setDynamicRouteGeneration(dynamicRouteGeneration.data);
|
||||
setDataInfo({
|
||||
nestedEncryption: [nestedEncryption.data],
|
||||
passAuthentication: [passAuthentication.data],
|
||||
dynamicRouteGeneration: dynamicRouteGeneration.data,
|
||||
});
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
const getNewDynamicRouteGeneration = async () => {
|
||||
const res = await getDynamicRouteGeneration();
|
||||
res.data[0].isLine = istrue.current;
|
||||
setDynamicRouteGeneration([...res.data]);
|
||||
};
|
||||
|
||||
let timer: any = null;
|
||||
useEffect(() => {
|
||||
getDataInfo();
|
||||
},[tooltipType])
|
||||
timer = setInterval(() => {
|
||||
getNewDynamicRouteGeneration();
|
||||
}, 5000);
|
||||
return () => {
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, [dynamicRouteGeneration]);
|
||||
|
||||
useEffect(() => {
|
||||
initData();
|
||||
|
||||
() => {
|
||||
setTooltipClosed(false);
|
||||
};
|
||||
@ -260,28 +229,11 @@ const DecentralizedElasticNetwork = () => {
|
||||
|
||||
return (
|
||||
<div className="decentralized w-full h-full flex flex-col relative">
|
||||
<div className="flex items-center gap-[60px] absolute top-12 left-12 z-10">
|
||||
{tooltipType === CONST_TOOLTIP_TYPE.APP_DIVERSION.type &&
|
||||
appDiversion.map((item) => {
|
||||
return (
|
||||
<div
|
||||
key={item.name}
|
||||
className="flex items-center justify-center w-16 h-16 relative rounded-[4.95px] shadow-[0px_0px_3.299999952316284px_0px_rgba(84,87,255,1.00)] outline outline-[0.50px] outline-offset-[-0.50px] outline-indigo-50/60 overflow-hidden"
|
||||
onClick={() => handleClickApp(item)}
|
||||
>
|
||||
{selectedApp?.name === item?.name ? (
|
||||
<item.activeIcon />
|
||||
) : (
|
||||
<item.icon />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-2 w-full h-full flex-1">
|
||||
<WorldGeo
|
||||
currentValue={currentValue}
|
||||
newHomeProxies={newHomeProxies}
|
||||
nestedEncryption={nestedEncryption}
|
||||
passAuthentication={dataInfo.passAuthentication}
|
||||
dynamicRouteGeneration={dynamicRouteGeneration}
|
||||
tooltipType={tooltipType}
|
||||
tooltipClosed={tooltipClosed}
|
||||
setTooltipClosed={setTooltipClosed}
|
||||
@ -302,6 +254,8 @@ const DecentralizedElasticNetwork = () => {
|
||||
onClick={() => {
|
||||
setTooltipType(CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type);
|
||||
setTooltipClosed(true);
|
||||
nestedEncryption[0].isLine = true;
|
||||
setNestedEncryption([...nestedEncryption]);
|
||||
}}
|
||||
>
|
||||
嵌套加密
|
||||
@ -310,6 +264,9 @@ const DecentralizedElasticNetwork = () => {
|
||||
className="bt1 cursor-pointer"
|
||||
onClick={() => {
|
||||
setTooltipType(CONST_TOOLTIP_TYPE.DYNAMIC_ROUTE_GENERATOR.type);
|
||||
dynamicRouteGeneration[0].isLine = true;
|
||||
istrue.current = true;
|
||||
setDynamicRouteGeneration([...dynamicRouteGeneration]);
|
||||
}}
|
||||
>
|
||||
动态路由生成
|
||||
|
||||
@ -21,7 +21,7 @@ type LinesDataType = [LinesItemType, LinesItemType];
|
||||
type LinesType = [string, LinesDataType[]];
|
||||
|
||||
// 连线动画的间隔时间（毫秒）
|
||||
const LINE_ANIMATION_INTERVAL = 3000; // 3秒
|
||||
const LINE_ANIMATION_INTERVAL = 500; // 3秒
|
||||
|
||||
// 创建单个国家的涟漪效果
|
||||
const createCountryRipple = (countryCode: string) => {
|
||||
@ -73,7 +73,7 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => {
|
||||
// 启动连线动画
|
||||
setTimeout(() => {
|
||||
startLineAnimation(lineConnections);
|
||||
}, 500);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// 如果 isLine 从 true 变为 false，重置连线索引
|
||||
|
||||
@ -13,17 +13,19 @@ interface LinesItemType {
|
||||
name: string;
|
||||
country_code: string;
|
||||
value: number[];
|
||||
color?: string; // 添加颜色属性
|
||||
}
|
||||
type LinesDataType = [LinesItemType, LinesItemType];
|
||||
type LinesType = [string, LinesDataType[]];
|
||||
// 创建单个国家的涟漪效果
|
||||
const createCountryRipple = (countryCode: string) => {
|
||||
const createCountryRipple = (countryCode: string, color?: string) => {
|
||||
const coords = geoCoordMap[countryCode];
|
||||
if (!coords) return null;
|
||||
return {
|
||||
name: countryCodeMap[countryCode] ?? "",
|
||||
value: coords,
|
||||
country_code: countryCode,
|
||||
color: color, // 添加颜色属性
|
||||
};
|
||||
};
|
||||
export const WorldGeo = memo(
|
||||
@ -264,21 +266,23 @@ export const WorldGeo = memo(
|
||||
console.error("Error positioning tooltip:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const getLineItem = (
|
||||
preCode: string,
|
||||
nextCode: string
|
||||
nextCode: string,
|
||||
color: string
|
||||
): [LinesItemType, LinesItemType] => {
|
||||
return [
|
||||
{
|
||||
name: countryCodeMap[preCode] ?? "",
|
||||
value: geoCoordMap[preCode] ?? [],
|
||||
country_code: preCode,
|
||||
color: color, // 添加颜色属性
|
||||
},
|
||||
{
|
||||
name: countryCodeMap[nextCode] ?? "",
|
||||
value: geoCoordMap[nextCode] ?? [],
|
||||
country_code: nextCode,
|
||||
color: color, // 添加颜色属性
|
||||
},
|
||||
];
|
||||
};
|
||||
@ -289,7 +293,6 @@ export const WorldGeo = memo(
|
||||
const ripplePoints: any[] = [];
|
||||
// 收集每个点的颜色信息
|
||||
const pointColors: Record<string, string> = {};
|
||||
|
||||
// 处理主路径数据
|
||||
for (let i = 0; i < mainToData.length; i++) {
|
||||
// 如果是最后一个元素，则跳过（因为没有下一个元素作为终点）
|
||||
@ -300,44 +303,27 @@ export const WorldGeo = memo(
|
||||
const countryCode = currentItem.country_code.toUpperCase();
|
||||
// 获取颜色信息
|
||||
const lineColor = currentItem.color || "#0ea5e9"; // 默认颜色
|
||||
|
||||
// 保存点的颜色信息
|
||||
pointColors[countryCode] = lineColor;
|
||||
|
||||
// 如果当前项是起点，下一项是终点
|
||||
if (currentItem.type === "start" && nextItem.type === "end") {
|
||||
const startCode = countryCode;
|
||||
const endCode = nextItem.country_code.toUpperCase();
|
||||
|
||||
// 保存终点的颜色信息
|
||||
pointColors[endCode] = lineColor;
|
||||
|
||||
// 无论是否连线，都添加点的涟漪效果
|
||||
const startPoint = createCountryRipple(startCode);
|
||||
const endPoint = createCountryRipple(endCode);
|
||||
|
||||
const startPoint = createCountryRipple(startCode, lineColor);
|
||||
const endPoint = createCountryRipple(endCode, lineColor);
|
||||
if (startPoint) {
|
||||
ripplePoints.push({
|
||||
...startPoint,
|
||||
color: lineColor, // 添加颜色信息
|
||||
});
|
||||
ripplePoints.push(startPoint);
|
||||
}
|
||||
|
||||
if (endPoint) {
|
||||
ripplePoints.push({
|
||||
...endPoint,
|
||||
color: lineColor, // 添加颜色信息
|
||||
});
|
||||
ripplePoints.push(endPoint);
|
||||
}
|
||||
|
||||
// 检查是否应该绘制连线
|
||||
if (currentItem.isLine !== false) {
|
||||
const lineItem = getLineItem(startCode, endCode);
|
||||
// 添加颜色信息到连线数据
|
||||
solidData[0][1].push({
|
||||
...lineItem,
|
||||
color: lineColor, // 添加颜色信息
|
||||
} as any);
|
||||
const lineItem = getLineItem(startCode, endCode, lineColor);
|
||||
solidData[0][1].push(lineItem);
|
||||
}
|
||||
// 跳过下一项，因为已经处理了
|
||||
i++;
|
||||
@ -345,36 +331,22 @@ export const WorldGeo = memo(
|
||||
// 常规情况：当前项到下一项
|
||||
else {
|
||||
const nextCountryCode = nextItem.country_code.toUpperCase();
|
||||
|
||||
const nextColor = nextItem.color || "#0ea5e9"; // 获取下一个点的颜色
|
||||
// 保存下一个点的颜色信息
|
||||
pointColors[nextCountryCode] = nextItem.color || lineColor;
|
||||
|
||||
pointColors[nextCountryCode] = nextColor;
|
||||
// 无论是否连线，都添加点的涟漪效果
|
||||
const currentPoint = createCountryRipple(countryCode);
|
||||
const nextPoint = createCountryRipple(nextCountryCode);
|
||||
|
||||
const currentPoint = createCountryRipple(countryCode, lineColor);
|
||||
const nextPoint = createCountryRipple(nextCountryCode, nextColor);
|
||||
if (currentPoint) {
|
||||
ripplePoints.push({
|
||||
...currentPoint,
|
||||
color: lineColor, // 添加颜色信息
|
||||
});
|
||||
ripplePoints.push(currentPoint);
|
||||
}
|
||||
|
||||
if (nextPoint) {
|
||||
ripplePoints.push({
|
||||
...nextPoint,
|
||||
color: nextItem.color || lineColor, // 添加颜色信息
|
||||
});
|
||||
ripplePoints.push(nextPoint);
|
||||
}
|
||||
|
||||
// 检查是否应该绘制连线
|
||||
if (currentItem.isLine !== false) {
|
||||
const lineItem = getLineItem(countryCode, nextCountryCode);
|
||||
// 添加颜色信息到连线数据
|
||||
solidData[0][1].push({
|
||||
...lineItem,
|
||||
color: lineColor, // 添加颜色信息
|
||||
} as any);
|
||||
const lineItem = getLineItem(countryCode, nextCountryCode, lineColor);
|
||||
solidData[0][1].push(lineItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -397,14 +369,17 @@ export const WorldGeo = memo(
|
||||
const toCoord = geoCoordMap[dataIndex?.[1]?.country_code ?? ""];
|
||||
const fromCountry = dataIndex?.[0]?.country_code ?? "";
|
||||
const toCountry = dataIndex?.[1]?.country_code ?? "";
|
||||
const lineColor = (dataIndex as any)?.color || "#0ea5e9"; // 获取线条颜色
|
||||
|
||||
// 使用每条线自己的颜色
|
||||
const lineColor = dataIndex?.[0]?.color || "#0ea5e9";
|
||||
|
||||
if (fromCoord && toCoord) {
|
||||
res.push({
|
||||
coords: [fromCoord, toCoord],
|
||||
lineStyle: {
|
||||
color: lineColor, // 使用自定义颜色
|
||||
},
|
||||
// 保存颜色信息用于飞行特效
|
||||
color: lineColor
|
||||
});
|
||||
// 计算中点，考虑曲线的弧度
|
||||
const curveness = -0.4; // 与飞线弧度相同
|
||||
@ -433,9 +408,11 @@ export const WorldGeo = memo(
|
||||
// 创建双层点效果 - 大点
|
||||
const createDualLayerPoint = (
|
||||
lastExit: LinesItemType,
|
||||
isMainPath: boolean = true,
|
||||
color?: string
|
||||
isMainPath: boolean = true
|
||||
) => {
|
||||
// 使用点自己的颜色
|
||||
const pointColor = lastExit.color || "#0ea5e9";
|
||||
|
||||
// 创建数据数组，用于两个散点图层
|
||||
const pointData = lastExit
|
||||
? [lastExit].map((v) => {
|
||||
@ -444,6 +421,7 @@ export const WorldGeo = memo(
|
||||
value: v.value,
|
||||
datas: {
|
||||
country_code: v.country_code,
|
||||
color: pointColor // 保存颜色信息
|
||||
},
|
||||
};
|
||||
})
|
||||
@ -451,16 +429,18 @@ export const WorldGeo = memo(
|
||||
// 根据是否是主路径设置不同的大小和颜色
|
||||
const outerSize = isMainPath ? 8 : 4;
|
||||
const innerSize = isMainPath ? 4 : 2;
|
||||
// 使用传入的颜色或默认颜色
|
||||
const outerColor = color || "#0ea5e9";
|
||||
const innerColor = "#FFFFFF"; // 白色内层
|
||||
return [
|
||||
{
|
||||
// 外层蓝色点，带涟漪效果
|
||||
// 外层彩色点，带涟漪效果
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
zlevel: 3,
|
||||
color: outerColor,
|
||||
itemStyle: {
|
||||
color: function(params: any) {
|
||||
return params.data.datas.color;
|
||||
}
|
||||
},
|
||||
symbol: "circle",
|
||||
symbolSize: outerSize,
|
||||
rippleEffect: {
|
||||
@ -516,17 +496,17 @@ export const WorldGeo = memo(
|
||||
// 添加新方法：根据经纬度数组创建蓝色涟漪小点（不包含白色内层点）
|
||||
const createRipplePointsFromCoordinates = (
|
||||
coordinates: [number, number][],
|
||||
series: echarts.SeriesOption[]
|
||||
series: echarts.SeriesOption[],
|
||||
color: string = "#01FF5E"
|
||||
) => {
|
||||
if (!coordinates || coordinates.length === 0) return;
|
||||
// 使用selectedApp.color或默认蓝色
|
||||
const outerColor = "#01FF5E";
|
||||
|
||||
// 只创建外层带涟漪效果的点
|
||||
series.push({
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
zlevel: 3,
|
||||
color: outerColor,
|
||||
color: color,
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
rippleEffect: {
|
||||
@ -551,13 +531,15 @@ export const WorldGeo = memo(
|
||||
) => {
|
||||
// 创建数据数组
|
||||
const pointData = dataItems.map((dataItem: LinesDataType) => {
|
||||
const color = (dataItem as any).color || "#0ea5e9"; // 获取颜色信息
|
||||
// 使用每个点自己的颜色
|
||||
const pointColor = dataItem[0].color || "#0ea5e9";
|
||||
|
||||
return {
|
||||
name: dataItem[0].name,
|
||||
value: geoCoordMap[dataItem[0].country_code],
|
||||
datas: {
|
||||
country_code: dataItem[0].country_code,
|
||||
color: color, // 保存颜色信息
|
||||
color: pointColor // 保存颜色信息
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -574,7 +556,7 @@ export const WorldGeo = memo(
|
||||
// 使用回调函数根据数据项设置颜色
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
return params.data.datas.color || "#0ea5e9";
|
||||
return params.data.datas.color;
|
||||
},
|
||||
},
|
||||
symbol: "circle",
|
||||
@ -633,7 +615,7 @@ export const WorldGeo = memo(
|
||||
// 使用回调函数根据数据项设置颜色
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
return params.data.datas.color || "#0ea5e9";
|
||||
return params.data.datas.color;
|
||||
},
|
||||
},
|
||||
symbol: "circle",
|
||||
@ -675,7 +657,7 @@ export const WorldGeo = memo(
|
||||
value: point.value,
|
||||
datas: {
|
||||
country_code: point.country_code,
|
||||
color: point.color || "#0ea5e9", // 保存颜色信息
|
||||
color: point.color || "#0ea5e9", // 使用点自己的颜色
|
||||
},
|
||||
})),
|
||||
} as echarts.SeriesOption;
|
||||
@ -712,85 +694,95 @@ export const WorldGeo = memo(
|
||||
if (item[1].length === 0) {
|
||||
return;
|
||||
}
|
||||
const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null;
|
||||
const lastExitColor =
|
||||
(item[1]?.[item[1].length - 1] as any)?.color || "#0ea5e9";
|
||||
|
||||
// 添加飞行线
|
||||
series.push({
|
||||
name: item[0],
|
||||
type: "lines",
|
||||
zlevel: 1,
|
||||
label: {
|
||||
show: false, // 不使用内置标签
|
||||
},
|
||||
// 飞行线特效
|
||||
effect: {
|
||||
show: true, // 是否显示
|
||||
period: 4, // 特效动画时间
|
||||
trailLength: 0.7, // 特效尾迹长度。取从 0 到 1 的值，数值越大尾迹越长
|
||||
color: lastExitColor, // 特效颜色
|
||||
// symbol: planePathImg, // 特效图形标记
|
||||
symbolSize: [10, 20],
|
||||
},
|
||||
// 线条样式
|
||||
lineStyle: {
|
||||
curveness: -0.4, // 飞线弧度
|
||||
type: "solid", // 飞线类型
|
||||
width: 1.5, // 飞线宽度
|
||||
opacity: 0.1,
|
||||
},
|
||||
data: convertData(item[1]) as echarts.LinesSeriesOption["data"],
|
||||
});
|
||||
// 添加路径点的双层效果
|
||||
const pathPoints = createPathPoints(item[1], true);
|
||||
series.push(...pathPoints);
|
||||
// 添加出口节点的双层效果
|
||||
if (lastExit) {
|
||||
const exitNodes = createDualLayerPoint(lastExit, true, lastExitColor);
|
||||
series.push(...exitNodes);
|
||||
}
|
||||
});
|
||||
otherLineList.forEach((line: any) => {
|
||||
line.forEach((item: any) => {
|
||||
const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null;
|
||||
const lastExitColor =
|
||||
(item[1]?.[item[1].length - 1] as any)?.color || "#0ea5e9";
|
||||
// 添加虚线
|
||||
|
||||
// 处理每条线段
|
||||
item[1].forEach((lineSegment, index) => {
|
||||
const fromPoint = lineSegment[0];
|
||||
const toPoint = lineSegment[1];
|
||||
const lineColor = fromPoint.color || "#0ea5e9";
|
||||
|
||||
// 添加单条飞行线
|
||||
series.push({
|
||||
name: item[0],
|
||||
name: `${item[0]}-${index}`,
|
||||
type: "lines",
|
||||
zlevel: 1,
|
||||
label: {
|
||||
show: false,
|
||||
show: false, // 不使用内置标签
|
||||
},
|
||||
// 飞行线特效
|
||||
effect: {
|
||||
show: true, // 是否显示
|
||||
period: 4, // 特效动画时间
|
||||
trailLength: 0.7, // 特效尾迹长度。取从 0 到 1 的值，数值越大尾迹越长
|
||||
color: lineColor, // 使用线段自己的颜色
|
||||
// symbol: planePathImg, // 特效图形标记
|
||||
symbolSize: [10, 20],
|
||||
},
|
||||
// 线条样式
|
||||
lineStyle: {
|
||||
curveness: -0.4, // 飞线弧度
|
||||
type: [5, 5], // 飞线类型
|
||||
color: "#F0FFA2", // 飞线颜色
|
||||
width: 0.5, // 飞线宽度
|
||||
opacity: 0.6,
|
||||
type: "solid", // 飞线类型
|
||||
width: 1.5, // 飞线宽度
|
||||
opacity: 0.1,
|
||||
color: lineColor, // 使用线段自己的颜色
|
||||
},
|
||||
data: convertData(item[1]) as echarts.LinesSeriesOption["data"],
|
||||
data: convertData([[fromPoint, toPoint]]) as echarts.LinesSeriesOption["data"],
|
||||
});
|
||||
// 添加路径点的双层效果（次要路径）
|
||||
const pathPoints = createPathPoints(item[1], false);
|
||||
series.push(...pathPoints);
|
||||
// 添加出口节点的双层效果（次要路径）
|
||||
if (lastExit) {
|
||||
const exitNodes = createDualLayerPoint(
|
||||
lastExit,
|
||||
false,
|
||||
lastExitColor
|
||||
);
|
||||
series.push(...exitNodes);
|
||||
|
||||
// 添加起点的双层效果
|
||||
const startNodes = createDualLayerPoint(fromPoint, true);
|
||||
series.push(...startNodes);
|
||||
|
||||
// 如果是最后一个线段，添加终点的双层效果
|
||||
if (index === item[1].length - 1) {
|
||||
const endNodes = createDualLayerPoint(toPoint, true);
|
||||
series.push(...endNodes);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
otherLineList.forEach((line: any) => {
|
||||
line.forEach((item: any) => {
|
||||
// 处理每条虚线段
|
||||
item[1].forEach((lineSegment: any, index: number) => {
|
||||
const fromPoint = lineSegment[0];
|
||||
const toPoint = lineSegment[1];
|
||||
const lineColor = fromPoint.color || "#F0FFA2";
|
||||
|
||||
// 添加虚线
|
||||
series.push({
|
||||
name: `${item[0]}-dashed-${index}`,
|
||||
type: "lines",
|
||||
zlevel: 1,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
// 线条样式
|
||||
lineStyle: {
|
||||
curveness: -0.4, // 飞线弧度
|
||||
type: [5, 5], // 飞线类型
|
||||
color: lineColor, // 使用线段自己的颜色
|
||||
width: 0.5, // 飞线宽度
|
||||
opacity: 0.6,
|
||||
},
|
||||
data: convertData([[fromPoint, toPoint]]) as echarts.LinesSeriesOption["data"],
|
||||
});
|
||||
|
||||
// 添加起点的双层效果
|
||||
const startNodes = createDualLayerPoint(fromPoint, false);
|
||||
series.push(...startNodes);
|
||||
|
||||
// 如果是最后一个线段，添加终点的双层效果
|
||||
if (index === item[1].length - 1) {
|
||||
const endNodes = createDualLayerPoint(toPoint, false);
|
||||
series.push(...endNodes);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 创建A点和B点，并添加飞线和标签
|
||||
const createSpecialPoints = (series: echarts.SeriesOption[]) => {
|
||||
// 定义点A和点B的坐标
|
||||
@ -940,9 +932,12 @@ export const WorldGeo = memo(
|
||||
// getMianLineTipData(series); // 添加主线tip 暂时隐藏
|
||||
createSpecialPoints(series); // 添加特殊点和飞线
|
||||
if (dataInfo.passAuthentication?.authenticationPoint) {
|
||||
// 使用认证点的颜色
|
||||
const authColor = dataInfo.passAuthentication.color || "#01FF5E";
|
||||
createRipplePointsFromCoordinates(
|
||||
dataInfo.passAuthentication?.authenticationPoint || [],
|
||||
series
|
||||
series,
|
||||
authColor
|
||||
);
|
||||
}
|
||||
const option = {
|
||||
@ -1163,4 +1158,4 @@ export const WorldGeo = memo(
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
);
|
||||
Loading…
x
Reference in New Issue
Block a user