FGFS-4.1/flightgear-airports-old
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Layer Control

Browse Source
This commit is contained in:
portree_kid 2020-07-07 22:36:25 +02:00
parent a71d95cb74
commit 8a167dc991
5 changed files with 64 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/renderer/assets/button.css Normal file
View File

@ -0,0 +1,8 @@
.leaflet-touch .leaflet-control-layers-toggle {
width: 30px;
height: 30px;
color:black;
background-image: none;
}

2
src/renderer/components/EditLayer.vue
View File

@ -983,7 +983,7 @@ You should have received a copy of the GNU General Public License along with FG
});
},
setVisible(visible) {
if (this.layerGroup) {
if (this.layerGroup) {
if (visible) {
this.layerGroup.addTo(this.$parent.mapObject)
} else {

29
src/renderer/components/FlightgearMap.vue
View File

@ -30,7 +30,7 @@ You should have received a copy of the GNU General Public License along with FG
<LeafletSidebar ref="sidebar" @edit="onEditSidebar"></LeafletSidebar>
<AiLayer ref="aiLayer"></AiLayer>
<PavementLayer ref="pavementLayer"></PavementLayer>
<!--<ThresholdLayer ref="thresholdLayer"></ThresholdLayer>-->
<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"
@ -51,6 +51,7 @@ You should have received a copy of the GNU General Public License along with FG
<script lang="js">
import 'leaflet/dist/leaflet.css'
import '@/assets/button.css'
import { LMap, LTileLayer, LMarker, LCircle, LLayerGroup, LControl } from 'vue2-leaflet'
import LeafletSidebar from './LeafletSidebar'
import AiLayer from './AiLayer'
@ -75,6 +76,8 @@ You should have received a copy of the GNU General Public License along with FG
components: { LMap, LTileLayer, LMarker, LCircle, LeafletSidebar, AiLayer, EditBar, ToolBar, EditLayer, PavementLayer, LLayerGroup, LControl, ThresholdLayer, ToolLayer },
props: [],
mounted () {
this.$refs.map.mapObject.on('layeradd', this.onLayerAdd)
this.$store.dispatch('getAirports')
this.$store.subscribe((mutation, state) => {
if (mutation.type === 'CENTER' || mutation.type === 'SET_AIRPORTS' || mutation.type === 'ZOOM') {
@ -109,13 +112,31 @@ You should have received a copy of the GNU General Public License along with FG
'</A> <A href="https://www.electronjs.org/" target="_blank">Electron</A> ' +
' <A href="https://element.eleme.io/#/en-US/" target="_blank">element.io</A> ' +
' &copy; <a href="http://osm.org/copyright" target="_blank">OpenStreetMap</a> contributors',
marker: L.latLng(47.413220, -1.219482),
airports: this.$store.state.Airports.airports,
options: {editable: true},
layersControl: null,
icao: 'TEST'
}
},
methods: {
onLayerAdd (e) {
if (this.layersControl === null) {
this.layersControl = L.control.layers({}, {}, {position: 'topleft'})
this.layersControl.addTo(this.$refs.map.mapObject)
debugger
var icon = this.layersControl._container.ownerDocument.createElement('I')
icon.className = 'fas fa-layer-group'
icon.style = 'padding-top: 9px; height: 30px; width: 30px; text-align: center; vertical-align: sub;'
this.layersControl._container.children[0].appendChild(icon)
// this.layersControl.addOverlay(this.$refs.thresholdLayer, 'Threshold Layer')
}
if (this.$refs.pavementLayer.getLayer() === e.layer) {
var l = this.layersControl._layers.filter(l => l.name === 'APT Layer')
if (l.length === 0) {
this.layersControl.addOverlay(this.$refs.pavementLayer.getLayer(), 'APT Layer')
}
}
},
onSelectedPolygon (ring) {
var parkings = this.$refs.editLayer.getParkings(ring)
console.debug(ring)
@ -262,4 +283,8 @@ You should have received a copy of the GNU General Public License along with FG
padding-right: 2px;
padding-bottom: 0px;
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 30px;
height: 30px;
}
</style>

48
src/renderer/components/PavementLayer.vue
View File

@ -1,8 +1,4 @@
<template>
<section class="edit-layer">
<h1>edit-layer Component</h1>
</section>
</template>
<template></template>
<script lang="js">
import { LMap, LMarker } from 'vue2-leaflet'
@ -25,19 +21,26 @@
this.remove()
},
data () {
return {groundnet: Object}
return {}
},
methods: {
getLayer () {
return this.pavement
},
load (icao) {
// Callback for add
readPavement(this.$store.state.Settings.settings.flightgearDirectory_apt, icao, this.read)
},
read (layer) {
this.groundnet = layer
if (this.groundnet) {
this.groundnet.addTo(this.$parent.mapObject)
this.pavement = layer
if (this.pavement) {
this.pavement.on('add', this.onAdd)
this.pavement.addTo(this.$parent.mapObject)
this.visible = true
}
this.groundnet.eachLayer(l => {
},
onAdd () {
this.pavement.eachLayer(l => {
if (l) {
l.bringToBack()
}
@ -56,7 +59,7 @@
this.layerGroup = L.layerGroup()
},
remove () {
if (this.groundnet) {
if (this.pavement) {
this.$parent.removeLayer(this.layerGroup)
}
},
@ -66,16 +69,19 @@
}
},
setVisible (visible) {
if (this.groundnet !== undefined) {
if (visible) {
this.groundnet.addTo(this.$parent.mapObject)
this.groundnet.eachLayer(l => {
if (l) {
l.bringToBack()
}
})
} else {
this.groundnet.removeFrom(this.$parent.mapObject)
if (this.pavement !== undefined) {
if (visible !== this.visible) {
if (visible) {
this.pavement.addTo(this.$parent.mapObject)
this.pavement.eachLayer(l => {
if (l) {
l.bringToBack()
}
})
} else {
this.pavement.removeFrom(this.$parent.mapObject)
}
this.visible = visible
}
}
}

6
src/renderer/components/ThresholdLayer.vue
View File

@ -1,8 +1,4 @@
<template>
<section class="edit-layer">
<h1>edit-layer Component</h1>
</section>
</template>
<template></template>
<script lang="js">
import { LMap, LMarker } from 'vue2-leaflet'