在vue3环境中利用canvas绘制出leaflet地图边界的经纬度刻度和数值；不使用其他插件

在Vue 3环境中，您可以使用HTML5的canvas元素和Leaflet库来绘制地图边界的经纬度刻度和数值。以下是一个简单的示例代码：

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

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'Map',
  setup() {
    const mapCanvas = ref(null)

    onMounted(() => {
      const canvas = mapCanvas.value
      const ctx = canvas.getContext('2d')

      // 设置画布尺寸
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight

      // 绘制地图边界的经纬度刻度和数值
      ctx.fillStyle = 'black'
      ctx.font = '12px Arial'

      // 绘制经度刻度和数值
      for (let i = -180; i <= 180; i += 10) {
        const x = (i + 180) * (canvas.width / 360)
        ctx.beginPath()
        ctx.moveTo(x, 0)
        ctx.lineTo(x, canvas.height)
        ctx.fillText(i.toString(), x, 12)
        ctx.stroke()
      }

      // 绘制纬度刻度和数值
      for (let i = -90; i <= 90; i += 10) {
        const y = (90 - i) * (canvas.height / 180)
        ctx.beginPath()
        ctx.moveTo(0, y)
        ctx.lineTo(canvas.width, y)
        ctx.fillText(i.toString(), 5, y + 5)
        ctx.stroke()
      }
    })

    return {
      mapCanvas
    }
  }
}
</script>

在上面的代码中，我们使用`ref`来创建一个对canvas元素的引用`mapCanvas`，然后在组件渲染后的`onMounted`钩子函数中获取canvas的上下文对象`ctx`，设置画布尺寸，并使用`ctx.beginPath()`、`ctx.moveTo()`、`ctx.lineTo()`、`ctx.fillText()`和`ctx.stroke()`方法来绘制刻度和数值。

请注意，上面的示例仅绘制了经度和纬度的刻度和数值，如果您需要绘制地图边界的其他元素，可以根据Leaflet库提供的相关方法进行扩展。