|
|
@@ -17,7 +17,11 @@ var VectorLayer = ol.layer.Vector;
|
|
|
var OSM = ol.source.OSM;
|
|
|
var fromLonLat = ol.proj.fromLonLat;
|
|
|
|
|
|
-var defaultLonLat = [ -76.5019, 42.4440];
|
|
|
+var LineString = ol.geom.LineString;
|
|
|
+
|
|
|
+//var defaultLonLat = [ -76.5019, 42.4440];
|
|
|
+//var defaultLonLat = [ -76.1805, 42.6012 ];
|
|
|
+var defaultLonLat = [ -76.2705, 42.5512 ];
|
|
|
var defaultWebMerc = fromLonLat(defaultLonLat);
|
|
|
|
|
|
|
|
|
@@ -29,11 +33,6 @@ function _rnd(a,b) {
|
|
|
return Math.random()*(b-a) + a;
|
|
|
}
|
|
|
|
|
|
-//var vectorSource = new VectorSource({ features: [iconFeature], });
|
|
|
-var vectorSource = new VectorSource();
|
|
|
-
|
|
|
-var _icon = [];
|
|
|
-
|
|
|
|
|
|
function example_change_pos() {
|
|
|
|
|
|
@@ -46,13 +45,13 @@ function example_change_pos() {
|
|
|
|
|
|
|
|
|
_icon[0].feature.getGeometry().setCoordinates(merc);
|
|
|
- vectorLayer.getSource().changed();
|
|
|
+ busLayer.getSource().changed();
|
|
|
}
|
|
|
|
|
|
function example_change_opacity(p) {
|
|
|
p = ((typeof p === "undefined") ? 0.0 : p);
|
|
|
_icon[0].style.getImage().setOpacity(p);
|
|
|
- vectorLayer.getSource().changed();
|
|
|
+ busLayer.getSource().changed();
|
|
|
}
|
|
|
|
|
|
// icon can't change image src dynamically,
|
|
|
@@ -67,10 +66,15 @@ function example_change_image() {
|
|
|
src: 'data/bus_gw_90.png',
|
|
|
});
|
|
|
_icon[0].style.setImage(_nuimg);
|
|
|
- vectorLayer.getSource().changed();
|
|
|
+ busLayer.getSource().changed();
|
|
|
}
|
|
|
|
|
|
-for (var ii=0; ii<10; ii++) {
|
|
|
+//---
|
|
|
+
|
|
|
+//var vectorSource = new VectorSource({ features: [iconFeature], });
|
|
|
+var vectorSource = new VectorSource();
|
|
|
+var _icon = [];
|
|
|
+for (var ii=0; ii<2; ii++) {
|
|
|
|
|
|
var w = 1/32.0;
|
|
|
let lonlat = [
|
|
|
@@ -79,11 +83,8 @@ for (var ii=0; ii<10; ii++) {
|
|
|
let merc = fromLonLat(lonlat);
|
|
|
|
|
|
var iconFeature = new Feature({
|
|
|
- //geometry: new Point([10, 20]),
|
|
|
geometry: new Point([merc[0], merc[1]]),
|
|
|
- name: 'Null Island',
|
|
|
- population: 4000,
|
|
|
- rainfall: 500,
|
|
|
+ name: 'bus'
|
|
|
});
|
|
|
|
|
|
var iconStyle = new Style({
|
|
|
@@ -95,27 +96,38 @@ for (var ii=0; ii<10; ii++) {
|
|
|
}),
|
|
|
});
|
|
|
|
|
|
+ iconStyle.getImage().setOpacity(0.0);
|
|
|
+
|
|
|
_icon.push({ "style": iconStyle, "feature": iconFeature });
|
|
|
iconFeature.setStyle(iconStyle);
|
|
|
vectorSource.addFeature(iconFeature);
|
|
|
|
|
|
}
|
|
|
|
|
|
-const vectorLayer = new VectorLayer({
|
|
|
+//---
|
|
|
+
|
|
|
+
|
|
|
+const busLayer = new VectorLayer({
|
|
|
source: vectorSource,
|
|
|
+ zIndex: 2
|
|
|
});
|
|
|
|
|
|
+//--
|
|
|
+
|
|
|
const rasterLayer = new TileLayer({
|
|
|
//source: ol.source.OSM()
|
|
|
source: new ol.source.OSM(),
|
|
|
});
|
|
|
|
|
|
+//--
|
|
|
+
|
|
|
const map = new Map({
|
|
|
- layers: [rasterLayer, vectorLayer],
|
|
|
+ //layers: [rasterLayer, vectorLayer, routeLayer],
|
|
|
+ layers: [rasterLayer, busLayer ],
|
|
|
target: document.getElementById('map'),
|
|
|
view: new View({
|
|
|
center: defaultWebMerc,
|
|
|
- zoom: 13,
|
|
|
+ zoom: 11,
|
|
|
}),
|
|
|
});
|
|
|
|
|
|
@@ -160,3 +172,167 @@ setInterval( function() {
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
+//-----
|
|
|
+//
|
|
|
+
|
|
|
+function update_buses(json_gtfs) {
|
|
|
+
|
|
|
+ var bearingIdxLookup = [ "0", "45", "90", "135", "180", "225", "270", "315" ];
|
|
|
+
|
|
|
+ for (let ii=0; ii<json_gtfs.entityList.length; ii++) {
|
|
|
+ let id = json_gtfs.entityList[ii].id;
|
|
|
+ let p = json_gtfs.entityList[ii].vehicle.position;
|
|
|
+ let lat = p.latitude;
|
|
|
+ let lon = p.longitude;
|
|
|
+ let bearing = p.bearing;
|
|
|
+
|
|
|
+
|
|
|
+ let lonlat = [ lon , lat ];
|
|
|
+ let merc = fromLonLat(lonlat);
|
|
|
+
|
|
|
+
|
|
|
+ _icon[ii].feature.getGeometry().setCoordinates(merc);
|
|
|
+
|
|
|
+ bearing = (bearing % 360 );
|
|
|
+ if (bearing < 0) { bearing += 360.0; }
|
|
|
+ let iheading = Math.floor( (parseInt( bearing ) + 23) / 45 );
|
|
|
+ if (iheading > 7) { iheading = 0; }
|
|
|
+
|
|
|
+ var _nuimg = new Icon({
|
|
|
+ anchor: [0.5, 46],
|
|
|
+ anchorXUnits: 'fraction',
|
|
|
+ anchorYUnits: 'pixels',
|
|
|
+ src: 'data/bus_gw_' + bearingIdxLookup[iheading] + '.png',
|
|
|
+ });
|
|
|
+ _icon[ii].style.setImage(_nuimg);
|
|
|
+ _icon[ii].style.getImage().setOpacity(1.0);
|
|
|
+
|
|
|
+ //console.log(">>", id, lat, lon, bearing);
|
|
|
+ }
|
|
|
+
|
|
|
+ busLayer.getSource().changed();
|
|
|
+}
|
|
|
+
|
|
|
+function fetch_gtfs_vehicle_position() {
|
|
|
+ let xhr = new XMLHttpRequest();
|
|
|
+ xhr.onload = function() {
|
|
|
+ var ab = xhr.response;
|
|
|
+ var json_pb = pb2json.pb2json(ab);
|
|
|
+ //console.log(">>>", json_pb);
|
|
|
+
|
|
|
+ update_buses(json_pb)
|
|
|
+ };
|
|
|
+
|
|
|
+ xhr.responseType = "arraybuffer";
|
|
|
+ xhr.open("GET", "VehiclePosition.pb");
|
|
|
+ xhr.send();
|
|
|
+}
|
|
|
+
|
|
|
+//--
|
|
|
+
|
|
|
+function update_route_layer(geojson) {
|
|
|
+ var route_points = geojson.features[0].geometry.coordinates;
|
|
|
+ var merc_points = [];
|
|
|
+ for (let ii=0; ii<route_points.length; ii++) {
|
|
|
+ merc_points.push(ol.proj.transform(route_points[ii], 'EPSG:4326', 'EPSG:3857'));
|
|
|
+ }
|
|
|
+
|
|
|
+ var routeLine = new ol.Feature({
|
|
|
+ geometry: new ol.geom.LineString(merc_points)
|
|
|
+ });
|
|
|
+
|
|
|
+ var routeLineVector = new ol.source.Vector({});
|
|
|
+ routeLineVector.addFeature(routeLine);
|
|
|
+
|
|
|
+
|
|
|
+ var routeLayer = new VectorLayer({
|
|
|
+ source: routeLineVector,
|
|
|
+ style: new ol.style.Style({
|
|
|
+ fill: new ol.style.Fill({ color: 'rgb(0,0,255,0.25)', weight: 4, opacity: 0.5 }),
|
|
|
+ stroke: new ol.style.Stroke({ color: 'rgb(0,0,255,0.25)', width: 6, opacity: 0.5 })
|
|
|
+ }),
|
|
|
+ zIndex: 0
|
|
|
+ });
|
|
|
+
|
|
|
+ map.addLayer(routeLayer);
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function update_stop_layer(geojson) {
|
|
|
+ let stop_points = geojson.features[0].properties.route_stops;
|
|
|
+
|
|
|
+ let merc_points = [];
|
|
|
+ for (let ii=0; ii<stop_points.length; ii++) {
|
|
|
+ console.log(stop_points[ii].stop);
|
|
|
+ console.log(stop_points[ii].stop.geometry);
|
|
|
+ console.log(stop_points[ii].stop.geometry.coordinates);
|
|
|
+ let pnt = stop_points[ii].stop.geometry.coordinates;
|
|
|
+ merc_points.push(ol.proj.transform(pnt, 'EPSG:4326', 'EPSG:3857'));
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log("...");
|
|
|
+
|
|
|
+ var stopVectorSource = new VectorSource();
|
|
|
+
|
|
|
+ for (var ii=0; ii<merc_points.length; ii++) {
|
|
|
+ let _stop = stop_points[ii].stop;
|
|
|
+
|
|
|
+ let _stop_name = _stop.stop_name;
|
|
|
+
|
|
|
+ console.log(merc_points[ii]);
|
|
|
+
|
|
|
+ var iconFeature = new Feature({
|
|
|
+ geometry: new Point([merc_points[ii][0], merc_points[ii][1]]),
|
|
|
+ name: _stop_name
|
|
|
+ });
|
|
|
+
|
|
|
+ var iconStyle = new Style({
|
|
|
+ image: new Icon({
|
|
|
+ anchor: [0.5, 46],
|
|
|
+ anchorXUnits: 'fraction',
|
|
|
+ anchorYUnits: 'pixels',
|
|
|
+ src: 'data/star-3.png',
|
|
|
+ }),
|
|
|
+ });
|
|
|
+
|
|
|
+ iconStyle.getImage().setOpacity(0.8);
|
|
|
+ iconFeature.setStyle(iconStyle);
|
|
|
+ stopVectorSource.addFeature(iconFeature);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ var stopLayer = new VectorLayer({
|
|
|
+ source: stopVectorSource,
|
|
|
+ zIndex: 0
|
|
|
+ });
|
|
|
+
|
|
|
+ map.addLayer(stopLayer);
|
|
|
+
|
|
|
+
|
|
|
+ console.log(stop_points);
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function fetch_geojson(url) {
|
|
|
+ let xhr = new XMLHttpRequest();
|
|
|
+ xhr.onload = function() {
|
|
|
+ var geojson = xhr.response;
|
|
|
+ update_route_layer(geojson);
|
|
|
+ update_stop_layer(geojson);
|
|
|
+ };
|
|
|
+
|
|
|
+ xhr.responseType = "json";
|
|
|
+ xhr.open("GET", url, true);
|
|
|
+ xhr.send();
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+//--
|
|
|
+
|
|
|
+function init() {
|
|
|
+ setInterval(fetch_gtfs_vehicle_position, 1000);
|
|
|
+ setTimeout( function() { fetch_geojson("geojson/test_route.geojson"); }, 100);
|
|
|
+}
|
|
|
+
|
|
|
+init();
|