135：vue+leaflet 利用Leaflet-Geoman绘制多种图形，导出为geojson文件

已于 2024-05-10 11:56:40 修改
阅读量1k 收藏 36
点赞数 34
CC 4.0 BY-SA版权
分类专栏： # leaflet综合教程150+ 文章标签： leafletPM leaflet绘图 大剑师 leaflet进阶教程 leaflet高级教程
于 2023-11-09 00:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/134248734
该博客由大剑师兰特分享，展示如何在Vue与Leaflet环境中利用Leaflet-Geoman库创建多种图形，并能将这些图形导出为GeoJSON文件。详细介绍了配置方法和源代码，适合希望深入学习leaflet高级功能的开发者参考。

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

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 135个示例

文章目录

一、示例效果图

二、示例简介

本示例演示如何在vue+leaflet中利用Leaflet-Geoman绘制多种图形，导出为geojson文件。 灵活地配置Leaflet-Geoman的属性，可以产生各种美妙的绘图效果。利用FileSaver可以导出geojson文件。

直接复制下面的 vue+leaflet源代码，操作2分钟即可运行实现效果

三、配置方式<

了解本专栏 订阅专栏 解锁全文
136：vue+leaflet：个性化配置，利用Leaflet-Geoman绘制多种图形
大剑师兰特的GIS世界
11-10 1058
第136个本示例的目的是介绍演示如何在vue+leaflet中个性化配置，利用Leaflet-Geoman绘制多种图形。灵活地配置Leaflet-Geoman的属性，可以产生各种美妙的绘图效果。
066：vue+leaflet 设置多个marker，导出为一个geojson文件
大剑师兰特的GIS世界
02-15 602
第066个本示例的目的是介绍演示如何在vue+leaflet中使用L.marker设置多个markers， 通过数据重组，导出为geojson文件。这里面是一个很重要的判断条件，可以灵活地去运用。
leaflet-geoman::fallen_leaf::world_map:最强大的传单插件，用于绘制和编辑几何图层
04-27
传单-风水人 用于创建和编辑几何图层的传单插件绘制，编辑，拖动，剪切，拆分 :star: ， 措施 :star: ，按扣和固定 :star: 层数支持标记，CircleMarkers，折线，多边形，圆，矩形，ImageOverlay，LayerGroups，GeoJSON，MultiLineStrings和MultiPolygons 在生产中使用Leaflet-Geoman？ Leaflet-Geoman Pro :star: 标有的功能 :star: Leaflet-Geoman Pro中提供了本文档中的内容。 或取得联系 文献资料 安装 入门 绘画模式 编辑模式 拖曳模式 移除模式 裁切模式 选项 客制化 工具列 需要功能吗？ | 现有功能请求 安装 从Leaflet.PM迁移 npm uninstall leaflet.pm npm i @geoman-io/leaflet-geoman-free 就是这样。
基于 Leaflet 地图库的强大线条、多边形、圆形、矩形等绘制插件Leaflet-Geoman
最新发布
luck332的专栏
05-17 850
Leaflet-Geoman是一个基于Leaflet地图库的插件，专为交互式地图几何形状操作设计，适用于开发者实现地图要素的绘制、编辑和管理。其核心功能包括支持多种地理要素的绘制与编辑（如标记、线条、多边形等），提供吸附和固定功能以确保几何形状的精确拼接，并优化了大规模数据集下的性能。此外，Leaflet-Geoman支持GeoJSON格式，便于与其他GIS系统集成，并提供工具栏自定义和多语言支持（包括中文）。应用场景广泛，涵盖WebGIS开发、地理信息分析、教育与培训等领域。通过简单的代码示例，开发者可以
使用Leaflet GeoMan结合天地图进行自由标绘实战
夜郎King的博客
07-31 9484
本文首先讲解基于Leaflet开发的一个Leaflet GeoMan组件，介绍这个组件是什么，有哪些特色功能，然后介绍如何在工程中使用这些组件，最后在以一个实际的案例来实现之前我们提出来的场景。通过本文，可以了解什么是Leaflet geoMan，还可以掌握它的基本用法，了解如何创建第一个基本应用，最后学会如何在WebGis界面中进行自由标绘。
【亲测免费】 探索地理空间数据的强大工具：Leaflet-Geoman
gitblog_00077的博客
05-12 534
探索地理空间数据的强大工具：Leaflet-Geoman 当你需要在地图上绘制、编辑和管理几何形状时，Leaflet-Geoman是一个不容忽视的开源插件。它为流行的JavaScript库Leaflet提供了丰富的功能，让你能够轻松地创建、修改各种地理元素。 1、项目介绍 Leaflet-Geoman是一个基于Leaflet的地图编辑插件，专为开发者设计，用于实现交互式的地图几何形状操作。无论你是...
Leaflet+Leaflet-Geoman绘制天地图
明知山
08-19 1392
安装所需依赖 yarn add leaflet @geoman-io/leaflet-geoman-free <template> <div id="map"></div> <div class="handle"> <button @click="drawMap">绘制区块</button> <button @click="cancelDrawMap">取消绘制</button>
leaflet 综合教程150+ 【目录 】（已包含149篇文章）
大剑师兰特的GIS世界
09-07 1万+
vue+leaflet系列教程旨在为开发者提供简单快捷的，。在每一个示例中，解释相应的API知识点，做到。注意本示例目录中的内容可能加载是vue+openlayers的示例， 本目录是要加载vue+leaflet的示例，只是内容少，逐渐更新中。
Vue+Leaflet.PM插件实现创建和编辑几何图形(点、线、面、圆等)
BADAO_LIUMANG_QIZHI的博客
08-15 6039
在上面加载显示OSM的基础上，使用Leaflet.pm插件实现在页面上绘制、编辑、剪切、移动几何元素。
leaflet-geoman.7z
01-06
包含了Leaflet和leaflet-geoman的必要文件
Leaflet【六】绘制交互图形、测量、经纬度展示
共勉
07-05 3004
本文主要探讨了如何利用leaflet-draw插件在地图上绘制图形，以及通过leaflet-measure测量距离和面积，并将经纬度绘制到地图上。首先，我们使用leaflet-draw插件，该插件提供了一种简单而直观的方式来绘制各种形状（如点、线、多边形等）到地图上。然后，我们利用leaflet-measure插件，该插件可以测量地图上任意两点之间的距离，以及任意多边形的面积。最后，我们将经纬度数据绘制到地图上，以便于进行地理位置分析和可视化。这种方法为地理信息的收集、分析和可视化提供了一种有效的工具。
Leaflet-Geoman学习笔记
qq_38436431的博客
10-18 1657
自定义绘制图层的样式，可以在调用 enableDraw 方法是，通过 options 进行设置，也可以通过如下代码方式手动设置：},{ignoreShapes: ["Circle", "Rectangle"], // 忽略的几何类型});
vue+leaflet.pm(geoman)插件绘制、编辑、拖动、点击即清除图形（以矩形为例，只保留一个绘制图形）
我曾崩溃、怯懦、自我怀疑，内心有什么东西腐烂了，恶臭熏天
03-01 6125
vue+leaflet.pm(geoman)插件绘制、编辑、拖动、点击即清除图形、修改面填充
【Leaflet入门】vue使用leaflet插件--几何绘制
lishuyuli的博客
06-09 3177
上一篇文章我们介绍了Leaflet图层的创建方式和增加删除的方法,这一篇呢主要介绍一下在Leaflet中几何的编辑方式,以及一些小编在项目中跟几何有关的需求分享。小编的项目呢,用它自带的工具栏不太符合小编的项目需求,所以小编走得是自定义的按钮可以调用下面的方法开启绘制模式,第一个参数是你想绘制的图形,绘制完成后你需要关闭绘制方法,可以写在监听事件中里面的一些设置参数就不详细写啦,感兴趣的可以去文档查看以上就是我在项目中使用Leaflet-Geoman插件的方法,有什么问题欢迎大家随时交流。
113：vue+leaflet上传gpx文件，导出为geoJson文件
大剑师兰特的GIS世界
03-08 237
第113个本示例的目的是介绍演示如何在vue+leaflet中上传GPX文件，将图形显示在地图上，并导出为geoJson文件。
Leaflet——手动/动态绘制圆，线，多边形（单个及多个）
shsyzhzhgn的博客
09-20 1511
动态绘多边形主要涉及到三个事件:click,dbclick,mousemove;click确定多边形的角，dbclick确定多边形结束的角，mousemove绘制鼠标移动过程中多边形的变化;注意：单击事件和双击事件冲突，双击时执行两次单击事件；使用定时器解决，在单击事件函数里通过定时器控制延迟执行。单击事件函数和双击事件函数里都先清定时器。效果：双击第一次点击执行单击函数，第二次点击执行双击函数，思路：动态绘多边形主要涉及到三个事件:click,dbcl达到最后双击结束点也算多边形一角的效果。
Leaflet-Geoman 帮助文档
热门推荐
DI_ID的博客
06-19 1万+
Leaflet-Geoman 使用文档 安装 迁移 Leaflet.PM npm uninstall leaflet.pm npm i @geoman-io/leaflet-geoman-free 通过npm安装 npm i @geoman-io/leaflet-geoman-free 手动安装 下载leaflet-geoman.css 和leaflet-geoman.min.js ，然后把它们包含在工程中。 通过CDN安装 CSS <link rel="stylesheet" href="htt
使用leaflet在地图上绘制多个多边形
黄-小智的博客
07-09 2548
由于需要在地图上绘制大量的多边形，国内地图高德、百度等都有对应API可以使用，如果在国外就无法使用这些地图了，加上也会有偏移等问题，所以此时leaflet就发挥了很大的作用，提供了众多且强大的API等。 具体如何使用leaflet，因为比较基础，这里不详细说明，具体建议查看官网以及各大博主的博客 具体思路： 1.leaflet提供了在地图上绘制圆，多边形，矩形，折线等各种API 官网链接：链接: link. 其实思路很简单，只需要有对应位置的经纬度即可 直接上代码： // An highlighted b
vue geojson编辑器
02-19
对于寻找适用于 Vue.js 的 GeoJSON 文件编辑器组件或工具，当前社区内存在多种解决方案。一种常见的方法是利用 Leaflet 或 OpenLayers 这样的地图库来实现地理数据可视化，并结合特定插件完成交互式编辑功能。 ####...
评论 32
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值