如何在传单中的 vue.js 2 组件中导入 GeoJson 文件答案

【问题标题】：how to import a GeoJson file in vue.js 2 component in leaflet如何在传单中的 vue.js 2 组件中导入 GeoJson 文件
【发布时间】：2022-11-03 13:00:13
【问题描述】：

我有一个 GeoJson 文件并将其添加到我的项目文件中，但我不知道如何在我的地图组件中导入和使用它。我尝试了下面的代码，但是没有用。

<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"
        :options="options"
        :options-style="styleFunction"
      />
    </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: null,
    };
  },

  mounted() {
    this.geojson = geojson;
  },
};
</script>

【问题讨论】：

如果你console.log(geojson)，你会得到什么？
@ghybs 它返回一个对象：具有特征的观察者：Array(1272)

标签： vue.js vuejs2 leaflet

【解决方案1】：

尝试在使用 fetch 方法挂载和加载文件之前分配 this.geojson。

async created () {
  const jsonFile = await fetch('../components/provinces.json')
  this.geojson = await jsonFile.json()
}

此示例在 Vue Leaflet 文档中可用。

https://vue2-leaflet.netlify.app/components/LGeoJson.html#demo

【讨论】：