Parkingspot Edit

This commit is contained in:
portree_kid 2020-01-08 19:41:58 +01:00
parent 7f3bdc8de8
commit 9a59509638
4 changed files with 75 additions and 37 deletions

View File

@ -4,8 +4,8 @@
<EditButton icon="fas fa-undo" v-on:click="undo" :show="editing" tooltip="Undo"></EditButton>
<EditButton icon="fas fa-save" v-on:click="save" :show="editing" tooltip="Save"></EditButton>
<EditButton icon="fas fa-draw-polygon" :show="editing" tooltip="Draw Taxiline"></EditButton>
<EditButton icon="fas fas fa-parking" :show="editing" tooltip="Draw Parking"></EditButton>
<EditButton icon="fas fa-draw-polygon" v-on:click="drawPolyline" :show="editing" tooltip="Draw Taxiline"></EditButton>
<EditButton icon="fas fas fa-parking" v-on:click="drawParking" :show="editing" tooltip="Draw Parking"></EditButton>
</div>
</template>
@ -30,6 +30,12 @@
save () {
this.editing = false
this.$parent.$parent.$refs.editLayer.disableEdit()
},
drawPolyline () {
this.$parent.$parent.$refs.editLayer.drawPolyline()
},
drawParking () {
this.$parent.$parent.$refs.editLayer.drawParking()
}
},
computed: {

View File

@ -8,7 +8,7 @@
import { LMap, LMarker } from 'vue2-leaflet'
import L from 'leaflet'
import LEdit from 'leaflet-editable/src/Leaflet.Editable.js'
import {readGroundnetXML} from '../loaders/groundnet_loader'
import {readGroundnetXML, addFeature} from '../loaders/groundnet_loader'
export default {
name: 'edit-layer',
@ -26,6 +26,7 @@
},
data () {
return {
maxId: 1
}
},
methods: {
@ -34,6 +35,8 @@
this.groundnet.removeFrom(this.$parent.mapObject)
}
this.groundnet = readGroundnetXML(this.$store.state.Settings.settings.airportsDirectory, icao)
console.log(this.groundnet.maxId)
this.groundnet.addTo(this.$parent.mapObject)
},
visible (feature) {
@ -73,6 +76,27 @@
this.groundnet.eachLayer(l => {
l.disableEdit()
})
},
drawPolyline () {
this.$parent.mapObject.editTools.startPolyline()
},
drawParking () {
this.$parent.mapObject.on('click', this.addParking)
},
addParking (event) {
console.log(event.latlng)
if (event.latlng === undefined) {
return
}
const circle = new L.ParkingSpot(event.latlng, {attributes: {radius: 20, heading: 0}})
circle.id = (++this.groundnet.maxId)
circle.addTo(this.groundnet)
circle.enableEdit()
circle.extensions()
circle.addListeners()
addFeature(circle)
// console.log(this.groundnet)
this.$parent.mapObject.off('click', this.addParking)
}
},
@ -88,7 +112,4 @@
</script>
<style scoped lang="scss">
.edit-layer {
}
</style>

View File

@ -22,13 +22,11 @@ L.ParkingSpot = L.Circle.extend({
}
this.direction = L.polyline([start, this.turfToLatLng(end)]);
this.direction.addTo(this.editor.editLayer);
this.on('editable:drawing:move', function (event) {
this.updateDirectionFromVertex();
});
}
},
removeDirection: function () {
this.direction = undefined;
},
//
updateVertexFromDirection: function () {
if (this.editEnabled()) {
@ -50,9 +48,34 @@ L.ParkingSpot = L.Circle.extend({
var end = this.editor._resizeLatLng.__vertex.getLatLng();
var heading = turf.bearing([start.lng, start.lat], [end.lng, end.lat]);
this.options.attributes.heading = heading + 180;
this.options.attributes.radius = this._mRadius;
this.direction.setLatLngs([start, end]);
}
},
addListeners: function () {
this.on('editable:drawing:move', function (event) {
console.log("Move : ", event);
// Is it the edit vertex (Middle) moving?
if(event.target.editor._resizeLatLng.__vertex._icon !== event.sourceTarget._element){
follow(event.target.id, event);
event.target.updateVertexFromDirection();
}
else if(event.target.editor._resizeLatLng.__vertex._icon === event.sourceTarget._element) {
event.target.updateDirectionFromVertex();
console.log(event);
}
});
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.on('editable:disable', function (event) {
event.target.removeDirection();
});
},
turfToLatLng: function (turfPoint) {
return {lat: turfPoint.geometry.coordinates[1], lng: turfPoint.geometry.coordinates[0]};
},
@ -71,7 +94,6 @@ L.ParkingSpot = L.Circle.extend({
});
var parkingSpot = function (n, layerGroup) {
//console.log(n.attr('lat') + " " + n.attr('lon'));
var latlon = convert(n.attr('lat') + " " + n.attr('lon'));
//console.log(latlon.decimalLatitude);
@ -102,7 +124,9 @@ airlineCodes="VIR,KAL,DAL,KLM" />
circle.options.attributes[ key ] = value;
else
circle.options.attributes[ key ] = Number( value);
});
});
circle.addListeners();
circle.addTo(layerGroup);
return circle;
}

View File

@ -17,9 +17,14 @@ var $ = require('jquery');
var featureLookup = {};
exports.addFeature = function (feature) {
featureLookup[feature.id] = new Array();
}
exports.readGroundnetXML = function (fDir, icao) {
try {
try {
layerGroup = L.layerGroup();
layerGroup.maxId = 0;
var f = path.join(fDir, icao[0], icao[1], icao[2], icao + '.groundnet.xml');
if (f == null || !fs.existsSync(f))
@ -46,31 +51,11 @@ exports.readGroundnetXML = function (fDir, icao) {
var nodesLookup = {};
parkingNodes.map(n => {
var circle = parkingSpot(n, layerGroup);
circle.on('editable:drawing:move', function (event) {
// console.log("Follow 1: " + event.sourceTarget );
// console.log("Follow 2: " + event.sourceTarget._dragStartTarget );
// console.log("Follow 3: " + event.target.editor._resizeLatLng.__vertex );
// console.log("Follow 4: " + event.target.editor._resizeLatLng.__vertex._icon );
// console.log("Follow 5: " + (event.target.editor._resizeLatLng.__vertex === event.sourceTarget) );
// console.log("Follow 6: " + (event.target.editor._resizeLatLng.__vertex._icon === event.sourceTarget._element) );
// console.log("Follow 7: " + (event.target.editor._resizeLatLng.__vertex._icon === event.sourceTarget._dragStartTarget) );
// console.log("Follow 8: " + (event.target.editor._resizeLatLng.__vertex._icon._leaflet_id === event.sourceTarget._dragStartTarget._leaflet_id) );
// Is it the edit vertex moving?
if(event.target.editor._resizeLatLng.__vertex._icon !== event.sourceTarget._element){
follow(event.target.id, event);
}
});
circle.on('click', function (event) {
console.log("Click : " + event.target);
store.default.dispatch('setParking', event.target.options.attributes);
});
var circle = parkingSpot(n, layerGroup);
nodesLookup[n.attr('index')] = n;
featureLookup[n.attr('index')] = new Array();
featureLookup[n.attr('index')].push(circle);
layerGroup.maxId = Math.max(layerGroup.maxId, Number(n.attr('index')))
features.push(circle);
}).sort();
// Get all nodes into the lookup
@ -81,6 +66,7 @@ exports.readGroundnetXML = function (fDir, icao) {
var latlon = convert(n.attr('lat') + " " + n.attr('lon'));
//console.log(latlon.decimalLatitude);
layerGroup.maxId = Math.max(layerGroup.maxId, Number(n.attr('index')))
nodesLookup[n.attr('index')] = n;
}).sort();
@ -207,7 +193,8 @@ follow = function (dragIndex, event) {
if (element instanceof L.ParkingSpot) {
element.disableEdit();
element.setLatLng(event.latlng);
// element.enableEdit();
element.enableEdit();
element.extensions();
element.updateVertexFromDirection();
}
else if (element instanceof L.TaxiwaySegment) {