Создание великолепных 3D-карт с eegeo.js и Leaflet

Какие станции на конкретной линии метро?

Теперь у нас есть идентификатор линии каждой линии подполья. Я также планирую свободно моделировать станции и линии в виде вершин и ребер на графике. Учитывая идентификатор линии, API TfL может затем сказать нам, на каких станциях останавливается каждая линия. API TfL именует их как StopPoints . Конечной точкой, которую мы будем называть, является Линия, Маршрут, включающий последовательность СтопПоинтов.

Давайте сделаем еще один вызов API TfL, чтобы описать исходящий маршрут центральной линии:

 curl -v https://api.tfl.gov.uk/line/central/route/sequence/outbound 

Это возвращает очень большую полезную нагрузку JSON, более 8000 красивых печатных строк. К счастью, нас интересует stopPointSequences ключ stopPointSequences :

 "stopPointSequences": [ { "lineId": "central", ... "stopPoint": [ ... { "id": "940GZZLUNHG", "name": "Notting Hill Gate Underground Station", ... "lat": 51.509128, "lon": -0.196104 }, { "id": "940GZZLUQWY", "name": "Queensway Underground Station", ... "lat": 51.510312, "lon": -0.187152 }, ... ], }, ... ] 

Это свойство представляет собой список объектов JSON, которые группируют линию в непрерывные секции. Внутри StopPointSequence находятся все StopPoints по порядку вдоль линии.

Следующий JavaScript обрабатывает создание уникальных станций, а также создание полилиний, чтобы мы могли нарисовать линию для краев линий трубки.

 var stopPoints = {}; $.getJSON( "https://api.tfl.gov.uk/line/central/route/sequence/outbound", function( data ) { var lineSegments = []; $.each(data.stopPointSequences, function(k, v) { var line = []; $.each(v.stopPoint, function(k, sp) { line.push([sp.lat, sp.lon]); if (!(sp.id in stopPoints)) { stopPoints[sp.id] = {"id":sp.id, "name":sp.name, "lat":sp.lat, "lon":sp.lon}; } }); lineSegments.push(line); }); }); 

Теперь мы можем вызвать вышеуказанный JavaScript для каждой строки Underground. После этого в словаре stopPoint будут собраны все уникальные станции. Для каждой линии у нас также есть коллекция полилиний, представляющих сечения линии трубки в массиве lineSegments .

Позже я покажу, как добавить маркеры листов и полилинии для визуального отображения станций и линий.

Какие поезда прибывают на конкретную станцию?

Последняя конечная точка API TfL, которая нам нужна, — это живые поступления В приведенном выше разделе мы видим, что станция имеет уникальный идентификатор в API. Для Ноттинг Хилл Гейт, идентификатор 940GZZLUNHG :

 { "id": "940GZZLUNHG", "name": "Notting Hill Gate Underground Station", ... "lat": 51.509128, "lon": -0.196104 } 

Теперь мы можем вызвать API TfL StopPoint , предоставив идентификатор StopPoint:

 curl -v https://api.tfl.gov.uk/stoppoint/940GZZLUNHG/arrivals?mode=tube 

Это возвращает массив поступлений:

 [{ ... "naptanId": "940GZZLUNHG", "stationName": "Notting Hill Gate Underground Station", "lineId": "central", "platformName": "Eastbound - Platform 3", "direction": "outbound", ... "destinationName": "Epping Underground Station", "timeToStation": 290, "currentLocation": "Between White City and Shepherd's Bush", "towards": "Epping", ... }, ...] 

Это указывает на то, что поезд восточного направления до Эппинга прибудет на платформу 3 менее чем через 5 минут (290 секунд).

Положить его вместе

До сих пор я показал вам, как:

• Создайте простую 2D карту OpenStreetMap с помощью Leaflet
• Превратите эту простую 2D-карту в великолепную 3D-карту с eeGeo.js и Leaflet
• Добавьте простые детали к картам в виде маркеров листов, полилиний и полигонов
• Выполните базовые взаимодействия с API транспорта для Лондона

Теперь, чтобы объединить эти простые концепции для создания трехмерной интерактивной карты Лондона, показывающей линии и станции лондонского метро и время прибытия в реальном времени для всех станций!

 $.each(stopPoints, function(k, sp) { L.marker([sp.lat, sp.lon], { title: sp.name, options: {"id":sp.id, "name":sp.name} }).addTo(map); }); 

 $.each(lineSegments, function(k, ls) { L.polyline(ls, {weight:8, color:"#CC3333"}).addTo(map); }); 

 $.each(stopPoints, function(k, sp) { var marker = L.marker([sp.lat, sp.lon], { title: sp.name, options: {"id":sp.id, "name":sp.name} }).addTo(map); marker.bindPopup(sp.name); marker.on('mouseover',_hovercard.overstation); marker.on('mouseout',_hovercard.outstation); });