plotter/frontend/src/App.vue at 5d1511b1eb26e0485affbbb6772124db4d0f68ea · NHMesh/plotter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<template>
  <div class="top">
    <l-map ref="map" v-model:zoom="zoom" :center="[ 43.184296, -71.320451 ]"  @click="addMarker">
      <l-tile-layer
        url="https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png"
        layer-type="base"
        name="OpenStreetMap"
      ></l-tile-layer>

      <l-marker v-for="marker, index in markers" :lat-lng="marker" @click="removeMarker(index)"></l-marker>

      <l-tile-layer
        url="http://localhost:3000/tile_v3/{z}/{x}/{y}/tile.png"
        layer-type="base"
        opacity="0.45"
        name="Elevation"
      ></l-tile-layer>
<!--
      <l-tile-layer
        url="http://localhost:3000/tiles_los/{z}/{x}/{y}/tile.png"
        layer-type="base"
        opacity="0.45"
        name="Elevation"
      ></l-tile-layer>
-->
    </l-map>
  </div>
  <button @click="selection" >Select Area</button>
  <button @click="los" >LOS?</button>
  <button @click="scan" >GeoScan</button>
  {{polyPoints}}
  <br>
  {{markers}}
</template>

<script>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer, LMarker } from "@vue-leaflet/vue-leaflet";
import '@bopen/leaflet-area-selection/dist/index.css';
import { DrawAreaSelection } from '@bopen/leaflet-area-selection';
import axios from 'axios';

export default {
  mounted() {
    this.map = this.$refs.map;

    setTimeout(() => {
      this.areaSelection = new DrawAreaSelection({
        active: false,
        onPolygonReady: (a,b,c) => {
          this.polyPoints = a.getLatLngs()[0];
        }});
      this.map.leafletObject.addControl(this.areaSelection);
    }, 1000)
  },
  components: {
    LMap,
    LTileLayer,
    LMarker,
  },
  data() {
    return {
      zoom: 14,
      polyPoints: [],
      markers: [{lat: 43.184296, lng: -71.320451} ]
    };
  },

  methods: {
    selection() {
      this.areaSelection.activate();
    },

    removeMarker(index) {
      this.markers.splice(index, 1);
    },

    addMarker(event) {
      console.log('add marker', event.latlng)
      this.markers.push(event.latlng);
    },

    async los() {
      let res = await axios.post('http://localhost:3000/los', {
        from_lat: this.markers[0].lat,
        from_lon: this.markers[0].lng,
        to_lat: this.markers[1].lat,
        to_lon: this.markers[1].lng,
      });

      console.log(res);
    },

    async scan() {
      let res = await axios.post('http://localhost:3000/scan', {
        from_lat: this.markers[0].lat,
        from_lon: this.markers[0].lng,
        radius: 4000,
        observer_height: 10
      });

      console.log(res);
    }
  }
};

</script>

<style>
.top {
  position: relative;
  height: calc(100% - 50px); /* Adjust height to leave space for buttons */
}

button {
  width: 33.33%; /* Adjust width for three buttons */
  height: 50px; /* Height of the button area */
  float: left;
  box-sizing: border-box;
}
</style>