Nuxt.js 2中Leaflet地图GeoJSON地理图层无法显示问题求助

环境信息 #

• 依赖版本：
  • leaflet: ^1.9.4
  • nuxt: ^2.0.0
  • node: 14.21.3
  • npm: 6.14.18

问题现象 #

通过GeoJSON加载的Leaflet地图地理内容完全不显示，仅呈现地图容器的深色背景：

已执行操作 #

• 已在Nuxt组件的head配置中正确引入Leaflet官方CSS样式
• 在mounted钩子中完成地图初始化，且已确认GeoJSON数据有效合法
• 地理图层仍无法正常渲染

问题代码 #

<template>
  <div class="relative w-100">
    <div id="map"></div>
  </div>
</template>
<script>
export default {
  name: 'CTFMapV2',
  head() {
    return {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css',
        },
      ],
    }
  },
  data() {
    return {
      L: null,
      map: null,
      zoom: 5,
      center: [-3, 117],
      geoJsonData: null,
      geoOptions: {
        interactive: false,
        style: {
          weight: 2,
          opacity: 1,
          color: '#27354a',
          dashArray: '3',
          fillOpacity: 0.7
        }
      },
      LMapOptions: {
        dragging: false,
        boxZoom: false,
        zoomControl: false,
        scrollWheelZoom: false,
        doubleClickZoom: false
      },
      popupOptions: {
        closeButton: false,
        className: 'map-popup',
        interactive: true,
        maxWidth: 330,
        autoPan: false,
        keepInView: true,
        offset: [0, 0],
        autoPanPaddingTopLeft: [0, 0],
        autoPanPaddingBottomRight: [0, 0]
      },
      iconSize: 22
    }
  },
  computed: {
    dynamicSize() {
      return [this.iconSize, this.iconSize]
    },
    dynamicAnchor() {
      return [this.iconSize / 2, this.iconSize / 1.5]
    }
  },
  mounted() {
    this.initialMap()
  },
  methods: {
    async initialMap() {
      this.L = require('leaflet')
      this.map = this.L.map('map', {
        center: this.center,
        ...this.LMapOptions
      })
      this.L.geoJSON(await this.loadGeoJsonData(), this.geoOptions).addTo(
        this.map
      )
    },
    badgeVariant(level) {
      const lv = level.toLowerCase()
      if (lv === 'easy') return 'success'
      else if (lv === 'medium') return 'warning'
      else if (lv === 'hard') return 'danger'
      return 'secondary'
    },
    async loadGeoJsonData() {
      try {
        const response = await fetch(
          'https://raw.githubusercontent.com/eppofahmi/geojson-indonesia/master/provinsi/all_maps_state_indo.geojson'
        )
        const idn = await response.json()
        return idn
      } catch (error) {
        console.error('Error loading GeoJSON:', error)
      }
    },
    createIcon({ img }) {
      return this.L.icon({
        iconUrl: img,
        iconSize: this.dynamicSize,
        iconAnchor: this.dynamicAnchor,
        popupAnchor: [0, 0]
      })
    },
    createMarker({ icon, coordinate, map, content }) {
      const marker = this.L.marker(coordinate, { icon }).addTo(map)
      const popup = this.L.popup().setContent(content)
      marker.on('mouseover', function() {
        marker.openPopup()
      })
      popup.on('mouseout', function() {
        popup.closePopup()
      })
      marker.bindPopup(popup)
      return marker
    }
  }
}
</script>
<style scope>
#map {
  background-color: #161d2a;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>

问题根源与修复方案 #

1. 缺失初始缩放级别 #

代码中已定义zoom: 5，但初始化地图时未将该参数传入L.map()配置，导致地图处于默认无缩放的状态，无法渲染出GeoJSON内容。

修复代码：
修改initialMap方法中的地图初始化部分，添加zoom参数：

async initialMap() {
  this.L = require('leaflet')
  this.map = this.L.map('map', {
    center: this.center,
    zoom: this.zoom, // 新增这一行
    ...this.LMapOptions
  })
  this.L.geoJSON(await this.loadGeoJsonData(), this.geoOptions).addTo(
    this.map
  )
}

2. 可选优化：自动适配GeoJSON范围 #

为确保GeoJSON内容完全显示在地图视口中，可在加载GeoJSON后调用fitBounds方法，让地图自动缩放并定位到GeoJSON的边界范围：

优化代码：

async initialMap() {
  this.L = require('leaflet')
  this.map = this.L.map('map', {
    center: this.center,
    zoom: this.zoom,
    ...this.LMapOptions
  })
  // 保存GeoJSON图层实例
  const geoLayer = this.L.geoJSON(await this.loadGeoJsonData(), this.geoOptions).addTo(this.map)
  // 自动适配图层范围
  this.map.fitBounds(geoLayer.getBounds())
}

验证效果 #

修复后重新运行项目，地图将正确加载并显示印尼的省级GeoJSON边界，无需手动调整缩放级别即可看到完整内容。

内容的提问来源于stack exchange，提问作者rahman022