使用 Leaflet.js 在 Web 应用中可视化 GeoJSON 数据

ytkz2024-02-022024-09-09

引言

在本篇博客中，我们将带领您了解如何创建一个允许用户在地图上可视化 GeoJSON 数据的 web 应用。这对于处理地理数据的开发人员来说是一项常见任务，而借助 Leaflet.js——一个轻量级的、开源的、用于移动友好的交互式地图的 JavaScript 库，这个任务变得更加简单。

什么是 GeoJSON？

GeoJSON 是一种用于编码各种地理数据结构的格式。它支持编码点、线、多边形以及这些类型的多部分集合。GeoJSON 使用 JSON 标准来创建地理特征的结构化表示。

什么是 Leaflet.js？

Leaflet.js 是一个非常受欢迎的开源 JavaScript 库，用于创建对移动设备友好的交互式地图。它的设计目标是简单、高效和易用。它在所有主流的桌面和移动平台上都能高效工作，并且可以通过许多插件进行扩展。

实现

我们首先设置一个基本的 HTML 文档结构，包括 Leaflet.js 所需的 CSS 和 JavaScript 文件。

<!DOCTYPE html>
<html>
<head>
    <title>GeoJSON with Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #map { height: 80vh; }
    </style>
</head>
<body>
    <input id="geojson-file" type="file">
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([30.9042, 110.4074], 4);

        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);

        document.getElementById('geojson-file').addEventListener('change', function(e) {
            var file = e.target.files[0];
            var reader = new FileReader();
            reader.onload = function(e) {
                var data = JSON.parse(e.target.result);
                var geoJsonLayer = L.geoJson(data).addTo(map);
                map.fitBounds(geoJsonLayer.getBounds());
            };
            reader.readAsText(file);
        });
    </script>
</body>
</html>

在上述代码中，我们首先引入了 Leaflet.js 和 jQuery 的库文件。然后，我们创建了一个地图并设置了初始的视图以及一个基础的地图图层。

接着，我们监听了文件输入元素的 change 事件。当用户选择了一个 GeoJSON 文件后，我们使用 FileReader 对象来读取文件内容。当读取操作完成后，我们将文件内容解析为 JSON 对象，并使用 Leaflet.js 的 L.geoJson 方法将其添加到地图上。最后，我们使用 map.fitBounds 方法来调整地图的视图，使得所有的 GeoJSON 数据都能在地图上显示出来。