portree_kid
4 years ago
parent
b9a34df117
commit
94779a1686
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div id="ToolBar">
|
||||
<ToolButton
|
||||
icon="fas fa-draw-polygon"
|
||||
v-on:click="drawPolyline"
|
||||
:show="editing"
|
||||
tooltip="Draw Guidline"
|
||||
></ToolButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="js">
|
||||
/* eslint-disable */
|
||||
import ToolButton from './ToolButton'
|
||||
import Vue from 'vue'
|
||||
|
||||
import fileUrl from 'file-url'
|
||||
const path = require('path')
|
||||
const fs = require('fs');
|
||||
|
||||
export default {
|
||||
components: { ToolButton },
|
||||
data () {
|
||||
return {isEditing: false}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
drawPolyline () {
|
||||
this.$parent.$parent.$refs.toolLayer.stopDrawing()
|
||||
this.$parent.$parent.$refs.toolLayer.drawPolyline()
|
||||
},
|
||||
setEdit (edit) {
|
||||
this.isEditing = edit;
|
||||
if(!this.isEditing) {
|
||||
this.$parent.$parent.$refs.toolLayer.stopDrawing()
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editing: {
|
||||
// getter
|
||||
get: function () {
|
||||
console.log(`Getting Visible : ${this.isEditing}`)
|
||||
return this.isEditing
|
||||
},
|
||||
// setter
|
||||
set: function (newValue) {
|
||||
this.isEditing = newValue
|
||||
console.log(`Setting Visible : ${this.isEditing}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,64 @@
|
||||
<template></template>
|
||||
|
||||
<script lang="js">
|
||||
import L from 'leaflet'
|
||||
import '@fortawesome/fontawesome-free/css/all.css'
|
||||
import ToolControl from '../leaflet/ToolControl.js'
|
||||
export default {
|
||||
name: 'edit-bar',
|
||||
props: {
|
||||
icon: String,
|
||||
show: Boolean,
|
||||
tooltip: String
|
||||
},
|
||||
watch: {
|
||||
show: function (newVal, oldVal) { // watch it
|
||||
console.log('Prop changed: ', newVal, ' | was: ', oldVal)
|
||||
if (newVal) {
|
||||
this.add()
|
||||
} else {
|
||||
this.remove()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.debug(L)
|
||||
console.debug(ToolControl)
|
||||
this.add()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.remove()
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deferredMountedTo (parent) {
|
||||
this.editbutton = new L.ToolControl({html: `<i class="${this.icon}"></i>`, callback: this.click, tooltip: this.tooltip})
|
||||
if (this.show) {
|
||||
parent.addControl(this.editbutton)
|
||||
}
|
||||
},
|
||||
click () {
|
||||
// console.log(parent)
|
||||
this.$emit('click')
|
||||
},
|
||||
remove () {
|
||||
if (this.editbutton) {
|
||||
this.$parent.$parent.mapObject.removeControl(this.editbutton)
|
||||
}
|
||||
},
|
||||
add () {
|
||||
if (this.$parent.$parent._isMounted) {
|
||||
this.deferredMountedTo(this.$parent.$parent.mapObject)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
@ -0,0 +1,69 @@
|
||||
<!--
|
||||
Copyright 2020 Keith Paterson
|
||||
|
||||
This file is part of FG Airports.
|
||||
|
||||
FG Airports is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
|
||||
FG Airports is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License along with FG Airports. If not, see http://www.gnu.org/licenses/.
|
||||
-->
|
||||
<template></template>
|
||||
|
||||
<script lang="js">
|
||||
/* eslint-disable */
|
||||
import {LMap, LMarker} from 'vue2-leaflet'
|
||||
import L from 'leaflet'
|
||||
import LEdit from 'leaflet-editable/src/Leaflet.Editable.js'
|
||||
|
||||
export default {
|
||||
name: 'tool-layer',
|
||||
props: [],
|
||||
mounted () {
|
||||
this.add()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.remove()
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deferredMountedTo (parent) {
|
||||
this.toolLayerGroup = L.layerGroup();
|
||||
this.toolLayerGroup.addTo(this.$parent.mapObject)
|
||||
},
|
||||
remove () {
|
||||
if (this.sidebar) {
|
||||
this.$parent.removeLayer(this.sidebar)
|
||||
}
|
||||
},
|
||||
add () {
|
||||
if (this.$parent._isMounted) {
|
||||
this.deferredMountedTo(this.$parent.mapObject)
|
||||
}
|
||||
},
|
||||
stopDrawing () {
|
||||
this.$parent.mapObject.editTools.stopDrawing()
|
||||
this.toolLayerGroup.eachLayer((layer) => {
|
||||
layer.removeFrom(this.toolLayerGroup);
|
||||
});
|
||||
},
|
||||
drawPolyline () {
|
||||
var polyLine = this.$parent.mapObject.editTools.startPolyline(undefined, {color: 'green'})
|
||||
polyLine.addTo(this.toolLayerGroup)
|
||||
polyLine.toolLayerGroup = this.toolLayerGroup;
|
||||
},
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
@ -0,0 +1,64 @@
|
||||
<template></template>
|
||||
|
||||
<script lang="js">
|
||||
import L from 'leaflet'
|
||||
import '@fortawesome/fontawesome-free/css/all.css'
|
||||
import EditBar from '../leaflet/ZoomControl.js'
|
||||
export default {
|
||||
name: 'edit-bar',
|
||||
props: {
|
||||
icon: String,
|
||||
show: Boolean,
|
||||
tooltip: String
|
||||
},
|
||||
watch: {
|
||||
show: function (newVal, oldVal) { // watch it
|
||||
console.log('Prop changed: ', newVal, ' | was: ', oldVal)
|
||||
if (newVal) {
|
||||
this.add()
|
||||
} else {
|
||||
this.remove()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.debug(L)
|
||||
console.debug(EditBar)
|
||||
this.add()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.remove()
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deferredMountedTo (parent) {
|
||||
this.editbutton = new L.ZoomControl({html: `<i class="${this.icon}"></i>`, callback: this.click, tooltip: this.tooltip})
|
||||
if (this.show) {
|
||||
parent.addControl(this.editbutton)
|
||||
}
|
||||
},
|
||||
click () {
|
||||
// console.log(parent)
|
||||
this.$emit('click')
|
||||
},
|
||||
remove () {
|
||||
if (this.editbutton) {
|
||||
this.$parent.$parent.mapObject.removeControl(this.editbutton)
|
||||
}
|
||||
},
|
||||
add () {
|
||||
if (this.$parent.$parent._isMounted) {
|
||||
this.deferredMountedTo(this.$parent.$parent.mapObject)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
@ -0,0 +1,36 @@
|
||||
/* eslint-disable */
|
||||
L.ToolControl = L.Control.extend({
|
||||
options: {
|
||||
position: 'bottomright',
|
||||
callback: null,
|
||||
kind: 'marker',
|
||||
html: '🖈'
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
|
||||
link = L.DomUtil.create('a', '', container);
|
||||
|
||||
link.href = '#';
|
||||
link.title = this.options.tooltip;
|
||||
link.innerHTML = this.options.html;
|
||||
link.callback = this.options.callback;
|
||||
link.addEventListener('click',function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
}, false);
|
||||
link.addEventListener('mousedown',function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
window.LAYER = this.callback.call(map.editTools);
|
||||
}, false);
|
||||
link.addEventListener('mouseup',function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
}, false);
|
||||
return container;
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,76 @@
|
||||
/* eslint-disable */
|
||||
L.ZoomControl = L.Control.extend({
|
||||
|
||||
options: {
|
||||
position: 'topleft',
|
||||
callback: null,
|
||||
kind: '',
|
||||
html: '<i class="fas fa-draw-polygon"></i>',
|
||||
tooltip: 'tooltip'
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
|
||||
link = L.DomUtil.create('a', '', container);
|
||||
|
||||
link.href = '#';
|
||||
link.title = this.options.tooltip;
|
||||
link.innerHTML = this.options.html;
|
||||
link.callback = this.options.callback;
|
||||
link.addEventListener('click',function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
}, false);
|
||||
link.addEventListener('mousedown',function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
window.LAYER = this.callback.call(map.editTools);
|
||||
}, false);
|
||||
link.addEventListener('mouseup',function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
}, false);
|
||||
return container;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
L.NewMarkerControl = L.EditControl.extend({
|
||||
options: {
|
||||
position: 'topright',
|
||||
callback: null,
|
||||
kind: 'marker',
|
||||
html: '🖈'
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
|
||||
link = L.DomUtil.create('a', '', container);
|
||||
|
||||
link.href = '#';
|
||||
link.title = this.options.tooltip;
|
||||
link.innerHTML = this.options.html;
|
||||
link.callback = this.options.callback;
|
||||
link.addEventListener('click',function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
}, false);
|
||||
link.addEventListener('mousedown',function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
window.LAYER = this.callback.call(map.editTools);
|
||||
}, false);
|
||||
link.addEventListener('mouseup',function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
}, false);
|
||||
return container;
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in new issue