Meteorite Landings Map: A Tiny Web Map Demo for Visualization

陨石着陆地图

使用陨石着陆数据集，制作一个小的 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地图操作

Leaflet 首页给出了最简单的案例：

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <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' 的元素对应，并设置其中心位置和缩放等级。
添加 openstreetmap 瓦片地图作为地图的底图。
在地图上添加一个点，点击时显示相应文本。

参考该案例和 Leaflet 文档，地图部分的脚本如下：

// 初始化地图
const map = L.map('map').setView([30, 100], 5);  // 设置一个初始中心

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <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条记录，直接通过以上代码进行加载会引起卡顿，需要进行优化。