leaflet-draw详细使用

原创

已于 2024-03-11 10:57:13 修改 · 2.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #javascript #前端 #vue.js

于 2024-02-29 11:32:06 首次发布

本文介绍了如何在Vue3项目中集成Leaflet库，并使用leaflet-draw插件实现地图上的绘制功能，包括线、多边形、矩形、圆和标记的绘制，以及编辑和删除控件的配置。

leaflet-draw

此篇文章是我leaflet基本用法的延伸地图信息 leaflet +vue3 一个文档让你掌握leaflet基础用法_vue3+leaflet-优快云博客

所以没有过多介绍leaflet。

废话不多说，直接上代码，此处的我把该事件单独放在了一个js文件，map是初始化地图，以下代码包含了英文转中文（好像可以直接引入leaflet.draw-cn.js文件也可转换，但有可能不行，所以科学上网哟各位！！！）

有啥问题，优化改进欢迎留言

import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-draw'
import 'leaflet-draw/dist/leaflet.draw.css'
export function useTools(map) {
    //添加绘制图层
    let drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);
    添加绘制控件
     let drawControl = new L.Control.Draw({
       draw: {
             polyline: true, //绘制线
             polygon: true,  //绘制多边形
             rectangle: true, //绘制矩形
             circle: true,//绘制圆
             marker: true,   //绘制标注
             circlemarker: