当前位置：首页 > VUE

vue实现铁路路线

2026-03-28 13:00:00VUE

Vue 实现铁路路线的方法

使用 SVG 绘制铁路路线

Vue 结合 SVG 可以灵活绘制铁路路线。通过 <svg> 标签定义画布，使用 <path> 或 <polyline> 绘制铁路线，配合动态数据绑定实现交互效果。

<template>
  <svg width="800" height="400">
    <path 
      v-for="(route, index) in routes" 
      :key="index"
      :d="route.path" 
      stroke="black" 
      stroke-width="3" 
      fill="none"
    />
    <circle 
      v-for="(station, index) in stations" 
      :key="'station-' + index"
      :cx="station.x" 
      :cy="station.y" 
      r="5" 
      fill="red"
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      routes: [
        { path: "M100,100 L200,150 L300,120" },
      ],
      stations: [
        { x: 100, y: 100, name: "A" },
        { x: 200, y: 150, name: "B" },
      ],
    };
  },
};
</script>

集成地图库（如 Leaflet 或 Google Maps）

通过 Vue 集成第三方地图库，加载地理数据实现铁路路线可视化。

安装 Leaflet：

npm install leaflet

示例代码：

<template>
  <div id="map" style="height: 500px;"></div>
</template>

<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export default {
  mounted() {
    const map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    const railway = L.polyline(
      [[51.51, -0.1], [51.50, -0.08], [51.49, -0.06]],
      { color: 'blue' }
    ).addTo(map);
  },
};
</script>

动态数据绑定与交互

通过 Vue 的响应式特性，动态更新铁路路线数据并实现交互功能（如点击站点显示信息）。

<template>
  <svg width="800" height="400" @click="handleClick">
    <path 
      v-for="(route, index) in routes" 
      :key="index"
      :d="route.path" 
      stroke="black" 
      stroke-width="3" 
      fill="none"
    />
    <circle 
      v-for="(station, index) in stations" 
      :key="'station-' + index"
      :cx="station.x" 
      :cy="station.y" 
      r="5" 
      fill="red"
      @click.stop="selectStation(station)"
    />
  </svg>
  <div v-if="selectedStation">
    Selected: {{ selectedStation.name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedStation: null,
      stations: [
        { x: 100, y: 100, name: "A" },
        { x: 200, y: 150, name: "B" },
      ],
    };
  },
  methods: {
    selectStation(station) {
      this.selectedStation = station;
    },
  },
};
</script>

使用第三方图表库（如 ECharts）

ECharts 提供强大的地理数据可视化能力，适合复杂铁路网络展示。

安装 ECharts：

npm install echarts

示例代码：

vue实现铁路路线

<template>
  <div id="chart" style="width: 800px; height: 500px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    const chart = echarts.init(document.getElementById('chart'));
    chart.setOption({
      series: [{
        type: 'lines',
        data: [{
          coords: [[100, 100], [200, 150], [300, 120]],
          lineStyle: { color: 'black' },
        }],
      }],
    });
  },
};
</script>