Add more aircraft icons courtesy Peter Lowden.
Add support for selecting an icon based on aircraft type from the json DB.
This commit is contained in:
Oliver Jowett
Carlos Salaverria
parent
d17f027035
commit
5e786e6cad
|
|
@ -58,43 +58,140 @@ var _beechcraft_svg =
|
|||
var _heavy_svg =
|
||||
"m28.64874,12.035023l0,8.801421l-4.585627,3.066495c0.126825,-0.257055 0.094102,-0.531839 0.095802,-0.802796l-0.015437,-3.087446l-2.230453,-0.012673l0.019009,3.599141c0.000513,0.577993 0.076338,0.923195 0.589296,1.241956l-5.533809,3.630512c0.166511,-0.256275 0.153699,-0.551367 0.153699,-0.841892l-0.005929,-3.270195l-2.160751,-0.012672l-0.006337,3.637159c0.016349,0.5301 0.096662,1.090947 0.576623,1.419379l-11.976014,7.825597c-2.106287,1.48859 -1.705322,3.044253 -1.56512,4.587637l26.645047,-9.048544l0,13.750239l0.722364,5.062875l-8.681027,6.387208c-1.239945,1.059417 -1.080616,2.171837 -0.842757,3.256969l11.278998,-2.946479c0.130159,3.116897 1.559821,3.171571 1.780561,0.006336l11.278998,2.94648c0.23786,-1.085133 0.397189,-2.197552 -0.842756,-3.256969l-8.681026,-6.387207l0.722362,-5.062875l0,-13.750239l26.645048,9.042207c0.140203,-1.543381 0.541167,-3.092711 -1.56512,-4.581301l-11.976015,-7.825597c0.47996,-0.328434 0.553938,-0.889279 0.570286,-1.419379l0,-3.63716l-2.160751,0.012673l-0.005378,3.328244c-0.002334,0.294243 0.007077,0.545056 0.178191,0.817583l-5.565189,-3.664251c0.512962,-0.318761 0.59512,-0.663963 0.595633,-1.241956l0.019009,-3.599141l-2.230454,0.012673l-0.015793,3.100403c0.001462,0.282341 -0.019949,0.535579 0.124839,0.794638l-4.614307,-3.071294l0,-8.801421c-1.111672,-11.152869 -5.489391,-11.217579 -6.735717,-0.006336z";
|
||||
|
||||
var MarkerIcons = {
|
||||
generic : {
|
||||
scale : 0.4,
|
||||
// From https://discussions.flightaware.com/ads-b-flight-tracking-f21/some-custom-svg-plane-icons-t37783.html
|
||||
// by Peter Lowden
|
||||
// licensed under CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
|
||||
|
||||
// NB: scaled so that 1 pixel is about 0.75m
|
||||
var _a320 = {
|
||||
key: "a320",
|
||||
scale: 0.60 * 0.75,
|
||||
size: [64, 64],
|
||||
anchor: [32, 28],
|
||||
path: "m 32,1 2,1 2,3 0,18 4,1 0,-4 3,0 0,5 17,6 0,3 -15,-2 -9,0 0,12 -2,6 7,3 0,2 -8,-1 -1,2 -1,-2 -8,1 0,-2 7,-3 -2,-6 0,-12 -9,0 -15,2 0,-3 17,-6 0,-5 3,0 0,4 4,-1 0,-18 2,-3 2,-1z"
|
||||
};
|
||||
|
||||
var _b777 = {
|
||||
key: "b777",
|
||||
scale: 1.15 * 0.75,
|
||||
size: [64, 64],
|
||||
anchor: [32, 32],
|
||||
path : _generic_plane_svg
|
||||
},
|
||||
path: "m 32,1 2,1 1,2 0,20 4,4 0,-4 3,0 0,4 -1,2 17,12 0,2 -16,-5 -7,0 0,13 -1,5 7,5 0,2 -8,-2 -1,2 -1,-2 -8,2 0,-2 7,-5 -1,-5 0,-13 -7,0 -16,5 0,-2 17,-12 -1,-2 0,-4 3,0 0,4 4,-4 0,-20 1,-2 2,-1z"
|
||||
};
|
||||
|
||||
light : {
|
||||
scale : 0.4,
|
||||
var _dash8 = {
|
||||
key: "dash8",
|
||||
scale: 0.52 * 0.75,
|
||||
size: [64, 64],
|
||||
anchor: [32, 30],
|
||||
path: "m 32,1 3,4 0,20 4,0 0,-5 1,-1 1,1 0,5 17,2 0,3 -17,2 0,3 -1,1 -1,-1 0,-3 -4,0 0,15 -1,8 6,0 1,1 0,3 -8,0 -1,1 -1,-1 -8,0 0,-3 1,-1 6,0 -1,-8 0,-15 -4,0 0,3, -1,1 -1,-1 0,-3 -17,-2 0,-3 17,-2 0,-5 1,-1 1,1 0,5 4,0 0,-20 3,-4z"
|
||||
};
|
||||
|
||||
var _b200 = {
|
||||
key: "b200",
|
||||
scale: 0.31 * 0.75,
|
||||
size: [64, 64],
|
||||
anchor: [32, 19],
|
||||
path: "m 32,1 1,0 1,2 1,4 0,5 5,0 0,-5 -1,-1 2,-2 2,2 -1,1 0,5 17,2 0,3 -17,3 0,1 -2,0 0,-1 -5,0 0,5 -2,8 6,3 0,2 -6,-1 -1,0 -6,1 0,-2 6,-3 -2,-8 0,-5 -5,0 0,1, -2,0 0,-1 -17,-3 0,-3 17,-2 0,-5 -1,-1 2,-2 2,2 -1,1 0,5 5,0 0,-5 1,-4 1,-2 z"
|
||||
};
|
||||
|
||||
var _g650 = {
|
||||
key: "g650",
|
||||
scale: 0.58 * 0.75,
|
||||
size: [64, 64],
|
||||
anchor: [32, 26],
|
||||
path: "m 32,1 1,0 1,2 1,4 0,10 21,17 0,5 -2,-2 -16,-8 -3,0 0,3 2,0 1,1 0,5 -1,1 0,3 -2,0 0,1 7,5 0,3 -9,-3 -1,0 -9,3 0,-3 7,-5 0,-1 -2,0 0,-3 -1,-1 0,-5 1,-1 2,0 0,-3 -3,0 -16,8 -2,2 0,-5 21,-17 0,-10 1,-4 1,-2z"
|
||||
};
|
||||
|
||||
var _c130 = {
|
||||
key: "c130",
|
||||
scale: 0.75 * 0.75,
|
||||
size: [64, 64],
|
||||
anchor: [32, 17],
|
||||
path: "m 31,1 1,0 1,1 1,2 0,8 3,0 0,-3 1,-1 1,1 0,3 6,0 0,-3 1,-1 1,1 0,3 10,1 0,2 -1,1 -17,3 -5,0 0,10 -1,1 8,2 0,1 -1,1 -8,0 -1,1 -1,-1 -8,0 -1,-1 0,-1 8,-2 -1,-1 0,-10 -5,0 -17,-3 -1,-1 0,-2 10,-1 0,-3 1,-1 1,1 0,3 6,0 0,-3 1,-1 1,1 0,3 3,0 0,-8 1,-2 1,-1 z"
|
||||
};
|
||||
|
||||
var TypeIcons = {
|
||||
'A320': _a320,
|
||||
|
||||
'B772': _b777, // all pretty similar except for length
|
||||
'B77W': _b777,
|
||||
'B773': _b777,
|
||||
'B77L': _b777,
|
||||
|
||||
'DH8D': _dash8,
|
||||
|
||||
'BE20': _b200,
|
||||
|
||||
'GLF5': _g650, // close enough
|
||||
'GLF6': _g650,
|
||||
|
||||
'C130': _c130,
|
||||
'C30J': _c130
|
||||
};
|
||||
|
||||
var CategoryIcons = {
|
||||
"A1" : {
|
||||
key : "A1",
|
||||
scale : 0.30,
|
||||
size : [64, 64],
|
||||
anchor : [32, 25],
|
||||
path : _beechcraft_svg
|
||||
},
|
||||
|
||||
medium : {
|
||||
scale : 0.4,
|
||||
"A2" : {
|
||||
key : "A2",
|
||||
scale : 0.35,
|
||||
size : [64, 64],
|
||||
anchor : [32, 32],
|
||||
path : _generic_plane_svg
|
||||
},
|
||||
|
||||
heavy : {
|
||||
scale : 0.6,
|
||||
"A3" : {
|
||||
key : "A3",
|
||||
scale : 0.40,
|
||||
size : [64, 64],
|
||||
anchor : [32, 32],
|
||||
path : _generic_plane_svg
|
||||
},
|
||||
|
||||
"A5" : {
|
||||
key : "A5",
|
||||
scale : 0.73,
|
||||
size : [64, 64],
|
||||
anchor : [32, 32],
|
||||
path : _heavy_svg
|
||||
},
|
||||
|
||||
rotorcraft : {
|
||||
scale : 0.5,
|
||||
"A7" : {
|
||||
key : "A7",
|
||||
scale : 0.50,
|
||||
size : [64, 64],
|
||||
anchor : [22, 32],
|
||||
path : _rotorcraft_svg
|
||||
}
|
||||
};
|
||||
|
||||
var DefaultIcon = {
|
||||
key : "default",
|
||||
scale : 0.4,
|
||||
size : [64, 64],
|
||||
anchor : [32, 32],
|
||||
path : _generic_plane_svg
|
||||
};
|
||||
|
||||
function getBaseMarker(category, type) {
|
||||
if (type in TypeIcons) {
|
||||
return TypeIcons[type];
|
||||
}
|
||||
|
||||
if (category in CategoryIcons) {
|
||||
return CategoryIcons[category];
|
||||
}
|
||||
|
||||
return DefaultIcon;
|
||||
}
|
||||
|
||||
function svgPathToSvg(path, size, stroke, width, fill) {
|
||||
var svg = '<svg width="' + size[0] + 'px" height="' + size[1] + 'px" version="1.1" xmlns="http://www.w3.org/2000/svg">';
|
||||
svg += '<path d="' + path + '"';
|
||||
|
|
|
|||
|
|
@ -226,22 +226,6 @@ PlaneObject.prototype.getDataSource = function() {
|
|||
return 'mode_s';
|
||||
};
|
||||
|
||||
PlaneObject.prototype.getMarkerIconType = function() {
|
||||
var lookup = {
|
||||
'A1' : 'light',
|
||||
'A2' : 'medium',
|
||||
'A3' : 'medium',
|
||||
'A5' : 'heavy',
|
||||
'A7' : 'rotorcraft'
|
||||
|
||||
};
|
||||
|
||||
if (this.category === null || !(this.category in lookup))
|
||||
return 'generic'
|
||||
else
|
||||
return lookup[this.category];
|
||||
}
|
||||
|
||||
PlaneObject.prototype.getMarkerColor = function() {
|
||||
// Emergency squawks override everything else
|
||||
if (this.squawk in SpecialSquawks)
|
||||
|
|
@ -317,23 +301,23 @@ PlaneObject.prototype.updateIcon = function() {
|
|||
var col = this.getMarkerColor();
|
||||
var opacity = (this.position_from_mlat ? 0.75 : 1.0);
|
||||
var outline = (this.position_from_mlat ? OutlineMlatColor : OutlineADSBColor);
|
||||
var type = this.getMarkerIconType();
|
||||
var weight = ((this.selected ? 2 : 1) / MarkerIcons[type].scale).toFixed(1);
|
||||
var baseMarker = getBaseMarker(this.category, this.icaotype);
|
||||
var weight = ((this.selected ? 2 : 1) / baseMarker.scale).toFixed(1);
|
||||
var rotation = (this.track === null ? 0 : this.track);
|
||||
|
||||
var svgKey = col + '!' + outline + '!' + type + '!' + weight;
|
||||
var svgKey = col + '!' + outline + '!' + baseMarker.key + '!' + weight;
|
||||
var styleKey = opacity + '!' + rotation;
|
||||
|
||||
if (this.markerStyle === null || this.markerIcon === null || this.markerSvgKey != svgKey) {
|
||||
//console.log(this.icao + " new icon and style " + this.markerSvgKey + " -> " + svgKey);
|
||||
|
||||
this.markerIcon = new ol.style.Icon({
|
||||
anchor: MarkerIcons[type].anchor,
|
||||
anchor: baseMarker.anchor,
|
||||
anchorXUnits: 'pixels',
|
||||
anchorYUnits: 'pixels',
|
||||
scale: MarkerIcons[type].scale,
|
||||
imgSize: MarkerIcons[type].size,
|
||||
src: svgPathToURI(MarkerIcons[type].path, MarkerIcons[type].size, outline, weight, col),
|
||||
scale: baseMarker.scale,
|
||||
imgSize: baseMarker.size,
|
||||
src: svgPathToURI(baseMarker.path, baseMarker.size, outline, weight, col),
|
||||
rotation: rotation * Math.PI / 180.0,
|
||||
opacity: opacity
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue