From f4bc2f47ceed54e7465b5e3af8751a47e840b94c Mon Sep 17 00:00:00 2001 From: portree_kid Date: Tue, 8 Dec 2020 21:52:35 +0100 Subject: [PATCH] Threshold icons --- src/renderer/components/FlightgearMap.vue | 23 ++- src/renderer/components/ThresholdLayer.vue | 8 + src/renderer/loaders/Threshold.js | 191 +++++++-------------- src/renderer/loaders/Tower.js | 4 +- src/renderer/loaders/threshold_loader.js | 12 +- static/FGA_ACT_A_GA.svg | 2 + static/FGA_ACT_B_PROP.svg | 2 + static/FGA_ACT_B_SHORTEN.svg | 2 + static/FGA_ACT_C.svg | 3 + static/FGA_ACT_D.svg | 2 + static/FGA_ACT_E.svg | 2 + static/FGA_ACT_F.svg | 17 ++ static/FGA_THR.svg | 89 ++++++++++ 13 files changed, 220 insertions(+), 137 deletions(-) create mode 100644 static/FGA_ACT_A_GA.svg create mode 100644 static/FGA_ACT_B_PROP.svg create mode 100644 static/FGA_ACT_B_SHORTEN.svg create mode 100644 static/FGA_ACT_C.svg create mode 100644 static/FGA_ACT_D.svg create mode 100644 static/FGA_ACT_E.svg create mode 100644 static/FGA_ACT_F.svg create mode 100644 static/FGA_THR.svg diff --git a/src/renderer/components/FlightgearMap.vue b/src/renderer/components/FlightgearMap.vue index 79e97b7..ca6eade 100644 --- a/src/renderer/components/FlightgearMap.vue +++ b/src/renderer/components/FlightgearMap.vue @@ -162,7 +162,9 @@ You should have received a copy of the GNU General Public License along with FG this.$refs.pavementLayer.load(airportsToLoad[0]) this.$refs.editLayer.load(airportsToLoad[0]) this.$refs.thresholdLayer.load(airportsToLoad[0]) - this.$refs.towerLayer.load(airportsToLoad[0]) + if (this.$refs.towerLayer) { + this.$refs.towerLayer.load(airportsToLoad[0]) + } this.editingAirport = airportsToLoad[0] }) } @@ -228,7 +230,7 @@ You should have received a copy of the GNU General Public License along with FG this.layersControl.addOverlay(this.$refs.thresholdLayer.getLayer(), 'Threshold Layer') } } - if (this.$refs.towerLayer.getLayer() === e.layer) { + if (this.$refs.towerLayer !== undefined && this.$refs.towerLayer.getLayer() === e.layer) { l = this.layersControl._layers.filter(l => l.name === 'Tower Layer') if (l.length > 0 && l[0].layer !== this.$refs.towerLayer.getLayer()) { this.layersControl.removeLayer(l[0].layer) @@ -338,7 +340,12 @@ You should have received a copy of the GNU General Public License along with FG if (zoom !== this.$store.state.Settings.zoom) { this.$store.dispatch('setZoom', zoom) this.$refs.airportLayer.setVisible(zoom < 12) - this.$refs.towerLayer.setVisible(this.zoom >= 12) + if (this.$refs.towerLayer) { + this.$refs.towerLayer.setVisible(this.zoom >= 12) + } + if (this.$refs.thresholdLayer) { + this.$refs.thresholdLayer.setVisible(this.zoom >= 12) + } this.$refs.pavementLayer.setVisible(zoom >= 12) } this.$refs.editLayer.groundnetLayerGroup.eachLayer(function (layer) { @@ -346,6 +353,9 @@ You should have received a copy of the GNU General Public License along with FG layer.updateArrows(zoom) } }) + if (this.$refs.thresholdLayer) { + this.$refs.thresholdLayer.zoomUpdated() + } if (this.$refs.towerLayer) { this.$refs.towerLayer.zoomUpdated() } @@ -354,7 +364,12 @@ You should have received a copy of the GNU General Public License along with FG if (center !== this.$store.state.Settings.center) { this.$store.dispatch('setCenter', center) this.$refs.airportLayer.setVisible(this.zoom < 12) - this.$refs.towerLayer.setVisible(this.zoom >= 12) + if (this.$refs.thresholdLayer) { + this.$refs.thresholdLayer.setVisible(this.zoom >= 12) + } + if (this.$refs.towerLayer) { + this.$refs.towerLayer.setVisible(this.zoom >= 12) + } this.$refs.pavementLayer.setVisible(this.zoom >= 12) } }, diff --git a/src/renderer/components/ThresholdLayer.vue b/src/renderer/components/ThresholdLayer.vue index 4ba902b..545186a 100644 --- a/src/renderer/components/ThresholdLayer.vue +++ b/src/renderer/components/ThresholdLayer.vue @@ -62,7 +62,15 @@ this.visible = visible } } + }, + zoomUpdated () { + this.layerGroup.eachLayer(l => { + if (l instanceof L.Threshold) { + l.updateIcon(this.$parent.mapObject) + } + }) } + }, computed: { edit: function () { diff --git a/src/renderer/loaders/Threshold.js b/src/renderer/loaders/Threshold.js index b50f506..27d3e57 100644 --- a/src/renderer/loaders/Threshold.js +++ b/src/renderer/loaders/Threshold.js @@ -10,143 +10,76 @@ FG Airports is distributed in the hope that it will be useful, but WITHOUT ANY W You should have received a copy of the GNU General Public License along with FG Airports. If not, see http://www.gnu.org/licenses/. */ /* eslint-disable */ + const convert = require('geo-coordinates-parser'); -const leaflet = require('leaflet'); -const turf = require('@turf/turf'); -const util = require('util'); -const store = require('../store'); +const fs = require('fs'); +const path = require('path'); -var $ = require('jquery'); -L.Threshold = L.Circle.extend({ - select() { - var style = {}; - style['color'] = 'red'; - this.setStyle(style); - }, - addListeners: function () { - this.on('editable:drawing:move', function (event) { - console.log("Move : ", event); - console.log("Move : ", event.latlng); - // Is it the edit vertex (Middle) moving? - if(event.target.editor._resizeLatLng.__vertex._icon !== event.sourceTarget._element){ - event.target.setLatLng(event.latlng); - event.target.updateVertexFromDirection(); - this.follow(event.target.id, event); +/**http://wiki.openstreetmap.org/wiki/Zoom_levels*/ + + +L.Threshold = L.Marker.extend({ + options: { + zIndexOffset: 20000, + }, + stripSVG: function(fName) { + var rx = /<\s*svg[^>]*>([\s\S]*)<\s*\/svg[^>]*>/gm; + var svg = fs.readFileSync(path.join(__static, '/', fName), 'utf8'); + var svg2 = rx.exec(svg); + return svg2[0]; + }, + updateIcon : function(map) { + console.debug(`Lat Lng Threshold ${this.getLatLng()}`); + if(map !== null) { + var metersPP = this.metersPerPixel(map.getCenter().lat, map.getZoom()); + console.debug('Old Meters per pixel ' + this.metersPP); + console.debug('New Meters per pixel ' + metersPP); + if(this._metersPP != metersPP) { + var pixelSize = (this.iconSize/2) / metersPP; + var scale = pixelSize/this.iconSize; + var offset = 0;//-(this.iconSize/2); + this.setIcon(L.divIcon({ + iconSize: 64, + className: 'threshold-marker-icon', + html: `
${this.svg}
`, + })); + + this.update(this.getLatLng()); + console.debug(); + this.setLatLng(this.getLatLng()); + this._metersPP = metersPP; } - else if(event.target.editor._resizeLatLng.__vertex._icon === event.sourceTarget._element) { - event.target.updateDirectionFromVertex(); - event.target.updateVertexFromDirection(); - } - }); - /* - this.on('editable:vertex:drag', function (event) { - console.log("Drag : ", event); - }); - */ - this.on('click', function (event) { - console.log("Click : " + event.target); - store.default.dispatch('setParking', event.target.options.attributes); - this.select(); - this.unwatch = store.default.watch( - function (state) { - return state.Editable.data.parking; - }, - () => { - if (event.target instanceof L.Threshold) { - event.target.setStyle({color : '#3388ff'}); - this.unwatch(); - } - } - , - { - deep: true //add this if u need to watch object properties change etc. - } - ); - }); - this.on('editable:vertex:clicked', function (event) { - console.log(this.featureLookup[event.vertex.glueindex]); - if(event.target.editor._resizeLatLng.__vertex._icon !== event.sourceTarget._element){ - event.vertex._icon.style['background-color'] = 'red'; - store.default.dispatch('setParking', event.target.options.attributes); - this.unwatch = store.default.watch( - function (state) { - return state.Editable.data.parking; - }, - () => { - event.target.setStyle({color : '#3388ff'}); - this.unwatch(); - } - , - { - deep: true //add this if u need to watch object properties change etc. - } - ); + } + }, + onAdd : function(map) { + var metersPP = this.metersPerPixel(map.getCenter().lat, map.getZoom()); + this.updateIcon(map); + }, + metersPerPixel: function (latitude, zoomLevel) { + var earthCircumference = 40075017; + var latitudeRadians = latitude * (Math.PI / 180); + return earthCircumference * Math.cos(latitudeRadians) / Math.pow(2, zoomLevel + 8); + }, - } - - }); - - this.on('editable:disable', function (event) { - event.target.removeDirection(); - }); - }, - updateStyle: function () { - - }, - turfToLatLng: function (turfPoint) { - return {lat: turfPoint.geometry.coordinates[1], lng: turfPoint.geometry.coordinates[0]}; - }, - extensions: function (editLayer) { - this.createDirection(); - if (typeof this.featureLookup[this.id] === 'undefined') { - this.featureLookup[this.id] = []; - } - this.featureLookup[this.id].push(this); - }, - - _getLatRadius: function () { - return this._mRadius; - }, - - _getLngRadius: function () { - return this._mRadius; + pixelValue: function (latitude, meters, zoomLevel) { + return meters / metersPerPixel(latitude, zoomLevel); }, + }); -var threshold = function (n, layerGroup) { - //console.log(n.attr('lat') + " " + n.attr('lon')); - var latlon = convert(n.find('lat/text()').text() + " " + n.find('lon/text()').text()); - //console.log(latlon.decimalLatitude); - //console.log(convert(n.attr('lat') + " " + n.attr('lon')).decimalLongitude); - const circle = new L.Threshold([latlon.decimalLatitude, latlon.decimalLongitude], { radius: 10, attributes: {} }); - circle.on('editable:enable', function (event) { - // event.target.createDirection(); - }); - /* - -*/ - //circle.attributes = { type: n.attr('type'), name: n.attr('name'), radius: Number(n.attr('radius')), airlineCodes: n.attr('airlineCodes'), heading: Number(n.attr('heading')) }; +L.Threshold.addInitHook(function(){ + this.svg = this.stripSVG('FGA_THR.svg'); + this.iconSize = 500; +}); - $.each( n.attrs, function( key, value ) { - console.log( '$', circle.id, key , value); - - if(isNaN(value)) - circle.options.attributes[ key ] = value; - else - circle.options.attributes[ key ] = Number( value); - }); - circle.addTo(layerGroup); - return circle; +//Builds a marker for a ai or multiplayer aircraft +var threshold = function (n, options) { + var latlon = convert(n.find('lat/text()').text() + " " + n.find('lon/text()').text()); + var heading = n.find('hdg-deg/text()').text(); + + var marker = new L.Threshold([latlon.decimalLatitude, latlon.decimalLongitude], {heading: heading}); + return marker; } -module.exports = threshold; \ No newline at end of file +module.exports = threshold; diff --git a/src/renderer/loaders/Tower.js b/src/renderer/loaders/Tower.js index efe5e84..0180eac 100644 --- a/src/renderer/loaders/Tower.js +++ b/src/renderer/loaders/Tower.js @@ -49,8 +49,8 @@ L.TowerMarker = L.Marker.extend({ var scale = pixelSize/64; var offset = -(64/2); this.setIcon(L.divIcon({ - iconSize: null, - className: 'aircraft-marker-icon', + iconSize: 64, + className: 'tower-marker-icon', html: `
${this.svg}
`, })); this._metersPP = metersPP; diff --git a/src/renderer/loaders/threshold_loader.js b/src/renderer/loaders/threshold_loader.js index 9b6b5da..31ae532 100644 --- a/src/renderer/loaders/threshold_loader.js +++ b/src/renderer/loaders/threshold_loader.js @@ -50,8 +50,16 @@ exports.readThresholdXML = function (fDir, icao, force) { thresholdNodes.map(n => { - var circle = threshold(n, layerGroup); - features.push(circle); + var icon = threshold(n); + icon.addTo(layerGroup); + + var latlon = convert(n.find('lat/text()').text() + " " + n.find('lon/text()').text()); + /* + var marker = new L.Circle([latlon.decimalLatitude, latlon.decimalLongitude], 5); + marker.addTo(layerGroup); + */ + +// features.push(circle); }).sort(); return layerGroup; diff --git a/static/FGA_ACT_A_GA.svg b/static/FGA_ACT_A_GA.svg new file mode 100644 index 0000000..ea3bfb2 --- /dev/null +++ b/static/FGA_ACT_A_GA.svg @@ -0,0 +1,2 @@ + + diff --git a/static/FGA_ACT_B_PROP.svg b/static/FGA_ACT_B_PROP.svg new file mode 100644 index 0000000..cfb1b14 --- /dev/null +++ b/static/FGA_ACT_B_PROP.svg @@ -0,0 +1,2 @@ + + diff --git a/static/FGA_ACT_B_SHORTEN.svg b/static/FGA_ACT_B_SHORTEN.svg new file mode 100644 index 0000000..9fffc0e --- /dev/null +++ b/static/FGA_ACT_B_SHORTEN.svg @@ -0,0 +1,2 @@ + + diff --git a/static/FGA_ACT_C.svg b/static/FGA_ACT_C.svg new file mode 100644 index 0000000..1353d30 --- /dev/null +++ b/static/FGA_ACT_C.svg @@ -0,0 +1,3 @@ + + +image/svg+xml diff --git a/static/FGA_ACT_D.svg b/static/FGA_ACT_D.svg new file mode 100644 index 0000000..87895c4 --- /dev/null +++ b/static/FGA_ACT_D.svg @@ -0,0 +1,2 @@ + + diff --git a/static/FGA_ACT_E.svg b/static/FGA_ACT_E.svg new file mode 100644 index 0000000..502a9a4 --- /dev/null +++ b/static/FGA_ACT_E.svg @@ -0,0 +1,2 @@ + + diff --git a/static/FGA_ACT_F.svg b/static/FGA_ACT_F.svg new file mode 100644 index 0000000..fee4f5e --- /dev/null +++ b/static/FGA_ACT_F.svg @@ -0,0 +1,17 @@ + + + + + + +image/svg+xml + + + + + + + + + + diff --git a/static/FGA_THR.svg b/static/FGA_THR.svg new file mode 100644 index 0000000..aa41794 --- /dev/null +++ b/static/FGA_THR.svg @@ -0,0 +1,89 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + +