generated from dellevin/template
724 lines
25 KiB
JavaScript
724 lines
25 KiB
JavaScript
/**
|
||
* ECharts 地图足迹模块 (支持钻取功能 - 点击省份查看下一级, 点击按钮返回)
|
||
*/
|
||
const MapFootprintModule = (() => {
|
||
let myChart = null; // ECharts 实例
|
||
let currentMapLevel = "country"; // 当前地图层级 ('country', 'province')
|
||
let currentProvinceCode = null; // 当前显示的省份编码 (如果有的话)
|
||
|
||
// --- 配置 ---
|
||
const COUNTRY_MAP_NAME = "china_custom";
|
||
const COUNTRY_GEOJSON_PATH = "./static/js/echarts/china.geojson";
|
||
const PROVINCE_GEOJSON_BASE_PATH = "./static/js/echarts/province/"; // 假设省份 GeoJSON 存放在这个目录
|
||
|
||
// --- 数据 ---
|
||
// 注意：这里的坐标可能需要根据你实际访问的城市进行微调
|
||
const visitedPlaces = [
|
||
{
|
||
name: "济南市",
|
||
province: "山东省",
|
||
value: [117.024961, 36.682788],
|
||
desc:'正在这里努力打工！',
|
||
imgList: [
|
||
"./static/img/location/jinan/1.jpg",
|
||
"./static/img/location/jinan/2.jpg",
|
||
"./static/img/location/jinan/3.jpg",
|
||
"./static/img/location/jinan/4.jpg",
|
||
],
|
||
},
|
||
{
|
||
name: "青岛市",
|
||
value: [120.384423, 36.065918],
|
||
province: "山东省" ,
|
||
desc:'这是我人生第一次看见海，我永远不会忘记。同样的还有你们。',
|
||
imgList: [
|
||
"./static/img/location/qingdao/1.jpg",
|
||
"./static/img/location/qingdao/2.jpg",
|
||
"./static/img/location/qingdao/3.jpg",
|
||
],
|
||
},
|
||
{
|
||
name: "淄博市",
|
||
desc:'也算是吃上淄博烧烤了。',
|
||
value: [118.055915, 36.813547],
|
||
province: "山东省"
|
||
},
|
||
{
|
||
name: "潍坊市",
|
||
desc:'风筝节！不错不错！',
|
||
value: [119.162775, 36.705759],
|
||
province: "山东省"
|
||
},
|
||
|
||
{
|
||
name: "保定市",
|
||
desc:'大学四年，那是最自由的时候。',
|
||
value: [115.482331, 38.867657],
|
||
province: "河北省"
|
||
},
|
||
{ name: "衡水市",
|
||
desc: '生我养我的地方，也是埋葬我的地方',
|
||
value: [115.665996, 37.739574], province: "河北省" },
|
||
{ name: "沧州市",
|
||
desc: 'hei ！你一定要幸福啊！带着我们几个的祝福，走下去啊！',
|
||
value: [116.838581, 38.308094], province: "河北省" },
|
||
{
|
||
name: "廊坊市",
|
||
value: [116.704374, 39.523949],
|
||
province: "河北省" ,
|
||
desc:'五一寻友，一起夜间烧烤，宿醉到天明',
|
||
imgList: [
|
||
"./static/img/location/langfang/1.jpg",
|
||
"./static/img/location/langfang/2.jpg",
|
||
"./static/img/location/langfang/3.jpg",
|
||
],
|
||
},
|
||
{ name: "石家庄市",
|
||
desc: '我曾经来过。',
|
||
value: [114.514891, 38.042309], province: "河北省" },
|
||
{ name: "张家口市",
|
||
desc: '三个准大学生，傻傻的做七八个小时的绿皮火车来到这里，只为某人一份未知的爱情。',
|
||
value: [114.886714, 40.811943], province: "河北省" },
|
||
|
||
{ name: "洛阳市",
|
||
province: "河南省",
|
||
value: [112.454174, 34.618139],
|
||
desc:'群山巍峨，银装素裹，不虚此行',
|
||
imgList: [
|
||
"./static/img/location/luoyang/1.jpg",
|
||
"./static/img/location/luoyang/2.jpg",
|
||
"./static/img/location/luoyang/3.jpg",
|
||
],
|
||
},
|
||
|
||
{ name: "昌平区", value: [116.235904, 40.218086], province: "北京市" },
|
||
|
||
{ name: "杭州市",
|
||
desc: '细雨朦胧的西湖才是最美的。',
|
||
value: [120.153576, 30.287459], province: "浙江省" },
|
||
|
||
{ name: "苏州市", value: [120.585316, 31.298886], province: "江苏省" },
|
||
{ name: "扬州市", value: [119.421003, 32.393159], province: "江苏省" },
|
||
{ name: "镇江市", value: [119.452753, 32.204402], province: "江苏省" },
|
||
{ name: "南京市", value: [118.796877, 32.060255], province: "江苏省" },
|
||
{ name: "无锡市", value: [120.311987, 31.49092], province: "江苏省" },
|
||
];
|
||
|
||
// 省份名称到其 GeoJSON 文件名的映射 (需要根据你的文件名调整)
|
||
const provinceNameToGeoFile = {
|
||
北京市: "北京市.geojson",
|
||
山东省: "山东省.geojson",
|
||
河北省: "河北省.geojson",
|
||
河南省: "河南省.geojson",
|
||
浙江省: "浙江省.geojson",
|
||
江苏省: "江苏省.geojson",
|
||
};
|
||
|
||
// --- 工具函数 ---
|
||
|
||
/**
|
||
* 根据省份中文名获取其对应的 GeoJSON 文件完整路径
|
||
* @param {string} provinceName - 省份中文名
|
||
* @returns {string|null} - 文件路径或 null
|
||
*/
|
||
const getProvinceGeoPath = (provinceName) => {
|
||
const fileName = provinceNameToGeoFile[provinceName];
|
||
if (fileName) {
|
||
return ` ${PROVINCE_GEOJSON_BASE_PATH}${fileName}`;
|
||
}
|
||
console.warn(`未找到省份 " ${provinceName}" 对应的 GeoJSON 文件。`);
|
||
return null;
|
||
};
|
||
|
||
/**
|
||
* 根据地图层级和可选的省份编码生成 ECharts 配置
|
||
* @param {string} level - 地图层级 ('country' or 'province')
|
||
* @param {string} [provinceCode] - 省份编码 (当 level='province' 时使用)
|
||
* @returns {Object} - ECharts 配置对象
|
||
*/
|
||
const getEChartsOption = (level, provinceCode = null) => {
|
||
let geoMapName, roamSetting, zoomLevel, centerCoord, titleText;
|
||
let filteredVisitedPlaces = []; // 用于过滤足迹点
|
||
let seriesConfig = []; // 存储所有 series
|
||
let visualMapConfig = null; // 存储 visualMap 配置 (仅省份需要)
|
||
|
||
if (level === "country") {
|
||
geoMapName = COUNTRY_MAP_NAME;
|
||
roamSetting = false; // 启用缩放和平移
|
||
zoomLevel = 1.1;
|
||
centerCoord = [104.06, 32]; // 中国中心
|
||
titleText = "";
|
||
filteredVisitedPlaces = visitedPlaces; // 显示所有足迹
|
||
|
||
// 国家地图：保持原有的 geo 和 scatter 配置
|
||
seriesConfig = [
|
||
{
|
||
name: "足迹",
|
||
type: "scatter",
|
||
coordinateSystem: "geo",
|
||
data: filteredVisitedPlaces,
|
||
symbol: "pin",
|
||
symbolSize: 18,
|
||
itemStyle: {
|
||
color: "#FF6B6B",
|
||
borderColor: "#fff",
|
||
borderWidth: 1,
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
color: "#dd4444",
|
||
},
|
||
},
|
||
tooltip: {
|
||
// --- 核心修改：Formatter 函数 ---
|
||
formatter: function (params) {
|
||
// 确保 params.data 存在
|
||
if (!params.data) {
|
||
return params.name || "未知地点"; // 如果没有数据，至少显示名称或默认文字
|
||
}
|
||
|
||
// 获取地点名称和坐标
|
||
const name = params.data.name || "未知地点";
|
||
const longitude =
|
||
params.data.value && params.data.value[0]
|
||
? params.data.value[0].toFixed(4)
|
||
: "N/A";
|
||
const latitude =
|
||
params.data.value && params.data.value[1]
|
||
? params.data.value[1].toFixed(4)
|
||
: "N/A";
|
||
|
||
// 初始化 tooltip 内容字符串
|
||
let tooltipHtml = `${name}<br/>坐标: [${longitude}, ${latitude}]<br/>`; // 添加一些换行和分割
|
||
// 如果还需要显示其他描述信息（例如可以从 params.data 中获取），可以在此处添加
|
||
const description = params.data.desc || "博主也不知道说啥了。。。";
|
||
if (description) {
|
||
tooltipHtml += `<strong>描述: </strong>${description}<br/>`;
|
||
}
|
||
// 获取图片列表
|
||
const imageList = params.data.imgList; // 直接从数据对象获取 imgList
|
||
|
||
// 检查是否有图片列表且不为空
|
||
if (Array.isArray(imageList) && imageList.length > 0) {
|
||
// 添加标题
|
||
tooltipHtml += "<strong>照片: </strong><br/>";
|
||
// 遍历图片列表，生成 HTML 图像标签
|
||
imageList.forEach((imgSrc) => {
|
||
tooltipHtml += `<img src="${imgSrc}" alt="${name} 图片" style="max-width: 150px; max-height: 100px; margin: 5px; border-radius: 4px;" onerror="this.style.display='none';"/>`;
|
||
});
|
||
} else {
|
||
// 如果没有图片或 imgList 不存在/为空，则显示提示
|
||
tooltipHtml += "<strong>照片: </strong>看来博主不是很爱拍照~";
|
||
}
|
||
|
||
return tooltipHtml; // 返回构建好的 HTML 字符串
|
||
},
|
||
},
|
||
},
|
||
];
|
||
} else if (level === "province" && provinceCode) {
|
||
geoMapName = `province_ ${provinceCode}`; // 为省份地图创建唯一名称
|
||
roamSetting = false; // 省份地图也启用缩放平移
|
||
zoomLevel = 1.0; // 可以根据需要调整
|
||
// 可以根据省份动态设置中心点，这里暂时固定
|
||
// centerCoord = [118.5, 36.5]; // 示例：山东中心
|
||
// 从 visitedPlaces 中找一个城市作为中心点，如果没有，则使用默认
|
||
const firstPlaceInProvince = visitedPlaces.find(
|
||
(place) => place.province === provinceCode,
|
||
);
|
||
centerCoord = firstPlaceInProvince
|
||
? firstPlaceInProvince.value
|
||
: [118.5, 36.5];
|
||
|
||
if (provinceCode == "山东省") {
|
||
centerCoord = [118.5, 36.5];
|
||
} else if (provinceCode == "河北省") {
|
||
centerCoord = [115.482331, 40];
|
||
} else if (provinceCode == "浙江省") {
|
||
centerCoord = [120.153576, 29.4];
|
||
} else if (provinceCode == "江苏省") {
|
||
centerCoord = [119, 32.9];
|
||
} else if (provinceCode == "河南省") {
|
||
centerCoord = [114, 34];
|
||
} else if (provinceCode == "北京市") {
|
||
centerCoord = [116.407395, 40.3];
|
||
}
|
||
|
||
titleText = ` ${provinceCode} - “印迹”`;
|
||
// 过滤出属于当前省份的足迹点
|
||
filteredVisitedPlaces = visitedPlaces.filter(
|
||
(place) => place.province === provinceCode,
|
||
);
|
||
// 构造 map 系列的数据，访问过的城市 value 设为 1，未访问的可以设为 0
|
||
// 为了实现高亮，我们只需要列出访问过的城市即可，未访问的城市会使用默认颜色
|
||
const provinceMapData = filteredVisitedPlaces.map((city) => ({
|
||
name: city.name,
|
||
desc: city.desc || "",
|
||
imgList: city.imgList || [],
|
||
value: 1, // 值为 1 表示访问过，用于 visualMap 区分
|
||
}));
|
||
|
||
// --- 配置 visualMap ---
|
||
visualMapConfig = {
|
||
show: false, // 通常不显示 visualMap 组件条
|
||
min: 0, // 最小值
|
||
max: 1, // 最大值
|
||
inRange: {
|
||
color: ["#FF6B6B"], // 高亮颜色 (访问过的城市)
|
||
},
|
||
calculable: true,
|
||
};
|
||
|
||
// --- 创建省份地图系列 (用于高亮城市) ---
|
||
const provinceMapSeries = {
|
||
// name: "访问过的城市",
|
||
type: "map",
|
||
map: geoMapName, // 指向当前省份的 GeoJSON
|
||
roam: roamSetting,
|
||
zoom: zoomLevel,
|
||
center: centerCoord,
|
||
silent: false, // 设置为 false，允许响应鼠标事件以显示 tooltip
|
||
label: {
|
||
show: true, // 可以选择是否显示城市名称标签
|
||
color: "#000", // 标签颜色
|
||
fontSize: 10,
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
// 悬停时标签效果
|
||
show: true,
|
||
fontWeight: "bold",
|
||
},
|
||
itemStyle: {
|
||
// 悬停时区域效果
|
||
opacity: 0.8, // 降低透明度
|
||
// areaColor: '#ffcccc', // 也可以设置悬停颜色，但会受 visualMap 影响
|
||
},
|
||
},
|
||
|
||
// 数据驱动颜色
|
||
data: provinceMapData,
|
||
// 默认样式（未在 data 中定义的区域将使用此样式）
|
||
itemStyle: {
|
||
areaColor: "#eef2ff", // 未访问区域的默认颜色
|
||
borderColor: "#333",
|
||
borderWidth: 0.5,
|
||
},
|
||
// 添加 tooltip 配置到 series 级别
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function(params) {
|
||
// 检查是否有数据
|
||
if (!params.data) {
|
||
return params.name || "未知城市";
|
||
}
|
||
|
||
const cityName = params.data.name || params.name || "未知城市";
|
||
let tooltipHtml = `<div style="font-weight: bold; font-size: 14px; margin-bottom: 8px;">${cityName}</div>`;
|
||
|
||
// 如果这个城市在 visitedPlaces 中有记录
|
||
const placeData = visitedPlaces.find(p => p.name === cityName && p.province === provinceCode);
|
||
if (placeData) {
|
||
// 显示描述
|
||
const description = placeData.desc || "暂无描述";
|
||
tooltipHtml += `<div style="margin-bottom: 8px; color: #666; font-size: 12px;">${description}</div>`;
|
||
|
||
// 显示图片
|
||
if (placeData.imgList && placeData.imgList.length > 0) {
|
||
tooltipHtml += `<div style="display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px;">`;
|
||
placeData.imgList.forEach((imgSrc) => {
|
||
tooltipHtml += `
|
||
<img src="${imgSrc}"
|
||
alt="${cityName}"
|
||
style="width: 60px; height: 60px; object-fit: cover;
|
||
border-radius: 4px; border: 1px solid #ddd;" />
|
||
`;
|
||
});
|
||
tooltipHtml += `</div>`;
|
||
}
|
||
}
|
||
|
||
return tooltipHtml;
|
||
}
|
||
}
|
||
};
|
||
|
||
// 将省份地图系列和 geo 组件添加到配置中
|
||
seriesConfig = [provinceMapSeries];
|
||
// geo 配置也需要包含省份 geo
|
||
// 注意：在返回全国地图时，需要重新设置 geo 为国家地图
|
||
// 这个 geo 组件会覆盖全局的 geo 配置
|
||
// 我们需要将 geo 配置移动到外面处理
|
||
} else {
|
||
console.error("无效的地图层级或省份代码");
|
||
return {}; // 返回空配置
|
||
}
|
||
|
||
// 构建最终的 option
|
||
const option = {
|
||
title: {
|
||
text: titleText,
|
||
subtext: "读万卷书，不如行万里路。见多才会识广～",
|
||
left: "center",
|
||
textStyle: {
|
||
fontSize: 18,
|
||
},
|
||
subtextStyle: {
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||
borderColor: '#ddd',
|
||
borderWidth: 1,
|
||
textStyle: {
|
||
color: '#333'
|
||
},
|
||
extraCssText: 'box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 6px;'
|
||
},
|
||
// geo 组件配置
|
||
geo:
|
||
level === "country"
|
||
? {
|
||
map: geoMapName,
|
||
roam: roamSetting,
|
||
zoom: zoomLevel,
|
||
center: centerCoord,
|
||
emphasis: {
|
||
itemStyle: {
|
||
areaColor: "#f0f0f0", // geo 强调样式，当没有 series 时生效
|
||
borderColor: "#409EFF",
|
||
borderWidth: 1,
|
||
},
|
||
},
|
||
itemStyle: {
|
||
areaColor: "#eef2ff", // geo 默认样式，当没有 series 时生效
|
||
borderColor: "#333",
|
||
},
|
||
}
|
||
: {
|
||
// 省份地图的 geo 配置
|
||
id: "province_geo_for_clicks", // 给 geo 组件一个 ID 便于识别
|
||
map: geoMapName,
|
||
roam: roamSetting,
|
||
zoom: zoomLevel,
|
||
center: centerCoord,
|
||
silent: false, // 设置为 false，允许 geo 组件响应点击
|
||
// 隐藏 geo 组件的视觉表现，因为高亮由 series 控制
|
||
itemStyle: {
|
||
areaColor: "transparent", // 透明填充
|
||
borderColor: "transparent", // 透明边框
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
areaColor: "rgba(64, 158, 255, 0.2)", // 可选：点击时的视觉反馈
|
||
borderColor: "transparent",
|
||
},
|
||
},
|
||
},
|
||
series: seriesConfig, // 使用构建好的 series 配置
|
||
};
|
||
|
||
// 如果当前是省份地图，添加 visualMap 配置
|
||
if (visualMapConfig) {
|
||
option.visualMap = visualMapConfig;
|
||
}
|
||
|
||
return option;
|
||
};
|
||
|
||
/**
|
||
* 加载并注册指定路径的 GeoJSON 地图数据
|
||
* @param {string} path - GeoJSON 文件路径
|
||
* @param {string} mapName - 注册到 ECharts 的地图名称
|
||
* @returns {Promise<boolean>} - 成功或失败
|
||
*/
|
||
const loadAndRegisterSingleMap = async (path, mapName) => {
|
||
try {
|
||
console.log(`正在加载 GeoJSON: ${path}`);
|
||
const response = await fetch(path);
|
||
if (!response.ok) {
|
||
throw new Error(
|
||
`加载 GeoJSON 失败: ${response.status} ${response.statusText}`,
|
||
);
|
||
}
|
||
const geoJsonData = await response.json();
|
||
|
||
// 注册地图
|
||
echarts.registerMap(mapName, geoJsonData);
|
||
console.log(`GeoJSON 地图数据 ${mapName} 加载并注册成功。`);
|
||
return true;
|
||
} catch (error) {
|
||
console.error("加载或注册 GeoJSON 地图时出错:", error);
|
||
return false;
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 切换到指定的地图层级和区域
|
||
* @param {string} targetLevel - 目标层级 ('country' or 'province')
|
||
* @param {string} [targetProvinceCode] - 目标省份编码 (当 targetLevel='province' 时使用)
|
||
*/
|
||
const switchMap = async (targetLevel, targetProvinceCode = null) => {
|
||
if (!myChart) {
|
||
console.error("ECharts 实例不存在，无法切换地图。");
|
||
return;
|
||
}
|
||
|
||
let mapNameToUse, geoPathToLoad;
|
||
|
||
if (targetLevel === "country") {
|
||
mapNameToUse = COUNTRY_MAP_NAME;
|
||
geoPathToLoad = COUNTRY_GEOJSON_PATH;
|
||
currentMapLevel = "country";
|
||
currentProvinceCode = null;
|
||
} else if (targetLevel === "province" && targetProvinceCode) {
|
||
mapNameToUse = `province_ ${targetProvinceCode}`;
|
||
const path = getProvinceGeoPath(targetProvinceCode);
|
||
if (!path) {
|
||
console.error(
|
||
`无法切换到省份 ${targetProvinceCode}: 找不到对应的 GeoJSON 文件。`,
|
||
);
|
||
return;
|
||
}
|
||
geoPathToLoad = path;
|
||
currentMapLevel = "province";
|
||
currentProvinceCode = targetProvinceCode;
|
||
} else {
|
||
console.error("无效的目标层级或省份代码。");
|
||
return;
|
||
}
|
||
|
||
// 尝试加载并注册目标地图数据
|
||
const loadSuccess = await loadAndRegisterSingleMap(
|
||
geoPathToLoad,
|
||
mapNameToUse,
|
||
);
|
||
if (!loadSuccess) {
|
||
console.error(`切换地图失败：无法加载 ${geoPathToLoad}`);
|
||
return;
|
||
}
|
||
|
||
// 生成新配置并应用
|
||
const newOption = getEChartsOption(targetLevel, targetProvinceCode);
|
||
myChart.setOption(newOption, true); // 使用 notMerge=true 确保完全替换
|
||
|
||
// 更新返回按钮的可见性
|
||
updateBackButtonVisibility();
|
||
};
|
||
|
||
// --- 新增函数：管理返回按钮 ---
|
||
|
||
/**
|
||
* 获取返回按钮的DOM元素
|
||
* @returns {HTMLElement|null}
|
||
*/
|
||
const getBackButtonElement = () => {
|
||
// 假设按钮ID是固定的，可以根据需要调整
|
||
return document.getElementById("map-back-button");
|
||
};
|
||
|
||
/**
|
||
* 创建返回按钮并将其添加到图表容器中
|
||
* @param {HTMLElement} chartContainer - ECharts 图表容器
|
||
*/
|
||
const createBackButton = (chartContainer) => {
|
||
const button = document.createElement("button");
|
||
button.id = "map-back-button";
|
||
button.textContent = "⬅返回全国地图";
|
||
button.style.position = "absolute";
|
||
button.style.top = "50px";
|
||
button.style.left = "10px";
|
||
button.style.zIndex = 1000; // 确保按钮在图表之上
|
||
button.style.padding = "2px 5px"; // 减少内边距以更接近纯文本
|
||
button.style.fontSize = "14px"; // 根据需要调整字体大小
|
||
button.style.cursor = "pointer";
|
||
button.style.border = "none"; // 去掉边框
|
||
button.style.backgroundColor = "transparent"; // 设置背景透明
|
||
button.style.display = "none"; // 初始隐藏
|
||
|
||
button.onclick = () => {
|
||
console.log("点击了返回按钮。");
|
||
switchMap("country");
|
||
};
|
||
|
||
chartContainer.appendChild(button);
|
||
};
|
||
|
||
/**
|
||
* 根据当前地图层级更新返回按钮的可见性
|
||
*/
|
||
const updateBackButtonVisibility = () => {
|
||
const button = getBackButtonElement();
|
||
if (!button) {
|
||
console.warn("返回按钮 DOM 元素未找到，无法更新其可见性。");
|
||
return;
|
||
}
|
||
// 当前在省份地图时显示按钮，否则隐藏
|
||
button.style.display = currentMapLevel === "province" ? "block" : "none";
|
||
};
|
||
|
||
// --- /新增函数 ---
|
||
/**
|
||
* 初始化 ECharts 地图 (初始加载国家地图)
|
||
* @param {HTMLElement} container - 图表容器DOM元素
|
||
*/
|
||
const initEChartsMap = async (container) => {
|
||
if (!container) {
|
||
console.error("地图容器未找到");
|
||
return;
|
||
}
|
||
|
||
// 初始化 ECharts 实例
|
||
myChart = echarts.init(container);
|
||
|
||
// 创建并添加返回按钮
|
||
createBackButton(container);
|
||
|
||
// 首先加载并注册国家地图
|
||
const countryLoadSuccess = await loadAndRegisterSingleMap(
|
||
COUNTRY_GEOJSON_PATH,
|
||
COUNTRY_MAP_NAME,
|
||
);
|
||
if (!countryLoadSuccess) {
|
||
console.error("初始化失败：无法加载国家 GeoJSON。");
|
||
return; // 或者显示错误信息给用户
|
||
}
|
||
|
||
// 应用初始配置 (国家地图)
|
||
const initialOption = getEChartsOption("country");
|
||
myChart.setOption(initialOption);
|
||
|
||
// --- 添加事件监听 ---
|
||
|
||
// 监听 geo 组件的点击事件
|
||
// 关键修改：现在 geo 组件在省份地图时也存在，并且不静默
|
||
myChart.on("click", "geo", function (params) {
|
||
console.log("Geo component clicked:", params.componentId, params.name); // Debug log
|
||
if (currentMapLevel === "country") {
|
||
// 当前是国家地图，点击省份则进入
|
||
const clickedProvinceName = params.name;
|
||
console.log(`点击了省份: ${clickedProvinceName}`);
|
||
|
||
// 尝试获取省份对应的 GeoJSON 文件名
|
||
const fileName = Object.keys(provinceNameToGeoFile).find(
|
||
(key) => key === clickedProvinceName,
|
||
);
|
||
console.log(fileName);
|
||
if (fileName) {
|
||
const provinceCode = fileName; // 这里假设文件名就是省份简称
|
||
// console.log(`即将切换到省份: ${provinceCode}`);
|
||
switchMap("province", provinceCode);
|
||
} else {
|
||
showModal();
|
||
console.log(`未配置省份 " ${clickedProvinceName}" 的详细地图。`);
|
||
}
|
||
} else if (
|
||
currentMapLevel === "province" &&
|
||
params.componentId === "province_geo_for_clicks"
|
||
) {
|
||
// 当前是省份地图，且点击的是省份 geo 组件，则返回全国地图
|
||
console.log("点击省份 geo 组件，返回全国地图");
|
||
switchMap("country");
|
||
}
|
||
// 如果在省份地图上点击，但不是省份 geo 组件（理论上不会发生，因为 series 是 silent 的），可以有其他逻辑，比如不处理
|
||
});
|
||
|
||
// 监听窗口大小变化，自动适配
|
||
window.addEventListener("resize", function () {
|
||
if (myChart) {
|
||
myChart.resize();
|
||
}
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 获取地图容器ID
|
||
* @returns {string}
|
||
*/
|
||
const getMapContainerId = () => {
|
||
return "echarts-map-container";
|
||
};
|
||
|
||
/**
|
||
* 渲染 ECharts 地图内容到指定容器
|
||
* @param {HTMLElement} contentDiv - 标签页的内容容器
|
||
*/
|
||
const renderMap = (contentDiv) => {
|
||
// 清空内容区域
|
||
// contentDiv.innerHTML = '';
|
||
// 创建地图容器
|
||
const mapDiv = document.createElement("div");
|
||
mapDiv.id = getMapContainerId();
|
||
mapDiv.style.width = "100%";
|
||
mapDiv.style.height = "90vh";
|
||
mapDiv.style.marginTop = "20px";
|
||
mapDiv.style.position = "relative";
|
||
contentDiv.appendChild(mapDiv);
|
||
|
||
// 加载 GeoJSON 并初始化地图
|
||
setTimeout(async () => {
|
||
const container = document.getElementById(getMapContainerId());
|
||
if (container) {
|
||
await initEChartsMap(container); // 使用 await 确保初始化完成
|
||
} else {
|
||
console.error("地图容器 DOM 元素未找到，无法初始化图表。");
|
||
}
|
||
}, 100);
|
||
};
|
||
|
||
/**
|
||
* 销毁 ECharts 实例 (可选，用于性能优化或切换时清理)
|
||
*/
|
||
const destroyMap = () => {
|
||
if (myChart) {
|
||
myChart.dispose();
|
||
myChart = null;
|
||
console.log("ECharts 地图已销毁");
|
||
// 可以考虑移除返回按钮
|
||
const button = getBackButtonElement();
|
||
if (button && button.parentNode) {
|
||
button.parentNode.removeChild(button);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 返回公共方法
|
||
return {
|
||
renderMap,
|
||
destroyMap,
|
||
};
|
||
})();
|
||
|
||
function showModal() {
|
||
document.getElementById("modalOverlay").style.display = "block";
|
||
}
|
||
|
||
const closeModal = () => {
|
||
document.getElementById("modalOverlay").style.display = "none";
|
||
};
|
||
// --- 页面加载完成后执行 ---
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
// 获取遮罩层和内容区域元素
|
||
const modalOverlay = document.getElementById("modalOverlay");
|
||
const modalContent = document.getElementById("modalContent");
|
||
|
||
// 定义点击遮罩层的处理函数
|
||
function handleOverlayClick(event) {
|
||
// 检查点击的目标是否是遮罩层本身（而不是它的子元素，比如里面的 p 或 button）
|
||
if (event.target === modalOverlay) {
|
||
closeModal(); // 如果是，就关闭弹窗
|
||
}
|
||
}
|
||
|
||
// 为遮罩层添加点击事件监听器
|
||
modalOverlay.addEventListener("click", handleOverlayClick);
|
||
|
||
// --- 示例：如何显示弹窗 (供参考) ---
|
||
// window.showModal = function() {
|
||
// modalOverlay.style.display = 'block';
|
||
// // 注意：如果每次都显示，事件监听器只需要添加一次，或者在这里检查是否已存在
|
||
// }
|
||
});
|