vue本地geojson文件读取不了，无法加载geojson的原因(附发布geojson图层源码)

### 在 Vue 中通过高德地图 API 加载本地 GeoJSON 文件 #### 准备工作 为了在 Vue 项目中集成并展示来自本地的 GeoJSON 数据，需先完成必要的环境配置。确保已安装 `axios` 库用于发起 HTTP 请求获取本地文件，并引入高德地图 JavaScript API。 ```bash npm install axios ``` #### 创建地图实例 初始化高德地图容器，在页面加载完成后创建地图对象： ```javascript // src/main.js or equivalent entry file import AMapLoader from '@amap/amap-jsapi-loader'; AMapLoader.load({ "key": "Your_Amap_API_Key", // 替换成自己的Key "version": "2.0", "plugins": [] }).then((AMap) => { window.AMap = AMap; }); ``` #### 添加 GeoJSON 图层支持 定义一个方法来处理 GeoJSON 的解析与渲染逻辑。此部分代码应放置于组件内部的方法属性下以便调用： ```javascript methods: { addGeoJsonLayer(geojsonData){ let map = this.map; // 假设 'this.map' 是之前已经初始化的地图实例 const geojson = new AMap.GeoJSON({ geoJSON: geojsonData, getPolygon: function (geojson, lnglats) { return new AMap.Polygon({ path: lnglats, strokeColor: "#FF33FF", strokeWeight: 6, fillOpacity: 0.4, fillColor: '#1791fc', zIndex: 50 }); } }); geojson.setMap(map); // 调整视野至合适范围 var bounds = geojson.getBounds(); if(bounds){ map.setBounds(bounds); }else{ console.log('无法计算边界'); } }, } ``` #### 获取并应用本地 GeoJSON 文件 编写函数读取本地存储的 GeoJSON 文件并通过上述方法将其添加到地图上。这里假设使用的是相对路径访问静态资源目录下的 `.json` 文件。 ```javascript async loadLocalGeoJson(){ try { const response = await import('@/assets/data/sample.geojson'); // 根据实际位置调整路径 this.addGeoJsonLayer(response.default || response); } catch(error){ console.error("Failed to fetch local GeoJSON:", error); } }, ``` 最后，在适当的地方触发该函数，比如 mounted 生命周期钩子内: ```javascript mounted() { this.$nextTick(() => { this.loadLocalGeoJson(); }) } ``` 以上操作实现了在一个基于 Vue 构建的应用程序里借助高德地图服务呈现自定义地理空间数据的功能[^2]。