用vue3 组件化形式封装一套Leaflet.Editable 代码

好的，以下是一个简单的封装：

首先，需要安装 `leaflet` 和 `leaflet-editable`：

npm install leaflet leaflet-editable

然后，创建一个名为 `EditableMap.vue` 的组件：

<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script>
import L from 'leaflet'
import 'leaflet-editable'

export default {
  name: 'EditableMap',
  props: {
    center: {
      type: Array,
      required: true
    },
    zoom: {
      type: Number,
      default: 13
    }
  },
  mounted () {
    this.map = L.map(this.$refs.mapContainer).setView(this.center, this.zoom)
    this.map.editTools = new L.Editable(this.map)
  },
  beforeUnmount () {
    this.map.remove()
  }
}
</script>

<style scoped>
.map-container {
  height: 400px;
}
</style>

这个组件会创建一个 Leaflet 地图，并将其设置为可编辑模式。它接受两个 props：`center` 和 `zoom`，分别指定地图的中心点和缩放级别。

现在，你可以在你的应用程序中使用这个组件了。例如，你可以这样写：

<template>
  <div>
    <EditableMap :center="[51.505, -0.09]" :zoom="13" />
  </div>
</template>

<script>
import EditableMap from '@/components/EditableMap.vue'

export default {
  components: {
    EditableMap
  }
}
</script>

这将在页面上显示一个地图，并将其设置为可编辑模式。你可以使用 Leaflet.Editable API 来添加、编辑和删除图形对象。例如，这是一个在地图上添加圆形的示例：

// 获取 EditableMap 组件实例
const editableMap = this.$refs.editableMap.$refs.mapContainer.__vue__

// 创建一个圆形
const circle = L.circle([51.505, -0.09], {
  radius: 500
})

// 将圆形添加到地图上
editableMap.map.editTools.startCircle(circle)

希望这可以帮助你开始使用 Leaflet.Editable！