Thresholds

This commit is contained in:
portree_kid 2020-03-29 18:10:51 +02:00
parent 0870422875
commit 1e43d973b2
4 changed files with 282 additions and 1 deletions

View File

@ -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)

View File

@ -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>

View File

@ -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;

View File

@ -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;
};