Leaflet.PolylineMeasure 使用教程

最新推荐文章于 2025-05-15 08:54:56 发布

潘将栩

最新推荐文章于 2025-05-15 08:54:56 发布

阅读量461

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00645/article/details/141342693

Leaflet.PolylineMeasure 使用教程

Leaflet.PolylineMeasureLeaflet Plugin to measure distances of simple lines as well as of complex polylines项目地址:https://gitcode.com/gh_mirrors/le/Leaflet.PolylineMeasure

项目介绍

Leaflet.PolylineMeasure 是一个开源的 Leaflet 插件，用于测量简单线条以及复杂多段线的距离。该插件允许用户在地图上绘制线条并实时测量其长度。项目托管在 GitHub 上，由 ppete2 维护。

项目快速启动

安装

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

npm install leaflet leaflet.polylinemeasure

引入和初始化

在你的 HTML 文件中引入 Leaflet 和 Leaflet.PolylineMeasure 的 CSS 和 JS 文件：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="path/to/leaflet.css" />
    <link rel="stylesheet" href="path/to/Leaflet.PolylineMeasure.css" />
    <script src="path/to/leaflet.js"></script>
    <script src="path/to/Leaflet.PolylineMeasure.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 600px;"></div>
    <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 polylineMeasure = L.control.polylineMeasure().addTo(map);
    </script>
</body>
</html>