vue中使用leaflet渲染osm地图，使用leaflet-linear-measurement插件

最新推荐文章于 2025-03-31 10:53:02 发布

原创

最新推荐文章于 2025-03-31 10:53:02 发布 · 941 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍如何使用leaflet-linear-measurement插件为Leaflet地图添加线性测量功能，并计算地面和地下成本。通过安装插件、自定义显示样式及集成到地图中，实现便捷的距离测量与费用估算。

1.首先，安装leaflet的插件（插件地址：https://leafletjs.com/plugins.html）

npm i leaflet-linear-measurement --save

2.新建一个measurement.js文件

import "leaflet-linear-measurement/src/Leaflet.LinearMeasurement.js";
import "leaflet-linear-measurement/sass/Leaflet.LinearMeasurement.scss";
import L from "leaflet";

var cost_underground = 12.55,
  cost_above_ground = 17.89,
  html = [
    "<table>",
    ' <tr><td class="cost_label">Cost Above Ground:</td><td class="cost_value">${total_above_ground}</td></tr>',
    ' <tr><td class="cost_label">Cost Underground:</td><td class="cost_value">${total_underground}</td></tr>',
    "</table>",
  ].join(""),
  numberWithCommas = function (x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };

var Ruler = L.Control.