AFG/dump1090
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add support for markers that don't rotate but have a heading arrow.

Browse source 
Use it for balloons.
This commit is contained in:
Oliver Jowett 2016-08-29 12:38:00 +01:00
parent fa91b24ffa
commit 08fba4e3b0
2 changed files with 71 additions and 10 deletions
public_html
planeObject.js

66
public_html/planeObject.js
View file

@ -39,6 +39,8 @@ function PlaneObject(icao) {
this.marker = null;
this.markerStyle = null;
this.markerIcon = null;
this.markerStaticStyle = null;
this.markerStaticIcon = null;
this.markerStyleKey = null;
this.markerSvgKey = null;
@ -263,25 +265,61 @@ PlaneObject.prototype.updateIcon = function() {
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({
var icon = new ol.style.Icon({
anchor: baseMarker.anchor,
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
scale: baseMarker.scale,
imgSize: baseMarker.size,
src: svgPathToURI(baseMarker.path, baseMarker.size, outline, weight, col),
rotation: rotation * Math.PI / 180.0,
opacity: opacity
rotation: (baseMarker.noRotate ? 0 : rotation * Math.PI / 180.0),
opacity: opacity,
rotateWithView: (baseMarker.noRotate ? false : true)
});
if (baseMarker.noRotate) {
// the base marker won't be rotated
this.markerStaticIcon = icon;
this.markerStaticStyle = new ol.style.Style({
image: this.markerStaticIcon
});
// create an arrow that we will rotate around the base marker
// to indicate heading
var offset = baseMarker.markerRadius * baseMarker.scale + 6;
var size = offset * 2;
var arrowPath = "M " + offset + ",0 m 4,4 -8,0 4,-4 z";
this.markerIcon = new ol.style.Icon({
anchor: [offset, offset],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
scale: 1.0,
imgSize: [size, size],
src: svgPathToURI(arrowPath, [size, size], outline, 1, outline),
rotation: rotation * Math.PI / 180.0,
opacity: opacity,
rotateWithView: true
});
this.markerStyle = new ol.style.Style({
image: this.markerIcon
});
} else {
this.markerIcon = icon;
this.markerStyle = new ol.style.Style({
image: this.markerIcon
});
this.markerStaticIcon = null;
this.markerStaticStyle = new ol.style.Style({});
}
this.markerStyleKey = styleKey;
this.markerSvgKey = svgKey;
this.markerStyle = new ol.style.Style({
image: this.markerIcon
});
if (this.marker !== null) {
this.marker.setStyle(this.markerStyle);
this.markerStatic.setStyle(this.markerStaticStyle);
}
}
@ -289,6 +327,9 @@ PlaneObject.prototype.updateIcon = function() {
//console.log(this.icao + " new rotation");
this.markerIcon.setRotation(rotation * Math.PI / 180.0);
this.markerIcon.setOpacity(opacity);
if (this.staticIcon) {
this.staticIcon.setOpacity(opacity);
}
this.markerStyleKey = styleKey;
}
@ -369,8 +410,9 @@ PlaneObject.prototype.updateTick = function(receiver_timestamp, last_timestamp)
PlaneObject.prototype.clearMarker = function() {
if (this.marker) {
PlaneIconFeatures.remove(this.marker);
PlaneIconFeatures.remove(this.markerStatic);
/* FIXME google.maps.event.clearListeners(this.marker, 'click'); */
this.marker = null;
this.marker = this.markerStatic = null;
}
};
@ -385,12 +427,18 @@ PlaneObject.prototype.updateMarker = function(moved) {
if (this.marker) {
if (moved) {
this.marker.setGeometry(new ol.geom.Point(ol.proj.fromLonLat(this.position)));
this.markerStatic.setGeometry(new ol.geom.Point(ol.proj.fromLonLat(this.position)));
}
} else {
this.marker = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(this.position)));
} else {
this.marker = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(this.position)));
this.marker.hex = this.icao;
this.marker.setStyle(this.markerStyle);
PlaneIconFeatures.push(this.marker);
this.markerStatic = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(this.position)));
this.markerStatic.hex = this.icao;
this.markerStatic.setStyle(this.markerStaticStyle);
PlaneIconFeatures.push(this.markerStatic);
}
};