leaflet使用draw插件测量距离和面积

最新推荐文章于 2025-07-13 09:15:02 发布

翠莲

最新推荐文章于 2025-07-13 09:15:02 发布

阅读量7.2k

点赞数 15

CC 4.0 BY-SA版权

分类专栏： webgis vue openlayers/leaflet

本文链接：https://blog.csdn.net/weixin_44523653/article/details/109775150

本文介绍了如何在Leaflet地图中使用draw插件进行距离和面积的测量。首先，通过导入插件并初始化地图，然后设置画图监听函数，最后利用L.GeometryUtil.geodesicArea和L.latLng().distanceTo()计算几何图形的地理面积和两点间的距离。

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

官网在线例子

draw插件在线预览
我的测量预览图：

按照文档给出的例子，先引入这个插件，采用import形式

import "leaflet-draw";
import "leaflet-draw/dist/leaflet.draw.css";

初始化使用插件

//添加画图的提示信息
   L.drawLocal.draw.handlers.polyline = {
   
   
      tooltip: {
   
   
        start: "点击地图开始画线",
        cont: "继续选择",
        end: "双击完成绘制"
      }
    };
    L.drawLocal.draw.handlers.polygon = {
   
   
      tooltip: {
   
   
        start: "点击地图开始绘制多边形",
        cont: "继续选择",
        end: "点击第一个顶点完成绘制"
      }
    };
 /**
   * 绘制多边形
   */
  drawPolygon() {
   
   
    let map = this.map;
    let polygon = new L.Draw.Polygon(map, {
   
   
      shapeOptions