如何在传单中的vue.js2组件中导入GeoJson文件

Question

我有一个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> 

Answer 1

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

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

Vue传单文档中提供了此示例。

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

Answer 2

所以我仍然找不到使用vue2-leaflet包导入GeoJson文件的解决方案，但我可以使用以下代码导入文件：

<template>
<div class="container">
<div id="mapContainer">      
</div>
</div>
</template>
<script> 
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import geojson from "../components/provinces.json"

export default{
name: "locationMap",
data() {
return{
center: [32.87255939010237, 53.781741816799745],
}
},
methods: {
setupLeafletMap: function () {
const mapDiv = L.map("mapContainer").setView(this.center, 5);
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
// maxZoom: 18,
}
).addTo(mapDiv);
var myStyle = {
"fillColor": "#818181",
"color": "black",
"weight": 2,
"opacity": 0.65,
"fillOpacity": 0.6
};

L.geoJSON(geojson,{
style: myStyle,
}
}
}
mounted() {
this.setupLeafletMap()
console.log(mockData.colors[1].id)
},
}


</script>