Leaflet-GPX 开源项目教程

最新推荐文章于 2024-10-11 07:56:37 发布

余伊日Estra

最新推荐文章于 2024-10-11 07:56:37 发布

阅读量429

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00131/article/details/141446692

版权

Leaflet-GPX 开源项目教程

leaflet-gpxA GPX track plugin for Leaflet.js项目地址:https://gitcode.com/gh_mirrors/le/leaflet-gpx

项目介绍

Leaflet-GPX 是一个开源的 JavaScript 库，专门用于在 Leaflet 地图上显示 GPX 轨迹。Leaflet 是一个流行的开源 JavaScript 库，用于移动友好的交互式地图。Leaflet-GPX 扩展了 Leaflet 的功能，使其能够解析和显示 GPX 文件，从而在地图上展示 GPS 轨迹。

项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过 npm 安装 Leaflet 和 Leaflet-GPX：

npm install leaflet leaflet-gpx

引入依赖

在你的 HTML 文件中引入 Leaflet 和 Leaflet-GPX 的 CSS 和 JavaScript 文件：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-gpx"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 600px;"></div>
    <script>
        // 你的代码将放在这里
    </script>
</body>
</html>

加载 GPX 文件

在 <script> 标签中添加以下代码来加载和显示 GPX 文件：

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 gpxUrl = 'path/to/your.gpx'; // 替换为你的 GPX 文件路径

new L.GPX(gpxUrl, {
    async: true,
    marker_options: {
        startIconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.5.0/pin-icon-start.png',
        endIconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.5.0/pin-icon-end.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.5.0/pin-shadow.png'
    }
}).on('loaded', function(e) {
    map.fitBounds(e.target.getBounds());
}).addTo(map);