vue3 leaflet使用

vue3与leaflet的结合使用可以通过以下步骤实现：

1. 首先，安装Leaflet和Vue-Leaflet插件。可以通过npm或yarn来安装它们：

   npm install leaflet vue2-leaflet

2. 在Vue组件中引入所需的Leaflet组件和样式：

   import { LMap, LTileLayer, LMarker } from "vue2-leaflet";
   import "leaflet/dist/leaflet.css";

3. 在Vue组件模板中使用引入的组件并设置地图的初始中心和缩放级别：

   <template>
     <div id="map-container">
       <l-map :zoom="zoom" :center="center">
         <l-tile-layer :url="tileUrl"></l-tile-layer>
         <l-marker :lat-lng="markerLatLng"></l-marker>
       </l-map>
     </div>
   </template>

4. 在Vue组件的data选项中定义地图的初始中心坐标和缩放级别：

   export default {
     data() {
       return {
         center: [51.505, -0.09], // 初始中心坐标
         zoom: 13, // 初始缩放级别
         tileUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", // 地图瓦片的URL
         markerLatLng: [51.5, -0.09] // 标记的坐标
       };
     }
   };

5. 在Vue组件中使用Leaflet的其他功能，例如绘制多边形、编辑和删除图层等，可以根据Leaflet的文档进行相应的调用。

6. 监听切割事件可以使用以下代码：

   layer.on("pm:cut", e => {
     console.log(e, "切割");
   });