将VueLeaflet视图居中显示多个图层中的所有geoJson几何

<template>
  <div>
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer :url="tileLayerUrl"></l-tile-layer>
      <l-geo-json :geojson="geoJsonData"></l-geo-json>
    </l-map>
  </div>
</template>

<script>
import { LMap, LTileLayer, LGeoJson } from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    LGeoJson,
  },
  data() {
    return {
      zoom: 10,
      center: [latitude, longitude], // 设置地图中心点的经纬度
      tileLayerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', // 设置地图瓦片图层的URL
      geoJsonData: {}, // 存储geoJson数据
    };
  },
  mounted() {
    // 在mounted钩子函数中获取geoJson数据，并将其赋值给geoJsonData
    this.getGeoJsonData();
  },
  methods: {
    getGeoJsonData() {
      // 从后端或其他数据源获取geoJson数据，并将其赋值给geoJsonData
      // 示例：
      // axios.get('https://example.com/geojson')
      //   .then(response => {
      //     this.geoJsonData = response.data;
      //   })
      //   .catch(error => {
      //     console.error(error);
      //   });
    },
  },
};
</script>