端午屈夫子祭-基于LeafLet的夫子一生时空轨迹纵览

朴灿烈づ我的快乐病毒、 2023-10-12 20:05 22阅读 0赞

**目录**

前言

一、要素整理

1、屈夫子的相关资料

2、人物轨迹时间线

3、四维导图整理

二、时空轨迹界面设计

1、界面设计

2、可视化采用组件

三、时空轨迹展示实现

1、创建一个Html文件骨架文件

2、网页样式设置

3、人物历史脉络数据

4、时间轴初始化

四、成果展示

1、静态图

2、动态图

总结

--------------------

## 前言 ##

端午节是中国传统节日之一，始于春秋时期，是为了纪念楚国大夫屈原而设立的。著名的诗句“**路漫漫其修远兮，吾将上下而求索**”就出自于屈原的代表作《离骚》。 在这个信息爆炸的时代，开发者们肩负着前所未有的责任与挑战。我们以屈原这句名言为指引，激励广大开发者在技术征途上不断求索，追求极致。

技术探寻之路是艰苦的，因为沿途有许多的原因导致追寻者中途放弃，也许是不堪技术探寻的痛苦。技术探寻之路也是幸福的，正如“**吾将上下而求索**”所言，技术之路的欢乐只有追寻着才懂。“**山重水复疑无路，柳暗花明又一村**”，当你在前进的道路上遇到一些好友，一起探寻，会感受到团队的力量，“**众人拾柴火焰高**”让人又不觉得痛苦。

本文将以时间作为主线，整理屈夫子从出生到入仕，再到流放，再度启用，二次流放直至含恨投江。以全新的一种视角去观察屈夫子的一生，基于LeafLet结合时间轴，完成时间与空间的时空纵览。最后祝所有的伙伴们端午安康，阖家幸福。

## 一、要素整理 ##

### 1、屈夫子的相关资料 ###

关于屈原的网上历史资料，我们主要百度百科直接获取，在百度百科的基础之上进行资料的整理，形成人物的历史资料线。下面罗列一些相关背景的介绍。

> 屈原（约公元前340年—公元前278年），芈姓，屈氏，名平，字原，又自云名正则，字灵均，出生于楚国丹阳秭归（今湖北宜昌），战国时期楚国诗人、政治家。 楚武王熊通之子屈瑕的后代。少年时受过良好的教育，博闻强识，志向远大。早年受楚怀王信任，任左徒、三闾大夫，兼管内政外交大事。提倡“美政”，主张对内举贤任能，修明法度，对外力主联齐抗秦。因遭贵族排挤诽谤，被先后流放至汉北和沅湘流域。 楚国郢都被秦军攻破后，自沉于汨罗江，以身殉楚国。  
> 屈原是中国历史上一位伟大的爱国诗人，中国浪漫主义文学的奠基人，“楚辞”的创立者和代表作家，开辟了“香草美人”的传统，被誉为“楚辞之祖”，楚国有名的辞赋家宋玉、唐勒、景差都受到屈原的影响。 屈原作品的出现，标志着中国诗歌进入了一个由大雅歌唱到浪漫独创的新时代 ，其主要作品有《离骚》《九歌》《九章》《天问》等。以屈原作品为主体的《楚辞》是中国浪漫主义文学的源头之一，对后世诗歌产生了深远影响。成为中国文学史上的璀璨明珠，“逸响伟辞，卓绝一世”。 “路漫漫其修远兮，吾将上下而求索”，屈原的“求索”精神，成为后世仁人志士所信奉和追求的一种高尚精神。  
> 1953年，在屈原逝世2230周年之际，世界和平理事会通过决议，确定屈原为当年纪念的世界四大文化名人之一。

### 2、人物轨迹时间线 ###

屈原其人的生平活动轨迹时间线可以从百度百科中直接获取转换。

> **早年经历**  
> 周显王二十九年（前340年）正月初七日，一说周显王三十年（前339年）正月十四日，屈原生于楚国丹阳秭归。次年，居乐平里。  
> 周显王三十九年（前330年），屈原居乐平里。自幼嗜书成癖，读书多而杂，“石洞读书”与“巴山野老授经”当在这一年。  
> 周显王四十年（前329年），居乐平里。屈原虽出身贵族，但因自幼生活在民众之中，加以家庭的良好影响，故十分同情贫苦百姓。从这时起，小小年纪便做了许多体恤民众的好事，博得了众口一词的赞誉。

![4bdd4914d13f4ed08f145ffc4f1bd6aa.png][]

### 3、四维导图整理 ###

通过对百度百科中的屈原信息的解读，按照时间线的先后进行整理。我们形成以下的四维导图：

![7cd36037ffde40a681e1825bce9173d0.png][]

## 二、时空轨迹界面设计 ##

### 1、界面设计 ###

![dcc8540d58bb4622b60c717b1fbc8e86.png][]

为了从时间和空间两个角度来综合展示屈原夫子一生的轨迹，我们将整个展示界面分为四个部分。

1.  标题栏：这里直接以大标题的形式展示界面信息。
2.  左边：界面左边将直观展示屈原一生的主要活动轨迹文字描述。
3.  中间地图及轨迹：将采用二维地图的形式展示地图信息，同时将屈原一生的轨迹线进行绘制
4.  时间轴：界面右下角直接展示不同的历史时期，以时间轴的形式展开。

### 2、可视化采用组件 ###

![09cfa3b6b3dd46f8aa59cae76d60504c.png][]

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，主要包含以下信息，如下表格所示：

<table> 
 <tbody> 
  <tr> 
   <td style="width:83px;">序号</td> 
   <td style="width:179px;">参数</td> 
   <td style="width:426px;">说明</td> 
  </tr> 
  <tr> 
   <td style="width:83px;">1</td> 
   <td style="width:179px;">time</td> 
   <td style="width:426px;">时间，如-340年，表示公元前340年</td> 
  </tr> 
  <tr> 
   <td style="width:83px;">2</td> 
   <td style="width:179px;">title</td> 
   <td style="width:426px;">标题，如出生于秭归县</td> 
  </tr> 
  <tr> 
   <td style="width:83px;">3</td> 
   <td style="width:179px;">desc</td> 
   <td style="width:426px;">重要描述信息，如屈原，芈姓，屈氏，名平，字原，楚国人（今湖北 秭归），是古帝高阳氏的后裔，其在《离骚》里自呈家世道：“帝高阳之苗裔兮，朕皇考曰伯庸。”</td> 
  </tr> 
  <tr> 
   <td style="width:83px;">4</td> 
   <td style="width:179px;">location</td> 
   <td style="width:426px;">位置信息，desc: "秭归县",geometry: [{type: "Point",coordinates: [110.69762668459,30.9187598961142]}]</td> 
  </tr> 
 </tbody> 
</table>

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()等。

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、静态图 ###

![c8078fe4986c436cb9c2e4466feafcb1.png][]

人生轨迹展示图

![a95fb978e1154e18ad6cecfbe127a16b.png][]

时间轴点击展示

![45abdee86c13422db5f8e06cb1aee4d0.png][]

汨罗投江

### 2、动态图 ###

这里分享一张动态的操作效果图，供朋友们指导。

![99011cee444c4bc08269074eb241c6a9.gif][]

## 总结 ##

以上就是本文的主要内容，谨以此文纪念楚国大夫屈原。本文将以时间作为主线，整理屈夫子从出生到入仕，再到流放，再度启用，二次流放直至含恨投江。以全新的一种视角去观察屈夫子的一生，基于LeafLet结合时间轴，完成时间与空间的时空纵览。最后祝所有的伙伴们端午安康，阖家幸福。

[4bdd4914d13f4ed08f145ffc4f1bd6aa.png]: https://img-blog.csdnimg.cn/4bdd4914d13f4ed08f145ffc4f1bd6aa.png
[7cd36037ffde40a681e1825bce9173d0.png]: https://img-blog.csdnimg.cn/7cd36037ffde40a681e1825bce9173d0.png
[dcc8540d58bb4622b60c717b1fbc8e86.png]: https://img-blog.csdnimg.cn/dcc8540d58bb4622b60c717b1fbc8e86.png
[09cfa3b6b3dd46f8aa59cae76d60504c.png]: https://img-blog.csdnimg.cn/09cfa3b6b3dd46f8aa59cae76d60504c.png
[c8078fe4986c436cb9c2e4466feafcb1.png]: https://img-blog.csdnimg.cn/c8078fe4986c436cb9c2e4466feafcb1.png
[a95fb978e1154e18ad6cecfbe127a16b.png]: https://img-blog.csdnimg.cn/a95fb978e1154e18ad6cecfbe127a16b.png
[45abdee86c13422db5f8e06cb1aee4d0.png]: https://img-blog.csdnimg.cn/45abdee86c13422db5f8e06cb1aee4d0.png
[99011cee444c4bc08269074eb241c6a9.gif]: https://img-blog.csdnimg.cn/99011cee444c4bc08269074eb241c6a9.gif