Leaflet での矩形などの図形を最前面・最背面へ移す

Rectangle など、 Path クラスを継承する図形は、 bringToFront() で最前面へ、 bringToBack() で最背面へ移動できる

// map や bounds の定義は省略しています
const rectangle1 = L.rectangle(bounds1)
  .addTo(map)
  .bringToFront()
const rectangle2 = L.rectangle(bounds2)
  .addTo(map)
  .bringToBack()

Vue 向けのラッパーライブラリである Vue Leaflet でもコンポーネントから mapObject を取得することでメソッドを利用できる（下記サンプルは Vue 2 向けのものです。 Vue 3 向けのもので利用可能かどうかは調査できてません・・・）

<!-- l-map 等マップのセッティングについては省略しています --> 
<template>
  <l-rectangle :bounds="bounds" @click="toBack" ref="rectangle"></l-rectangle>
</template>

<script>
import { LRectangle } from 'vue2-leaflet'
export default {
  components: { LRectangle },
  computed: {
    bounds () {
      return [[35.0, 134.0], [35.2, 134.2]]
    }
  },
  methods: {
    toBack () {
      this.$refs.rectangle.mapObject.bringToBack()
    }
  }
}
</script>