map修改

src/assets/json/countryCoordMap.js

@@ -213,3 +213,18 @@ export const countryCoordMap = {
 	法属波利尼西亚: [-149.5986, -17.6797], // 法属波利尼西亚帕皮提
 	"新喀里多尼亚(法)": [166.4572, -21.5547] // 新喀里多尼亚努美阿
 };
+
+export function convertAsiaCenterCoord(coord) {
+	const [lng, lat] = coord;
+
+	// 将以本初子午线为基准的坐标转换为以亚洲为中心的坐标
+	// world-asia-center.json 是将标准坐标的经度减去了 180 度
+	let newLng = lng - 180;
+
+	// 规范化到 [-180, 180] 范围
+	if (newLng < -180) {
+		newLng += 360;
+	}
+
+	return [newLng, lat];
+}

src/views/ZMOverView/components/fourSuppress/components/allUnion/index-back.vue

@@ -588,22 +588,18 @@ function handleUnionItemClick(item) {
 		createUnionChart();
 	});
 }
-// ... existing code ...
 
 // ... existing code ...
 
 function createChart() {
-	// 如果没有数据，直接返回
 	if (!countryTotalList.value || countryTotalList.value.length === 0) {
 		console.error("No country data available");
 		return;
 	}
 
-	// 找到最大值用于颜色计算
 	const maxValue = Math.max(...countryTotalList.value.map(item => item.value));
 	console.log("全部国家数据 countryTotalList =>", countryTotalList.value);
 
-	// 为每个数据项计算颜色
 	const processedData = countryTotalList.value.map(item => {
 		const color = getColorByValueRandom(item.value, maxValue);
 		return {
@@ -621,12 +617,12 @@ function createChart() {
 		};
 	});
 
-	// 构建基础地图配置
 	const option = {
 		geo: {
 			map: "world",
 			roam: true,
 			zoom: 1.2,
+			// center: [104.1954, 35.8617], // 设置地图中心点为中国
 			label: {
 				show: false
 			},
@@ -687,7 +683,6 @@ function createChart() {
 		]
 	};
 
-	// 如果有选中的国家，添加关系线
 	if (
 		currentSelectedCountry.value &&
 		currentSelectedCountry.value.memberRelation &&
@@ -698,8 +693,19 @@ function createChart() {
 			currentSelectedCountry.value.zhName ||
 			nameMap[currentSelectedCountry.value.name] ||
 			currentSelectedCountry.value.name;
+
 		const sourceCoord = countryCoordMap[sourceCountryName];
 
+		if (!sourceCoord) {
+			console.warn(`无法找到源国家 ${sourceCountryName} 的坐标`);
+			return;
+		}
+
+		console.log("=== 源国家信息 ===");
+		console.log("源国家名称:", sourceCountryName);
+		console.log("源国家坐标:", sourceCoord);
+		console.log("==================");
+
 		const validRelations = relations.filter(relation => {
 			return relation.tagetMemberName && relation.tagetMemberCount;
 		});
@@ -711,10 +717,12 @@ function createChart() {
 			const targetPoints = [];
 
 			validRelations.forEach(relation => {
-				const targetCountry = relation.tagetMemberName;
-				const targetCoord = countryCoordMap[targetCountry];
+				const targetCountryZhName = relation.tagetMemberName;
+				const targetCoord = countryCoordMap[targetCountryZhName];
 
 				if (targetCoord) {
+					console.log(`目标国家：${targetCountryZhName}, 坐标:`, targetCoord);
+
 					const ratio = relation.tagetMemberCount / maxRelationCount;
 					const r = Math.round(5 + (255 - 5) * ratio);
 					const g = Math.round(95 + (77 - 95) * ratio);
@@ -724,9 +732,9 @@ function createChart() {
 					const lineWidth = 1 + (relation.tagetMemberCount / maxRelationCount) * 7;
 
 					linesData.push({
-						name: `${sourceCountryName} - ${targetCountry}`,
+						name: `${sourceCountryName} - ${targetCountryZhName}`,
 						sourceName: sourceCountryName,
-						targetName: targetCountry,
+						targetName: targetCountryZhName,
 						coords: [sourceCoord, targetCoord],
 						value: relation.tagetMemberCount,
 						lineStyle: {
@@ -737,13 +745,15 @@ function createChart() {
 					});
 
 					targetPoints.push({
-						name: targetCountry,
+						name: targetCountryZhName,
 						value: targetCoord,
 						symbolSize: 8 + (relation.tagetMemberCount / maxRelationCount) * 7,
 						itemStyle: {
 							color: lineColor
 						}
 					});
+				} else {
+					console.warn(`无法找到目标国家 ${targetCountryZhName} 的坐标`);
 				}
 			});
 
@@ -795,244 +805,29 @@ function createChart() {
 
 // ... existing code ...
 
-// ... existing code ...
-
 // 处理国家列表项点击事件
+// 在 handleCountryClick 中添加调试代码
 const handleCountryClick = country => {
 	currentSelectedCountry.value = country;
-	console.log("国家之间的关系 =>", country);
+	console.log("=== 点击的国家信息 ===");
+	console.log("国家中文名:", country.zhName);
+	console.log("国家英文名:", country.name);
+
+	// 检查坐标映射
+	const coordFromZhName = countryCoordMap[country.zhName];
+	const coordFromEnName = countryCoordMap[country.name];
+	const coordFromMappedName = countryCoordMap[nameMap[country.name]];
+
+	console.log("通过中文名获取坐标:", coordFromZhName);
+	console.log("通过英文名获取坐标:", coordFromEnName);
+	console.log("通过映射名获取坐标:", coordFromMappedName);
+	console.log("=====================");
+
 	nextTick(() => {
 		createChart();
 	});
 };
 
-const countryMock = {
-	name: "Australia",
-	ename: "Commonwealth of Australia",
-	image: "http://8.140.26.4:10010/kjb-files/images/cr_flag/AUS.jpg",
-	count: 7,
-	memberRelation: [
-		{
-			tagetMemberName: "美国",
-			tagetMemberCount: 7
-		},
-		{
-			tagetMemberName: "英国",
-			tagetMemberCount: 6
-		},
-		{
-			tagetMemberName: "日本",
-			tagetMemberCount: 5
-		},
-		{
-			tagetMemberName: "韩国",
-			tagetMemberCount: 4
-		},
-		{
-			tagetMemberName: "印度",
-			tagetMemberCount: 4
-		},
-		{
-			tagetMemberName: "新西兰",
-			tagetMemberCount: 3
-		},
-		{
-			tagetMemberName: "加拿大",
-			tagetMemberCount: 3
-		},
-		{
-			tagetMemberName: "挪威",
-			tagetMemberCount: 2
-		},
-		{
-			tagetMemberName: "德国",
-			tagetMemberCount: 2
-		},
-		{
-			tagetMemberName: "法国",
-			tagetMemberCount: 2
-		},
-		{
-			tagetMemberName: "意大利",
-			tagetMemberCount: 2
-		},
-		{
-			tagetMemberName: "荷兰",
-			tagetMemberCount: 2
-		},
-		{
-			tagetMemberName: "芬兰",
-			tagetMemberCount: 2
-		},
-		{
-			tagetMemberName: "瑞典",
-			tagetMemberCount: 2
-		},
-		{
-			tagetMemberName: "爱沙尼亚",
-			tagetMemberCount: 2
-		},
-		{
-			tagetMemberName: "新加坡",
-			tagetMemberCount: 2
-		},
-		{
-			tagetMemberName: "泰国",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "文莱",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "丹麦",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "克罗地亚",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "卢森堡",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "欧盟",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "阿根廷",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "越南",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "罗马尼亚",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "立陶宛",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "以色列",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "阿联酋",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "斐济",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "墨西哥",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "希腊",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "捷克",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "保加利亚",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "马耳他",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "匈牙利",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "波兰",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "瑞士",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "奥地利",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "俄罗斯",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "斯洛文尼亚",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "土耳其",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "西班牙",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "斯洛伐克",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "比利时",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "乌克兰",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "南非",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "拉脱维亚",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "马来西亚",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "爱尔兰",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "葡萄牙",
-			tagetMemberCount: 1
-		},
-		{
-			tagetMemberName: "菲律宾",
-			tagetMemberCount: 1
-		}
-	],
-	value: 7,
-	zhName: "澳大利亚"
-};
-// function initMap() {
-// 	chartDom.value = document.getElementById("echartsMap");
-
-// 	if (!chartDom.value) return;
-// 	if (myChart.value) myChart.value.dispose();
-// 	myChart.value = echarts.init(chartDom.value);
-// 	myChart.value.showLoading();
-
-// 	echarts.registerMap("world", mapJson);
-// 	createChart();
-// 	myChart.value.hideLoading();
-// }
-
 function initMap() {
 	chartDom.value = document.getElementById("echartsMap");
 	unionChartDom.value = document.getElementById("echartsUnionMap");

src/views/ZMOverView/components/fourSuppress/components/allUnion/index.vue

@@ -69,7 +69,13 @@
 								<div class="right-num">参与排华联盟</div>
 							</div>
 						</div>
-						<div class="item" v-for="(item, index) in countList" :key="index" @click="handleCountryClick(item)">
+						<div
+							class="item"
+							v-for="(item, index) in countList"
+							:key="index"
+							@click="handleCountryClick(item)"
+							:class="{ 'selected-country': currentSelectedCountry && currentSelectedCountry.name === item.name }"
+						>
 							<div class="item-left">
 								<img :src="item.image" alt />
 								<el-tooltip
@@ -298,7 +304,7 @@ import { link } from "d3";
 import { get, union, update } from "lodash";
 import ButtonList from "@/components/buttonList/buttonList.vue";
 import { fieldOptions, COLORS, countryNameMap, nameMap } from "@/views/ZMOverView/public.js";
-import { countryCoordMap } from "@/assets/json/countryCoordMap.js";
+import { countryCoordMap, convertAsiaCenterCoord } from "@/assets/json/countryCoordMap.js";
 
 const buttonList = ref([
 	{
@@ -589,8 +595,6 @@ function handleUnionItemClick(item) {
 	});
 }
 
-// ... existing code ...
-
 function createChart() {
 	if (!countryTotalList.value || countryTotalList.value.length === 0) {
 		console.error("No country data available");
@@ -622,7 +626,6 @@ function createChart() {
 			map: "world",
 			roam: true,
 			zoom: 1.2,
-			// center: [104.1954, 35.8617], // 设置地图中心点为中国
 			label: {
 				show: false
 			},
@@ -672,6 +675,8 @@ function createChart() {
 				type: "scatter",
 				coordinateSystem: "geo",
 				geoIndex: 0,
+
+				nameMap: nameMap,
 				data: processedData,
 				symbolSize: function (val) {
 					return Math.max(val.value / 5, 5);
@@ -689,20 +694,36 @@ function createChart() {
 		Array.isArray(currentSelectedCountry.value.memberRelation)
 	) {
 		const relations = currentSelectedCountry.value.memberRelation;
-		const sourceCountryName =
-			currentSelectedCountry.value.zhName ||
-			nameMap[currentSelectedCountry.value.name] ||
-			currentSelectedCountry.value.name;
 
-		const sourceCoord = countryCoordMap[sourceCountryName];
+		const sourceCountryZhName = currentSelectedCountry.value.zhName;
+		const sourceCountryEnName = currentSelectedCountry.value.name;
+
+		let sourceCoord = null;
+		let finalSourceName = "";
+
+		if (sourceCountryZhName && countryCoordMap[sourceCountryZhName]) {
+			const convertedCoord = convertAsiaCenterCoord(countryCoordMap[sourceCountryZhName]);
+			sourceCoord = convertedCoord;
+			finalSourceName = sourceCountryZhName;
+		} else if (sourceCountryEnName) {
+			const mappedName = nameMap[sourceCountryEnName] || countryNameMap[sourceCountryEnName];
+			const zhName = mappedName || sourceCountryEnName;
+			if (countryCoordMap[zhName]) {
+				const convertedCoord = convertAsiaCenterCoord(countryCoordMap[zhName]);
+				sourceCoord = convertedCoord;
+				finalSourceName = zhName;
+			}
+		}
 
 		if (!sourceCoord) {
-			console.warn(`无法找到源国家 ${sourceCountryName} 的坐标`);
+			console.warn(`无法找到源国家 ${sourceCountryZhName || sourceCountryEnName} 的坐标`);
 			return;
 		}
 
 		console.log("=== 源国家信息 ===");
-		console.log("源国家名称:", sourceCountryName);
+		console.log("源国家中文名:", sourceCountryZhName);
+		console.log("源国家英文名:", sourceCountryEnName);
+		console.log("最终使用的国家名称:", finalSourceName);
 		console.log("源国家坐标:", sourceCoord);
 		console.log("==================");
 
@@ -718,23 +739,46 @@ function createChart() {
 
 			validRelations.forEach(relation => {
 				const targetCountryZhName = relation.tagetMemberName;
-				const targetCoord = countryCoordMap[targetCountryZhName];
+
+				let targetCoord = null;
+				let finalTargetName = "";
+
+				if (countryCoordMap[targetCountryZhName]) {
+					const convertedCoord = convertAsiaCenterCoord(countryCoordMap[targetCountryZhName]);
+					targetCoord = convertedCoord;
+					finalTargetName = targetCountryZhName;
+				} else {
+					const possibleNames = [
+						targetCountryZhName,
+						nameMap[targetCountryZhName],
+						countryNameMap[targetCountryZhName]
+					];
+
+					for (const name of possibleNames) {
+						if (name && countryCoordMap[name]) {
+							const convertedCoord = convertAsiaCenterCoord(countryCoordMap[name]);
+							targetCoord = convertedCoord;
+							finalTargetName = name;
+							break;
+						}
+					}
+				}
 
 				if (targetCoord) {
-					console.log(`目标国家：${targetCountryZhName}, 坐标:`, targetCoord);
+					console.log(`目标国家：${targetCountryZhName}, 最终名称：${finalTargetName}, 坐标:`, targetCoord);
 
 					const ratio = relation.tagetMemberCount / maxRelationCount;
 					const r = Math.round(5 + (255 - 5) * ratio);
 					const g = Math.round(95 + (77 - 95) * ratio);
-					const b = Math.round(194 + (79 - 194) * ratio);
+					const b = Math.round(194 + (194 - 194) * ratio);
 					const lineColor = `rgb(${r}, ${g}, ${b})`;
 
 					const lineWidth = 1 + (relation.tagetMemberCount / maxRelationCount) * 7;
 
 					linesData.push({
-						name: `${sourceCountryName} - ${targetCountryZhName}`,
-						sourceName: sourceCountryName,
-						targetName: targetCountryZhName,
+						name: `${finalSourceName} - ${finalTargetName}`,
+						sourceName: finalSourceName,
+						targetName: finalTargetName,
 						coords: [sourceCoord, targetCoord],
 						value: relation.tagetMemberCount,
 						lineStyle: {
@@ -745,7 +789,7 @@ function createChart() {
 					});
 
 					targetPoints.push({
-						name: targetCountryZhName,
+						name: finalTargetName,
 						value: targetCoord,
 						symbolSize: 8 + (relation.tagetMemberCount / maxRelationCount) * 7,
 						itemStyle: {
@@ -753,7 +797,7 @@ function createChart() {
 						}
 					});
 				} else {
-					console.warn(`无法找到目标国家 ${targetCountryZhName} 的坐标`);
+					console.warn(`无法找到目标国家 ${targetCountryZhName} 的坐标，尝试的名称都不匹配`);
 				}
 			});
 
@@ -776,7 +820,7 @@ function createChart() {
 				});
 
 				targetPoints.unshift({
-					name: sourceCountryName,
+					name: finalSourceName,
 					value: sourceCoord,
 					symbolSize: 15,
 					itemStyle: {
@@ -803,44 +847,24 @@ function createChart() {
 	}
 }
 
-// ... existing code ...
-
 // 处理国家列表项点击事件
-// 在 handleCountryClick 中添加调试代码
 const handleCountryClick = country => {
-	currentSelectedCountry.value = country;
+	if (currentSelectedCountry.value?.name === country.name) {
+		// currentSelectedCountry.value = null;
+		return;
+	} else {
+		currentSelectedCountry.value = country;
+	}
 	console.log("=== 点击的国家信息 ===");
 	console.log("国家中文名:", country.zhName);
 	console.log("国家英文名:", country.name);
-
-	// 检查坐标映射
-	const coordFromZhName = countryCoordMap[country.zhName];
-	const coordFromEnName = countryCoordMap[country.name];
-	const coordFromMappedName = countryCoordMap[nameMap[country.name]];
-
-	console.log("通过中文名获取坐标:", coordFromZhName);
-	console.log("通过英文名获取坐标:", coordFromEnName);
-	console.log("通过映射名获取坐标:", coordFromMappedName);
-	console.log("=====================");
+	console.log("联盟关系数据:", country.memberRelation);
 
 	nextTick(() => {
 		createChart();
 	});
 };
 
-// function initMap() {
-// 	chartDom.value = document.getElementById("echartsMap");
-
-// 	if (!chartDom.value) return;
-// 	if (myChart.value) myChart.value.dispose();
-// 	myChart.value = echarts.init(chartDom.value);
-// 	myChart.value.showLoading();
-
-// 	echarts.registerMap("world", mapJson);
-// 	createChart();
-// 	myChart.value.hideLoading();
-// }
-
 function initMap() {
 	chartDom.value = document.getElementById("echartsMap");
 	unionChartDom.value = document.getElementById("echartsUnionMap");
@@ -1489,22 +1513,21 @@ const getPredictionList = async () => {
 };
 
 // 获取排华联盟数量
+
 const getUnionCountList = async () => {
 	try {
 		const res = await getUnionCount({ page: 1, pageSize: 100, domainId: selectedFieldForLatest.value });
 		if (res && res.code === 200) {
 			console.log("----getUnionCountList", res.data);
-			// 处理一下数据
 
 			countryTotalList.value = res.data.content
 				.sort((a, b) => b.count - a.count)
 				.map(item => {
 					item.value = item.count;
 					item.zhName = item.name;
-					// 1. 尝试直接从映射表获取
+
 					let mappedName = countryNameMap[item.ename];
 
-					// 2. 如果映射表没有，尝试简单的模糊匹配
 					if (!mappedName && item.ename) {
 						let tempName = item.ename
 							.replace(/Republic of /i, "")
@@ -1517,7 +1540,8 @@ const getUnionCountList = async () => {
 						mappedName = tempName;
 					}
 
-					item.name = mappedName || item.ename;
+					item.name = nameMap[item.ename] || mappedName || item.ename;
+					item.originalEnName = item.ename;
 					return item;
 				});
 
@@ -1878,11 +1902,15 @@ watch(activeDate, async () => {
 					padding: 4px 12px 4px 12px;
 					box-sizing: border-box;
 					// border: 1px solid rgba(234, 236, 238, 1);
-					border-radius: 50px;
+					// border-radius: 50px;
 					/* 业务系统/模态背景模糊 */
 					backdrop-filter: blur(30px);
 					background: rgba(255, 255, 255, 0.65);
 
+					&.selected-country {
+						background-color: rgb(246, 250, 255) !important;
+					}
+
 					.item-left {
 						display: flex;
 						align-items: center;