引言
在前端开发中，OpenLayers 是一个功能强大的开源 JavaScript 库，能够帮助我们在 Web 应用中高效地渲染和交互地图数据。本文将介绍如何在 Vue 3 中使用 OpenLayers 加载 GeoJSON 数据，并提供示例代码和跨域解决方案。
项目环境
-
Vue 3 + Vite
-
OpenLayers
-
GeoJSON 格式的数据
实现步骤
1. 安装 OpenLayers
如果你的 Vue 3 项目还没有安装 OpenLayers，可以使用 npm 进行安装：
npm install ol2. 编写 Vue 组件
以下是完整的 Vue 3 组件代码，使用 Composition API 方式来管理地图实例：
<!--* @Author: 彭麒* @Date: 2025/4/3* @Email: 1062470959@qq.com* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。-->
<template><div class="container"><div class="w-full flex justify-center flex-wrap"><div class="font-bold text-[24px]">在Vue3中使用OpenLayers实现加载Geojson数据（url引用方式，非readFeatures）</div></div><div id="vue-openlayers"></div></div>
</template><script setup>
import { onMounted, ref } from 'vue';
import 'ol/ol.css';
import { Map, View } from 'ol';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import { Tile } from 'ol/layer';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';const map = ref(null);
const view = new View({projection: "EPSG:3857",center: fromLonLat([8.2275, 46.8185]),zoom: 6,
});const initMap = () => {map.value = new Map({target: 'vue-openlayers',layers: [new Tile({source: new OSM(),}),new VectorLayer({source: new VectorSource({url:'https://github.com/openlayers/openlayers/blob/main/examples/data/geojson/switzerland.geojson',format: new GeoJSON(),}),}),],view: view,});
};onMounted(() => {initMap();
});
</script><style scoped>
.container {width: 840px;height: 550px;margin: 50px auto;border: 1px solid #42B983;
}#vue-openlayers {width: 800px;height: 420px;margin: 0 auto;border: 1px solid #42B983;position: relative;
}
</style>
3. 解决跨域问题
问题分析
在上面的代码中，我们使用了 https://github.com/openlayers/openlayers/blob/main/examples/data/geojson/switzerland.geojson 作为 GeoJSON 数据源。然而，GitHub 主要是代码托管平台，直接访问该 URL 并不会返回正确的 JSON 数据，而是 HTML 页面，因此会导致加载失败。此外，很多在线数据源可能会受到 CORS（跨域资源共享）策略的限制。
解决方案
方法 1：使用 raw.githubusercontent.com
GitHub 提供了 raw.githubusercontent.com 这个域名来访问原始文件，因此可以修改代码如下：
url: "https://raw.githubusercontent.com/openlayers/openlayers/main/examples/data/geojson/switzerland.geojson"这样就可以正确获取 JSON 数据，而不会受到 GitHub 页面 HTML 结构的影响。
方法 2：本地部署 GeoJSON 文件
如果你拥有自己的服务器，或者可以修改前端项目结构，你可以将 GeoJSON 文件放在 public 目录下，然后使用相对路径访问：
-
将
switzerland.geojson放到 Vue 项目的public目录中。 -
修改代码：
url: "/switzerland.geojson"Vue 项目运行时，public 目录的文件会被当作静态资源提供，这样就避免了跨域问题。
方法 3：使用 CORS 代理（不推荐）
如果你无法修改 GeoJSON 数据源，但仍想访问它，可以使用 CORS 代理（例如 cors-anywhere）：
url: "https://cors-anywhere.herokuapp.com/https://github.com/openlayers/openlayers/blob/main/examples/data/geojson/switzerland.geojson"但需要注意的是，使用公共 CORS 代理可能会导致数据访问不稳定，甚至存在安全风险，不推荐在生产环境中使用。
4. 运行项目
如果你的 Vue 3 项目是基于 Vite 创建的，可以使用以下命令启动：
npm run dev然后在浏览器中打开 http://localhost:5173/（具体端口可能不同），即可看到地图加载了 GeoJSON 数据。
结论
在本文中，我们介绍了如何在 Vue 3 中使用 OpenLayers 加载 GeoJSON 数据，并提供了完整的代码示例。同时，我们分析了可能出现的跨域问题，并提供了三种解决方案，推荐使用 raw.githubusercontent.com 或本地部署方式。希望这篇文章能帮助你更好地理解 OpenLayers 在 Vue 3 项目中的应用！
如果你对 OpenLayers 或 Vue 3 还有其他问题，欢迎在评论区交流！😊
