#124 Editable Tower height
This commit is contained in:
parent
92a39591b5
commit
21e27bf913
@ -145,7 +145,7 @@ You should have received a copy of the GNU General Public License along with FG
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
cancel () {
|
cancel () {
|
||||||
this.centerDialogVisible = false
|
this.centerDialogVisible = false
|
||||||
},
|
},
|
||||||
zoomout() {
|
zoomout() {
|
||||||
this.$parent.$parent.$refs.editLayer.stopDrawing()
|
this.$parent.$parent.$refs.editLayer.stopDrawing()
|
||||||
@ -195,7 +195,7 @@ You should have received a copy of the GNU General Public License along with FG
|
|||||||
this.$parent.$parent.$refs.towerLayer.disableEdit()
|
this.$parent.$parent.$refs.towerLayer.disableEdit()
|
||||||
this.$parent.$parent.$refs.thresholdLayer.disableEdit()
|
this.$parent.$parent.$refs.thresholdLayer.disableEdit()
|
||||||
this.rescanCurrentGroundnet()
|
this.rescanCurrentGroundnet()
|
||||||
Vue.set(this, 'saveDialogVisible', false)
|
Vue.set(this, 'saveDialogVisible', false)
|
||||||
},
|
},
|
||||||
save () {
|
save () {
|
||||||
Vue.set(this, 'saveDialogVisible', true)
|
Vue.set(this, 'saveDialogVisible', true)
|
||||||
@ -209,7 +209,7 @@ You should have received a copy of the GNU General Public License along with FG
|
|||||||
this.$parent.$parent.$refs.towerLayer.save()
|
this.$parent.$parent.$refs.towerLayer.save()
|
||||||
this.$parent.$parent.$refs.thresholdLayer.save()
|
this.$parent.$parent.$refs.thresholdLayer.save()
|
||||||
this.rescanCurrentGroundnet()
|
this.rescanCurrentGroundnet()
|
||||||
Vue.set(this, 'saveDialogVisible', false)
|
Vue.set(this, 'saveDialogVisible', false)
|
||||||
},
|
},
|
||||||
rescanCurrentGroundnet () {
|
rescanCurrentGroundnet () {
|
||||||
try {
|
try {
|
||||||
@ -220,7 +220,7 @@ You should have received a copy of the GNU General Public License along with FG
|
|||||||
|
|
||||||
var icao = this.$parent.$parent.$refs.editLayer.icao
|
var icao = this.$parent.$parent.$refs.editLayer.icao
|
||||||
const worker = new Worker(winURL)
|
const worker = new Worker(winURL)
|
||||||
|
|
||||||
var aptDir = path.join(this.$store.state.Settings.settings.airportsDirectory, icao[0], icao[1], icao[2]);
|
var aptDir = path.join(this.$store.state.Settings.settings.airportsDirectory, icao[0], icao[1], icao[2]);
|
||||||
worker.postMessage(['scan', aptDir ])
|
worker.postMessage(['scan', aptDir ])
|
||||||
// the reply
|
// the reply
|
||||||
@ -276,7 +276,7 @@ You should have received a copy of the GNU General Public License along with FG
|
|||||||
|
|
||||||
const worker = new Worker(winURL)
|
const worker = new Worker(winURL)
|
||||||
worker.onerror = function(e) {
|
worker.onerror = function(e) {
|
||||||
worker.terminate()
|
worker.terminate()
|
||||||
worker.view.max = 0
|
worker.view.max = 0
|
||||||
worker.view.checkDialogVisible = false
|
worker.view.checkDialogVisible = false
|
||||||
e.preventDefault(); // <-- "Hey browser, I handled it!"
|
e.preventDefault(); // <-- "Hey browser, I handled it!"
|
||||||
@ -302,7 +302,7 @@ You should have received a copy of the GNU General Public License along with FG
|
|||||||
console.log(l)
|
console.log(l)
|
||||||
pavement.push(l)
|
pavement.push(l)
|
||||||
})
|
})
|
||||||
var features2 = pavement.map(mapper.checkMapper).filter(n => n)
|
var features2 = pavement.map(mapper.checkMapper).filter(n => n)
|
||||||
|
|
||||||
worker.postMessage(['check', features.concat(features2) ] )
|
worker.postMessage(['check', features.concat(features2) ] )
|
||||||
this.pollData()
|
this.pollData()
|
||||||
|
@ -6,8 +6,8 @@
|
|||||||
<span class="label">Latitude :</span>
|
<span class="label">Latitude :</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="17">
|
<el-col :span="17">
|
||||||
<el-input placeholder="Please input" v-model="latitude" :disabled="!editing"
|
<el-input placeholder="Please input" v-model="latitude" :disabled="true"
|
||||||
@focus="coordFocussed = true"
|
@focus="coordFocussed = true"
|
||||||
@blur="coordFocussed = false"></el-input>
|
@blur="coordFocussed = false"></el-input>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -16,8 +16,8 @@
|
|||||||
<span class="label">Longitude :</span>
|
<span class="label">Longitude :</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="17">
|
<el-col :span="17">
|
||||||
<el-input placeholder="Please input" v-model="longitude" :disabled="!editing"
|
<el-input placeholder="Please input" v-model="longitude" :disabled="true"
|
||||||
@focus="coordFocussed = true"
|
@focus="coordFocussed = true"
|
||||||
@blur="coordFocussed = false"></el-input>
|
@blur="coordFocussed = false"></el-input>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -26,9 +26,9 @@
|
|||||||
<span class="label">Height :</span>
|
<span class="label">Height :</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="17">
|
<el-col :span="17">
|
||||||
<el-input placeholder="Please input" v-model="height" :disabled="!editing"
|
<el-input-number placeholder="Please input" @change="handleChange" v-model="height" :disabled="!editing" :step="0.01"
|
||||||
@focus="coordFocussed = true"
|
@focus="coordFocussed = true"
|
||||||
@blur="coordFocussed = false"></el-input>
|
@blur="coordFocussed = false"></el-input-number>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
@ -59,12 +59,15 @@
|
|||||||
save () {
|
save () {
|
||||||
var o = {latitude: this.latitude, longitude: this.longitude, height: this.height};
|
var o = {latitude: this.latitude, longitude: this.longitude, height: this.height};
|
||||||
writeTowerXML(this.$store.state.Settings.settings.airportsDirectory, this.$parent.$parent.$parent.icao, o)
|
writeTowerXML(this.$store.state.Settings.settings.airportsDirectory, this.$parent.$parent.$parent.icao, o)
|
||||||
|
},
|
||||||
|
handleChange (newValue) {
|
||||||
|
this.$store.dispatch('setTowerHeight', newValue);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
editing: {
|
editing: {
|
||||||
get: function () {
|
get: function () {
|
||||||
return false //this.$parent.$parent.$parent.$refs.editLayer.editing
|
return this.$parent.$parent.$parent.$refs.editLayer.editing
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
tower: function () {
|
tower: function () {
|
||||||
@ -77,8 +80,13 @@
|
|||||||
longitude: function () {
|
longitude: function () {
|
||||||
return this.$store.state.Editable.data.tower.coords.longitude;
|
return this.$store.state.Editable.data.tower.coords.longitude;
|
||||||
},
|
},
|
||||||
height: function () {
|
height: {
|
||||||
return this.$store.state.Editable.data.tower.coords.height;
|
get: function () {
|
||||||
|
return this.$store.state.Editable.data.tower.height;
|
||||||
|
},
|
||||||
|
set: function (newValue) {
|
||||||
|
this.$store.dispatch('setTowerHeight', newValue);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -25,7 +25,16 @@ You should have received a copy of the GNU General Public License along with FG
|
|||||||
console.debug([LMap, LMarker, L, LEdit])
|
console.debug([LMap, LMarker, L, LEdit])
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
this.$store.watch(
|
||||||
|
function (state) {
|
||||||
|
return state.Editable.data.tower
|
||||||
|
},
|
||||||
|
() => { this.editedTower() }
|
||||||
|
,
|
||||||
|
{
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
)
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
this.remove()
|
this.remove()
|
||||||
@ -35,6 +44,15 @@ You should have received a copy of the GNU General Public License along with FG
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
editedTower () {
|
||||||
|
if (this.$store.state.Editable.data.tower) {
|
||||||
|
this.layerGroup.eachLayer(l => {
|
||||||
|
if (l instanceof L.TowerMarker) {
|
||||||
|
l.setTowerHeight(this.$store.state.Editable.data.tower.height)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
getLayer () {
|
getLayer () {
|
||||||
return this.layerGroup
|
return this.layerGroup
|
||||||
},
|
},
|
||||||
@ -71,7 +89,7 @@ You should have received a copy of the GNU General Public License along with FG
|
|||||||
if (this.layerGroup) {
|
if (this.layerGroup) {
|
||||||
this.layerGroup.eachLayer(l => {
|
this.layerGroup.eachLayer(l => {
|
||||||
if (l instanceof L.TowerMarker) {
|
if (l instanceof L.TowerMarker) {
|
||||||
l.enableEdit(this.$parent.mapObject)
|
l.setInteractive(true)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -80,7 +98,7 @@ You should have received a copy of the GNU General Public License along with FG
|
|||||||
if (this.layerGroup) {
|
if (this.layerGroup) {
|
||||||
this.layerGroup.eachLayer(l => {
|
this.layerGroup.eachLayer(l => {
|
||||||
if (l instanceof L.TowerMarker) {
|
if (l instanceof L.TowerMarker) {
|
||||||
l.enableEdit(this.$parent.mapObject)
|
l.setInteractive(false)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -21,7 +21,7 @@ const store = require('../store');
|
|||||||
|
|
||||||
L.TowerMarker = L.Marker.extend({
|
L.TowerMarker = L.Marker.extend({
|
||||||
options: {
|
options: {
|
||||||
zIndexOffset: 10000,
|
zIndexOffset: 10000, draggable: 'true'
|
||||||
},
|
},
|
||||||
stripSVG: function(fName) {
|
stripSVG: function(fName) {
|
||||||
var rx = /<\s*svg[^>]*>([\s\S]*)<\s*\/svg[^>]*>/gm;
|
var rx = /<\s*svg[^>]*>([\s\S]*)<\s*\/svg[^>]*>/gm;
|
||||||
@ -35,15 +35,16 @@ L.TowerMarker = L.Marker.extend({
|
|||||||
var metersPP = this.metersPerPixel(map.getCenter().lat, map.getZoom());
|
var metersPP = this.metersPerPixel(map.getCenter().lat, map.getZoom());
|
||||||
console.debug('Old Meters per pixel ' + this._metersPP);
|
console.debug('Old Meters per pixel ' + this._metersPP);
|
||||||
console.debug('New Meters per pixel ' + metersPP);
|
console.debug('New Meters per pixel ' + metersPP);
|
||||||
if(this._metersPP != metersPP) {
|
if(this._metersPP != metersPP) {
|
||||||
var pixelSize = this.iconSize / metersPP;
|
var pixelSize = this.iconSize / metersPP;
|
||||||
var scale = pixelSize/this.iconSize;
|
var scale = pixelSize/this.iconSize;
|
||||||
var offset = 0;//-(this.iconSize/2);
|
var offset = 0;//-(this.iconSize/2);
|
||||||
this.setIcon(L.divIcon({
|
this.setIcon(L.divIcon({
|
||||||
iconSize: 32,
|
iconSize: 32,
|
||||||
className: 'threshold-marker-icon',
|
className: 'threshold-marker-icon',
|
||||||
html: `<div style=\'transform: translateX(${offset}px) translateY(${offset}px) scale(${scale}); border: 1px red\'>${this.svg}</div>`,
|
html: `<div style=\'transform: translateX(${offset}px) translateY(${offset}px) scale(${scale}); border: 1px red\'>${this.svg}</div>`,
|
||||||
}));
|
}));
|
||||||
|
this.setInteractive(this.interactive);
|
||||||
|
|
||||||
this.update(this.getLatLng());
|
this.update(this.getLatLng());
|
||||||
console.debug();
|
console.debug();
|
||||||
@ -51,38 +52,64 @@ L.TowerMarker = L.Marker.extend({
|
|||||||
this._metersPP = metersPP;
|
this._metersPP = metersPP;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
setInteractive(interactive) {
|
||||||
|
if (interactive) {
|
||||||
|
if(this._icon) {
|
||||||
|
L.DomUtil.addClass(this._icon, 'leaflet-interactive');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if(this._icon) {
|
||||||
|
L.DomUtil.removeClass(this._icon, 'leaflet-interactive');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.interactive = interactive;
|
||||||
|
},
|
||||||
metersPerPixel: function (latitude, zoomLevel) {
|
metersPerPixel: function (latitude, zoomLevel) {
|
||||||
var earthCircumference = 40075017;
|
var earthCircumference = 40075017;
|
||||||
var latitudeRadians = latitude * (Math.PI / 180);
|
var latitudeRadians = latitude * (Math.PI / 180);
|
||||||
return earthCircumference * Math.cos(latitudeRadians) / Math.pow(2, zoomLevel + 8);
|
return earthCircumference * Math.cos(latitudeRadians) / Math.pow(2, zoomLevel + 8);
|
||||||
},
|
},
|
||||||
|
|
||||||
pixelValue: function (latitude, meters, zoomLevel) {
|
pixelValue: function (latitude, meters, zoomLevel) {
|
||||||
return meters / metersPerPixel(latitude, zoomLevel);
|
return meters / metersPerPixel(latitude, zoomLevel);
|
||||||
},
|
},
|
||||||
|
setTowerHeight: function (height) {
|
||||||
|
this.elev_m = height;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
L.TowerMarker.addInitHook(function(){
|
L.TowerMarker.addInitHook(function(){
|
||||||
this.svg = this.stripSVG('tower.svg');
|
this.svg = this.stripSVG('tower.svg');
|
||||||
this.iconSize = 32;
|
this.iconSize = 32;
|
||||||
this.on('dragstart', function (event) {
|
this.on('click', function (event) {
|
||||||
|
store.default.dispatch('setTowerCoords',
|
||||||
|
event.target.getLatLng().lat.toFixed(6) + ' ' +
|
||||||
|
event.target.getLatLng().lng.toFixed(6) + ' ' +
|
||||||
|
event.target.elev_m);
|
||||||
|
store.default.dispatch('setTowerHeight', event.target.elev_m );
|
||||||
|
});
|
||||||
|
this.on('dragstart', function (event) {
|
||||||
console.debug("Drag Tower : ", event);
|
console.debug("Drag Tower : ", event);
|
||||||
});
|
});
|
||||||
this.on('dragend', function (event) {
|
this.on('dragend', function (event) {
|
||||||
console.debug("DragEnd Tower : ", event);
|
console.debug("DragEnd Tower : ", event);
|
||||||
store.default.dispatch('setTowerCoords',
|
store.default.dispatch('setTowerCoords',
|
||||||
event.target.getLatLng().lat.toFixed(6) + ' ' +
|
event.target.getLatLng().lat.toFixed(6) + ' ' +
|
||||||
event.target.getLatLng().lng.toFixed(6) + ' ' +
|
event.target.getLatLng().lng.toFixed(6) + ' ' +
|
||||||
event.target.elev_m);
|
event.target.elev_m);
|
||||||
|
store.default.dispatch('setTowerHeight', event.target.elev_m );
|
||||||
|
});
|
||||||
|
this.on('add', function (event) {
|
||||||
|
event.target.setInteractive(false);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
//Builds a marker for a ai or multiplayer aircraft
|
//Builds a marker for a ai or multiplayer aircraft
|
||||||
var tower = function (n, options) {
|
var tower = function (n, options) {
|
||||||
var latlon = convert(n.find('lat/text()').text() + " " + n.find('lon/text()').text());
|
var latlon = convert(n.find('lat/text()').text() + " " + n.find('lon/text()').text());
|
||||||
var marker = new L.TowerMarker([latlon.decimalLatitude, latlon.decimalLongitude], {pane: 'tower-pane'});
|
var marker = new L.TowerMarker([latlon.decimalLatitude, latlon.decimalLongitude], {pane: 'tower-pane'});
|
||||||
marker.elev_m = n.find('elev-m/text()').text();
|
marker.elev_m = n.find('elev-m/text()').text();
|
||||||
return marker;
|
return marker;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -16,7 +16,7 @@ const state = {
|
|||||||
type: 'none',
|
type: 'none',
|
||||||
index: 'none',
|
index: 'none',
|
||||||
editing: false,
|
editing: false,
|
||||||
data: {airports: {}, parking: {}, arc: {}, multiarc: {}, node: {}, runway: {}, threshold: {}}
|
data: {airports: {}, parking: {}, arc: {}, multiarc: {}, node: {}, runway: {}, threshold: {}, tower: {}}
|
||||||
}
|
}
|
||||||
|
|
||||||
const SET_EDIT_AIRPORT = 'SET_EDIT_AIRPORT'
|
const SET_EDIT_AIRPORT = 'SET_EDIT_AIRPORT'
|
||||||
@ -38,7 +38,6 @@ const mutations = {
|
|||||||
state.type = 'airport'
|
state.type = 'airport'
|
||||||
},
|
},
|
||||||
SET_EDIT_PARKING (state, parking) {
|
SET_EDIT_PARKING (state, parking) {
|
||||||
Vue.set(state, 'data', {})
|
|
||||||
var p = Object.assign({}, parking)
|
var p = Object.assign({}, parking)
|
||||||
Vue.set(state.data, 'parking', p)
|
Vue.set(state.data, 'parking', p)
|
||||||
Vue.set(state, 'index', p.index)
|
Vue.set(state, 'index', p.index)
|
||||||
@ -48,15 +47,11 @@ const mutations = {
|
|||||||
if (node === undefined) {
|
if (node === undefined) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (!state.data || state.type !== 'node') {
|
|
||||||
Vue.set(state, 'data', {})
|
|
||||||
}
|
|
||||||
Vue.set(state.data, 'node', node)
|
Vue.set(state.data, 'node', node)
|
||||||
Vue.set(state, 'index', node.index)
|
Vue.set(state, 'index', node.index)
|
||||||
Vue.set(state, 'type', 'node')
|
Vue.set(state, 'type', 'node')
|
||||||
},
|
},
|
||||||
SET_EDIT_RUNWAY (state, runway) {
|
SET_EDIT_RUNWAY (state, runway) {
|
||||||
Vue.set(state, 'data', {})
|
|
||||||
Vue.set(state.data, 'node', runway)
|
Vue.set(state.data, 'node', runway)
|
||||||
Vue.set(state, 'index', runway.index)
|
Vue.set(state, 'index', runway.index)
|
||||||
Vue.set(state, 'type', 'runway')
|
Vue.set(state, 'type', 'runway')
|
||||||
@ -65,9 +60,6 @@ const mutations = {
|
|||||||
if (arc === undefined) {
|
if (arc === undefined) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (!state.data || state.type !== 'arc') {
|
|
||||||
Vue.set(state, 'data', {})
|
|
||||||
}
|
|
||||||
Vue.set(state.data, 'arc', arc)
|
Vue.set(state.data, 'arc', arc)
|
||||||
if (state.data.arc.name === undefined) {
|
if (state.data.arc.name === undefined) {
|
||||||
Vue.set(state.data.arc, 'name', '')
|
Vue.set(state.data.arc, 'name', '')
|
||||||
@ -79,9 +71,6 @@ const mutations = {
|
|||||||
if (arc === undefined) {
|
if (arc === undefined) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (!state.data || state.type !== 'multiarc') {
|
|
||||||
Vue.set(state, 'data', {multiarc: {}})
|
|
||||||
}
|
|
||||||
Vue.set(state.data.multiarc, 'isPushBackRoute', arc.isPushBackRoute)
|
Vue.set(state.data.multiarc, 'isPushBackRoute', arc.isPushBackRoute)
|
||||||
Vue.set(state.data.multiarc, 'direction', arc.direction)
|
Vue.set(state.data.multiarc, 'direction', arc.direction)
|
||||||
if (state.data.multiarc.name === undefined) {
|
if (state.data.multiarc.name === undefined) {
|
||||||
@ -163,10 +152,17 @@ const mutations = {
|
|||||||
},
|
},
|
||||||
'SET_EDIT_TOWER_COORDS' (state, coords) {
|
'SET_EDIT_TOWER_COORDS' (state, coords) {
|
||||||
state.type = 'tower'
|
state.type = 'tower'
|
||||||
state.data.tower = { coords: {} }
|
if (!state.data.tower) {
|
||||||
|
state.data.tower = {}
|
||||||
|
}
|
||||||
|
if (!state.data.tower.coords) {
|
||||||
|
state.data.tower.coords = {}
|
||||||
|
}
|
||||||
Vue.set(state.data.tower.coords, 'latitude', coords.split(' ')[0])
|
Vue.set(state.data.tower.coords, 'latitude', coords.split(' ')[0])
|
||||||
Vue.set(state.data.tower.coords, 'longitude', coords.split(' ')[1])
|
Vue.set(state.data.tower.coords, 'longitude', coords.split(' ')[1])
|
||||||
Vue.set(state.data.tower.coords, 'height', coords.split(' ')[2])
|
},
|
||||||
|
'SET_EDIT_TOWER_HEIGHT' (state, height) {
|
||||||
|
Vue.set(state.data.tower, 'height', height)
|
||||||
},
|
},
|
||||||
'SET_EDIT_THRESHOLD_COORDS' (state, threshold) {
|
'SET_EDIT_THRESHOLD_COORDS' (state, threshold) {
|
||||||
state.type = 'threshold'
|
state.type = 'threshold'
|
||||||
@ -219,6 +215,9 @@ const actions = {
|
|||||||
async setTowerCoords (context, node) {
|
async setTowerCoords (context, node) {
|
||||||
context.commit('SET_EDIT_TOWER_COORDS', node)
|
context.commit('SET_EDIT_TOWER_COORDS', node)
|
||||||
},
|
},
|
||||||
|
async setTowerHeight (context, height) {
|
||||||
|
context.commit('SET_EDIT_TOWER_HEIGHT', height)
|
||||||
|
},
|
||||||
async setThreshold (context, node) {
|
async setThreshold (context, node) {
|
||||||
context.commit('SET_EDIT_THRESHOLD_COORDS', node)
|
context.commit('SET_EDIT_THRESHOLD_COORDS', node)
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user