Skip to content

R
risk-monitor
提交 43a8a506 authored 作者: yanpeng's avatar yanpeng
浏览文件
操作

map修改

上级 4090962e
显示空白字符变更
内嵌 并排
正在显示 包含 131 行增加 和 293 行删除
src/assets/json/countryCoordMap.js
浏览文件 @ 43a8a506
......@@ -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
浏览文件 @ 43a8a506
......@@ -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
浏览文件 @ 43a8a506
......@@ -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 => {
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;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论