如何在Vue.js 2的Leaflet组件中导入GeoJson文件

你的代码存在几个关键问题，导致GeoJSON无法正常加载，以下是修正方案：

问题点梳理 #

• 组件属性错误：<l-geo-json>的options-style是无效属性，vue2-leaflet中控制样式的正确属性是style-function。
• 未定义依赖变量：模板里用到了options和styleFunction，但你的data中没有声明这两个变量，会引发引用错误。
• 冗余的mounted赋值：导入的GeoJSON可以直接在data中赋值，不需要等到mounted钩子执行。
• 路径校验：确认../components/provinces.json的文件路径是否正确，如果JSON文件放在public目录下，导入方式需要调整；若在src目录内，确保层级对应。

修正后的完整代码 #

<template>
  <div class="locationMap">
    <l-map
      :zoom="6"
      :center="[47.31322, -1.319482]"
      style="height: 800px; width: 1000px"
    >
      <l-tile-layer :url="url" :attribution="attribution" />
      <l-geo-json
        :geojson="geojson"
        :style-function="styleFunction"
        :options="geoJsonOptions"
      />
    </l-map>
  </div>
</template>

<script>
import geojson from "../components/provinces.json";

export default {
  name: "locationMap",
  data() {
    return {
      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      geojson: geojson, // 直接赋值导入的GeoJSON数据
      geoJsonOptions: {
        // 可自定义GeoJSON图层的基础配置
        fillOpacity: 0.5
      }
    };
  },
  methods: {
    styleFunction(feature) {
      // 根据GeoJSON要素属性返回自定义样式
      return {
        color: "#ff0000",
        weight: 2,
        fillColor: "#ffcccc"
      };
    }
  }
};
</script>

额外优化提示 #

如果GeoJSON文件体积较大，建议用异步导入优化加载速度：

async mounted() {
  const geojsonModule = await import("../components/provinces.json");
  this.geojson = geojsonModule.default;
}

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