使用陨石着陆数据集，制作一个小的 HTML 网页案例，观测陨石的地理分布。网页通过简单的 HTML+CSS+JS 完成，使用 Leaflet 作为地图交互组件。
数据集：Meteorite Landings 陨石着陆 -超过45k撞击地球的陨石的数据_数据集-阿里云天池
该数据集包括撞击地球的45,000多颗陨石的位置，质量，组成和坠落年份。
该数据集部分记录有缺失，这里选取其中 reclat 和 reclong 都有值且 fall 为 Fell 的记录，表示有恢复经纬度坐标的、被观察到陨石坠落的记录。筛选得到一千多行。
网页部分的代码如下，主要包括三部分：网页头部信息、网页主体（包括一个一级标题、地图 div 块和一个功能按键）和地图交互脚本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meteorite Landings</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script> <!-- 用于解析CSV -->
<style>
#map {
height: 800px;
}
</style>
</head>
<body>
<div align="center">
<h1>Leaflet Map</h1>
</div>
<div id="map"></div>
<div align="center" style="margin: 20px 0;"><input type="file" id="csvFile" /></div>
<script>
// 地图交互相关脚本
// ......
</script>
</body>
</html>该代码直接通过浏览器渲染如下（底图见下文的script）：
Leaflet 首页 给出了最简单的案例：
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS popup.<br> Easily customizable.')
.openPopup();这三行代码分别表示：
map ，与 HTML 中 id='map' 的元素对应，并设置其中心位置和缩放等级。参考该案例和 Leaflet 文档 ，地图部分的脚本如下：
// 初始化地图
const map = L.map('map').setView([30, 100], 5); // 设置一个初始中心
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// 处理 CSV 文件
document.getElementById('csvFile').addEventListener('change', function (event) {
console.log('In change event');
const file = event.target.files[0];
if (file) {
console.log('File selected:', file.name);
Papa.parse(file, {
complete: function (results) {
const data = results.data;
// 解析 GeoLocation 字段并提取经纬度
console.log('Data:', data);
for (let i = 1; i < data.length; i++) {
const latitude = data[i][7];
const longitude = data[i][8];
if (latitude && longitude) {
const marker = L.marker([latitude, longitude]).addTo(map);
marker.bindPopup(`name: ${data[i][0]}<br>id:${data[i][1]}<br>nametype: ${data[i][2]}<br>recclass: ${data[i][3]}<br>mass: ${data[i][4]}<br>fall: ${data[i][5]}<br>year: ${data[i][6]}<br>reclat: ${data[i][7]}<br>reclong: ${data[i][8]}<br>GeoLocation: ${data[i][9]}`);
}
}
}
});
}
});其中，前两行类似，表示地图变量和 HTML 对象的映射以及底图的添加。
后面的代码为对 CSV 文件的处理，通过监听获取 id="csvFile" 的 HTML 对象发生的事件，执行函数功能。函数的逻辑为：读取对应的 CSV 文件，读取数据行（从第二行开始），并将其按照经纬度坐标值绘制添加到地图上；同时添加其标签信息。
最终效果如下：
可以观察到一些比较有意思的结果：这些记录在亚洲的印度、日本分布较为集中，在中国较分散，且大部分在东部地区。（因为这个测试的数据集是筛选过的，仅包括了观测坠落的陨石，不包括未观测到但被发现的陨石；整个数据集的分布特征可能有区别。）
为了观测整个数据集的空间分布，会带来一个问题，即：整个数据集包含了45k条记录，直接通过以上代码进行加载会引起卡顿，需要进行优化。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。