mirror of
https://github.com/morgan9e/KorailMap
synced 2026-04-13 16:04:07 +09:00
316 lines
12 KiB
HTML
316 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Korail GIS</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
crossorigin=""/>
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
|
crossorigin=""></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#map {
|
|
height: 100%;
|
|
}
|
|
|
|
.station-label {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
color: black;
|
|
}
|
|
|
|
.train-marker {
|
|
text-align: center;
|
|
}
|
|
|
|
#reload {
|
|
padding: 5px 10px;
|
|
background-color: #007BFF;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#reload:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#info {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#loading {
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<div id="info">
|
|
<button id="reload">Reload</button>
|
|
<span id="loading">Loading...</span>
|
|
</div>
|
|
<script>
|
|
const trainAPI = 'https://gis.korail.com/api/train?bbox=120.6263671875,28.07910949377748,134.0736328125,45.094739803960664'
|
|
const server = ''
|
|
|
|
let openPopupTrainId = null;
|
|
let followingTrainId = null;
|
|
let isFollowing = false;
|
|
|
|
async function myFetch(url, options = {}) {
|
|
let headers = options.headers
|
|
return fetch('https://proxy/', {
|
|
headers: {
|
|
'X-Proxy-URL': url,
|
|
'X-Proxy-Header': JSON.stringify(headers),
|
|
'X-Proxy-Cache': '0'
|
|
}
|
|
});
|
|
}
|
|
|
|
const map = L.map('map').setView([36.5, 128], 7.5);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
L.tileLayer('https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openrailwaymap.org/">OpenRailwayMap</a>',
|
|
maxZoom: 19
|
|
}).addTo(map);
|
|
|
|
const stationLayers = [];
|
|
for (let i = 0; i < 64; i++) {
|
|
stationLayers.push(L.layerGroup());
|
|
}
|
|
|
|
const trainLayer = L.layerGroup().addTo(map);
|
|
const trainPositions = new Map();
|
|
|
|
function startSpinner() {
|
|
document.getElementById("loading").classList.remove("hidden");
|
|
}
|
|
|
|
function clearSpinner() {
|
|
document.getElementById("loading").classList.add("hidden");
|
|
}
|
|
|
|
function calculateDistance(lat1, lon1, lat2, lon2) {
|
|
const R = 6371;
|
|
const dLat = (lat2 - lat1) * Math.PI / 180;
|
|
const dLon = (lon2 - lon1) * Math.PI / 180;
|
|
const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
|
|
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
|
|
Math.sin(dLon/2) * Math.sin(dLon/2);
|
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
|
|
return R * c;
|
|
}
|
|
|
|
function calculateAverageSpeed(trainId) {
|
|
const positions = trainPositions.get(trainId);
|
|
if (!positions || positions.length < 2) return null;
|
|
|
|
const firstChange = positions[0];
|
|
const lastChange = positions[positions.length - 1];
|
|
const totalDistance = calculateDistance(firstChange.lat, firstChange.lon, lastChange.lat, lastChange.lon);
|
|
const totalTime = (lastChange.timestamp - firstChange.timestamp) / 1000;
|
|
|
|
if (totalTime === 0) return null;
|
|
return (totalDistance / totalTime) * 3600;
|
|
}
|
|
|
|
function updateTrainPosition(trainId, lat, lon, timestamp) {
|
|
if (!trainPositions.has(trainId)) {
|
|
trainPositions.set(trainId, []);
|
|
}
|
|
|
|
const positions = trainPositions.get(trainId);
|
|
|
|
if (positions.length > 0) {
|
|
const lastPos = positions[positions.length - 1];
|
|
if (Math.abs(lastPos.lat - lat) < 0.0001 && Math.abs(lastPos.lon - lon) < 0.0001) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
const lookbackCount = Math.min(12, positions.length);
|
|
for (let i = Math.max(0, positions.length - lookbackCount); i < positions.length; i++) {
|
|
const historicalPos = positions[i];
|
|
if (Math.abs(historicalPos.lat - lat) < 0.0001 && Math.abs(historicalPos.lon - lon) < 0.0001) {
|
|
const positionsBack = positions.length - 1 - i;
|
|
if (positionsBack > 0 && positionsBack <= 10) {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
positions.push({ lat, lon, timestamp });
|
|
if (positions.length > 30) {
|
|
positions.shift();
|
|
}
|
|
}
|
|
|
|
function loadStations() {
|
|
fetch(`${server}/api/station`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
L.geoJSON(data, {
|
|
pointToLayer: function (feature, latlng) {
|
|
const shownLayer = parseInt(feature.properties.shown_layer.slice(2), 2);
|
|
const marker = L.marker(latlng, {
|
|
icon: L.divIcon({
|
|
className: 'station-label',
|
|
html: `<div>${feature.properties.name}</div>`,
|
|
iconSize: [100, 0]
|
|
})
|
|
});
|
|
if (stationLayers[shownLayer]) {
|
|
stationLayers[shownLayer].addLayer(marker);
|
|
}
|
|
return marker;
|
|
}
|
|
});
|
|
})
|
|
.catch(error => console.error('Error fetching station data: ', error));
|
|
}
|
|
|
|
function loadTrains() {
|
|
startSpinner();
|
|
const timestamp = Date.now();
|
|
|
|
let wasPopupOpen = false;
|
|
if (map._popup && map._popup._source) {
|
|
const popup = map._popup;
|
|
if (popup._source.options && popup._source.options.trainId) {
|
|
openPopupTrainId = popup._source.options.trainId;
|
|
wasPopupOpen = true;
|
|
}
|
|
}
|
|
|
|
myFetch(trainAPI, {
|
|
headers: {
|
|
"x-requested-with": "com.korail.talk",
|
|
"referer": "https://gis.korail.com/korailTalk/entrance",
|
|
"user-agent": "korailtalk AppVersion/6.3.3"
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
trainLayer.clearLayers();
|
|
let markerToReopen = null;
|
|
let markerToFollow = null;
|
|
|
|
L.geoJSON(data, {
|
|
pointToLayer: function (feature, latlng) {
|
|
const trainId = `${feature.properties.trn_case}_${feature.properties.trn_no}`;
|
|
|
|
updateTrainPosition(trainId, latlng.lat, latlng.lng, timestamp);
|
|
|
|
const avgSpeed = calculateAverageSpeed(trainId);
|
|
const speedText = avgSpeed ? `${avgSpeed.toFixed(1)} km/h` : 'N/A';
|
|
|
|
const followButtonText = followingTrainId === trainId ? 'Unfollow' : 'Follow';
|
|
const followButtonColor = followingTrainId === trainId ? '#dc3545' : '#28a745';
|
|
|
|
const trainIconHtml = `
|
|
<div style="position: relative; text-align: center;">
|
|
<div style="font-size: 12px;
|
|
color: ${feature.properties.trn_case === "SRT" ? 'white' : 'black'};
|
|
background-color: ${feature.properties.trn_case === "SRT" ? '#572b4c' : '#007bff'};
|
|
border: 1px solid black;
|
|
margin-top: 2px;
|
|
padding: 1px 3px;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
white-space: nowrap;">${feature.properties.trn_case} ${feature.properties.trn_no}</div>
|
|
</div>`;
|
|
|
|
const marker = L.marker(latlng, {
|
|
icon: L.divIcon({
|
|
className: 'train-marker',
|
|
html: trainIconHtml,
|
|
iconSize: [30, 42],
|
|
iconAnchor: [15, 21]
|
|
}),
|
|
trainId: trainId
|
|
}).bindPopup(`${feature.properties.trn_case} ${feature.properties.trn_no}<br>
|
|
(${feature.properties.dpt_stn_nm} -> ${feature.properties.arv_stn_nm})<br>
|
|
${feature.properties.now_stn} ${feature.properties.next_stn}<br>
|
|
<strong>Avg Speed: ${speedText}</strong><br>
|
|
<button onclick="toggleFollow('${trainId}')"
|
|
style="background-color: ${followButtonColor};
|
|
color: white;
|
|
border: none;
|
|
padding: 3px 8px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
margin-top: 5px;">${followButtonText}</button>`);
|
|
|
|
if (wasPopupOpen && trainId === openPopupTrainId) {
|
|
markerToReopen = marker;
|
|
}
|
|
|
|
if (isFollowing && trainId === followingTrainId) {
|
|
markerToFollow = marker;
|
|
}
|
|
|
|
return marker;
|
|
}
|
|
}).addTo(trainLayer);
|
|
|
|
if (markerToReopen) {
|
|
setTimeout(() => markerToReopen.openPopup(), 100);
|
|
}
|
|
|
|
if (markerToFollow) {
|
|
setTimeout(() => map.setView(markerToFollow.getLatLng(), map.getZoom()), 100);
|
|
}
|
|
|
|
clearSpinner();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching train data: ', error);
|
|
clearSpinner();
|
|
});
|
|
}
|
|
|
|
function toggleFollow(trainId) {
|
|
if (followingTrainId === trainId) {
|
|
followingTrainId = null;
|
|
isFollowing = false;
|
|
} else {
|
|
followingTrainId = trainId;
|
|
isFollowing = true;
|
|
}
|
|
loadTrains();
|
|
}
|
|
|
|
document.getElementById('reload').addEventListener('click', loadTrains);
|
|
|
|
loadStations();
|
|
loadTrains();
|
|
setInterval(loadTrains, 2000);
|
|
</script>
|
|
</body>
|
|
</html> |