From 08fba4e3b03ec5f7c0abcc339cba249cabfa16cd Mon Sep 17 00:00:00 2001 From: Oliver Jowett Date: Mon, 29 Aug 2016 12:38:00 +0100 Subject: [PATCH] Add support for markers that don't rotate but have a heading arrow. Use it for balloons. --- public_html/markers.js | 15 ++++++++- public_html/planeObject.js | 66 ++++++++++++++++++++++++++++++++------ 2 files changed, 71 insertions(+), 10 deletions(-) diff --git a/public_html/markers.js b/public_html/markers.js index bcd08e2..df12fbb 100755 --- a/public_html/markers.js +++ b/public_html/markers.js @@ -111,6 +111,17 @@ var _c130 = { 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 _balloon = { + key: "balloon", + scale: 0.50, + size: [64, 64], + anchor: [32, 32], + path: "m 27,1 10,0 3,1 3,1 1,1 2,1 6,6 1,2 1,1 1,3 1,3 0,10 -1,3 -1,3 -1,1 -1,2 -6,6 -2,1 -1,1 -2,1 -2,1 -2,8 -1,0 2,-8 -3,1 -6,0 -3,-1 2,8 9,0 0,6 -10,0 0,-6 -2,-8 -2,-1 -2,-1 -1,-1 -2,-1 -6,-6 -1,-2 -1,-1 -1,-3 -1,-3 0,-10 1,-3 1,-3 1,-1 1,-2 6,-6 2,-1 1,-1 3,-1 3,-1 z", + noRotate: true, + markerRadius: 32 +}; + + // by Oliver Jowett // licensed under CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/) var _a380 = { @@ -210,7 +221,9 @@ var CategoryIcons = { size : [64, 64], anchor : [22, 32], path : _rotorcraft_svg - } + }, + + "B2" : _balloon }; var DefaultIcon = { diff --git a/public_html/planeObject.js b/public_html/planeObject.js index 2ec9fbd..92da329 100644 --- a/public_html/planeObject.js +++ b/public_html/planeObject.js @@ -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); } };