使用Leaflet计算高度

基础概念

Leaflet 是一个开源的 JavaScript 库，用于在网页上创建交互式地图。它支持多种地图图层，包括 OpenStreetMap、Mapbox 和卫星图像等。Leaflet 提供了丰富的 API 来处理地图上的各种操作，如缩放、平移、标记、多边形等。

类型

Leaflet 主要用于创建交互式地图，支持以下几种类型的地图：

OpenStreetMap：基于开源地图数据。
Mapbox：基于商业地图数据。
卫星图像：如 Google Earth 的卫星图像。
地形图：显示地形高度和地貌。

应用场景

地理信息系统（GIS）：用于展示和分析地理数据。
户外活动：如徒步、骑行、露营等活动的路线规划和导航。
房地产：展示房产位置和周边信息。
城市规划：展示城市规划和建设进展。

计算高度

在 Leaflet 中计算高度通常涉及到使用地形数据或高程数据。以下是一个简单的示例，展示如何使用 Leaflet 和 OpenTopography 的 API 来获取某个位置的高度。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Height Calculation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        #map {
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        var marker = L.marker([51.5, -0.09]).addTo(map);

        // 获取高度
        function getHeight(lat, lng) {
            fetch(`https://api.opentopography.org/api/v1/aster30m?locations=${lat},${lng}&output_format=json`)
                .then(response => response.json())
                .then(data => {
                    if (data.results.length > 0) {
                        var height = data.results[0].elevation;
                        console.log(`Height at ${lat}, ${lng} is ${height} meters`);
                    } else {
                        console.log('No data found');
                    }
                })
                .catch(error => {
                    console.error('Error fetching height data:', error);
                });
        }

        marker.on('click', function() {
            getHeight(marker.getLatLng().lat, marker.getLatLng().lng);
        });
    </script>
</body>
</html>

参考链接

遇到的问题及解决方法

问题：无法获取高度数据

原因：

API 请求失败或返回错误。
坐标位置没有有效的高度数据。

解决方法：

检查网络连接和 API 请求的 URL 是否正确。
确保请求的坐标位置在 OpenTopography 数据覆盖范围内。
处理 API 返回的错误信息，进行相应的错误处理。

fetch(`https://api.opentopography.org/api/v1/aster30m?locations=${lat},${lng}&output_format=json`)
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.results.length > 0) {
            var height = data.results[0].elevation;
            console.log(`Height at ${lat}, ${lng} is ${height} meters`);
        } else {
            console.log('No data found');
        }
    })
    .catch(error => {
        console.error('Error fetching height data:', error);
    });

通过以上方法，你可以使用 Leaflet 和 OpenTopography API 来计算地图上某个位置的高度，并处理可能遇到的问题。