Draw plane icons.
This commit is contained in:
parent
98564ab6d0
commit
18bd8b630d
|
@ -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)
|
||||||
|
}
|
||||||
|
|
|
@ -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,20 +270,42 @@ 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;
|
||||||
this.markerStyle = new ol.style.Style({
|
var styleKey = opacity + '!' + rotation;
|
||||||
image: new ol.style.Circle({
|
|
||||||
fill: new ol.style.Fill({ color: col }),
|
if (this.markerStyle === null || this.markerIcon === null || this.markerSvgKey != svgKey) {
|
||||||
stroke: new ol.style.Stroke({ color: outline, width: weight }),
|
console.log(this.icao + " new icon and style " + this.markerSvgKey + " -> " + svgKey);
|
||||||
radius: 5,
|
|
||||||
})
|
this.markerIcon = new ol.style.Icon({
|
||||||
});
|
anchor: MarkerIcons[type].anchor,
|
||||||
|
anchorXUnits: 'pixels',
|
||||||
if (this.marker !== null) {
|
anchorYUnits: 'pixels',
|
||||||
this.marker.setStyle(this.markerStyle);
|
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({
|
||||||
|
image: this.markerIcon
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.marker !== null) {
|
||||||
|
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
|
||||||
|
|
Loading…
Reference in a new issue