fly/fgdata
1
0
Fork 0
Code Activity

Phi: add AI traffic to the map

Browse source
This commit is contained in:
Torsten Dreyer 2015-03-09 20:59:17 +01:00
parent 65d16e358d
commit cf260aa030
5 changed files with 246 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
webgui/topics/Map.js
View file

@ -1,5 +1,5 @@
define([
'knockout', 'text!./Map.html', './Map/NavdbLayer'
'knockout', 'text!./Map.html', './Map/NavdbLayer', './Map/AILayer'
], function(ko, htmlString, NavdbLayer ) {
function ViewModel(params) {
@ -78,6 +78,7 @@ define([
"Track" : trackLayer,
"NavDB": L.navdbLayer(),
"AI": L.aiLayer(),
"VFRMap.com Sectionals (US)" : new L.TileLayer('http://vfrmap.com/20140918/tiles/vfrc/{z}/{y}/{x}.jpg', {
maxZoom : 12,

186
webgui/topics/Map/AILayer.js Normal file
View file

@ -0,0 +1,186 @@
(function(factory) {
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define([
'leaflet', './MapIcons'
], factory);
} else {
// Browser globals
factory();
}
}(function(leaflet, MAP_ICON) {
var SGPropertyNode = function(json) {
this.json = json;
};
SGPropertyNode.prototype.getValue = function() {
return this.json.value;
}
SGPropertyNode.prototype.getName = function() {
return this.json.name;
}
SGPropertyNode.prototype.getPath = function() {
return this.json.path;
}
SGPropertyNode.prototype.getIndex = function() {
return this.json.index;
}
SGPropertyNode.prototype.getChildren = function(name) {
var reply = [];
this.json.children.forEach(function(child) {
if (name && child.name == name)
reply.push(new SGPropertyNode(child));
});
return reply;
}
SGPropertyNode.prototype.getNode = function(name, index) {
if (!index)
index = 0;
for (var i = 0; i < this.json.children.length; i++) {
var child = this.json.children[i];
if (child.name == name && child.index == index)
return new SGPropertyNode(child);
}
}
leaflet.AILayer = leaflet.GeoJSON.extend({
options : {
pointToLayer : function(feature, latlng) {
var options = {
title : feature.properties.callsign,
alt : feature.properties.callsign,
riseOnHover : true,
};
if (feature.properties.type == "aircraft" || feature.properties.type == "multiplayer") {
options.angle = feature.properties.heading;
options.icon = MAP_ICON["aircraft"];
}
return new leaflet.RotatedMarker(latlng, options);
},
onEachFeature : function(feature, layer) {
if (feature.properties) {
var popupString = '<div class="popup">';
for ( var k in feature.properties) {
var v = feature.properties[k];
popupString += k + ': ' + v + '<br />';
}
popupString += '</div>';
layer.bindPopup(popupString, {
maxHeight : 200
});
}
},
},
onAdd : function(map) {
leaflet.GeoJSON.prototype.onAdd.call(this, map);
this.update(++this.updateId);
},
onRemove : function(map) {
this.updateId++;
leaflet.GeoJSON.prototype.onRemove.call(this, map);
},
updateId : 0,
update : function(id) {
var self = this;
if (self.updateId != id)
return;
var url = "/json/ai/models?d=99";
var jqxhr = $.get(url).done(function(data) {
self.clearLayers();
self.addData(self.aiPropsToGeoJson(data, [
"aircraft", "multiplayer", "carrier"
]));
}).fail(function(a, b) {
self.updateId++;
console.log(a, b);
alert('failed to load AI data');
}).always(function() {
});
if (self.updateId == id) {
setTimeout(function() {
self.update(id)
}, 10000);
}
},
aiPropsToGeoJson : function(props, types) {
var geoJSON = {
type : "FeatureCollection",
features : [],
};
var root = new SGPropertyNode(props);
types.forEach(function(type) {
root.getChildren(type).forEach(function(child) {
if (!child.getNode("valid").getValue())
return;
var position = child.getNode("position");
var orientation = child.getNode("orientation");
var velocities = child.getNode("velocities");
var lon = position.getNode("longitude-deg").getValue();
var lat = position.getNode("latitude-deg").getValue();
var alt = position.getNode("altitude-ft") * 0.3048;
var heading = orientation.getNode("true-heading-deg").getValue();
var id = child.getNode("id").getValue();
var callsign = "";
var name = "";
var speed = 0;
if (type == "multiplayer") {
name = child.getNode("sim").getNode("model").getNode("path").getValue();
}
if (type == "carrier") {
callsign = child.getNode("sign").getValue();
name = child.getNode("name").getValue();
speed = velocities.getNode("speed-kts").getValue();
} else {
callsign = child.getNode("callsign").getValue();
speed = velocities.getNode("true-airspeed-kt").getValue();
}
geoJSON.features.push({
"type" : "Feature",
"geometry" : {
"type" : "Point",
"coordinates" : [
lon, lat, alt.toFixed(0)
],
},
"id" : id,
"properties" : {
"type" : type,
"heading" : heading.toFixed(0),
"speed" : speed.toFixed(0),
"callsign" : callsign,
"name" : name,
},
});
});
});
return geoJSON;
},
});
leaflet.aiLayer = function(options) {
return new leaflet.AILayer(null, options);
}
}));

40
webgui/topics/Map/MapIcons.js Normal file
View file

@ -0,0 +1,40 @@
(function(factory) {
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define([
'leaflet'
], factory);
} else {
// Browser globals
factory(L);
}
}(function(leaflet) {
function SquareIcon(w, url) {
return leaflet.icon({
iconSize : [
w, w
],
iconAnchor : [
w / 2, w / 2
],
popupAnchor : [
0, w / 2 - 2
],
iconUrl : url,
})
}
var MAP_ICON = {};
MAP_ICON["VOR"] = SquareIcon(30, 'images/vor.svg');
MAP_ICON["NDB"] = SquareIcon(30, 'images/ndb.svg');
MAP_ICON["dme"] = SquareIcon(30, 'images/dme.svg');
MAP_ICON["airport-paved"] = SquareIcon(30, 'images/airport-paved.svg');
MAP_ICON["airport-unpaved"] = SquareIcon(30, 'images/airport-unpaved.svg');
MAP_ICON["airport-unknown"] = SquareIcon(30, 'images/airport-unknown.svg');
MAP_ICON["arp"] = SquareIcon(30, 'images/arp.svg');
MAP_ICON["aircraft"] = SquareIcon(20, 'images/aircraft.svg');
return MAP_ICON;
}));

43
webgui/topics/Map/NavdbLayer.js
View file

@ -2,40 +2,15 @@
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define([
'leaflet'
'leaflet','./MapIcons'
], factory);
} else {
// Browser globals
factory();
}
}(function() {
}(function(leaflet,MAP_ICON) {
function SquareIcon(w, url) {
return L.icon({
iconSize : [
w, w
],
iconAnchor : [
w / 2, w / 2
],
popupAnchor : [
0, w / 2 - 2
],
iconUrl : url,
})
}
var MAP_ICON = {};
MAP_ICON["VOR"] = SquareIcon(30, 'images/vor.svg');
MAP_ICON["NDB"] = SquareIcon(30, 'images/ndb.svg');
MAP_ICON["dme"] = SquareIcon(30, 'images/dme.svg');
MAP_ICON["airport-paved"] = SquareIcon(30, 'images/airport-paved.svg');
MAP_ICON["airport-unpaved"] = SquareIcon(30, 'images/airport-unpaved.svg');
MAP_ICON["airport-unknown"] = SquareIcon(30, 'images/airport-unknown.svg');
MAP_ICON["arp"] = SquareIcon(30, 'images/arp.svg');
MAP_ICON["aircraft"] = SquareIcon(20, 'images/aircraft.svg');
L.NavdbLayer = L.GeoJSON.extend({
leaflet.NavdbLayer = leaflet.GeoJSON.extend({
options : {
pointToLayer : function(feature, latlng) {
var options = {
@ -68,7 +43,7 @@
}
}
return new L.RotatedMarker(latlng, options);
return new leaflet.RotatedMarker(latlng, options);
},
onEachFeature : function(feature, layer) {
@ -82,6 +57,8 @@
layer.bindPopup(popupString, {
maxHeight : 200
});
if( feature.properties.metar ) {
}
}
},
@ -125,14 +102,14 @@
},
onAdd : function(map) {
L.GeoJSON.prototype.onAdd.call(this, map);
leaflet.GeoJSON.prototype.onAdd.call(this, map);
this.dirty = true;
this.update(++this.updateId);
},
onRemove : function(map) {
this.updateId++;
L.GeoJSON.prototype.onRemove.call(this, map);
leaflet.GeoJSON.prototype.onRemove.call(this, map);
},
invalidate : function() {
@ -190,7 +167,7 @@
});
L.navdbLayer = function(options) {
return new L.NavdbLayer(null, options);
leaflet.navdbLayer = function(options) {
return new leaflet.NavdbLayer(null, options);
}
}));

8
webgui/widgets/map.js
View file

@ -51,6 +51,14 @@ define(
53.5, 10.0
], MapOptions.zoom || 13);
if( params && params.on ) {
for ( var p in params.on ) {
var h = params.on[p];
if( typeof(h) === 'function' )
self.map.on(p,h);
}
}
var baseLayers = {
"OpenStreetMaps" : new leaflet.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom : 18,