leaflet官网sample学习笔记+灾害情感地图实现（完结）
之所以写leaflet样例代码的博客，是因为想记录自己学习过程，提供一个笔记方便回头来看。
为什么要学leaflet？前面学了很久的 ArcGIS API for JS 虽功能齐全样式炫酷，但对于我这样的前端初学者来说十分不友好，并且他对geojson格式的处理也十分僵硬，sample没法改没法学。偶然间发现leaflet对geojson格式的处理很全，有官方sample也有其他人写的样例可以参考，于是做好了重新学习的准备。
在这片博客里，我把官方sample里的各种信息全部换成我熟悉的地点进行调试。我写代码喜欢写很多注释，写成自己最能理解的中文，方便回头看。所以文章可能没多少字，但是精华其实都在注释里了。
另，初学者（比如我）很不喜欢只有部分代码片的博客，因此本文贴出的代码片都是可以直接运行的。
本文以网盘形式给出了我本科毕业设计的情感地图部分的全部代码，数据来自于3.30-4.14的“凉山火灾”新浪微博，有需可自取。
毕业设计成品
经过两个星期的学习，我完成了毕业设计的情感地图设计部分。数据来源是2019.3.30-2019.4.14期间“凉山火灾”话题下的共3329条新浪微博，设计效果如图所示：
| 情感地图-全国 | 情感地图-四川 |
|---|---|
 |
| 灾中（3.30-4.07）情感地图-全国 | 灾中（3.30-4.07）情感地图-四川 |
|---|---|
 |
| 灾后（4.08-4.14）情感地图-全国 | 灾后（4.08-4.14）情感地图-四川 |
|---|---|
 |
附上所有源码的链接：
链接：https://pan.baidu.com/s/14LlPPZp7uW65Dk-KAnogbQ
提取码：wpax
以下部分是对leaflet官网sample的学习笔记。源码也在网盘链接里，可直接运行。
Leaflet Quick Start Guide
https://leafletjs.com/examples/quick-start/
My First Guide Test
实际效果：
用自定义的Icon图片做marker
https://leafletjs.com/examples/custom-icons/
My First Guide Test
阿里巴巴在线icon库
本例中icon图标(存在源文件src路径下)：
实际效果：
在Leaflet中使用geoJSON数据
https://leafletjs.com/examples/geojson/
JSON真香
其中引入的 geoJSON_WHU_FeatureCollection.js 文件如下
//武汉大学四个学部 + 宏博公寓 的geoJSON数据，type是FeatureCollection，
// 去 http://geojson.io 上自己画的
var geoJSON_WHU_FeatureCollection={
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "文理学部",
"show_on_map":true
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
114.35205459594727,
30.535502985381292
],
[
114.3596076965332,
30.53254585170109
],
[
114.36973571777344,
30.53084545907189
],
[
114.37076568603516,
30.532693710523137
],
[
114.37179565429688,
30.535133348594492
],
[
114.37179565429688,
30.53735114821524
],
[
114.37076568603516,
30.537794702062474
],
[
114.36904907226562,
30.539051426962313
],
[
114.36698913574219,
30.539273200256535
],
[
114.36475753784178,
30.539273200256535
],
[
114.36201095581055,
30.538977502418366
],
[
114.3617534637451,
30.540160288369066
],
[
114.36012268066405,
30.540234212012663
],
[
114.3570327758789,
30.54030813560003
],
[
114.35480117797852,
30.538829653161645
],
[
114.35342788696289,
30.536168328052764
],
[
114.35205459594727,
30.535502985381292
]
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "工学部",
"show_on_map":true
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
114.35480117797852,
30.538829653161645
],
[
114.35686111450194,
30.54045598260588
],
[
114.3618392944336,
30.54030813560003
],
[
114.36201095581055,
30.53912535144998
],
[
114.3651008605957,
30.539421048838012
],
[
114.36819076538086,
30.53912535144998
],
[
114.37196731567381,
30.537498999722725
],
[
114.37050819396973,
30.539568897194382
],
[
114.36896324157715,
30.541047368378486
],
[
114.36767578124999,
30.54459560738242
],
[
114.36441421508788,
30.546147921174956
],
[
114.35995101928711,
30.54829155180099
],
[
114.35771942138672,
30.54740453797207
],
[
114.3523120880127,
30.547774128052346
],
[
114.34819221496582,
30.547921963690516
],
[
114.34879302978516,
30.54163875054966
],
[
114.3508529663086,
30.537646851005153
],
[
114.35480117797852,
30.538829653161645
]
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "信息学部",
"show_on_map":true
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
114.35205459594727,
30.53557691256986
],
[
114.34982299804688,
30.53380264451493
],
[
114.34793472290038,
30.529292900678517
],
[
114.35660362243652,
30.526335577959657
],
[
114.35952186584473,
30.53254585170109
],
[
114.35205459594727,
30.53557691256986
]
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "医学部",
"show_on_map":true
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
114.35117483139038,
30.55908290420726
],
[
114.34426546096802,
30.558159034014334
],
[
114.3427848815918,
30.555904753831072
],
[
114.34364318847656,
30.55535041461725
],
[
114.34576749801636,
30.55492541907578
],
[
114.34958696365355,
30.55429716138814
],
[
114.3518829345703,
30.55411237894137
],
[
114.35286998748778,
30.555904753831072
],
[
114.35117483139038,
30.55908290420726
]
]
]
}
}, {
"type": "Feature",
"properties": {
"name":"宏博公寓",
"show_on_map":false
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
114.35946822166443,
30.525485331018817
],
[
114.35889959335327,
30.52495854385541
],
[
114.35962915420532,
30.524413269923986
],
[
114.36013340950012,
30.525004753369974
],
[
114.35946822166443,
30.525485331018817
]
]
]
}
}
]
};
实际效果：
通过geoJSON传值的、交互式的地图
https://leafletjs.com/examples/choropleth/
JSON第二香
数据在 src/geoJSON_WHU_FeatureCollection.js 之中，前文已给过；
实现：
鼠标移动到标色区域的上方，右上角会更新数据
Layer Groups and Layers Control
https://leafletjs.com/examples/layers-control/
主要是对底图的控制（至少在sample中是如此体现）
layersControl_my_demo
数据基于geoJSON_WHU_FeatureCollection.js，前文已给出。
达成效果：
右上角的负责切换，各种切换
网页上播放图片和视频
https://leafletjs.com/examples/video-overlay/
官网上是插入视频（但我觉得插入视频效果不好）
IMG_Add_demo
实际效果如图所示：