From 11916a39859ae676cf7943368f9facfafb43891d Mon Sep 17 00:00:00 2001 From: Jacek Kowalski <Jacek@jacekk.info> Date: Tue, 06 Nov 2018 21:24:37 +0000 Subject: [PATCH] Update JavaScript libraries used to the latest versions --- map.js | 357 +++++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 285 insertions(+), 72 deletions(-) diff --git a/map.js b/map.js index 7547af4..0c553fb 100644 --- a/map.js +++ b/map.js @@ -14,19 +14,23 @@ var stop_points_source = null; var stop_points_layer = null; -var feature_id = null; +var feature_clicked = null; +var feature_selected = []; var feature_xhr = null; var feature_timer = null; +var route_source = null; +var route_layer = null; + var map = null; +var map_sphere = null; var popup_element = document.getElementById('popup'); +var popup_close_callback; var fail_element = document.getElementById('fail'); var ignore_hashchange = false; function fail(msg) { - console.log(msg); - setText(fail_element, msg); fail_element.style.top = '0.5em'; } @@ -60,6 +64,93 @@ return new ol.geom.Point(ol.proj.fromLonLat([object.longitude / 3600000.0, object.latitude / 3600000.0])); } +function styleVehicle(vehicle, selected) { + var color_type = 'black'; + if(vehicle.get('vehicle_type')) { + switch(vehicle.get('vehicle_type').low) { + case 0: + color_type = 'orange'; + break; + case 1: + color_type = 'blue'; + break; + case 2: + color_type = 'green'; + break; + } + } + + var fill = (selected ? '#a00' : '#3399ff'); + + var image = '<svg xmlns="http://www.w3.org/2000/svg" height="30" width="20"><polygon points="10,0 20,23 0,23" style="fill:'+fill+';stroke:'+color_type+';stroke-width:2" /></svg>'; + + return new ol.style.Style({ + image: new ol.style.Icon({ + src: 'data:image/svg+xml;base64,' + btoa(image), + rotation: Math.PI * parseFloat(vehicle.get('heading')) / 180.0, + }), + text: new ol.style.Text({ + font: 'bold 10px sans-serif', + text: vehicle.get('line'), + fill: new ol.style.Fill({color: 'white'}), + }), + }); +} + +function styleStop(stop, selected) { + var fill = 'orange'; + var stroke = 'red'; + var stroke_width = 1; + var radius = 3; + + if(selected == 2) { + radius = 5; + } else if(selected) { + fill = 'red'; + stroke = '#900'; + stroke_width = 2; + radius = 5; + } + + return new ol.style.Style({ + image: new ol.style.Circle({ + fill: new ol.style.Fill({color: fill}), + stroke: new ol.style.Stroke({color: stroke, width: stroke_width}), + radius: radius, + }), + }); +} + +function styleFeature(feature, selected) { + if(!feature) return; + if(!feature.getId()) return; + + var style = null; + + switch(feature.getId().substr(0, 1)) { + case 'v': + style = styleVehicle(feature, selected); + break; + + case 's': + case 'p': + style = styleStop(feature, selected); + break; + } + + feature.setStyle(style); + if(selected) { + feature_selected.push(feature); + } +} + +function unstyleSelectedFeatures() { + for(var i = 0; i < feature_selected.length; i++) { + styleFeature(feature_selected[i]); + } + feature_selected = []; +} + function updateVehicles() { if(vehicles_timer) clearTimeout(vehicles_timer); if(vehicles_xhr) vehicles_xhr.abort(); @@ -79,7 +170,7 @@ if(vehicle.isDeleted) { if(vehicle_feature) { vehicles_source.removeFeature(vehicle_feature); - if(feature_id == vehicle_feature.getId()) { + if(feature_clicked && feature_clicked.getId() === vehicle_feature.getId()) { featureClicked(); } } @@ -100,32 +191,7 @@ vehicle_feature = new ol.Feature(vehicle); vehicle_feature.setId('v' + vehicle.id); - var color_type = 'black'; - if(vehicle.vehicle_type) { - switch(vehicle.vehicle_type.low) { - case 0: - color_type = 'orange'; - break; - case 1: - color_type = 'blue'; - break; - case 2: - color_type = 'green'; - break; - } - } - - vehicle_feature.setStyle(new ol.style.Style({ - image: new ol.style.Icon({ - src: 'data:image/svg+xml;base64,' + btoa('<svg xmlns="http://www.w3.org/2000/svg" height="30" width="20"><polygon points="10,0 20,23 0,23" style="fill:#3399ff;stroke:'+color_type+';stroke-width:2" /></svg>'), - rotation: Math.PI * parseFloat(vehicle.heading) / 180.0, - }), - text: new ol.style.Text({ - font: 'bold 10px sans-serif', - text: vehicle.line, - fill: new ol.style.Fill({color: 'white'}), - }), - })); + styleFeature(vehicle_feature); vehicles_source.addFeature(vehicle_feature); } else { vehicle_feature.setProperties(vehicle); @@ -153,13 +219,7 @@ var stop_feature = new ol.Feature(stop); stop_feature.setId(prefix + stop.id); - stop_feature.setStyle(new ol.style.Style({ - image: new ol.style.Circle({ - fill: new ol.style.Fill({color: 'orange'}), - stroke: new ol.style.Stroke({color: 'red', width: 1}), - radius: 3, - }), - })); + styleFeature(stop_feature); source.addFeature(stop_feature); } @@ -189,7 +249,7 @@ }).fail(fail_ajax); } -function vehicleTable(tripId, table) { +function vehicleTable(tripId, table, vehicleId) { if(feature_xhr) feature_xhr.abort(); if(feature_timer) clearTimeout(feature_timer); @@ -198,7 +258,7 @@ + '?tripId=' + encodeURIComponent(tripId) + '&mode=departure' ).done(function(data) { - if(!data.routeName || !data.directionText || data.old.length + data.actual.length == 0) { + if(!data.routeName || !data.directionText) { return; } @@ -213,10 +273,15 @@ table.appendChild(tr); } + unstyleSelectedFeatures(); + styleFeature(feature_clicked, true); + for(var i = 0, il = data.actual.length; i < il; i++) { var tr = document.createElement('tr'); addCellWithText(tr, data.actual[i].actualTime || data.actual[i].plannedTime); addCellWithText(tr, data.actual[i].stop_seq_num + '. ' + data.actual[i].stop.name); + + styleFeature(stops_source.getFeatureById('s' + data.actual[i].stop.id), 2); if(data.actual[i].status == 'STOPPING') { tr.className = 'success'; @@ -225,6 +290,29 @@ } feature_timer = setTimeout(function() { vehicleTable(tripId, table); }, ttss_refresh); + + if(!vehicleId) return; + + feature_xhr = $.get( + ttss_base + '/geoserviceDispatcher/services/pathinfo/vehicle' + + '?id=' + encodeURIComponent(vehicleId) + ).done(function(data) { + if(!data || !data.paths || !data.paths[0] || !data.paths[0].wayPoints) return; + + var point = null; + var points = []; + for(var i = 0; i < data.paths[0].wayPoints.length; i++) { + point = data.paths[0].wayPoints[i]; + points.push(ol.proj.fromLonLat([ + point.lon / 3600000.0, + point.lat / 3600000.0, + ])); + } + + route_source.addFeature(new ol.Feature({ + geometry: new ol.geom.LineString(points) + })); + }); }).fail(fail_ajax_popup); } @@ -281,25 +369,45 @@ }).fail(fail_ajax_popup); } -function featureClicked(feature) { - if(!feature) { - feature_id = null; - - $(popup_element).removeClass('show'); - - ignore_hashchange = true; - window.location.hash = ''; - - return; - } - - var coordinates = feature.getGeometry().getCoordinates(); +function showPanel(contents, closeCallback) { + var old_callback = popup_close_callback; + popup_close_callback = null; + if(old_callback) old_callback(); + popup_close_callback = closeCallback; deleteChildren(popup_element); var close = addParaWithText(popup_element, '×'); close.className = 'close'; - close.addEventListener('click', function() { featureClicked(); }); + close.addEventListener('click', function() { hidePanel(); }); + + popup_element.appendChild(contents); + + $(popup_element).addClass('show'); +} + +function hidePanel() { + var old_callback = popup_close_callback; + popup_close_callback = null; + if(old_callback) old_callback(); + + $(popup_element).removeClass('show'); +} + +function featureClicked(feature) { + if(feature && !feature.getId()) return; + + unstyleSelectedFeatures(); + route_source.clear(); + + if(!feature) { + hidePanel(); + return; + } + + var coordinates = feature.getGeometry().getCoordinates(); + + var div = document.createElement('div'); var type; var name = feature.get('name'); @@ -327,7 +435,7 @@ addElementWithText(thead, 'th', lang.header_time); addElementWithText(thead, 'th', lang.header_stop); - vehicleTable(feature.get('tripId'), tbody); + vehicleTable(feature.get('tripId'), tbody, feature.get('id')); break; case 's': type = lang.type_stop; @@ -366,27 +474,41 @@ var loader = addElementWithText(tbody, 'td', lang.loading); loader.className = 'active'; - loader.colspan = thead.childNodes.length; + loader.colSpan = thead.childNodes.length; - addParaWithText(popup_element, type).className = 'type'; - addParaWithText(popup_element, name).className = 'name'; + addParaWithText(div, type).className = 'type'; + addParaWithText(div, name).className = 'name'; if(additional) { - popup_element.appendChild(additional); + div.appendChild(additional); } - popup_element.appendChild(table); + div.appendChild(table); + + styleFeature(feature, true); + + setTimeout(function () {map.getView().animate({ + center: feature.getGeometry().getCoordinates(), + }) }, 10); ignore_hashchange = true; window.location.hash = '#!' + feature.getId(); - map.getView().animate({ - center: feature.getGeometry().getCoordinates(), + showPanel(div, function() { + if(!ignore_hashchange) { + ignore_hashchange = true; + window.location.hash = ''; + + feature_clicked = null; + unstyleSelectedFeatures(); + route_source.clear(); + + if(feature_xhr) feature_xhr.abort(); + if(feature_timer) clearTimeout(feature_timer); + } }); - $(popup_element).addClass('show'); - - feature_id = feature.getId(); + feature_clicked = feature; } function hash() { @@ -430,6 +552,26 @@ featureClicked(feature); } +function getDistance(c1, c2) { + if(c1.getGeometry) { + c1 = c1.getGeometry().getCoordinates(); + } + if(c2.getGeometry) { + c2 = c2.getGeometry().getCoordinates(); + } + + var c1 = ol.proj.transform(c1, 'EPSG:3857', 'EPSG:4326'); + var c2 = ol.proj.transform(c2, 'EPSG:3857', 'EPSG:4326'); + return map_sphere.haversineDistance(c1, c2); +} + +function returnClosest(point, f1, f2) { + if(!f1) return f2; + if(!f2) return f1; + + return (getDistance(point, f1) < getDistance(point, f2)) ? f1 : f2; +} + function init() { if(!window.jQuery) { fail(lang.jquery_not_loaded); @@ -463,12 +605,23 @@ source: vehicles_source, }); + route_source = new ol.source.Vector({ + features: [], + }); + route_layer = new ol.layer.Vector({ + source: route_source, + style: new ol.style.Style({ + stroke: new ol.style.Stroke({ color: [255, 153, 0, .8], width: 5 }) + }), + }); + map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), + route_layer, stops_layer, stop_points_layer, vehicles_layer, @@ -489,12 +642,78 @@ element: fail_element, }) ]), + loadTilesWhileAnimating: true, }); + map_sphere = new ol.Sphere(6378137); // Display popup on click map.on('singleclick', function(e) { - var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) { return feature; }); + var point = e.coordinate; + var features = []; + map.forEachFeatureAtPixel(e.pixel, function(feature) { if(feature.getId()) features.push(feature); }); + + if(features.length > 1) { + var div = document.createElement('div'); + + addParaWithText(div, lang.select_feature); + + for(var i = 0; i < features.length; i++) { + var feature = features[i]; + + var p = document.createElement('p'); + var a = document.createElement('a'); + p.appendChild(a); + a.addEventListener('click', function(feature) { return function() { + featureClicked(feature); + }}(feature)); + + var type = ''; + switch(feature.getId().substr(0, 1)) { + case 'v': + type = lang.type_vehicle + ' ' + feature.get('vehicle_type').num; + break; + case 's': + type = lang.type_stop; + break; + case 'p': + type = lang.type_stoppoint; + break; + } + + addElementWithText(a, 'span', type).className = 'small'; + a.appendChild(document.createTextNode(' ')); + addElementWithText(a, 'span', feature.get('name')); + + div.appendChild(p); + } + + showPanel(div); + + return; + } + + var feature = features[0]; + if(!feature) { + if(stops_layer.getVisible()) { + feature = returnClosest(point, feature, stops_source.getClosestFeatureToCoordinate(point)); + } + if(stop_points_layer.getVisible()) { + feature = returnClosest(point, feature, stop_points_source.getClosestFeatureToCoordinate(point)); + } + if(vehicles_layer.getVisible()) { + feature = returnClosest(point, feature, vehicles_source.getClosestFeatureToCoordinate(point)); + } + + if(getDistance(point, feature) > 200) { + feature = null; + } + } + featureClicked(feature); + }); + + fail_element.addEventListener('click', function() { + fail_element.style.top = '-10em'; }); // Change mouse cursor when over marker @@ -506,13 +725,7 @@ // Change layer visibility on zoom map.getView().on('change:resolution', function(e) { - if(map.getView().getZoom() >= 16) { - stops_layer.setVisible(false); - stop_points_layer.setVisible(true); - } else { - stops_layer.setVisible(true); - stop_points_layer.setVisible(false); - } + stop_points_layer.setVisible(map.getView().getZoom() >= 16); }); $.when( -- Gitblit v1.9.1