RunwayNode adding
This commit is contained in:
portree_kid
parent
806253dfb6
commit
79088be6f6
@ -28,6 +28,25 @@
|
||||
// console.log(LSymbol)
|
||||
},
|
||||
mounted () {
|
||||
this.selectionLayerGroup = L.layerGroup();
|
||||
this.selectionLayerGroup.addTo(this.$parent.mapObject)
|
||||
this.$store.watch(
|
||||
function (state) {
|
||||
return state.Editable.data.node;
|
||||
},
|
||||
() => { this.editedNode() }
|
||||
/*
|
||||
(newValue, oldValue) => {
|
||||
console.log(`Updating from ${oldValue} to ${newValue}`);
|
||||
//console.log(this.featureLookup[newValue.index]);
|
||||
console.log(this.component('editLayer'));
|
||||
//do something on data change
|
||||
}*/
|
||||
,
|
||||
{
|
||||
deep: true //add this if u need to watch object properties change etc.
|
||||
}
|
||||
);
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.remove()
|
||||
@ -38,10 +57,12 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
load (icao, force) {
|
||||
load (icao, force) {
|
||||
if (this.groundnetLayerGroup !== undefined) {
|
||||
this.groundnetLayerGroup.removeFrom(this.$parent.mapObject)
|
||||
}
|
||||
|
||||
|
||||
this.icao = icao
|
||||
this.groundnetLayerGroup = readGroundnetXML(this.$store.state.Settings.settings.airportsDirectory, icao, force)
|
||||
if (this.groundnetLayerGroup === undefined) {
|
||||
@ -108,8 +129,7 @@
|
||||
if (typeof l.bringToFront === 'function') {
|
||||
l.bringToFront()
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
disableEdit () {
|
||||
this.editable = false
|
||||
@ -150,6 +170,45 @@
|
||||
event.target.addTo(this.groundnetLayerGroup)
|
||||
})
|
||||
},
|
||||
editedNode() {
|
||||
var isOnRunway = this.$store.state.Editable.data.node.isOnRunway;
|
||||
var nIndex = this.$store.state.Editable.index;
|
||||
var hasRunwayNode = false;
|
||||
var latlng;
|
||||
this.featureLookup[nIndex].forEach((element,index) => {
|
||||
if (element instanceof L.RunwayNode) {
|
||||
if (isOnRunway === 0) {
|
||||
// We shouldn't have a RunwayNode
|
||||
element.removeFrom(layerGroup);
|
||||
this.featureLookup[nIndex].splice(index,1);
|
||||
}
|
||||
hasRunwayNode = true;
|
||||
}
|
||||
else if (element instanceof L.ParkingSpot) {
|
||||
}
|
||||
else if (element instanceof L.TaxiwaySegment) {
|
||||
if (Number(element.begin) === nIndex) {
|
||||
latlng = element._latlngs[0];
|
||||
}
|
||||
if (Number(element.end) === nIndex) {
|
||||
latlng = element._latlngs[1];
|
||||
}
|
||||
}
|
||||
})
|
||||
if (!hasRunwayNode && isOnRunway) {
|
||||
const icon = new L.DivIcon({
|
||||
className: 'custom-div-icon',
|
||||
html: "<div style='background-color:#4838cc;' class='marker-pin'></div><i class='fas fa-plane-departure'></i>",
|
||||
iconSize: [30, 42],
|
||||
iconAnchor: [15, 42]
|
||||
});
|
||||
const node = new L.RunwayNode(latlng, { icon: icon });
|
||||
node.glueindex = nIndex;
|
||||
node.addTo(layerGroup);
|
||||
this.featureLookup[nIndex].push(node);
|
||||
node.addListeners();
|
||||
}
|
||||
},
|
||||
closestLayerSnap (eventLatlng, snap) {
|
||||
var layers = []
|
||||
this.groundnetLayerGroup.eachLayer((layer) => {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="leaflet-sidebar-tabs">
|
||||
<ul role="tablist"> <!-- top aligned tabs -->
|
||||
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
|
||||
<li><a href="#airports" role="tab"><i class="fas fa-edit"></i></a></li>
|
||||
<li><a href="#edit" role="tab"><i class="fas fa-edit"></i></a></li>
|
||||
<li><a href="#scan" role="tab"><i class="fa fa-search"></i></a></li>
|
||||
</ul>
|
||||
|
||||
@ -22,10 +22,11 @@
|
||||
</h1>
|
||||
<p>A responsive sidebar for mapping libraries</p>
|
||||
</div>
|
||||
<div class="leaflet-sidebar-pane" id="airports">
|
||||
<div class="leaflet-sidebar-pane" id="edit">
|
||||
<AirportEdit></AirportEdit>
|
||||
<GroundnetEdit></GroundnetEdit>
|
||||
<ArcEdit></ArcEdit>
|
||||
<NodeEdit></NodeEdit>
|
||||
</div>
|
||||
<div class="leaflet-sidebar-pane" id="scan">
|
||||
<RunScan></RunScan>
|
||||
@ -45,13 +46,14 @@
|
||||
import AirportEdit from './AirportEdit'
|
||||
import GroundnetEdit from './GroundnetEdit'
|
||||
import ArcEdit from './ArcEdit'
|
||||
import NodeEdit from './NodeEdit'
|
||||
import SettingsPanel from './SettingsPanel'
|
||||
import RunScan from './RunScan'
|
||||
import FileSelect from './FileSelect'
|
||||
|
||||
export default {
|
||||
name: 'leaflet-sidebar',
|
||||
components: { AirportEdit, ArcEdit, GroundnetEdit, SettingsPanel, RunScan, FileSelect },
|
||||
components: { AirportEdit, ArcEdit, NodeEdit, GroundnetEdit, SettingsPanel, RunScan, FileSelect },
|
||||
props: [],
|
||||
mounted () {
|
||||
this.add()
|
||||
|
||||
81
src/renderer/components/NodeEdit.vue
Normal file
81
src/renderer/components/NodeEdit.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="leaflet-sidebar-header" v-if="node">
|
||||
Node Properties
|
||||
<div class="leaflet-sidebar-close">
|
||||
<i class="fa fa-caret-left"></i>
|
||||
</div>
|
||||
</h1>
|
||||
<div width="100%" v-if="node">
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="7">
|
||||
<span class="demo-input-label">Is on runway :</span>
|
||||
</el-col>
|
||||
<el-col :span="15">
|
||||
<el-switch v-model="isOnRunway"></el-switch>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="7">
|
||||
<span class="demo-input-label">Holdpoint Type :</span>
|
||||
</el-col>
|
||||
<el-col :span="15">
|
||||
<el-select v-model="holdPointType" placeholder="Select">
|
||||
<el-option
|
||||
v-for="type in options"
|
||||
:key="type.value"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="js">
|
||||
export default {
|
||||
/*
|
||||
methods: {
|
||||
updateIsOnRunway (value) {
|
||||
this.$store.commit('SET_EDIT_ISONRUNWAY', value)
|
||||
}
|
||||
},
|
||||
*/
|
||||
computed: {
|
||||
options: function () {
|
||||
return [{value: 'node', label: 'node'}, {value: 'PushBack', label: 'PushBack'}, {value: 'normal', label: 'normal'}, {value: 'CAT II/III', label: 'CAT II/III'}]
|
||||
},
|
||||
node: function () {
|
||||
return this.$store.state.Editable.type === 'node'
|
||||
},
|
||||
// {index: 39, lat: "N58 27.343", lon: "W03 5.153", isOnRunway: 0, holdPointType: "none"}
|
||||
isOnRunway: {
|
||||
// getter
|
||||
get: function () {
|
||||
return this.$store.state.Editable.data.node.isOnRunway === 1
|
||||
},
|
||||
// setter
|
||||
set: function (newValue) {
|
||||
this.$store.commit('SET_EDIT_ISONRUNWAY', newValue ? 1 : 0)
|
||||
}
|
||||
},
|
||||
holdPointType: {
|
||||
// getter
|
||||
get: function () {
|
||||
if (this.$store.state.Editable.data.node.holdPointType === undefined) {
|
||||
return 'none'
|
||||
}
|
||||
return this.$store.state.Editable.data.node.holdPointType
|
||||
},
|
||||
// setter
|
||||
set: function (newValue) {
|
||||
this.$store.commit('SET_EDIT_HOLDPOINTTYPE', newValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -8,20 +8,20 @@ L.TaxiwaySegment = L.Polyline.extend({
|
||||
end: String,
|
||||
bidirectional: Boolean,
|
||||
|
||||
updateBeginVertex : function (latlng) {
|
||||
updateBeginVertex: function (latlng) {
|
||||
if (this._latlngs[0].__vertex) {
|
||||
this._latlngs[0].__vertex.setLatLng(latlng);
|
||||
this._latlngs[0].__vertex.setLatLng(latlng);
|
||||
}
|
||||
},
|
||||
updateEndVertex : function (latlng) {
|
||||
if(this._latlngs[1].__vertex){
|
||||
this._latlngs[1].__vertex.setLatLng(latlng);
|
||||
updateEndVertex: function (latlng) {
|
||||
if (this._latlngs[1].__vertex) {
|
||||
this._latlngs[1].__vertex.setLatLng(latlng);
|
||||
}
|
||||
},
|
||||
|
||||
updateMiddle: function () {
|
||||
this._latlngs.forEach(element => {
|
||||
if(element.__vertex.middleMarker){
|
||||
if (element.__vertex.middleMarker) {
|
||||
element.__vertex.middleMarker.updateLatLng();
|
||||
}
|
||||
});
|
||||
@ -42,6 +42,7 @@ L.TaxiwaySegment = L.Polyline.extend({
|
||||
this.on('click', function (event) {
|
||||
console.log("Click : " + event.target);
|
||||
store.default.dispatch('setArc', event.target.options.attributes);
|
||||
|
||||
});
|
||||
this.on('editable:drawing:move', function (event) {
|
||||
console.log(event.target);
|
||||
@ -49,13 +50,19 @@ L.TaxiwaySegment = L.Polyline.extend({
|
||||
this.follow(dragIndex, event);
|
||||
}
|
||||
});
|
||||
this.on('editable:vertex:clicked', function (event) {
|
||||
console.log(this.featureLookup[event.vertex.glueindex]);
|
||||
|
||||
store.default.dispatch('setNode', event.vertex.latlng.attributes)
|
||||
event.vertex._icon.style['background-color'] = 'red';
|
||||
});
|
||||
var dragIndex = -1;
|
||||
this.on('editable:vertex:dragstart', function (event) {
|
||||
console.log("Event Target : ", event.target);
|
||||
console.log("Middle Marker : ", event.vertex == event.vertex.middleMarker);
|
||||
console.log("Middle Marker : ", event.vertex.glueindex == undefined);
|
||||
if(event.vertex.glueindex == undefined)
|
||||
return;
|
||||
console.log("Event Target : ", event.target);
|
||||
console.log("Middle Marker : ", event.vertex == event.vertex.middleMarker);
|
||||
console.log("Middle Marker : ", event.vertex.glueindex == undefined);
|
||||
if (event.vertex.glueindex == undefined)
|
||||
return;
|
||||
dragIndex = event.vertex.glueindex;
|
||||
});
|
||||
this.on('editable:vertex:dragend', function (event) {
|
||||
@ -70,14 +77,14 @@ L.TaxiwaySegment = L.Polyline.extend({
|
||||
}
|
||||
dragIndex = -1;
|
||||
});
|
||||
},
|
||||
/**
|
||||
*
|
||||
*/
|
||||
},
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
follow (dragIndex, event) {
|
||||
follow(dragIndex, event) {
|
||||
this.featureLookup[dragIndex].forEach(element => {
|
||||
if(element !== event.target){
|
||||
if (element !== event.target) {
|
||||
if (element instanceof L.RunwayNode) {
|
||||
element.setLatLng(event.latlng);
|
||||
}
|
||||
@ -102,18 +109,18 @@ L.TaxiwaySegment = L.Polyline.extend({
|
||||
element.updateEndVertex(event.latlng);
|
||||
element.updateMiddle();
|
||||
}
|
||||
} else if (element instanceof L.Editable.VertexMarker) {
|
||||
} else if (element instanceof L.Editable.VertexMarker) {
|
||||
console.log(element);
|
||||
element.setLatLng(event.latlng);
|
||||
element.latlngs.forEach((latlng, index) => {
|
||||
console.log(latlng);
|
||||
if(latlng.__vertex === element) {
|
||||
latlng.update(event.latlng);
|
||||
console.log(latlng);
|
||||
if (latlng.__vertex === element) {
|
||||
latlng.update(event.latlng);
|
||||
}
|
||||
});
|
||||
element.editor.feature.setLatLngs(element.latlngs);
|
||||
element.editor.feature.updateMiddle();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
@ -122,12 +129,12 @@ L.TaxiwaySegment = L.Polyline.extend({
|
||||
updateStyle() {
|
||||
var style = {};
|
||||
if (this.options.attributes.isPushBackRoute) {
|
||||
style.color = 'magenta';
|
||||
style.color = 'magenta';
|
||||
}
|
||||
console.log("isPushBackRoute ", this.options.attributes.isPushBackRoute);
|
||||
this.setStyle(style);
|
||||
if (!this.bidirectional) {
|
||||
this.setText(' ► ', {repeat: true, attributes: {fill: 'red', size: 20}})
|
||||
this.setText(' ► ', { repeat: true, attributes: { fill: 'red', size: 20 } })
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -72,6 +72,7 @@ exports.readGroundnetXML = function (fDir, icao, force) {
|
||||
//console.log(latlon.decimalLatitude);
|
||||
|
||||
layerGroup.maxId = Math.max(layerGroup.maxId, Number(n.attr('index')))
|
||||
|
||||
nodesLookup[n.attr('index')] = n;
|
||||
if (n.attr('isOnRunway') === '1') {
|
||||
var rNode = runwayNode(n, layerGroup);
|
||||
@ -80,15 +81,16 @@ exports.readGroundnetXML = function (fDir, icao, force) {
|
||||
}
|
||||
featureLookup[rNode.glueindex].push(rNode);
|
||||
}
|
||||
|
||||
//store.default.dispatch('setNode', n)
|
||||
}).sort();
|
||||
|
||||
|
||||
var taxiArcs = xml.find('groundnet/TaxiWaySegments/arc');
|
||||
taxiArcs.map(n => {
|
||||
var begin = nodesLookup[n.attr('begin')];
|
||||
var end = nodesLookup[n.attr('end')];
|
||||
if (typeof begin !== 'undefined' && typeof end !== 'undefined') {
|
||||
var beginNode = nodesLookup[n.attr('begin')];
|
||||
var endNode = nodesLookup[n.attr('end')];
|
||||
if (typeof beginNode !== 'undefined' && typeof endNode !== 'undefined') {
|
||||
var bidirectional = false;
|
||||
if (typeof featureLookup[n.attr('begin')] !== 'undefined') {
|
||||
featureLookup[n.attr('begin')].forEach(element => {
|
||||
@ -107,11 +109,11 @@ exports.readGroundnetXML = function (fDir, icao, force) {
|
||||
});
|
||||
}
|
||||
if (!bidirectional) {
|
||||
var beginlatlon = convert(begin.attr('lat') + " " + begin.attr('lon'));
|
||||
var endlatlon = convert(end.attr('lat') + " " + end.attr('lon'));
|
||||
var beginlatlon = convert(beginNode.attr('lat') + " " + beginNode.attr('lon'));
|
||||
var endlatlon = convert(endNode.attr('lat') + " " + endNode.attr('lon'));
|
||||
var polyline = new L.TaxiwaySegment([[beginlatlon.decimalLatitude, beginlatlon.decimalLongitude], [endlatlon.decimalLatitude, endlatlon.decimalLongitude]], { attributes: {} }).addTo(layerGroup);
|
||||
polyline._latlngs[0].attributes = {};
|
||||
$.each(begin.attrs, function (key, value) {
|
||||
$.each(beginNode.attrs, function (key, value) {
|
||||
console.log(key + "\t" + value);
|
||||
|
||||
if (isNaN(value))
|
||||
@ -120,7 +122,7 @@ exports.readGroundnetXML = function (fDir, icao, force) {
|
||||
polyline._latlngs[0].attributes[key] = Number(value);
|
||||
});
|
||||
polyline._latlngs[1].attributes = {};
|
||||
$.each(end.attrs, function (key, value) {
|
||||
$.each(endNode.attrs, function (key, value) {
|
||||
console.log(key + "\t" + value);
|
||||
|
||||
if (isNaN(value))
|
||||
@ -138,8 +140,8 @@ exports.readGroundnetXML = function (fDir, icao, force) {
|
||||
});
|
||||
polyline.updateStyle();
|
||||
|
||||
polyline.begin = begin.attr('index');
|
||||
polyline.end = end.attr('index');
|
||||
polyline.begin = beginNode.attr('index');
|
||||
polyline.end = endNode.attr('index');
|
||||
// polyline.enableEdit();
|
||||
|
||||
// polyline.on('dblclick', function (event) { L.DomEvent.stop; polyline.toggleEdit; });
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
const state = {
|
||||
type: 'none',
|
||||
index: 'none',
|
||||
data: {airports: {}, parking: {}, arc: {}, nodes: {}}
|
||||
data: {airports: {}, parking: {}, arc: {}, node: {}}
|
||||
}
|
||||
|
||||
const SET_EDIT_AIRPORT = 'SET_EDIT_AIRPORT'
|
||||
@ -20,7 +20,7 @@ const mutations = {
|
||||
state.type = 'parking'
|
||||
},
|
||||
'SET_EDIT_NODE' (state, node) {
|
||||
state.data.nodes[node.index] = node
|
||||
state.data.node = node
|
||||
state.index = node.index
|
||||
state.type = 'node'
|
||||
},
|
||||
@ -30,6 +30,12 @@ const mutations = {
|
||||
},
|
||||
'SET_EDIT_PARKING_NAME' (state, parkingName) {
|
||||
state.data.name = parkingName
|
||||
},
|
||||
'SET_EDIT_HOLDPOINTTYPE' (state, holdPointType) {
|
||||
state.data.node.holdPointType = holdPointType
|
||||
},
|
||||
'SET_EDIT_ISONRUNWAY' (state, isOnRunway) {
|
||||
state.data.node.isOnRunway = isOnRunway
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user