<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="沉浸式体验刘禹锡一生的行迹与诗歌创作历程">
<title>诗豪刘禹锡一生行迹 - 沉浸式文化体验</title>
<link rel="stylesheet" href="leaflet.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
background-color: #f5f5f5;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.95);
padding: 15px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #333;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
backdrop-filter: blur(5px);
}
#mapLoader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
z-index: 9999;
transition: opacity 0.5s ease-out;
}
.loader-spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #8B4513;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#map {
width: 100vw;
height: 100vh;
position: relative;
margin-top: 60px;
}
/* 信息卡片样式 - 优化透明度和布局以避免遮挡路径 */
.info-card {
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%) translateY(100%);
width: 80%;
max-width: 1200px;
background-color: rgba(255, 255, 255, 0.5); /* 增加透明度到50% */
backdrop-filter: blur(12px);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
transition: transform 0.5s ease, max-height 0.5s ease, opacity 0.5s ease;
z-index: 900;
display: flex;
flex-direction: row;
overflow: hidden;
cursor: pointer;
opacity: 0;
}
.info-card.active {
opacity: 1;
}
/* 折叠按钮样式 */
.collapse-btn {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 20px;
background-color: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
}
.collapse-btn:hover {
background-color: rgba(255, 255, 255, 1);
}
.collapse-btn::before {
content: '⌄';
transition: transform 0.3s ease;
}
.info-card.collapsed .collapse-btn::before {
transform: rotate(180deg);
}
/* 折叠状态的信息卡片 */
.info-card.collapsed {
max-height: 100px;
}
.info-card.collapsed .info-content {
max-height: 60px;
}
/* 马标志样式 */
.horse-marker {
font-size: 40px !important; /* 增加马标志的尺寸，使其更加醒目 */
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
transform-origin: center center;
transition: transform 0.3s ease;
animation: horseFloat 3s ease-in-out infinite;
}
@keyframes horseFloat {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
.horse-marker:hover {
transform: scale(1.3) rotate(5deg);
}
.info-card.active {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
/* 独立的图片区域 */
.info-image {
width: 25%;
min-width: 150px;
height: 300px; /* 增加图片高度 */
object-fit: cover;
position: relative;
border-radius: 15px 0 0 15px;
transition: filter 0.3s ease;
}
.info-image:hover {
filter: brightness(1.1);
}
/* 图片加载动画 */
.image-loading::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
to {
left: 100%;
}
}
/* 独立的内容区域 */
.info-content {
padding: 20px;
width: 75%;
overflow-y: auto;
max-height: 300px;
position: relative;
transition: max-height 0.5s ease;
}
/* 内容滚动条样式优化 */
.info-content::-webkit-scrollbar {
width: 8px;
}
.info-content::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.info-content::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.info-content::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
/* 滚动内容容器 */
.scroll-container {
height: 100%;
overflow-y: auto;
}
/* 滚动控制按钮 */
.scroll-control {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
gap: 5px;
}
.scroll-btn {
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
background-color: rgba(255, 255, 255, 0.8);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: background-color 0.3s;
}
.scroll-btn:hover {
background-color: rgba(255, 255, 255, 1);
}
.info-title {
font-size: 36px;
margin-bottom: 12px;
color: #333;
text-align: center;
font-weight: bold;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
letter-spacing: 0.5px;
}
.info-year {
font-size: 16px;
color: #666;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
text-align: center;
font-style: italic;
}
.info-description {
margin-bottom: 20px;
line-height: 2.0;
font-size: 25px;
color: #333;
text-indent: 2em;
letter-spacing: 0.8px;
}
/* 优化诗句样式 */
.info-poem {
color: #8B4513;
margin-bottom: 15px;
padding: 15px;
background-color: #FFF8DC;
border-radius: 10px;
font-style: italic;
border-left: 4px solid #8B4513;
box-shadow: 0 2px 8px rgba(139, 69, 19, 0.1);
}
/* 双语文字样式优化 */
.bilingual-text {
margin-bottom: 10px;
}
.chinese-text {
font-family: 'Microsoft YaHei', 'PingFang SC', serif;
font-size: 25px;
color: #333;
line-height: 2.0;
margin-bottom: 12px;
letter-spacing: 0.8px;
}
.english-text {
font-family: 'Times New Roman', serif;
font-size: 20px;
color: #555;
line-height: 1.8;
font-style: italic;
letter-spacing: 0.5px;
}
.bilingual-item {
margin-bottom: 15px;
}
.lang-label {
font-weight: bold;
color: #8B4513;
margin-bottom: 5px;
font-size: 14px;
}
/* 标题动画效果 */
.title-animation {
animation: fadeInScale 1s ease-out;
}
@keyframes fadeInScale {
0% { opacity: 0; transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); }
}
/* 高亮诗句样式 */
.poem-highlight {
background-color: rgba(139, 69, 19, 0.05);
padding: 10px;
border-radius: 8px;
border-left: 4px solid #8B4513;
}
/* 诗题样式 */
.poem-title {
font-weight: bold;
font-size: 18px;
margin-bottom: 10px;
color: #8B4513;
text-align: center;
font-style: normal;
letter-spacing: 1px;
}
.info-close {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, 0.2);
color: white;
border: none;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s;
}
.info-close:hover {
background-color: rgba(0, 0, 0, 0.4);
}
/* 控制按钮 */
.controls {
position: fixed;
top: 100px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1050;
transition: transform 0.3s ease;
}
/* 控制按钮提示 */
.control-btn::after {
content: attr(data-tooltip);
position: absolute;
right: 100%;
margin-right: 10px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.control-btn:hover::after {
opacity: 1;
visibility: visible;
}
.control-btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
font-size: 20px;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
backdrop-filter: blur(5px);
}
.control-btn:hover {
background-color: #fff;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
/* 阶段颜色指示器 */
.stage-indicator {
position: fixed;
top: 100px;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.95);
padding: 10px 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
z-index: 800;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 15px;
backdrop-filter: blur(5px);
transition: transform 0.3s ease;
}
.stage-title {
font-weight: bold;
color: #333;
margin-right: 15px;
}
.stage-colors {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.stage-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.stage-color {
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid #ddd;
}
/* 语言显示区域 - 调整为同时显示双语 */
.lang-label {
text-align: right;
font-size: 12px;
color: #999;
margin-bottom: 5px;
}
.bilingual-item {
margin-bottom: 15px;
}
.bilingual-text {
display: flex;
flex-direction: column;
gap: 5px;
}
.chinese-text {
font-size: 16px;
color: #333;
}
.english-text {
font-size: 14px;
color: #666;
font-style: italic;
}
/* 移除语言切换按钮 */
.lang-switch {
display: none;
}
/* 回到顶部按钮 */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
z-index: 950;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(5px);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-3px);
background-color: white;
}
/* 加载进度条 */
.progress-bar {
position: fixed;
top: 60px;
left: 0;
height: 4px;
background: linear-gradient(90deg, #8B4513, #A0522D, #CD853F, #DEB887);
width: 0%;
z-index: 1001;
transition: width 0.3s ease;
}
/* 适配移动端 */
@media(max-width:768px){
header {
font-size: 20px;
padding: 12px;
}
.info-card {flex-direction:column; left: 5%; right: 5%;}
.info-image {width:100%;height:200px}
.info-content {max-height:40vh; width: 100%;}
.controls {top: auto; bottom: 150px; right: 20px; flex-direction: row;}
.stage-indicator {top: auto; bottom: 220px; left: 20px; right: 20px;}
.stage-colors {flex-direction: row; flex-wrap: wrap;}
/* 移动端触摸优化 */
.control-btn {
width: 60px;
height: 60px;
font-size: 24px;
}
}
</style>
</head>
<body>
<header>
<div style="font-size: 36px; font-weight: bold; color: #333; margin-bottom: 5px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);">
诗豪刘禹锡，千淘万漉虽辛苦，吹尽狂沙始到金
</div>
<div style="font-size: 14px; color: #666; font-style: italic;
浏览器搜索"唐诗.中国"中文域名查看完整版
</div>
</header>
<div class="progress-bar" id="progressBar"></div>
<div id="mapLoader">
<div class="loader-spinner"></div>
<span>加载中…</span>
<div style="margin-top: 10px; font-size: 14px; color: #666;">正在准备刘禹锡的精彩人生旅程</div>
</div>
<div id="map"></div>
<!-- 信息卡片 -->
<div id="infoCard" class="info-card">
<img id="infoImage" class="info-image" src="" alt="" loading="lazy">
<div class="info-content">
<!-- 语言切换按钮 -->
<div class="lang-switch">
<button id="btnZh" class="lang-btn active">中文</button>
<button id="btnEn" class="lang-btn">English</button>
</div>
<h3 id="infoTitle" class="info-title"></h3>
<div id="infoYear" class="info-year"></div>
<div id="infoDescription" class="info-description"></div>
<div id="infoPoem" class="info-poem"></div>
<div id="infoAnecdote" class="info-description"></div>
</div>
<button class="info-close" onclick="hideInfoCard()">×</button>
<div class="scroll-control">
<button id="pauseScrollBtn" class="scroll-btn" onclick="toggleScroll()">❚❚</button>
</div>
<!-- 折叠按钮 -->
<button class="collapse-btn" onclick="toggleCardCollapse()"></button>
</div>
<!-- 控制按钮 -->
<div class="controls">
<button class="control-btn" id="playBtn" onclick="toggleAnimation()" data-tooltip="自动播放/暂停">▶</button>
<button class="control-btn" id="prevBtn" onclick="prevPoint()" data-tooltip="上一个地点">◀</button>
<button class="control-btn" id="nextBtn" onclick="nextPoint()" data-tooltip="下一个地点">▶</button>
</div>
<!-- 回到顶部按钮 -->
<div class="back-to-top" id="backToTop" onclick="scrollToTop()">
<i class="fas fa-arrow-up"></i>
</div>
<!-- 阶段颜色指示器 -->
<div class="stage-indicator">
<div class="stage-title">人生阶段</div>
<div class="stage-colors" id="stageColors"></div>
</div>
<script src="leaflet.js"></script>
<script>var L = window.L || {};</script>
<script src="https://unpkg.com/leaflet-ant-path@1.3.0/dist/leaflet-ant-path.js"></script>
<script>
// 全局变量定义
let map;
// allPoints变量在页面中直接定义（第777行附近）
let horseMarker;
let currentPointIndex = 0;
let markers = [];
let pathLines = [];
let isAnimating = false;
let animationInterval = null;
let isEn = false;
let isScrolling = true;
let scrollAnimationId = null;
let lastScrollY = 0;
const scrollSpeed = 0.5; // 滚动速度（像素/毫秒）- 减慢为原来的一半
const animationDelay = 20000; // 动画延迟（毫秒）- 延长至20秒，让用户有更多时间欣赏内容
// 根据人生阶段的情绪和重要性，动态调整颜色的辅助函数
function adjustColorByMood(color, moodIntensity) {
// 解析颜色值
let hex = color.replace('#', '');
let r = parseInt(hex.substring(0, 2), 16);
let g = parseInt(hex.substring(2, 4), 16);
let b = parseInt(hex.substring(4, 6), 16);
// 将RGB转换为HSL以便更容易调整亮度和饱和度
let hsl = rgbToHsl(r, g, b);
// 根据情绪强度调整HSL值
// moodIntensity范围: -1到1 (-1表示悲伤/低落, 1表示欢乐/兴奋)
if (moodIntensity > 0) {
// 积极情绪: 增加亮度和饱和度
hsl.s = Math.min(1, hsl.s + hsl.s * 0.3 * moodIntensity);
hsl.l = Math.min(0.9, hsl.l + hsl.l * 0.2 * moodIntensity);
} else {
// 消极情绪: 降低亮度，略微调整饱和度
hsl.l = Math.max(0.2, hsl.l - hsl.l * 0.3 * Math.abs(moodIntensity));
hsl.s = Math.max(0.3, hsl.s - hsl.s * 0.1 * Math.abs(moodIntensity));
}
// 将HSL转换回RGB
let rgb = hslToRgb(hsl.h, hsl.s, hsl.l);
// 转换回十六进制格式
return rgbToHex(Math.round(rgb.r), Math.round(rgb.g), Math.round(rgb.b));
}
// RGB到HSL的转换函数
function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
let max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // 灰度
} else {
let d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return { h, s, l };
}
// HSL到RGB的转换函数
function hslToRgb(h, s, l) {
let r, g, b;
if (s == 0) {
r = g = b = l; // 灰度
} else {
function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
let p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return { r: r * 255, g: g * 255, b: b * 255 };
}
// RGB到十六进制的转换函数
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
}
// 定义刘禹锡人生阶段名称、对应的古典风颜色和情绪强度
const stageNames = [
{ stage: 1, name: "出生与成长", color: "#D4AF37", moodIntensity: 0.8 }, // 金色 - 生命开始，情绪积极
{ stage: 2, name: "初入仕途", color: "#2E8B57", moodIntensity: 0.6 }, // 深绿色 - 仕途初展，情绪积极
{ stage: 3, name: "永贞革新", color: "#DC143C", moodIntensity: 1.0 }, // 深红色 - 革新热情，情绪强烈
{ stage: 4, name: "贬谪生涯", color: "#4169E1", moodIntensity: -0.7 }, // 皇家蓝 - 贬谪失落，情绪低落
{ stage: 5, name: "扬州唱和", color: "#FF69B4", moodIntensity: 0.9 }, // 粉红色 - 诗酒唱和，情绪愉悦
{ stage: 6, name: "苏州刺史", color: "#20B2AA", moodIntensity: 0.7 }, // 青色 - 江南治理，情绪平和
{ stage: 7, name: "晚年得志", color: "#9932CC", moodIntensity: 0.9 } // 紫色 - 功成名就，情绪满足
];
const stageNamesEn = [
{ stage: 1, name: "Birth & Growth", color: "#D4AF37", moodIntensity: 0.8 },
{ stage: 2, name: "Early Official Career", color: "#2E8B57", moodIntensity: 0.6 },
{ stage: 3, name: "Yongzhen Reform", color: "#DC143C", moodIntensity: 1.0 },
{ stage: 4, name: "Exile Period", color: "#4169E1", moodIntensity: -0.7 },
{ stage: 5, name: "Yangzhou Poetry Exchange", color: "#FF69B4", moodIntensity: 0.9 },
{ stage: 6, name: "Suzhou Governor", color: "#20B2AA", moodIntensity: 0.7 },
{ stage: 7, name: "Late Career Success", color: "#9932CC", moodIntensity: 0.9 }
];
/* 刘禹锡足迹数据 */
let allPoints = [
{
"name": "洛阳",
"nameEn": "Luoyang",
"year": 772,
"stage": 1,
"coord": [34.6, 112.4],
"event": "出生于河南洛阳",
"eventEn": "Born in Luoyang, Henan",
"poem": "千淘万漉虽辛苦，吹尽狂沙始到金",
"poemEn": "Though thousands of washings are laborious, only when the sand is blown away can gold appear",
"image": "./images/luoyang.jpg",
"fallbackImage": "https://picsum.photos/id/1036/800/600",
"culture": {
"title": "浪淘沙",
"titleEn": "Waves Washing Sand",
"lines": ["千淘万漉虽辛苦，吹尽狂沙始到金"],
"linesEn": ["Though thousands of washings are laborious, only when the sand is blown away can gold appear"],
"anecdote": "刘禹锡出生于洛阳的一个世代书香门第，其祖先为中山靖王刘胜之后。他自幼聪慧过人，勤奋好学，被誉为'神童'。洛阳作为当时的东都，文化氛围浓厚，为刘禹锡的成长提供了良好的环境。",
"anecdoteEn": "Liu Yuxi was born into a scholarly family in Luoyang. His ancestors were descendants of Liu Sheng, Prince Jing of Zhongshan. He was exceptionally intelligent and diligent from childhood, known as a 'child prodigy'. As the eastern capital at that time, Luoyang had a rich cultural atmosphere that provided a good environment for Liu Yuxi's growth."
}
},
{
"name": "长安",
"nameEn": "Chang'an",
"year": 793,
"stage": 2,
"coord": [34.3, 108.8],
"event": "进士及第，初入仕途",
"eventEn": "Passed the imperial examination, began official career",
"poem": "自古逢秋悲寂寥，我言秋日胜春朝。晴空一鹤排云上，便引诗情到碧霄",
"poemEn": "Since ancient times, people have felt sad at autumn's desolation, but I say autumn days surpass spring mornings. A crane soars through the clear sky, lifting poetic sentiments to the blue firmament",
"image": "./images/changan.jpg",
"fallbackImage": "https://picsum.photos/id/1043/800/600",
"culture": {
"title": "秋词二首其一",
"titleEn": "Autumn Poems (First of Two)",
"lines": ["自古逢秋悲寂寥，我言秋日胜春朝", "晴空一鹤排云上，便引诗情到碧霄"],
"linesEn": ["Since ancient times, people have felt sad at autumn's desolation, but I say autumn days surpass spring mornings", "A crane soars through the clear sky, lifting poetic sentiments to the blue firmament"],
"anecdote": "21岁的刘禹锡与柳宗元同登进士第，随后又中博学宏词科，授太子校书，开始了他的仕途生涯。这一时期，刘禹锡年轻气盛，才华横溢，对未来充满了信心和期待。《秋词二首其一》一反悲秋的传统，热情赞美秋天，是中小学语文教材中的经典篇目。",
"anecdoteEn": "At the age of 21, Liu Yuxi passed the imperial examination along with Liu Zongyuan, and later passed the advanced examination for 'erudite scholars'. He was appointed as a scholar at the Crown Prince's palace, beginning his official career. During this period, Liu Yuxi was young, energetic, highly talented, and full of confidence and expectations for the future. 'Autumn Poems (First of Two)' goes against the tradition of sorrowing autumn, warmly praising autumn, and is a classic in primary and secondary school Chinese textbooks."
}
},
{
"name": "长安",
"nameEn": "Chang'an",
"year": 805,
"stage": 3,
"coord": [34.3, 108.8],
"event": "参与永贞革新，失败后被贬",
"eventEn": "Participated in the Yongzhen Reform,被贬 after its failure",
"poem": "巴山楚水凄凉地，二十三年弃置身。怀旧空吟闻笛赋，到乡翻似烂柯人。沉舟侧畔千帆过，病树前头万木春",
"poemEn": "The desolate lands of Bashan and Chushui, where I was exiled for twenty-three years. Nostalgic, I idly recite the poem about the flute; returning home, I seem like the man who played chess for too long. A thousand sails pass by the sunken ship; ten thousand trees spring forth before the withered tree",
"image": "./images/changan2.jpg",
"fallbackImage": "https://picsum.photos/id/1040/800/600",
"culture": {
"title": "酬乐天扬州初逢席上见赠",
"titleEn": "Reply to Bai Juyi on First Meeting in Yangzhou at a Feast",
"lines": ["巴山楚水凄凉地，二十三年弃置身", "怀旧空吟闻笛赋，到乡翻似烂柯人", "沉舟侧畔千帆过，病树前头万木春"],
"linesEn": ["The desolate lands of Bashan and Chushui, where I was exiled for twenty-three years", "Nostalgic, I idly recite the poem about the flute; returning home, I seem like the man who played chess for too long", "A thousand sails pass by the sunken ship; ten thousand trees spring forth before the withered tree"],
"anecdote": "唐顺宗即位后，重用王叔文、王伾等人进行政治改革，史称'永贞革新'。刘禹锡与柳宗元同为改革派的核心成员，积极参与各项改革措施。然而，改革仅持续了100多天就失败了，刘禹锡被贬为朗州司马，开始了长达二十多年的贬谪生涯。这首诗是刘禹锡贬谪生涯的真实写照，'沉舟侧畔千帆过，病树前头万木春'更是千古名句，体现了诗人豁达乐观的人生态度，是中小学语文教材中的经典篇目。",
"anecdoteEn": "After Emperor Shunzong ascended the throne, he重用 Wang Shuwen, Wang Pi and others to carry out political reforms, known in history as the 'Yongzhen Reform'. Liu Yuxi and Liu Zongyuan were core members of the reformist group, actively participating in various reform measures. However, the reform only lasted for more than 100 days before failing. Liu Yuxi was demoted to Sima of Langzhou, beginning his more than 20 years of exile. This poem is a true portrayal of Liu Yuxi's exile life. The line 'A thousand sails pass by the sunken ship; ten thousand trees spring forth before the withered tree' is an immortal quote, embodying the poet's open-minded and optimistic attitude towards life, and is a classic in primary and secondary school Chinese textbooks."
}
},
{
"name": "朗州",
"nameEn": "Langzhou",
"year": 805,
"stage": 4,
"coord": [29.0, 111.7],
"event": "被贬朗州司马",
"eventEn": "Demoted to Sima of Langzhou",
"poem": "杨柳青青江水平，闻郎江上唱歌声。东边日出西边雨，道是无晴却有晴",
"poemEn": "Willows green, river water calm, I hear my love singing on the river. The sun rises in the east while it rains in the west; they say it's not sunny, yet there is sunshine",
"image": "./images/langzhou.jpg",
"fallbackImage": "https://picsum.photos/id/1019/800/600",
"culture": {
"title": "竹枝词二首其一",
"titleEn": "Bamboo Branch Lyrics (First of Two)",
"lines": ["杨柳青青江水平，闻郎江上唱歌声", "东边日出西边雨，道是无晴却有晴"],
"linesEn": ["Willows green, river water calm, I hear my love singing on the river", "The sun rises in the east while it rains in the west; they say it's not sunny, yet there is sunshine"],
"anecdote": "朗州（今湖南常德）地处偏远，刘禹锡在这里度过了近十年的贬谪生活。尽管政治上失意，但他并没有意志消沉，而是深入民间，收集当地的民歌民谣，创作了大量富有地方特色的诗歌，如《竹枝词》等。这些作品语言通俗，风格清新，深受人民喜爱。《竹枝词二首其一》巧妙运用谐音双关，是中小学语文教材中的经典篇目。",
"anecdoteEn": "Langzhou (now Changde, Hunan) was a remote place. Liu Yuxi spent nearly ten years of exile there. Despite his political setbacks, he did not become depressed. Instead, he went deep into the folk community, collecting local folk songs and ballads, and creating many poems with local characteristics, such as 'Bamboo Branch Lyrics'. These works have simple language and fresh style, and were deeply loved by the people. 'Bamboo Branch Lyrics (First of Two)' skillfully uses homophonic puns and is a classic in primary and secondary school Chinese textbooks."
}
},
{
"name": "连州",
"nameEn": "Lianzhou",
"year": 815,
"stage": 4,
"coord": [24.9, 112.3],
"event": "短暂回京后再贬连州刺史",
"eventEn": "Briefly returned to the capital, then again demoted to Governor of Lianzhou",
"poem": "山桃红花满上头，蜀江春水拍山流",
"poemEn": "Mountain peach blossoms red all over the top, Shu River spring water laps against the mountains",
"image": "./images/lianzhou.jpg",
"fallbackImage": "https://picsum.photos/id/1023/800/600",
"culture": {
"title": "竹枝词九首其二",
"titleEn": "Bamboo Branch Lyrics (Second of Nine)",
"lines": ["山桃红花满上头，蜀江春水拍山流", "花红易衰似郎意，水流无限似侬愁"],
"linesEn": ["Mountain peach blossoms red all over the top, Shu River spring water laps against the mountains", "Blossoms fade easily like my lover's feelings, water flows endlessly like my sorrow"],
"anecdote": "815年，刘禹锡被召回长安，但因作《戏赠看花诸君子》一诗得罪当权者，再度被贬为连州刺史。在连州期间，他勤政爱民，兴学重教，深受百姓爱戴。同时，他的诗歌创作也达到了新的高度，写下了许多反映民生疾苦和自然风光的诗篇。",
"anecdoteEn": "In 815, Liu Yuxi was recalled to Chang'an, but because he wrote the poem 'Playful Gift to Gentlemen Viewing Flowers' which offended those in power, he was again demoted, this time to Governor of Lianzhou. During his time in Lianzhou, he was diligent in government affairs, loved the people, promoted education, and was deeply loved by the common people. At the same time, his poetic creation reached new heights, writing many poems reflecting the hardships of people's lives and natural scenery."
}
},
{
"name": "夔州",
"nameEn": "Kuizhou",
"year": 821,
"stage": 4,
"coord": [31.0, 109.6],
"event": "任夔州刺史",
"eventEn": "Appointed Governor of Kuizhou",
"poem": "请君莫奏前朝曲，听唱新翻杨柳枝",
"poemEn": "Please don't play the old melodies of previous dynasties, listen to the newly adapted Willow Branch song",
"image": "./images/kuizhou.jpg",
"fallbackImage": "https://picsum.photos/id/1085/800/600",
"culture": {
"title": "杨柳枝词九首其一",
"titleEn": "Willow Branch Lyrics (First of Nine)",
"lines": ["塞北梅花羌笛吹，淮南桂树小山词", "请君莫奏前朝曲，听唱新翻杨柳枝"],
"linesEn": ["Plum blossoms of the northern frontier played on Qiang flutes, osmanthus trees of Huainan in Xiaoshan's poems", "Please don't play the old melodies of previous dynasties, listen to the newly adapted Willow Branch song"],
"anecdote": "在夔州（今重庆奉节）任刺史期间，刘禹锡进一步深入了解当地的巴渝文化，创作了大量《竹枝词》、《浪淘沙》等富有地方特色的诗歌。他的这些作品不仅保留了民歌的清新质朴，又融入了文人的雅致，对后世产生了深远影响。",
"anecdoteEn": "During his tenure as Governor of Kuizhou (now Fengjie, Chongqing), Liu Yuxi further deepened his understanding of the local Bayu culture, and created many poems with local characteristics such as 'Bamboo Branch Lyrics' and 'Waves Washing Sand'. His works not only preserved the freshness and simplicity of folk songs but also integrated the elegance of literati, exerting a profound influence on later generations."
}
},
{
"name": "和州",
"nameEn": "Hezhou",
"year": 824,
"stage": 4,
"coord": [31.7, 118.3],
"event": "任和州刺史，作《陋室铭》",
"eventEn": "Appointed Governor of Hezhou, wrote 'Inscription for the Humble Room'",
"poem": "山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？",
"poemEn": "A mountain is not famous for its height, but for immortals residing there. Water is not sacred for its depth, but for dragons dwelling within. This is a humble room, but my virtue makes it fragrant. Moss greens the steps, grass colors the curtains. I chat and laugh with great scholars, no uneducated people come and go. I can play simple zither, read Buddhist scriptures. No noisy music disturbs my ears, no official documents tire my body. Like Zhuge Liang's thatched cottage in Nanyang, like扬子云's pavilion in Western Shu. Confucius said: What is humble about it?",
"image": "./images/hezhou.jpg",
"fallbackImage": "https://picsum.photos/id/1048/800/600",
"culture": {
"title": "陋室铭",
"titleEn": "Inscription for the Humble Room",
"lines": ["山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？"],
"linesEn": ["A mountain is not famous for its height, but for immortals residing there. Water is not sacred for its depth, but for dragons dwelling within. This is a humble room, but my virtue makes it fragrant. Moss greens the steps, grass colors the curtains. I chat and laugh with great scholars, no uneducated people come and go. I can play simple zither, read Buddhist scriptures. No noisy music disturbs my ears, no official documents tire my body. Like Zhuge Liang's thatched cottage in Nanyang, like扬子云's pavilion in Western Shu. Confucius said: What is humble about it?"],
"anecdote": "在和州任刺史期间，刘禹锡的住所多次被地方官员故意缩小，但他却不以为意，反而写下了千古名篇《陋室铭》，表达了自己安贫乐道、高洁傲岸的情操。这篇短文虽短，但意境深远，语言优美，成为中国文学史上的经典之作，也是中小学语文教材中的经典篇目。",
"anecdoteEn": "During his tenure as Governor of Hezhou, Liu Yuxi's residence was repeatedly deliberately缩小 by local officials, but he did not mind. Instead, he wrote the immortal masterpiece 'Inscription for the Humble Room', expressing his情操 of being content with poverty and devoted to the Dao, and his noble and proud character. Although this short essay is brief, it has a profound artistic conception and beautiful language, becoming a classic in Chinese literary history and a classic in primary and secondary school Chinese textbooks."
}
},
{
"name": "扬州",
"nameEn": "Yangzhou",
"year": 826,
"stage": 5,
"coord": [32.3, 119.4],
"event": "返回洛阳途中，与白居易在扬州相会",
"eventEn": "On the way back to Luoyang, met Bai Juyi in Yangzhou",
"poem": "今日听君歌一曲，暂凭杯酒长精神",
"poemEn": "Today listening to your song, I temporarily rely on a cup of wine to lift my spirits",
"image": "./images/yangzhou.jpg",
"fallbackImage": "https://picsum.photos/id/1042/800/600",
"culture": {
"title": "酬乐天扬州初逢席上见赠",
"titleEn": "Reply to Bai Juyi on First Meeting in Yangzhou at a Feast",
"lines": ["沉舟侧畔千帆过，病树前头万木春", "今日听君歌一曲，暂凭杯酒长精神"],
"linesEn": ["A thousand sails pass by the sunken ship; ten thousand trees spring forth before the withered tree", "Today listening to your song, I temporarily rely on a cup of wine to lift my spirits"],
"anecdote": "826年，刘禹锡奉召回京，途经扬州时与白居易相会。两位大诗人相见甚欢，互赠诗篇。白居易在诗中对刘禹锡的不幸遭遇表示同情，而刘禹锡则以'沉舟侧畔千帆过，病树前头万木春'之句回应，表达了自己豁达乐观的人生态度。这次扬州唱和成为中国文学史上的一段佳话。",
"anecdoteEn": "In 826, Liu Yuxi was recalled to the capital. On his way, he passed through Yangzhou and met Bai Juyi. The two great poets were very happy to see each other and exchanged poems. Bai Juyi expressed sympathy for Liu Yuxi's misfortunes in his poem, while Liu Yuxi responded with the lines 'A thousand sails pass by the sunken ship; ten thousand trees spring forth before the withered tree', expressing his open-minded and optimistic attitude towards life. This poetry exchange in Yangzhou became a famous story in Chinese literary history."
}
},
{
"name": "苏州",
"nameEn": "Suzhou",
"year": 829,
"stage": 6,
"coord": [31.3, 120.6],
"event": "任苏州刺史",
"eventEn": "Appointed Governor of Suzhou",
"poem": "朱雀桥边野草花，乌衣巷口夕阳斜。旧时王谢堂前燕，飞入寻常百姓家",
"poemEn": "Wild grass and flowers grow beside Zhuque Bridge, the sun sets slantingly at the entrance of Wuyi Lane. Swallows that once nested in the mansions of the Wang and Xie families now fly into ordinary people's homes",
"image": "./images/suzhou.jpg",
"fallbackImage": "https://picsum.photos/id/1053/800/600",
"culture": {
"title": "乌衣巷",
"titleEn": "Wuyi Lane",
"lines": ["朱雀桥边野草花，乌衣巷口夕阳斜", "旧时王谢堂前燕，飞入寻常百姓家"],
"linesEn": ["Wild grass and flowers grow beside Zhuque Bridge, the sun sets slantingly at the entrance of Wuyi Lane", "Swallows that once nested in the mansions of the Wang and Xie families now fly into ordinary people's homes"],
"anecdote": "在苏州任刺史期间，刘禹锡勤政爱民，兴修水利，使苏州百姓受益良多，被称为'刘苏州'。同时，他也写下了许多描写苏州风光和历史变迁的诗篇，如《乌衣巷》等。这首诗通过对朱雀桥和乌衣巷的今昔对比，表达了对历史变迁、沧海桑田的感慨。全诗仅用四句简短的文字，就勾勒出一幅历史兴衰的生动画面，是刘禹锡怀古诗的代表作，也是中小学语文教材中的经典篇目。",
"anecdoteEn": "During his tenure as Governor of Suzhou, Liu Yuxi was diligent in government affairs, loved the people, and built water conservancy projects, benefiting the people of Suzhou greatly. He was called 'Liu Suzhou'. At the same time, he also wrote many poems describing Suzhou's scenery and historical changes, such as 'Wuyi Lane'. Through the contrast between the past and present of Zhuque Bridge and Wuyi Lane, this poem expresses feelings about historical changes and the vicissitudes of life. With just four short lines, the poem outlines a vivid picture of historical rise and fall. It is a representative work of Liu Yuxi's nostalgic poetry and a classic in primary and secondary school Chinese textbooks."
}
},
{
"name": "汝州",
"nameEn": "Ruzhou",
"year": 832,
"stage": 7,
"coord": [34.1, 112.8],
"event": "任汝州刺史",
"eventEn": "Appointed Governor of Ruzhou",
"poem": "天地英雄气，千秋尚凛然",
"poemEn": "The heroic spirit of heaven and earth remains awe-inspiring through the ages",
"image": "./images/ruzhou.jpg",
"fallbackImage": "https://picsum.photos/id/1039/800/600",
"culture": {
"title": "蜀先主庙",
"titleEn": "Temple of Liu Bei, First Ruler of Shu",
"lines": ["天地英雄气，千秋尚凛然", "势分三足鼎，业复五铢钱"],
"linesEn": ["The heroic spirit of heaven and earth remains awe-inspiring through the ages", "His power divided the realm into three kingdoms, his ambition was to restore the Wuzhu coin"],
"anecdote": "在汝州任刺史期间，刘禹锡的政治生涯逐渐走向平稳。他虽然历经磨难，但始终保持着积极乐观的人生态度和忧国忧民的情怀。这一时期的作品既有对历史的反思，也有对现实的关注，体现了他深厚的思想底蕴和卓越的艺术才华。",
"anecdoteEn": "During his tenure as Governor of Ruzhou, Liu Yuxi's political career gradually stabilized. Although he had gone through many hardships, he always maintained a positive and optimistic attitude towards life and a concern for the country and the people. His works during this period include both reflections on history and attention to reality, reflecting his profound ideological foundation and excellent artistic talent."
}
},
{
"name": "同州",
"nameEn": "Tongzhou",
"year": 836,
"stage": 7,
"coord": [35.1, 109.6],
"event": "任同州刺史",
"eventEn": "Appointed Governor of Tongzhou",
"poem": "莫道桑榆晚，为霞尚满天",
"poemEn": "Don't say the mulberry and elm are late, for the rosy clouds still fill the sky",
"image": "./images/tongzhou.jpg",
"fallbackImage": "https://picsum.photos/id/1047/800/600",
"culture": {
"title": "酬乐天咏老见示",
"titleEn": "Reply to Bai Juyi's Poem on Aging",
"lines": ["人谁不顾老，老去有谁怜", "身瘦带频减，发稀冠自偏", "废书缘惜眼，多灸为随年", "经事还谙事，阅人如阅川", "细思皆幸矣，下此便翛然", "莫道桑榆晚，为霞尚满天"],
"linesEn": ["Who doesn't worry about aging? When old, who will pity you?", "Body thin, belt frequently tightened; hair sparse, hat askew by itself", "Stopped reading to protect eyes; more moxibustion treatments due to aging", "Experienced affairs, understand affairs; seeing people is like seeing rivers", "Thinking carefully, all is fortunate; after this, one becomes carefree", "Don't say the mulberry and elm are late, for the rosy clouds still fill the sky"],
"anecdote": "在同州任刺史期间，刘禹锡虽然年事已高，但仍然积极工作，关心民生。他在和白居易的唱和中写下了'莫道桑榆晚，为霞尚满天'的名句，表达了自己老当益壮、积极进取的精神风貌。",
"anecdoteEn": "During his tenure as Governor of Tongzhou, although Liu Yuxi was already advanced in age, he still worked actively and cared about the people's livelihood. In his poetry exchange with Bai Juyi, he wrote the famous lines 'Don't say the mulberry and elm are late, for the rosy clouds still fill the sky', expressing his spirit of being vigorous in old age and enterprising."
}
},
{
"name": "长安",
"nameEn": "Chang'an",
"year": 795,
"stage": 2,
"coord": [34.3, 108.8],
"event": "作《秋词二首其二》",
"eventEn": "Wrote 'Autumn Poems (Second of Two)'",
"poem": "山明水净夜来霜，数树深红出浅黄",
"poemEn": "Mountains bright, waters clear, frost comes at night; several trees with deep red among light yellow",
"image": "./images/changan.jpg",
"fallbackImage": "https://picsum.photos/id/1043/800/600",
"culture": {
"title": "秋词二首其二",
"titleEn": "Autumn Poems (Second of Two)",
"lines": ["山明水净夜来霜，数树深红出浅黄", "试上高楼清入骨，岂如春色嗾人狂"],
"linesEn": ["Mountains bright, waters clear, frost comes at night; several trees with deep red among light yellow", "Try climbing the tall building, clarity pierces to the bone; how can it compare to spring colors that make people wild"],
"anecdote": "这首诗是刘禹锡《秋词二首》中的第二首，诗人用明丽的色彩描绘了秋天的景色，表达了对秋天的喜爱之情。诗中'山明水净夜来霜，数树深红出浅黄'一句，以简洁明快的语言勾勒出一幅秋景图，展现了秋天的清爽与美丽。与第一首相比，这首诗更多地描绘了秋天的具体景象，体现了刘禹锡独特的审美视角。",
"anecdoteEn": "This poem is the second in Liu Yuxi's 'Autumn Poems' series. With bright colors, the poet depicts autumn scenery and expresses his love for autumn. The line 'Mountains bright, waters clear, frost comes at night; several trees with deep red among light yellow' outlines an autumn scene with concise and lively language, showing the freshness and beauty of autumn. Compared with the first poem, this one more vividly depicts specific autumn scenes, reflecting Liu Yuxi's unique aesthetic perspective."
}
},
{
"name": "洞庭湖",
"nameEn": "Dongting Lake",
"year": 824,
"stage": 4,
"coord": [29.0, 112.8],
"event": "途经洞庭湖，作《望洞庭》",
"eventEn": "Passed by Dongting Lake, wrote 'Viewing Dongting Lake'",
"poem": "湖光秋月两相和，潭面无风镜未磨。遥望洞庭山水翠，白银盘里一青螺",
"poemEn": "Lake light and autumn moon harmonize; the pool surface without wind is like an unpolished mirror. Looking afar at Dongting's green mountains and water, like a blue snail in a silver plate",
"image": "./images/dongtinghu.jpg",
"fallbackImage": "https://picsum.photos/id/1015/800/600",
"culture": {
"title": "望洞庭",
"titleEn": "Viewing Dongting Lake",
"lines": ["湖光秋月两相和，潭面无风镜未磨", "遥望洞庭山水翠，白银盘里一青螺"],
"linesEn": ["Lake light and autumn moon harmonize; the pool surface without wind is like an unpolished mirror", "Looking afar at Dongting's green mountains and water, like a blue snail in a silver plate"],
"anecdote": "刘禹锡在贬谪途中经过洞庭湖，被湖光山色所吸引，写下了这首脍炙人口的《望洞庭》。诗中用清新明快的语言描绘了洞庭湖的宁静美丽，将湖面比作未磨的镜子，将君山比作白银盘中的青螺，生动形象，意境深远。这首诗是刘禹锡山水诗的代表作之一，也是中小学语文教材中的经典篇目。",
"anecdoteEn": "On his way to exile, Liu Yuxi passed by Dongting Lake and was attracted by its scenery, writing this well-known poem 'Viewing Dongting Lake'. With fresh and lively language, he described the tranquility and beauty of Dongting Lake, comparing the lake surface to an unpolished mirror and Junshan Island to a blue snail in a silver plate. This vivid and profound poem is one of Liu Yuxi's representative landscape poems and a classic in primary and secondary school Chinese textbooks."
}
},
{
"name": "南京",
"nameEn": "Nanjing",
"year": 826,
"stage": 5,
"coord": [32.0, 118.8],
"event": "途经南京石头城，作《石头城》",
"eventEn": "Passed by Stone City in Nanjing, wrote 'Stone City'",
"poem": "山围故国周遭在，潮打空城寂寞回。淮水东边旧时月，夜深还过女墙来",
"poemEn": "Mountains surrounding the ancient capital still remain; tides beat against the empty city and lonely return. The old moon east of the Huai River still passes over the battlements late at night",
"image": "./images/nanjing.jpg",
"fallbackImage": "https://picsum.photos/id/1041/800/600",
"culture": {
"title": "石头城",
"titleEn": "Stone City",
"lines": ["山围故国周遭在，潮打空城寂寞回", "淮水东边旧时月，夜深还过女墙来"],
"linesEn": ["Mountains surrounding the ancient capital still remain; tides beat against the empty city and lonely return", "The old moon east of the Huai River still passes over the battlements late at night"],
"anecdote": "这首诗是刘禹锡《金陵五题》中的第一首，诗人通过描绘石头城的荒凉景象，表达了对历史变迁的感慨。诗中没有直接抒发情感，而是通过'山围故国'、'潮打空城'、'旧时月'等意象，营造出一种苍凉、孤寂的氛围，体现了诗人对历史兴衰的深刻思考。这首诗语言凝练，意境深远，是刘禹锡怀古诗的代表作之一，也是中小学语文教材中的经典篇目。",
"anecdoteEn": "This poem is the first in Liu Yuxi's 'Five Poems on Jinling'. Through describing the desolate scene of Stone City, the poet expresses his feelings about historical changes. Instead of directly expressing emotions, the poem creates a bleak and lonely atmosphere through images like 'mountains surrounding the ancient capital', 'tides beating against the empty city', and 'the old moon', reflecting the poet's profound thoughts on the rise and fall of history. With concise language and profound artistic conception, this poem is one of Liu Yuxi's representative nostalgic poems and a classic in primary and secondary school Chinese textbooks."
}
},
{
"name": "黄河",
"nameEn": "Yellow River",
"year": 812,
"stage": 4,
"coord": [35.0, 110.0],
"event": "途经黄河，作《浪淘沙》",
"eventEn": "Passed by the Yellow River, wrote 'Waves Washing Sand'",
"poem": "九曲黄河万里沙，浪淘风簸自天涯。如今直上银河去，同到牵牛织女家",
"poemEn": "The winding Yellow River carries ten thousand li of sand, waves washing and wind tossing from the ends of the earth. Now let's go straight up to the Milky Way, to the home of the Cowherd and the Weaver Girl",
"image": "./images/huanghe.jpg",
"fallbackImage": "https://picsum.photos/id/1037/800/600",
"culture": {
"title": "浪淘沙九首其一",
"titleEn": "Waves Washing Sand (First of Nine)",
"lines": ["九曲黄河万里沙，浪淘风簸自天涯", "如今直上银河去，同到牵牛织女家"],
"linesEn": ["The winding Yellow River carries ten thousand li of sand, waves washing and wind tossing from the ends of the earth", "Now let's go straight up to the Milky Way, to the home of the Cowherd and the Weaver Girl"],
"anecdote": "这首诗是刘禹锡《浪淘沙》组诗中的第一首，诗人以雄奇的笔触描绘了黄河的壮丽景象，并展开丰富的想象，表达了对美好生活的向往。诗中的'如今直上银河去，同到牵牛织女家'一句，将现实与神话传说巧妙结合，展现了诗人浪漫主义的情怀。这首诗语言简洁明快，意境开阔，是刘禹锡的代表作之一，也是中小学语文教材中的经典篇目。",
"anecdoteEn": "This poem is the first in Liu Yuxi's 'Waves Washing Sand' series. With magnificent brushstrokes, the poet depicts the grand scenery of the Yellow River and unfolds rich imagination, expressing his yearning for a better life. The line 'Now let's go straight up to the Milky Way, to the home of the Cowherd and the Weaver Girl' skillfully combines reality with myth and legend, showing the poet's romantic feelings. With concise and lively language and broad artistic conception, this poem is one of Liu Yuxi's masterpieces and a classic in primary and secondary school Chinese textbooks."
}
},
{
"name": "洛阳",
"nameEn": "Luoyang",
"year": 842,
"stage": 7,
"coord": [34.6, 112.4],
"event": "病逝于洛阳",
"eventEn": "Passed away in Luoyang",
"poem": "千淘万漉虽辛苦，吹尽狂沙始到金",
"poemEn": "Though thousands of washings are laborious, only when the sand is blown away can gold appear",
"image": "./images/luoyang2.jpg",
"fallbackImage": "https://picsum.photos/id/1035/800/600",
"culture": {
"title": "浪淘沙九首其八",
"titleEn": "Waves Washing Sand (Eighth of Nine)",
"lines": ["千淘万漉虽辛苦，吹尽狂沙始到金"],
"linesEn": ["Though thousands of washings are laborious, only when the sand is blown away can gold appear"],
"anecdote": "842年，刘禹锡病逝于洛阳，享年71岁。他的一生历经坎坷，但始终保持着乐观向上的精神和对理想的执着追求。他的诗歌题材广泛，风格清新明快，语言通俗流畅，被誉为'诗豪'。他的作品不仅在当时广为流传，而且对后世产生了深远的影响，在中国文学史上占有重要地位。",
"anecdoteEn": "In 842, Liu Yuxi passed away in Luoyang at the age of 71. His life was full of hardships, but he always maintained an optimistic and upward spirit and a persistent pursuit of ideals. His poems cover a wide range of subjects, with a fresh and lively style, simple and smooth language, and he was known as 'Poetry Hero'. His works were not only widely circulated at that time but also had a profound impact on later generations, occupying an important position in Chinese literary history."
}
}
];
/* 初始化地图 */
function initMap() {
// 创建地图实例
if (document.getElementById('map')) {
map = L.map('map').setView([34, 110], 5);
// 设置地图属性
map.options.preferCanvas = true;
map.options.minZoom = 3;
map.options.maxZoom = 14;
// 添加底图图层（使用高德地图服务）
L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
subdomains: '1234',
crossOrigin: true,
reuseTiles: true,
maxZoom: 14
}).addTo(map);
// 设置缩放控件位置
map.zoomControl.setPosition('bottomright');
}
// 绘制阶段颜色指示器
initStageIndicators();
// 绘制路线和点位
drawPathSegments();
createPointMarkers();
// 创建骑马标记
createHorseMarker();
// 隐藏加载器
setTimeout(() => {
document.getElementById('mapLoader').style.opacity = '0';
document.getElementById('mapLoader').style.pointerEvents = 'none';
setTimeout(() => {
document.getElementById('mapLoader').style.display = 'none';
}, 500);
}, 1000);
}
/* 绘制路线分段 */
function drawPathSegments() {
// 清除已有路线
pathLines.forEach(line => map.removeLayer(line));
pathLines = [];
// 绘制每段路线（直接连接相邻两点）
for (let i = 0; i < allPoints.length - 1; i++) {
const startPoint = allPoints[i];
const endPoint = allPoints[i + 1];
// 使用起点的阶段信息
const stageInfo = stageNames.find(s => s.stage === startPoint.stage);
let color = '#000000';
if (stageInfo) {
// 根据情绪强度动态调整颜色
color = adjustColorByMood(stageInfo.color, stageInfo.moodIntensity);
}
// 使用蚂蚁线绘制路线
const antPath = L.polyline.antPath(
[startPoint.coord, endPoint.coord],
{
"paused": false,
"reverse": false,
"delay": 1000,
"dashArray": [10, 20],
"weight": 3,
"color": color,
"pulseColor": '#ffffff',
"opacity": 0.7
}
).addTo(map);
pathLines.push(antPath);
}
}
/* 创建点位标记 */
function createPointMarkers() {
// 初始化加载进度
const progressBar = document.getElementById('progressBar');
allPoints.forEach((point, index) => {
// 更新加载进度
progressBar.style.width = `${(index / allPoints.length) * 100}%`;
// 获取阶段对应的信息
const stageInfo = stageNames.find(s => s.stage === point.stage);
let color = '#000000';
if (stageInfo) {
// 根据情绪强度动态调整颜色
color = adjustColorByMood(stageInfo.color, stageInfo.moodIntensity);
}
// 创建圆形标记
const marker = L.circleMarker(point.coord, {
radius: 10,
fillColor: color,
color: '#ffffff',
weight: 2,
opacity: 1,
fillOpacity: 0.8
}).addTo(map);
// 存储原始样式，用于后续加亮效果
marker.originalStyle = {
radius: 10,
fillColor: color,
color: '#ffffff',
weight: 2,
opacity: 1,
fillOpacity: 0.8
};
// 加亮样式 - 颜色加深、尺寸更大
// 生成深色版本的颜色
const darkenColor = (color) => {
// 简单的颜色加深方法：移除透明度并稍微加深颜色值
let hex = color.replace('#', '');
// 转换为RGB
let r = parseInt(hex.substring(0, 2), 16);
let g = parseInt(hex.substring(2, 4), 16);
let b = parseInt(hex.substring(4, 6), 16);
// 深色处理（减少亮度20%）
r = Math.max(0, Math.floor(r * 0.8));
g = Math.max(0, Math.floor(g * 0.8));
b = Math.max(0, Math.floor(b * 0.8));
// 转回十六进制
return '#' + [r, g, b].map(x => {
const hex = x.toString(16);
return hex.length === 1 ? '0' + hex : hex;
}).join('');
};
const darkColor = darkenColor(color);
marker.highlightStyle = {
radius: 18, // 更大的半径
fillColor: darkColor, // 使用加深后的颜色
color: '#ffd700', // 金色边框
weight: 4, // 更粗的边框
opacity: 1,
fillOpacity: 1,
className: 'highlight-marker' // 添加类名用于可能的CSS动画
};
// 添加点击事件
marker.on('click', () => {
currentPointIndex = index;
showPointInfo(point);
moveHorseToPoint(index);
});
// 添加悬停效果
marker.on('mouseover', () => {
marker.setStyle(marker.highlightStyle);
});
marker.on('mouseout', () => {
// 只有当不是当前选中的点时才恢复样式
if (index !== currentPointIndex) {
marker.setStyle(marker.originalStyle);
}
});
// 添加弹出信息 - 中英文并行显示
marker.bindPopup(`<div class="bilingual-text">
<div><b>${point.name}</b></div>
<div style="font-size: 14px;">${point.year}年 | ${point.event}</div>
<div><b>${point.nameEn}</b></div>
<div style="font-size: 12px;">${point.year} A.D. | ${point.eventEn}</div>
</div>`, {
className: 'custom-popup',
closeButton: true,
minWidth: 200
});
markers.push(marker);
});
}
/* 创建骑马标记 */
function createHorseMarker() {
// 创建自定义图标
const horseIcon = L.divIcon({
html: '🐎',
className: 'horse-marker',
iconSize: [30, 30],
iconAnchor: [15, 15]
});
// 创建标记
horseMarker = L.marker(allPoints[0].coord, {
icon: horseIcon,
zIndexOffset: 1000
}).addTo(map);
// 添加轻微的上下浮动动画
const markerElement = horseMarker.getElement();
markerElement.style.animation = 'horseFloat 3s ease-in-out infinite';
}
/* 移动骑马标记到指定点位 */
function moveHorseToPoint(index) {
const point = allPoints[index];
// 平滑移动效果
if (horseMarker) {
// 获取当前位置和目标位置
const currentLatLng = horseMarker.getLatLng();
const targetLatLng = L.latLng(point.coord);
// 创建路径线段数组，使马能够沿着路径移动
const pathPoints = [];
const numSteps = 50; // 路径上的点数量，越多路径越平滑
// 计算两点之间的路径点
for (let i = 0; i <= numSteps; i++) {
const progress = i / numSteps;
// 增加一些随机性，使路径看起来更自然
const randomFactor = 0.1 * (Math.sin(progress * Math.PI * 4) + Math.random() * 0.5);
const easedProgress = easeInOutCubic(progress);
// 计算中间位置，添加一些曲线效果
const lat = currentLatLng.lat +
(targetLatLng.lat - currentLatLng.lat) * easedProgress +
randomFactor * 0.1;
const lng = currentLatLng.lng +
(targetLatLng.lng - currentLatLng.lng) * easedProgress +
randomFactor * 0.1;
pathPoints.push({ lat, lng, progress });
}
// 创建马蹄印动画效果
createHorseTracks(currentLatLng, targetLatLng, numSteps);
// 移动到新位置 - 平滑过渡
const duration = 3000; // 动画持续时间，增加到3秒使移动更自然
const startTime = performance.now();
function moveHorse(timestamp) {
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / duration, 1);
// 使用缓动函数使动画更自然
const easedProgress = easeInOutCubic(progress);
// 找到当前进度对应的路径点
let currentPathPoint;
for (let i = 0; i < pathPoints.length; i++) {
if (pathPoints[i].progress >= easedProgress) {
currentPathPoint = pathPoints[i];
break;
}
}
if (currentPathPoint) {
// 更新骑马标记的位置
horseMarker.setLatLng(L.latLng(currentPathPoint.lat, currentPathPoint.lng));
if (progress < 1) {
requestAnimationFrame(moveHorse);
} else {
// 动画完成后更新点位状态
updateMarkerStates();
}
}
}
// 开始动画
requestAnimationFrame(moveHorse);
}
}
/* 创建马蹄印效果 */
function createHorseTracks(startPoint, endPoint, numSteps) {
// 计算每步之间的距离
const latStep = (endPoint.lat - startPoint.lat) / numSteps;
const lngStep = (endPoint.lng - startPoint.lng) / numSteps;
// 创建马蹄印标记
for (let i = 0; i < numSteps; i += 5) { // 每隔5步创建一个马蹄印
const lat = startPoint.lat + latStep * i;
const lng = startPoint.lng + lngStep * i;
// 随机偏移，使马蹄印看起来更自然
const randomLat = lat + (Math.random() - 0.5) * 0.01;
const randomLng = lng + (Math.random() - 0.5) * 0.01;
// 创建临时的马蹄印标记
const trackIcon = L.divIcon({
html: '👣',
className: 'horse-track',
iconSize: [30, 30],
iconAnchor: [15, 15]
});
const trackMarker = L.marker([randomLat, randomLng], {
icon: trackIcon,
zIndexOffset: 500
}).addTo(map);
// 设置淡出动画
setTimeout(() => {
let opacity = 1;
const fadeInterval = setInterval(() => {
opacity -= 0.1;
trackMarker.setOpacity(opacity);
if (opacity <= 0) {
clearInterval(fadeInterval);
map.removeLayer(trackMarker);
}
}, 100);
}, 1000);
}
}
/* 缓动函数 - 使动画更自然 */
function easeInOutCubic(t) {
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
}
/* 显示点位信息 */
function showPointInfo(point) {
const card = document.getElementById('infoCard');
const title = document.getElementById('infoTitle');
const year = document.getElementById('infoYear');
const description = document.getElementById('infoDescription');
const poem = document.getElementById('infoPoem');
const anecdote = document.getElementById('infoAnecdote');
const image = document.getElementById('infoImage');
// 设置内容 - 中英文并行显示
title.innerHTML = `<div class="bilingual-text">
<div class="chinese-text">${point.name}</div>
<div class="english-text">${point.nameEn}</div>
</div>`;
year.innerHTML = `<div class="bilingual-text">
<div class="chinese-text">${point.year}年 | ${point.event}</div>
<div class="english-text">${point.year} A.D. | ${point.eventEn}</div>
</div>`;
// 检查是否有文化信息
if (point.culture && point.culture.lines) {
// 显示诗句题目和内容，中英文并行显示
const poemTitle = point.culture.title || '诗句'; // 默认题目
const poemTitleEn = point.culture.titleEn || 'Verse'; // 默认英文题目
const poemHtml = `
<div class="bilingual-text poem-title">
<div class="chinese-text">${poemTitle}</div>
<div class="english-text">${poemTitleEn}</div>
</div>
<div class="bilingual-text">
<div class="chinese-text poem-highlight">${point.culture.lines.join('<br>')}</div>
<div class="english-text">${point.culture.linesEn.join('<br>')}</div>
</div>`;
poem.innerHTML = poemHtml;
// 显示文化轶事，中英文并行显示
if (point.culture.anecdote) {
anecdote.innerHTML = `<div class="bilingual-text">
<div class="chinese-text">${point.culture.anecdote}</div>
<div class="english-text">${point.culture.anecdoteEn}</div>
</div>`;
anecdote.style.display = 'block';
} else {
anecdote.style.display = 'none';
}
} else {
// 没有文化信息的情况下，也显示诗题
const poemTitle = '诗句'; // 默认题目
const poemTitleEn = 'Verse'; // 默认英文题目
poem.innerHTML = `<div class="bilingual-text poem-title">
<div class="chinese-text">${poemTitle}</div>
<div class="english-text">${poemTitleEn}</div>
</div>
<div class="bilingual-text">
<div class="chinese-text poem-highlight">${point.poem}</div>
<div class="english-text">${point.poemEn}</div>
</div>`;
anecdote.style.display = 'none';
}
// 设置图片
image.onload = function() {
image.classList.remove('image-loading');
};
image.onerror = function() {
// 如果加载失败，使用备用图片
image.src = point.fallbackImage || 'https://picsum.photos/id/1000/800/600';
image.classList.remove('image-loading');
};
// 开始加载图片
image.classList.add('image-loading');
image.src = point.image;
// 显示卡片
setTimeout(() => {
card.classList.add('active');
}, 100);
// 滚动到顶部
card.querySelector('.info-content').scrollTop = 0;
// 启动自动滚动
startAutoScroll();
}
/* 初始化阶段颜色指示器 - 中英文并行显示 */
function initStageIndicators() {
const container = document.getElementById('stageColors');
container.innerHTML = '';
// 同时显示中文和英文的阶段名称
stageNames.forEach((stage, index) => {
const item = document.createElement('div');
item.className = 'stage-item';
item.dataset.stage = stage.stage;
// 根据情绪强度动态调整颜色
const adjustedColor = adjustColorByMood(stage.color, stage.moodIntensity);
const colorBox = document.createElement('div');
colorBox.className = 'stage-color';
colorBox.style.backgroundColor = adjustedColor;
// 添加轻微的发光效果，增强古典感
colorBox.style.boxShadow = `0 0 8px 2px ${adjustedColor}40`;
const nameContainer = document.createElement('div');
nameContainer.className = 'bilingual-text';
const nameZhSpan = document.createElement('div');
nameZhSpan.className = 'chinese-text';
nameZhSpan.textContent = stage.name;
const nameEnSpan = document.createElement('div');
nameEnSpan.className = 'english-text';
nameEnSpan.textContent = stageNamesEn[index]?.name || '';
nameContainer.appendChild(nameZhSpan);
nameContainer.appendChild(nameEnSpan);
item.appendChild(colorBox);
item.appendChild(nameContainer);
container.appendChild(item);
});
}
/* 更新标记状态 */
function updateMarkerStates() {
markers.forEach((marker, index) => {
if (index === currentPointIndex) {
// 当前点使用高亮样式
marker.setStyle(marker.highlightStyle);
marker.openPopup(); // 打开当前点的弹出信息
} else {
// 其他点使用原始样式
marker.setStyle(marker.originalStyle);
marker.closePopup(); // 关闭其他点的弹出信息
}
});
}
/* 显示前一个点位 */
function prevPoint() {
currentPointIndex = (currentPointIndex - 1 + allPoints.length) % allPoints.length;
const point = allPoints[currentPointIndex];
showPointInfo(point);
moveHorseToPoint(currentPointIndex);
}
/* 显示下一个点位 */
function nextPoint() {
currentPointIndex = (currentPointIndex + 1) % allPoints.length;
const point = allPoints[currentPointIndex];
showPointInfo(point);
moveHorseToPoint(currentPointIndex);
}
/* 切换自动播放 */
function toggleAnimation() {
const playBtn = document.getElementById('playBtn');
if (isAnimating) {
// 停止动画
clearInterval(animationInterval);
playBtn.textContent = '▶';
playBtn.setAttribute('data-tooltip', '自动播放');
} else {
// 开始动画
animationInterval = setInterval(nextPoint, animationDelay);
playBtn.textContent = '⏸';
playBtn.setAttribute('data-tooltip', '暂停自动播放');
}
isAnimating = !isAnimating;
}
/* 隐藏信息卡片 */
function hideInfoCard() {
const card = document.getElementById('infoCard');
card.classList.remove('active');
// 停止自动滚动
stopAutoScroll();
}
/* 切换卡片折叠状态 */
function toggleCardCollapse() {
const card = document.getElementById('infoCard');
card.classList.toggle('collapsed');
}
/* 开始自动滚动 */
function startAutoScroll() {
if (!isScrolling) return;
const content = document.querySelector('.info-content');
function scrollContent() {
if (!isScrolling) return;
// 检查是否到达底部
if (content.scrollTop + content.clientHeight >= content.scrollHeight) {
// 回到顶部
content.scrollTop = 0;
} else {
// 继续滚动
content.scrollTop += scrollSpeed;
}
scrollAnimationId = requestAnimationFrame(scrollContent);
}
// 先清除之前的动画
stopAutoScroll();
// 开始新的动画
scrollAnimationId = requestAnimationFrame(scrollContent);
}
/* 停止自动滚动 */
function stopAutoScroll() {
if (scrollAnimationId) {
cancelAnimationFrame(scrollAnimationId);
scrollAnimationId = null;
}
}
/* 切换自动滚动状态 */
function toggleScroll() {
const pauseBtn = document.getElementById('pauseScrollBtn');
if (isScrolling) {
// 暂停滚动
isScrolling = false;
pauseBtn.textContent = '▶';
stopAutoScroll();
} else {
// 继续滚动
isScrolling = true;
pauseBtn.textContent = '⏸';
startAutoScroll();
}
}
/* 中英文并行显示后，不再需要语言切换功能 */
function toggleLanguage() {
// 函数保留但不执行任何操作
console.log('中英文已并行显示，无需切换语言');
}
/* 回到顶部 */
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
/* 处理滚动事件 */
function handleScroll() {
const backToTopBtn = document.getElementById('backToTop');
const currentScrollY = window.scrollY;
// 显示/隐藏回到顶部按钮
if (currentScrollY > 300) {
backToTopBtn.classList.add('visible');
} else {
backToTopBtn.classList.remove('visible');
}
// 保存滚动位置
lastScrollY = currentScrollY;
}
/* 页面加载完成后执行 */
window.addEventListener('load', function() {
// 初始化地图
initMap();
// 显示第一个点的信息
if (allPoints.length > 0) {
setTimeout(() => {
showPointInfo(allPoints[currentPointIndex]);
}, 1500);
}
// 添加滚动事件监听
window.addEventListener('scroll', handleScroll);
// 初始检查滚动位置
handleScroll();
// 添加信息卡片点击事件，展开/折叠卡片
const infoCard = document.getElementById('infoCard');
infoCard.addEventListener('click', function(e) {
// 如果点击的不是关闭按钮或折叠按钮，不执行操作
if (e.target === document.querySelector('.info-close') || e.target === document.querySelector('.collapse-btn')) {
return;
}
// 如果卡片已折叠，则展开
if (infoCard.classList.contains('collapsed')) {
infoCard.classList.remove('collapsed');
}
});
// 点击地图区域隐藏信息卡片（可选功能）
map.on('click', function(e) {
// 检查点击是否在信息卡片外
const cardRect = infoCard.getBoundingClientRect();
const clickX = e.originalEvent.clientX;
const clickY = e.originalEvent.clientY;
if (clickX < cardRect.left || clickX > cardRect.right ||
clickY < cardRect.top || clickY > cardRect.bottom) {
// 点击在卡片外，保持卡片状态不变
}
});
// 防止信息卡片中的链接点击事件冒泡到地图
infoCard.addEventListener('click', function(e) {
e.stopPropagation();
});
// 添加键盘事件监听
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowLeft') {
prevPoint();
} else if (e.key === 'ArrowRight') {
nextPoint();
} else if (e.key === ' ') {
e.preventDefault(); // 防止空格键滚动页面
toggleAnimation();
}
});
});
</script>
</body>
</html>
