Thresholds

src/renderer/components/FlightgearMap.vue

@@ -17,6 +17,7 @@
     <LeafletSidebar></LeafletSidebar>
     <EditBar></EditBar>
     <PavementLayer ref="pavementLayer"></PavementLayer>
+    <ThresholdLayer ref="thresholdLayer"></ThresholdLayer>
     <l-layer-group layerType="overlay" name="airports" ref="airportLayer">
       <l-circle
         v-for="(item, index) in this.$store.state.Airports.airports"
@@ -39,6 +40,7 @@
   import EditBar from './EditBar'
   import EditLayer from './EditLayer'
   import PavementLayer from './PavementLayer'
+  import ThresholdLayer from './ThresholdLayer'
   import L from 'leaflet'
 
   // https://github.com/KoRiGaN/Vue2Leaflet/issues/103
@@ -51,7 +53,7 @@
   })
   export default {
     name: 'flightgear-map',
-    components: { LMap, LTileLayer, LMarker, LCircle, LeafletSidebar, EditBar, EditLayer, PavementLayer, LLayerGroup, LControl },
+    components: { LMap, LTileLayer, LMarker, LCircle, LeafletSidebar, EditBar, EditLayer, PavementLayer, LLayerGroup, LControl, ThresholdLayer },
     props: [],
     mounted () {
       this.$store.dispatch('getAirports')
@@ -65,6 +67,7 @@
           if (airportsToLoad.length > 0 && airportsToLoad[0] !== this.editingAirport && this.zoom > 12) {
             this.$refs.editLayer.load(airportsToLoad[0])
             this.$refs.pavementLayer.load(airportsToLoad[0])
+            this.$refs.thresholdLayer.load(airportsToLoad[0])
             this.editingAirport = airportsToLoad[0]
           }
           this.$refs.editLayer.setVisible(this.zoom >= 12)

src/renderer/components/ThresholdLayer.vue

@@ -0,0 +1,72 @@
+<template>
+  <section class="edit-layer">
+    <h1>edit-layer Component</h1>
+  </section>
+</template>
+
+<script lang="js">
+  import { LMap, LMarker } from 'vue2-leaflet'
+  import L from 'leaflet'
+  import LEdit from 'leaflet-editable/src/Leaflet.Editable.js'
+  import {readThresholdXML} from '../loaders/threshold_loader'
+
+  export default {
+    name: 'edit-layer',
+    props: [],
+    created () {
+    },
+    mounted () {
+      console.log(LMap)
+      console.log(LMarker)
+      console.log(L)
+      console.log(LEdit)
+    },
+    beforeDestroy () {
+      this.remove()
+    },
+    data () {
+      return {
+      }
+    },
+    methods: {
+      load (icao) {
+        // Callback for add
+        this.layerGroup = readThresholdXML(this.$store.state.Settings.settings.airportsDirectory, icao, this.read)
+        this.layerGroup.addTo(this.$parent.mapObject)
+        this.icao = icao
+      },
+      deferredMountedTo (parent) {
+      },
+      remove () {
+        if (this.layerGroup) {
+          this.$parent.removeLayer(this.layerGroup)
+        }
+      },
+      add () {
+        if (this.$parent._isMounted) {
+          this.deferredMountedTo(this.$parent.mapObject)
+        }
+      },
+      setVisible (visible) {
+        if (this.layerGroup !== undefined) {
+          if (visible) {
+            this.layerGroup.addTo(this.$parent.mapObject)
+          } else {
+            this.layerGroup.removeFrom(this.$parent.mapObject)
+          }
+        }
+      }
+    },
+    computed: {
+      edit: function () {
+        console.log('Zoom : ' + this.$store.state.Settings.zoom)
+        if (this.$store.state.Settings.zoom > 12) {
+          console.log()
+        }
+      }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/renderer/loaders/Threshold.js

@@ -0,0 +1,141 @@
+/* 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');
+
+var $ = require('jquery');
+L.Threshold = L.Circle.extend({
+    highlight() {
+        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);                        
+            }
+            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.highlight(); 
+            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.
+                    }
+                );
+    
+            }
+
+        });
+
+        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;
+    },
+
+});
+
+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();
+    });
+    /*
+<Parking index="2"
+type="gate"
+name="A6"
+number=""
+lat="N44 52.799"
+lon="W93 11.947"
+heading="-147.51"
+radius="18"
+pushBackRoute="541" 
+airlineCodes="VIR,KAL,DAL,KLM" />
+*/
+    //circle.attributes = { type: n.attr('type'), name: n.attr('name'), radius: Number(n.attr('radius')), airlineCodes: n.attr('airlineCodes'), heading: Number(n.attr('heading')) };
+
+    $.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;
+}
+
+module.exports = threshold;

src/renderer/loaders/threshold_loader.js

@@ -0,0 +1,65 @@
+/* eslint-disable */
+const fs = require('fs');
+const path = require('path');
+var xamel = require('xamel');
+const convert = require('geo-coordinates-parser');
+
+const store = require('../store');
+
+const util = require('util');
+
+const threshold = require('./Threshold.js');
+
+
+var $ = require('jquery');
+
+exports.readThresholdXML = function (fDir, icao, force) {
+    try {
+        layerGroup = L.layerGroup();
+        layerGroup.maxId = 0;
+        var f = path.join(fDir, icao[0], icao[1], icao[2], icao + '.threshold.xml');
+        var fNew = path.join(fDir, icao[0], icao[1], icao[2], icao + '.threshold.new.xml');
+
+        if (f == null || !fs.existsSync(f))
+            return;
+        if (fNew != null && fs.existsSync(fNew) && !force) {
+            f = fNew;
+        }
+
+        var features = new Array();
+
+        //        map.on("editable:vertex:new", function (event) {
+        //            log.console("Add vertex " + event);
+        //        });
+
+        var xmlGroundnet = fs.readFileSync(f, 'utf8').toString();
+        xamel.parse(xmlGroundnet, function (err, xml) {
+            console.debug("parsed " + path.basename(f));
+            if (err !== null) {
+                console.error("Error in " + airline);
+                throw err;
+            }
+
+            var thresholdNodes = xml.find('PropertyList/runway/threshold');
+            console.log("Threshold Nodes" + thresholdNodes.length);
+
+            var merged = new Array();
+
+            var nodesLookup = {};
+            featureLookup = [];
+
+
+            thresholdNodes.map(n => {
+                var circle = threshold(n, layerGroup);
+                features.push(circle);
+            }).sort();
+
+            return layerGroup;
+        });
+        //                  var jsonAirports = JSON.parse(geoJSON);
+        //        return jsonAirports;
+    } catch (error) {
+        console.error(error);
+    }
+    return layerGroup;
+};