当前位置：首页 > news >正文

111.在 Vue 3 中使用 OpenLayers 实现动态曲线流动图（类似 ECharts 迁徙状态）

news 2025/7/18 16:49:03

在数据可视化领域，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-curves

4. 代码实现

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 相关教程！ 🎯

查看全文

http://www.dtcms.com/a/107552.html