Draw plane icons.

This commit is contained in:
Oliver Jowett 2016-07-02 17:10:52 +01:00
parent 98564ab6d0
commit 18bd8b630d
2 changed files with 67 additions and 17 deletions

View file

@ -61,31 +61,57 @@ var _heavy_svg =
var MarkerIcons = { var MarkerIcons = {
generic : { generic : {
scale : 0.4, scale : 0.4,
size : [64, 64],
anchor : [32, 32], anchor : [32, 32],
path : _generic_plane_svg path : _generic_plane_svg
}, },
light : { light : {
scale : 0.4, scale : 0.4,
size : [64, 64],
anchor : [32, 25], anchor : [32, 25],
path : _beechcraft_svg path : _beechcraft_svg
}, },
medium : { medium : {
scale : 0.4, scale : 0.4,
size : [64, 64],
anchor : [32, 32], anchor : [32, 32],
path : _generic_plane_svg path : _generic_plane_svg
}, },
heavy : { heavy : {
scale : 0.6, scale : 0.6,
size : [64, 64],
anchor : [32, 32], anchor : [32, 32],
path : _heavy_svg path : _heavy_svg
}, },
rotorcraft : { rotorcraft : {
scale : 0.5, scale : 0.5,
size : [64, 64],
anchor : [22, 32], anchor : [22, 32],
path : _rotorcraft_svg path : _rotorcraft_svg
} }
}; };
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 + '"';
if (stroke !== null) {
svg += ' stroke="' + stroke + '"';
}
if (width !== null) {
svg += ' stroke-width="' + width + '"';
}
if (fill !== null) {
svg += ' fill="' + fill + '"';
}
svg += '/></svg>';
return svg;
}
function svgPathToURI(path, size, stroke, width, fill) {
return "data:image/svg+xml," + svgPathToSvg(path, size, stroke, width, fill)
}

View file

@ -37,7 +37,10 @@ function PlaneObject(icao) {
// Display info // Display info
this.visible = true; this.visible = true;
this.marker = null; this.marker = null;
this.icon = { type: 'generic' }; this.markerStyle = null;
this.markerIcon = null;
this.markerStyleKey = null;
this.markerSvgKey = null;
// request metadata // request metadata
this.registration = null; this.registration = null;
@ -140,7 +143,6 @@ PlaneObject.prototype.updateTrack = function(estimate_time) {
lastseg.fixed.appendCoordinate(projPrev); lastseg.fixed.appendCoordinate(projPrev);
this.track_linesegs.push({ fixed: new ol.geom.LineString([projPrev, projHere]), this.track_linesegs.push({ fixed: new ol.geom.LineString([projPrev, projHere]),
latest: here,
feature: null, feature: null,
head_update: this.last_position_time, head_update: this.last_position_time,
tail_update: this.last_position_time, tail_update: this.last_position_time,
@ -268,21 +270,43 @@ PlaneObject.prototype.updateIcon = function() {
var opacity = (this.position_from_mlat ? 0.75 : 1.0); var opacity = (this.position_from_mlat ? 0.75 : 1.0);
var outline = (this.position_from_mlat ? OutlineMlatColor : OutlineADSBColor); var outline = (this.position_from_mlat ? OutlineMlatColor : OutlineADSBColor);
var type = this.getMarkerIconType(); var type = this.getMarkerIconType();
var weight = this.selected ? 2 : 1; var weight = this.selected ? 4 : 1;
var rotation = (this.track === null ? 0 : this.track); var rotation = (this.track === null ? 0 : this.track);
/* TODO use the aircraft icon svgs */ var svgKey = col + '!' + outline + '!' + type + '!' + 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,
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
scale: MarkerIcons[type].scale,
imgSize: MarkerIcons[type].size,
src: svgPathToURI(MarkerIcons[type].path, MarkerIcons[type].size, outline, weight, col),
rotation: rotation * Math.PI / 180.0,
opacity: opacity
});
this.markerStyleKey = styleKey;
this.markerSvgKey = svgKey;
this.markerStyle = new ol.style.Style({ this.markerStyle = new ol.style.Style({
image: new ol.style.Circle({ image: this.markerIcon
fill: new ol.style.Fill({ color: col }),
stroke: new ol.style.Stroke({ color: outline, width: weight }),
radius: 5,
})
}); });
if (this.marker !== null) { if (this.marker !== null) {
this.marker.setStyle(this.markerStyle); this.marker.setStyle(this.markerStyle);
} }
}
if (this.markerStyleKey != styleKey) {
console.log(this.icao + " new rotation");
this.markerIcon.setRotation(rotation * Math.PI / 180.0);
this.markerIcon.setOpacity(opacity);
this.markerStyleKey = styleKey;
}
return true; return true;
}; };
@ -373,13 +397,14 @@ PlaneObject.prototype.updateMarker = function(moved) {
return; return;
} }
this.updateIcon();
if (this.marker) { if (this.marker) {
if (moved) { if (moved) {
this.marker.setGeometry(new ol.geom.Point(ol.proj.fromLonLat(this.position))); this.marker.setGeometry(new ol.geom.Point(ol.proj.fromLonLat(this.position)));
} }
} else { } else {
this.marker = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(this.position))); this.marker = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(this.position)));
this.updateIcon(); this.marker.setStyle(this.markerStyle);
PlaneIconFeatures.push(this.marker); PlaneIconFeatures.push(this.marker);
/* FIXME /* FIXME
@ -389,7 +414,6 @@ PlaneObject.prototype.updateMarker = function(moved) {
*/ */
} }
this.updateIcon();
/* /*
// Setting the marker title // Setting the marker title