transit-map-simulation
Mapas de tránsito animados tipo Swiss Trains — patrón inspirado en vasile/transit-map (⭐372). Servidor + cliente para simulaciones de mapas de transporte en tiempo real.
来源信息
- 仓库
- Ntizar/NtizarBrainMasterMind
- 最近来源活动
- 2026年7月5日 19:29
- 检测到的 SKILL.md 语言
- 无法判定
- 星标
- 2
- 分支
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- transit-map-simulation
- version
- 1.0.0
- description
- Mapas de tránsito animados tipo Swiss Trains — patrón inspirado en vasile/transit-map (⭐372). Servidor + cliente para simulaciones de mapas de transporte en tiempo real.
- tags
- ["transit","map","simulation","realtime","websocket","animation"]
# Simulación de Mapas de Tránsito
## Resumen
Patrón para crear mapas de tránsito animados en tiempo real (tipo swisstrains.ch). Servidor envía posiciones de vehículos via WebSocket, cliente renderiza con SVG/Canvas.
## Cuándo usar
- Mapa de trenes/buses/metros animados en tiempo real
- Visualización de red de transporte con vehículos moviéndose
- Dashboard de movilidad con tracking en vivo
## Arquitectura
```
Servidor (Node.js)
├── Cargar GTFS estático (rutas, paradas)
├── Fetch GTFS-realtime cada 5s
├── Calcular posiciones interpoladas
└── WebSocket → broadcast posiciones
↓
Cliente (SVG/Canvas)
├── Renderizar líneas de ruta (SVG paths)
├── Renderizar paradas (circles)
├── Animar vehículos (interpolación suave)
└── UI: zoom, pan, selección de línea
```
## Patrón de uso
```javascript
// Servidor: WebSocket con posiciones de vehículos
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
setInterval(async () => {
const positions = await fetchGTFSRealtime();
wss.clients.forEach(client => {
client.send(JSON.stringify({
type: 'positions',
vehicles: positions.map(v => ({
id: v.id,
route: v.route_id,
lat: v.latitude,
lng: v.longitude,
bearing: v.bearing
}))
}));
});
}, 5000);
// Cliente: SVG con interpolación suave
const svg = d3.select('#map');
const projection = d3.geoMercator();
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
data.vehicles.forEach(v => {
const [x, y] = projection([v.lng, v.lat]);
let dot = svg.select(`#v-${v.id}`);
if (dot.empty()) {
dot = svg.append('circle')
.attr('id', `v-${v.id}`)
.attr('r', 4)
.attr('fill', routeColors[v.route]);
}
// Interpolación suave
dot.transition().duration(5000).ease(d3.easeLinear)
.attr('cx', x).attr('cy', y);
});
};
```
## Pitfalls
- **Interpolación:** Usar `transition().duration(5000).ease(linear)` para smooth movement entre updates.
- **WebSocket reconnection:** Implementar reconexión automática con backoff.
- **Projection:** Mercator distorsiona a alta latitud. Considerar EqualEarth para mapas globales.
- **Performance:** >500 vehículos = usar Canvas en vez de SVG. >5000 = WebGL.
- **Bearing:** Rotar icono de vehículo según dirección de movimiento.
## Referencias
- transit-map: https://github.com/vasile/transit-map (demo: https://swisstrains.ch)
- GTFS-realtime: https://gtfs.org/realtime/
---
**Hecho con ❤️ por David Antizar**
在 GitHub 查看