vue3中如何将将 Leaflet 的 ImageOverlay 改为 CanvasOverlay

在 vue3 中将 Leaflet 的 ImageOverlay 改为 CanvasOverlay，需要进行以下步骤：

1. 安装 Leaflet 和 leaflet-canvas-overlay 包。

npm install leaflet leaflet-canvas-overlay --save

2. 在 Vue 中引入 Leaflet 和 leaflet-canvas-overlay 包。

在 Vue 中引入 Leaflet 和 leaflet-canvas-overlay 包，可以在 main.js 文件中添加以下代码：

import L from "leaflet";
import "leaflet-canvas-overlay";

3. 创建 CanvasOverlay 组件。

在 Vue 中创建 CanvasOverlay 组件，可以在 components 文件夹下创建一个名为 CanvasOverlay.vue 的文件。在该文件中，可以定义组件的模板和方法。

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
import L from "leaflet";
import "leaflet-canvas-overlay";

export default {
  name: "CanvasOverlay",
  props: {
    url: {
      type: String,
      default: "",
    },
    bounds: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    const map = this.$parent.map;
    const canvas = this.$refs.canvas;

    const overlay = L.canvasOverlay()
      .params({
        url: this.url,
        bounds: this.bounds,
      })
      .drawing(canvas)
      .addTo(map);
  },
};
</script>

4. 使用 CanvasOverlay 组件。

在 Vue 中使用 CanvasOverlay 组件，可以在 App.vue 文件中添加以下代码：

<template>
  <div id="app">
    <CanvasOverlay
      url="./image.png"
      :bounds="[[40.712, -74.227], [40.774, -74.125]]"
    />
  </div>
</template>

<script>
import CanvasOverlay from "./components/CanvasOverlay.vue";

export default {
  name: "App",
  components: {
    CanvasOverlay,
  },
  mounted() {
    const map = L.map("app").setView([40.712, -74.227], 13);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
      map
    );
    this.map = map;
  },
};
</script>

其中，CanvasOverlay 组件接受两个 props：url 和 bounds。url 表示图片的路径，bounds 表示图片的经纬度坐标范围。在 mounted 钩子函数中，使用 L.canvasOverlay() 方法创建 CanvasOverlay，将其绑定到地图上即可。