tethys.backend/resources/js/Components/Map/draw.component.vue

<template>
    <div ref="drawControl" class="gba-control-draw btn-group-vertical map-control">
        <!-- <button type="button" class="button is-light is-small" (click)="locateUser()" [ngClass]="isToggled ? 'is-primary': 'is-active'">
      <fa-icon [icon]="faSearchLocation"></fa-icon>
    </button> -->
        <!--  -->
        <button
            ref="inputDraw"
            class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
            type="button"
            :class="[isToggled ? 'cursor-not-allowed bg-gray-200' : 'bg-teal-50 is-active']"
            @click.prevent="draw"
        >
            <BaseIcon v-if="mdiDrawPen" :path="mdiDrawPen" />
        </button>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-facing-decorator';

import BaseIcon from '@/Components/BaseIcon.vue';
import { mdiDrawPen } from '@mdi/js';
import { MapService } from '@/Stores/map.service';
// import { Map } from 'leaflet';
// import { LatLngBoundsExpression, toLatLngBounds } from 'leaflet/src/geo/LatLngBounds';
// import { LayerGroup } from 'leaflet/src/layer/LayerGroup';
import { Marker } from 'leaflet';

@Component({
    name: 'draw-control',
    components: {
        BaseIcon,
    },
})
export default class DrawControlComponent extends Vue {
    /**
     * class properties.
     */
    mdiDrawPen = mdiDrawPen;
    featuresLayer;
    options = {
        zIndex: 1000,
        markerClass: Marker, // CylinderGeometry,
        drawingCSSClass: 'gba-editable-drawing',
        drawingCursor: 'crosshair',
    };

    /**
     * Connect map id.
     */
    @Prop() public mapId: string;
    // @Prop() public map: Map;
    @Prop public southWest;
    @Prop public northEast;

   
    

    public isToggled = false;
    mapService = MapService();

    // @Ref('inputDraw') private _inputDraw: HTMLElement;

    public draw() {
        // let map: Map = this.mapService.getMap(this.mapId);
        // const bounds: LatLngBoundsExpression = toLatLngBounds(this.southWest, this.northEast);
        // map.fitBounds(bounds);

        if (this.isToggled == true) {
            this.disable();
        } else {
            this.enable();
        }
        this.isToggled = !this.isToggled;
    }

    private enable() {
        //if (this.map.mapTool) this.map.mapTool.on('editable:drawing:start', this.disable.bind(this));
        // dom.addClass(this.map.container, 'measure-enabled');
        //this.fireAndForward('showmeasure');
        this._startMarker(this.southWest, this.options);
    }

    private disable() {
        //if (this.map.mapTool) this.map.mapTool.off('editable:drawing:start', this.disable.bind(this));
        // dom.removeClass(this.map.container, 'measure-enabled');
        // this.featuresLayer.clearLayers();
        // //this.fireAndForward('hidemeasure');
        // if (this._drawingEditor) {
        //     this._drawingEditor.cancelDrawing();
        // }
    }

    // created(): void {
    //     this.featuresLayer = this._createFeaturesLayer();
    // }

    // private _createFeaturesLayer() {
    //     let map: Map = (this.map = this.mapService.getMap(this.mapId));
    //     let layerGroup: LayerGroup = new LayerGroup();
    //     map.addLayer(layerGroup);
    //     return layerGroup;
    // }

    private _startMarker(latlng, options) {
        let map = this.mapService.getMap(this.mapId);
        latlng = map.getCenter().clone();
        let markerLayer: Marker = this._createMarker(latlng, options); //.addTo(this.map);
        // map.addLayer(markerLayer);
        //this.map.addLayer(marker);
        //marker.enableEdit(this.map).startDrawing(); //editor.startDrawing() -> registerForDrawing
        // let baseEditor = markerLayer.en.enableEdit(this.map);
        // baseEditor.startDrawing();
        return markerLayer;
    }

    private _createMarker(latlng, options): Marker {
        // return this._createLayer((options && options.markerClass) || this.options.markerClass, latlng, options);
        return new Marker(latlng, options);
    }

    // private _createLayer(klass, latlngs, options) {
    //     options = util.extend({ editOptions: { mapTool: this } }, options);
    //     let layer = new klass(latlngs, options);
    //     //this.fireAndForward('editable:created', { layer: layer });
    //     return layer;
    // }
}
</script>

<style lang="css">
.gba-control-draw {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    border-radius: 4px;
    position: absolute;
    left: 10px;
    top: 100px;
    z-index: 500;
}

.btn-group-vertical button {
    display: block;

    margin-left: 0;
    margin-top: 0.5em;
}
</style>