目录
前言
端午节是中国传统节日之一，始于春秋时期，是为了纪念楚国大夫屈原而设立的。著名的诗句“路漫漫其修远兮，吾将上下而求索”就出自于屈原的代表作《离骚》。 在这个信息爆炸的时代，开发者们肩负着前所未有的责任与挑战。我们以屈原这句名言为指引，激励广大开发者在技术征途上不断求索，追求极致。
技术探寻之路是艰苦的，因为沿途有许多的原因导致追寻者中途放弃，也许是不堪技术探寻的痛苦。技术探寻之路也是幸福的，正如“吾将上下而求索”所言，技术之路的欢乐只有追寻着才懂。“山重水复疑无路，柳暗花明又一村”，当你在前进的道路上遇到一些好友，一起探寻，会感受到团队的力量，“众人拾柴火焰高”让人又不觉得痛苦。
本文将以时间作为主线，整理屈夫子从出生到入仕，再到流放，再度启用，二次流放直至含恨投江。以全新的一种视角去观察屈夫子的一生，基于LeafLet结合时间轴，完成时间与空间的时空纵览。最后祝所有的伙伴们端午安康，阖家幸福。
一、要素整理
1、屈夫子的相关资料
关于屈原的网上历史资料，我们主要百度百科直接获取，在百度百科的基础之上进行资料的整理，形成人物的历史资料线。下面罗列一些相关背景的介绍。
屈原（约公元前340年—公元前278年），芈姓，屈氏，名平，字原，又自云名正则，字灵均，出生于楚国丹阳秭归（今湖北宜昌），战国时期楚国诗人、政治家。 楚武王熊通之子屈瑕的后代。少年时受过良好的教育，博闻强识，志向远大。早年受楚怀王信任，任左徒、三闾大夫，兼管内政外交大事。提倡“美政”，主张对内举贤任能，修明法度，对外力主联齐抗秦。因遭贵族排挤诽谤，被先后流放至汉北和沅湘流域。 楚国郢都被秦军攻破后，自沉于汨罗江，以身殉楚国。
屈原是中国历史上一位伟大的爱国诗人，中国浪漫主义文学的奠基人，“楚辞”的创立者和代表作家，开辟了“香草美人”的传统，被誉为“楚辞之祖”，楚国有名的辞赋家宋玉、唐勒、景差都受到屈原的影响。 屈原作品的出现，标志着中国诗歌进入了一个由大雅歌唱到浪漫独创的新时代 ，其主要作品有《离骚》《九歌》《九章》《天问》等。以屈原作品为主体的《楚辞》是中国浪漫主义文学的源头之一，对后世诗歌产生了深远影响。成为中国文学史上的璀璨明珠，“逸响伟辞，卓绝一世”。 “路漫漫其修远兮，吾将上下而求索”，屈原的“求索”精神，成为后世仁人志士所信奉和追求的一种高尚精神。
1953年，在屈原逝世2230周年之际，世界和平理事会通过决议，确定屈原为当年纪念的世界四大文化名人之一。
2、人物轨迹时间线
屈原其人的生平活动轨迹时间线可以从百度百科中直接获取转换。
早年经历
周显王二十九年（前340年）正月初七日，一说周显王三十年（前339年）正月十四日，屈原生于楚国丹阳秭归。次年，居乐平里。
周显王三十九年（前330年），屈原居乐平里。自幼嗜书成癖，读书多而杂，“石洞读书”与“巴山野老授经”当在这一年。
周显王四十年（前329年），居乐平里。屈原虽出身贵族，但因自幼生活在民众之中，加以家庭的良好影响，故十分同情贫苦百姓。从这时起，小小年纪便做了许多体恤民众的好事，博得了众口一词的赞誉。
3、四维导图整理
通过对百度百科中的屈原信息的解读，按照时间线的先后进行整理。我们形成以下的四维导图：
二、时空轨迹界面设计
1、界面设计
为了从时间和空间两个角度来综合展示屈原夫子一生的轨迹，我们将整个展示界面分为四个部分。
- 标题栏：这里直接以大标题的形式展示界面信息。
- 左边：界面左边将直观展示屈原一生的主要活动轨迹文字描述。
- 中间地图及轨迹：将采用二维地图的形式展示地图信息，同时将屈原一生的轨迹线进行绘制
- 时间轴：界面右下角直接展示不同的历史时期，以时间轴的形式展开。
2、可视化采用组件
Leaflet.js是一个轻量级的二维地图展示的组件，适合进行地图的展示及综合浏览。
jquery.js是一个es5的原生开发组件，这里功能较简单，暂不采用vue等新前端框架。
leaflet-timeline-slider.js是一个用于生成时间轴空间的简单组件，可以在前端生成时间轴。
三、时空轨迹展示实现
1、创建一个Html文件骨架文件
在电脑任一盘符下创建一个Html文件的骨架文件，这里引入必须得Css样式文件和Javascript脚本文件。关键代码如下所示：
<!DOCTYPE html>
<html>
<head>
<title>2023端午节-纪念屈原</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="leaflet/leaflet.css" />
<link rel="stylesheet" href="css/screen.css" />
<script src="leaflet/leaflet.js?v=1.0.0"></script>
<script src="jquery/jquery.js"></script>
<script src="leaflet-timeline-slider.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="mapid"></div>
<div id="qytitle">
<div>2023端午屈原纪念(-人生轨迹）</div>
</div>
<div id="info">
<div> 屈原,政治家,（前340年－前278年， 战国时期 楚国人,芈姓，屈氏，名平，字原，又在《离骚》中自云：“名余曰正则兮，字余曰灵均”。屈原早年受楚怀王信任，先后任三闾大夫、左徒，常与怀王商议国事，参与法律的制定。同时主持外交事务。主张楚国与齐国联合，共同抗衡秦国。在屈原努力下，楚国国力有所增强。但由于自身性格耿直骄傲，加之他人谗言与排挤，屈原逐渐被楚怀王疏远。<hr/> 前305年，屈原反对楚怀王与秦国订立黄棘之盟，但是楚国还是彻底投入了秦的怀抱。屈原愤而辞官自疏，离开郢都，流落到汉北。屈原流放期间，创作了大量文学作品，在作品中洋溢着对楚地楚风的眷恋和为民报国的热情。其作品文字华丽，想像奇特，比喻新奇，内涵深刻，成为中国文学的起源之一。<hr/> 前278年，秦国太尉白起挥兵南下，攻破了郢都，屈原在绝望和悲愤之下怀大石投汨罗江而死。传说当地百姓投下粽子餵鱼以此防止屈原遗体被鱼所食，后来逐渐形成一种仪式。以后每年的农历五月初五端午节，人们吃粽子，划龙舟以纪念这位伟大的诗人。 1953年是屈原逝世2230周年，世界和平理事会通过决议确定屈原为当年纪念的世界文化名人之一</div>
</div>
<script>
</script>
</body>
</html>
2、网页样式设置
为了让页面美观一些，需要我们在这个Html文件中定义样式文件，如下：
#mapid {
width: 99%;
height:100%;
position:absolute;
}
#info{
position:absolute;
z-index:403;
top:50px;
left:15px;
background-color: #3535b7;
opacity:0.75;
font-size: 15px;
color: white;
max-Width:280px;
height:500px;
overflow-y:auto;
font-family:fangsong;
padding:5px;
}
#qytitle {
position:absolute;
z-index:403;
top:10px;
left:500px;
background-color: #3535b7;
opacity:0.75;
font-size: 30px;
color: white;
}3、人物历史脉络数据
这里将梳理出来的人物脉络数据，形成一个json，主要包含以下信息，如下表格所示：
| 序号 | 参数 | 说明 |
| 1 | time | 时间，如-340年，表示公元前340年 |
| 2 | title | 标题，如出生于秭归县 |
| 3 | desc | 重要描述信息，如屈原，芈姓，屈氏，名平，字原，楚国人（今湖北 秭归），是古帝高阳氏的后裔，其在《离骚》里自呈家世道：“帝高阳之苗裔兮，朕皇考曰伯庸。” |
| 4 | location | 位置信息，desc: "秭归县",geometry: [{type: "Point",coordinates: [110.69762668459,30.9187598961142]}] |
var dwData = [
{
time: "-340",
title: "出生于秭归县",
desc: "屈原，芈姓，屈氏，名平，字原，楚国人（今湖北 秭归），是古帝高阳氏的后裔，其在《离骚》里自呈家世道：“帝高阳之苗裔兮，朕皇考曰伯庸。”屈原的出生日期，据近代许多人研究的结果，大概不出于楚宣王二十七年(前342年)到三十年(前339年)之间。而屈原这个名字，剧他在《离骚》中说：“皇览揆余初度兮，肇锡余以嘉名，名余曰正则兮，字余曰灵均”。\n意思是说：他父亲看到他生辰不凡，所以给他起了个好名字，名字叫做“平”，字名叫做“原”。",
location: {
desc: "秭归县",geometry: [{type: "Point",coordinates: [110.69762668459,30.9187598961142]}]
}
},
{
time: "-323",
title: "担任楚怀王的左徒",
desc: "<div>屈原是楚国贵族。精通历史、文学与神话，洞悉各国形势和治世之道；人既聪明，口才也甚佳，20多岁就已经做了楚怀王的左徒。司马迁《史记》说他是“博闻强志”，“娴于辞令”。左徒比楚国的宰相：令尹，只低一级。他对内和楚王讨论国家大事，发布号令，对外接待宾客，应付诸侯。楚王很信任他，还让他草拟法令，又让他出使齐国，联齐抗秦。足见屈原曾是楚国兼管内政外交的重要官员。</div>",
location: {
desc: "楚国（今河南省）",geometry: [{type: "Point",coordinates: [112.188333,30.354167]}]
}
},
{
time: "-317",
title: "实行一系列变法改革",
desc: "屈原担任左徒之后，大刀阔斧进行了许多改革。周慎靓王四年（前317年），制订并出台各种法令。\n周慎靓王五年（前316年），继续进行变法改革，与旧贵族和一切顽固势力进行斗争。周慎靓王六年（前315年），深入进行变法改革，民心沸腾；楚之形势大变，旧贵族面临着覆灭的命运。",
location: {
desc: "楚国（今河南省）",geometry: [{type: "Point",coordinates: [112.188333,30.354167]}]
}
},
{
time: "-315",
title: "遭楚怀王疏远",
desc: "屈原的改革精神和措施，却招来了楚国贵族大臣们的反对和嫉妒。反对者的代表就是楚怀王的宠妃郑袖、儿子子兰和上官大夫靳尚。这批人只想维护自己的贵族特权，而忽略了国家的长远利益。这批人整天围在楚怀王身边，左右怀王的言行。楚怀王，听信了谗言，渐渐疏远了屈原。屈原在《离骚》里叹道：“众女嫉余之蛾眉兮，谣诼谓余以善淫。”",
location: {
desc: "楚国（今河南省）",geometry: [{type: "Point",coordinates: [112.188333,30.354167]}]
}
},
{
time: "-313",
title: "力劝楚怀王无果",
desc: "楚怀王十六年（前313年），秦国想要攻打齐国，但忧虑齐、楚两国已经缔结了合纵联盟，张仪前往楚国游说楚怀王，许商于一带六百里的土地以换取楚齐断交宣战。屈原与陈轸力劝无果，屈原反遭楚怀王离弃。",
location: {
desc: "楚国（今河南省）",geometry: [{type: "Point",coordinates: [112.188333,30.354167]}]
}
},
{
time: "-312",
title: "得楚怀王复用，重修楚齐之盟",
desc: "<div>前312年，发现被骗的怀王稍有醒悟，“悔不用屈原之策”，于是复用屈原，让他出使齐国，重修楚齐之盟。秦国两次大败楚军之后，也怕齐、楚复交，于是主动提出退还汉中之地的一半以求和。楚怀王恨透了张仪，提出不要汉中地，只要张仪头。张仪到楚以后，贿赂了郑袖靳尚之流，在楚怀王面前一番花言巧语之后，糊涂透顶的楚怀王居然又把张仪给放了；还和秦王结下了婚姻关系。等到屈原使齐回来，说明利害，怀王想追回张仪，张仪早已走得无影无踪了。这样楚国对齐国又一次大失信用。</div>",
location: {
desc: "楚国（今河南省）",geometry: [{type: "Point",coordinates: [112.188333,30.354167]}]
}
},
{
time: "-304",
title: "第一次被流放",
desc: "<div>屈原竭力反对楚国与秦国交好，结果不但无效，反而遭到了第一次流放，流放到了汉北地区（今安康一带及汉水上游地区）。《九章·抽思》里有欲归不得之意。</div>",
location: {
desc: "汉北地区（今安康一带及汉水上游地区）",geometry: [{type: "Point",coordinates: [108.990397684829,32.7330177959398]}]
}
},
{
time: "-293",
title: "第二次被流放",
desc: "前293年，顷襄王六年，秦国派白起前往伊阙攻打韩国，取得重大胜利，斩首24万。楚顷襄王很忧虑，就谋划再与秦国讲和。这对屈原来说是绝对不能容忍的。他和楚国人民一样，一方面责怪子兰不该劝怀王入秦，以至使怀王死在秦国，又责怪他不该怂恿顷襄王向秦国屈膝投降。他写诗抒情，表达了他眷顾楚国，系心怀王，不忘欲反”的感情，又指出，怀王最后落到客死他国的下场，就是因为“其所谓忠者不忠，而所谓贤者不贤也”。这对子兰形成了威胁，于是子兰指使靳尚到顷襄王面前进谗，使屈原第二次被流放到南方的荒僻地区。这次流放的路线，按《哀郢》分析，是从郢都（湖北江陵县）出发，先往东南顺江而下经过夏首（湖北省荆州市沙市区东南）、遥望龙门（郢都的东门）经由洞庭湖进入长江，然后又离开了夏浦（湖北汉口），最后到了陵阳（据说是今安徽青阳县南）。",
location: {
desc: "郢都（今湖北江陵县）",geometry: [{type: "Point",coordinates: [112.41094,30.03414]},
{type: "Point",coordinates: [112.24995,30.31363]},
{type: "Point",coordinates: [114.272597,30.581179]},
{type: "Point",coordinates: [108.452999984903,27.4436999964721]}
]
}
},
{
time: "-280",
title: "埋下了以身殉国的思想",
desc: "<div>楚顷襄王十九年（前280年），秦将司马错攻楚，楚割让上庸、汉北地；第二年，秦起攻楚，取邪、邓、西陵；顷襄王二十一年（前278年）白起更进一步攻下了郢都，顷襄王只好跟那些执政的贵族们一起，狼狈不堪地逃难，“保于陈城（今河南淮阳县）”。屈原在这前后，曾沿江西上，还想看一看这满身疮痍的祖国和他终身辅佐的楚王。结果只看到强秦的步步进逼、楚国朝廷的腐败和昏庸。想为楚王“奔走以先后”，“虽九死其犹未悔”的屈原，眼看着祖国一步步走向灭亡，自己却不能有一点作为，就埋下了以身殉国的思想，他过鄂渚（湖北武昌），入洞庭，溯沅水，经枉陼 （湖南常德武陵县）至辰阳（湖南辰溪），又折向东南，入于溆浦，暂时停留下来。</div>",
location: {
desc: "鄂渚（湖北武昌）",
geometry: [{type: "Point",coordinates: [114.312478284088,30.5309104961526]},
{type: "Point",coordinates: [112.951389,29.310556]},
{type: "Point",coordinates: [111.678110284454,29.0405249963039]},
{type: "Point",coordinates: [110.210705284658,27.9521007964179]},
{type: "Point",coordinates: [110.586278984607,27.9123952964221]}
]
}
},
{
time: "-278",
title: "自尽于汨罗江",
desc: "前278年，秦国太尉白起挥兵南下，攻破了郢都，屈原下沅江，入洞庭，渡湘水，到了长沙附近的汨罗江，在绝望和悲愤之下怀大石投汨罗江而死。一年大概是前278年，顷襄王二十一年，屈原生年62岁左右。",
location: {
desc: "汨罗江",geometry: [{type: "Point",coordinates: [112.95,29.001111]}]
}
}
];4、时间轴初始化
这里需要重点讲解的是如何定义时间轴以及人物轨迹的初始化。主要包含的函数有initTimeLine()、getDataAddMarkers()、timelineSlider()等。
function initTimeLine(){
var latlngs = [
[30.9187598961142, 110.69762668459],
[30.354167,112.188333],
[32.7330177959398, 108.990397684829],
[30.03414, 112.41094],
[30.31363, 112.24995],
[30.581179, 114.272597],
[27.4436999964721, 108.452999984903],
[29.310556, 112.951389],
[29.0405249963039, 111.678110284454],
[27.9521007964179, 110.210705284658],
[27.9123952964221, 110.586278984607],
[29.001111, 112.95]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(mymap);
for(var i =0;i<dwData.length;i++){
var item = dwData[i];
diyTimelineItems.push(item.time);
}
L.control.timelineSlider({timelineItems: diyTimelineItems,
changeMap: getDataAddMarkers,
extraChangeMapParams: {exclamation: "Hello World!"} })
.addTo(mymap);
}getDataAddMarkers = function( {label, value, map, exclamation} ) {
map.eachLayer(function (layer) {
if (layer instanceof L.Marker) {
map.removeLayer(layer);
}
});
filteredData = dwData.filter(function (i, n) {
return i.time===label;
});
showLayerGroup.clearLayers();
var markerArray = [];
L.geoJson(filteredData[0].location.geometry, {
onEachFeature: function onEachFeature(feature, layer) {
content = "<b>"+filteredData[0].title + "</b><br/>" + filteredData[0].location.desc + "<br/>" + filteredData[0].desc;
var popup = L.popup().setContent(content);
layer.bindPopup(popup);
layer.addTo(showLayerGroup);
}
});
map.fitBounds(showLayerGroup.getBounds(),{maxZoom:10});
};四、成果展示
1、静态图
人生轨迹展示图
时间轴点击展示
汨罗投江
2、动态图
这里分享一张动态的操作效果图，供朋友们指导。
总结
以上就是本文的主要内容，谨以此文纪念楚国大夫屈原。本文将以时间作为主线，整理屈夫子从出生到入仕，再到流放，再度启用，二次流放直至含恨投江。以全新的一种视角去观察屈夫子的一生，基于LeafLet结合时间轴，完成时间与空间的时空纵览。最后祝所有的伙伴们端午安康，阖家幸福。
3893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
