在数据可视化领域，ECharts 提供的 迁徙图（流动图） 是一种直观展示数据流动的方式，如人口迁徙、物流流向等。我们可以使用 OpenLayers 结合 Vue 3 来实现类似的 动态曲线流动图，从而在 Web GIS 项目中提供更生动的可视化效果。
本文将介绍如何使用 Vue 3 + OpenLayers + ol-dynamic-curves 插件，完成一个类似 ECharts 迁徙图 的地图效果。
1. 效果展示
最终的效果如下：
🌍 地图背景：使用 OpenLayers 加载 OSM（OpenStreetMap） 瓦片地图。
🎯 动态曲线：使用 ol-dynamic-curves 插件绘制动态流动曲线，模拟数据流动。
2. 项目环境
-
Vue 3（
<script setup>语法） -
Vite 5（轻量级打包工具）
-
OpenLayers（用于加载地图）
-
ol-dynamic-curves（用于绘制动态曲线）
3. 安装依赖
我们需要安装 OpenLayers 和 ol-dynamic-curves 组件。
npm install ol ol-dynamic-curves4. 代码实现
4.1 Vue 组件模板
新建 MigrationMap.vue 组件，填充如下代码：
<!--* @Author: 彭麒* @Date: 2025/4/2* @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实现动态曲线流动图，类似Echarts迁徙状态</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 TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import CurvesLayer from 'ol-dynamic-curves';const map = ref(null);const initMap = () => {map.value = new Map({target: "vue-openlayers",layers: [new TileLayer({source: new OSM()})],view: new View({projection: "EPSG:4326",center: [116.15, 40.79],zoom: 6})});
};const loadCurves = () => {if (!map.value) return;const options = {map: map.value,pointPositions: [[[116.38840, 39.90562], [143.60, 33.00]],[[116.38840, 39.90562], [154.216463, 42.895035]],[[116.38840, 39.90562], [105.941956, 47.07053]],[[116.38840, 39.90562], [100.718274, 0.95006]]],splitLength: 180,oneFrameLimitTime: 5,radialColor: {0: '#ff0000',0.2: '#ffff00',0.4: '#ff00ff',0.6: '#00ff00',0.8: '#00ffff',1: '#ff00ff'},controlRatio: 1};new CurvesLayer(options);
};onMounted(() => {initMap();loadCurves();
});
</script><style scoped>
.container {width: 840px;height: 570px;margin: 50px auto;border: 1px solid #42B983;
}#vue-openlayers {width: 800px;height: 450px;margin: 0 auto;border: 1px solid #42B983;position: relative;
}
</style>
5. 代码解析
5.1 OpenLayers 地图初始化
const initMap = () => { map.value = new Map({ target: "vue-openlayers", layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ projection: "EPSG:4326", center: [116.15, 40.79], zoom: 6 }) });
};-
使用 OSM 瓦片图 作为底图。
-
采用 EPSG:4326 坐标系（经纬度）。
5.2 加载动态曲线
const loadCurves = () => {if (!map.value) return;const options = {map: map.value,pointPositions: [[[116.38840, 39.90562], [143.60, 33.00]],[[116.38840, 39.90562], [154.216463, 42.895035]],[[116.38840, 39.90562], [105.941956, 47.07053]],[[116.38840, 39.90562], [100.718274, 0.95006]]],splitLength: 180,oneFrameLimitTime: 5,radialColor: {0: '#ff0000',0.2: '#ffff00',0.4: '#ff00ff',0.6: '#00ff00',0.8: '#00ffff',1: '#ff00ff'},controlRatio: 1};new CurvesLayer(options);
};-
设定
pointPositions，定义曲线起点和终点坐标。 -
设置
radialColor让曲线呈现渐变流动效果。
6. 运行项目
如果你使用 Vite 作为构建工具，运行：
npm run dev浏览器访问 http://localhost:5173，即可看到 动态迁徙流动图。
7. 进阶优化
-
支持交互操作：可以添加鼠标悬停事件，显示曲线的详细信息。
-
曲线样式优化：调整
splitLength和oneFrameLimitTime，优化动画流畅度。 -
数据动态加载：可结合 WebSocket 或 API 请求，实现实时更新迁徙数据。
8. 结语
本文介绍了如何在 Vue 3 中使用 OpenLayers 实现 动态曲线流动图，类似 ECharts 迁徙状态图。结合 ol-dynamic-curves 插件，可以轻松实现数据流向的可视化。如果你对 GIS 可视化感兴趣，可以尝试将 数据动态化 或 结合 Cesium 进行 3D 可视化。
🚀 欢迎点赞 & 关注，获取更多 Vue + OpenLayers 相关教程！ 🎯
