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

最新推荐文章于 2024-03-10 11:26:05 发布

原创最新推荐文章于 2024-03-10 11:26:05 发布 · 889 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue 专栏收录该内容

13 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.LinearMeasurement.extend({
  layerSelected: function (e) {
    /* cost should be in feet */

    var distance = e.total.scalar;

    if (e.total.unit === "mi") {
      distance *= e.sub_unit;
    } else if (e.total.unit === "km") {
      distance *= 3280.84;
    } else if (e.total.unit === "m") {
      distance *= 3.28084;
    }

    var data = {
      total_above_ground: numberWithCommas(L.Util.formatNum(cost_above_ground * distance, 2)),
      total_underground: numberWithCommas(L.Util.formatNum(cost_underground * distance, 2)),
    };

    var content = L.Util.template(html, data),
      popup = L.popup().setContent(content);

    e.total_label.bindPopup(popup, { offset: [45, 0] });
    e.total_label.openPopup();
  },
});

export default Ruler;

3.在地图的组件中引进：

import Ruler from "@/util/measurement";

4.在需要使用的方法中调用，或者直接在渲染地图初始化中调用

this.map.addControl(
          new Ruler({
            unitSystem: "metric",
            color: "#FF0080",
          })
        );