portree_kid
5 years ago
parent
0870422875
commit
1e43d973b2
@ -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>
|
||||
@ -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;
|
||||
@ -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;
|
||||
};
|
||||
Loading…
Reference in new issue