IOTMAPCOMP-164 - cercle de précision lors des changements de layers

Orange-OpenSource · May 4, 2021 · 3880730 · 3880730
1 parent ce3dd62
commit 3880730
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 37 deletions.
diff --git a/src/iotMapManager/src/iot-map-manager.ts b/src/iotMapManager/src/iot-map-manager.ts
@@ -31,7 +31,7 @@ export class IotMapManager {
 
   private firstLayerAdded = true
   private accuracyDisplayed = false
-  private currentDisplayedLayer: string
+  private currentDisplayedLayers: string[] = []
 
   /**
    * Constructor
@@ -61,7 +61,9 @@ export class IotMapManager {
     L.tileLayer(this.config.map.openStreetMapLayer,
       { attribution: '&copy <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' })
       .addTo(this.map)
-    this.layerControl = L.control.layers(this.baseLayers, this.markersLayers).addTo(this.map)
+    if (this.config.map.layerControl) {
+      this.layerControl = L.control.layers(this.baseLayers, this.markersLayers).addTo(this.map)
+    }
 
     this.map.on('moveend', this.onMove)
       .on('baselayerchange', this.onBaseLayerChange.bind(this))
@@ -104,23 +106,27 @@ export class IotMapManager {
     }
 
     // add layer to map
-    if (this.config.map.layerControl) {
-      if (layerName === this.config.accuracyCircle.layerName) {
-        this.markersLayers[layerName] = layer // always not exclusive
-        if (!this.config.map.exclusiveLayers) {
-          this.map.addLayer(layer)
-        }
-      } else if (this.config.map.exclusiveLayers) {
-        this.baseLayers[layerName] = layer
-        if (this.firstLayerAdded) {
-          this.firstLayerAdded = false
-          this.map.addLayer(layer)
-          this.currentDisplayedLayer = layerName
-        }
-      } else {
-        this.markersLayers[layerName] = layer
+    if (layerName === this.config.accuracyCircle.layerName) {
+      this.markersLayers[layerName] = layer // always not exclusive
+      if (!this.config.map.exclusiveLayers) {
         this.map.addLayer(layer)
+        this.currentDisplayedLayers.push(layerName)
       }
+    } else if (this.config.map.layerControl && this.config.map.exclusiveLayers) {
+      this.baseLayers[layerName] = layer
+      if (this.firstLayerAdded) {
+        this.firstLayerAdded = false
+        this.map.addLayer(layer)
+        this.currentDisplayedLayers[0] = layerName
+      }
+    } else {
+      this.markersLayers[layerName] = layer
+      this.map.addLayer(layer)
+      this.currentDisplayedLayers.push(layerName)
+    }
+
+    // display layer control
+    if (this.config.map.layerControl) {
       this.layerControl = L.control.layers(this.baseLayers, this.markersLayers).addTo(this.map)
     }
 
@@ -272,31 +278,36 @@ export class IotMapManager {
 
   private onBaseLayerChange (event) {
     if (this.config.map.exclusiveLayers === true) {
-      this.currentDisplayedLayer = event.name
+      this.currentDisplayedLayers = event.name
       this.updateAccuracy()
     }
   }
 
   private onOverlayAdd (event) {
     if (event.name === this.config.accuracyCircle.layerName) {
       this.accuracyDisplayed = true
-      this.updateAccuracy()
     } else {
-
+      this.currentDisplayedLayers.push(event.name)
     }
+    this.updateAccuracy()
   }
 
   private onOverlayRemove (event) {
     if (event.name === this.config.accuracyCircle.layerName) {
       this.accuracyDisplayed = false
-      this.updateAccuracy()
+    } else {
+      const index = this.currentDisplayedLayers.indexOf(event.name, 0)
+      if (index > -1) {
+        this.currentDisplayedLayers.splice(index, 1)
+      }
     }
+    this.updateAccuracy()
   }
 
   private updateAccuracy (): void {
     for (const id in this.displayedMarkers) {
       const elt = this.displayedMarkers[id]
-      elt.updateAccuracyDisplay(this.currentDisplayedLayer, this.accuracyDisplayed)
+      elt.updateAccuracyDisplay(this.currentDisplayedLayers, this.accuracyDisplayed)
     }
   }
 }
diff --git a/src/iotMapManager/src/iot-map-marker.ts b/src/iotMapManager/src/iot-map-marker.ts
@@ -26,6 +26,8 @@ export class IotMapMarker extends IotMapDisplay {
   private config: IotMapConfig
   private map: IotMapManager
   private selected = false
+  private layerDisplayed = true
+  private accuracityDisplayed = true
 
   private accuracyCircle: L.Circle
 
@@ -72,9 +74,11 @@ export class IotMapMarker extends IotMapDisplay {
     }
   }
 
-  public updateAccuracyDisplay (selectedLayer: string, display: boolean): void {
-    if (selectedLayer === this.data.layer) {
-      if (display === true) {
+  public updateAccuracyDisplay (selectedLayers: string[], display: boolean): void {
+    this.layerDisplayed = selectedLayers.includes(this.data.layer)
+    this.accuracityDisplayed = display
+    if (this.layerDisplayed) {
+      if (this.accuracityDisplayed) {
         this.displayAccuracy()
       } else {
         this.removeAccuracy()
@@ -86,15 +90,17 @@ export class IotMapMarker extends IotMapDisplay {
 
   private displayAccuracy (): void {
     this.removeAccuracy()
-    if (this.data.shape.accuracy !== undefined) {
-      this.accuracyCircle = L.circle(this.data.location, {
-        color: this.config.accuracyCircle.color,
-        fillColor: this.config.accuracyCircle.fillColor,
-        fillOpacity: this.config.accuracyCircle.fillOpacity,
-        radius: this.data.shape.accuracy,
-        interactive: false // not clickable
-      })
-      this.map.getLayer(this.config.accuracyCircle.layerName).addLayer(this.accuracyCircle)
+    if (this.layerDisplayed && this.accuracityDisplayed) {
+      if (this.data.shape.accuracy !== undefined) {
+        this.accuracyCircle = L.circle(this.data.location, {
+          color: this.config.accuracyCircle.color,
+          fillColor: this.config.accuracyCircle.fillColor,
+          fillOpacity: this.config.accuracyCircle.fillOpacity,
+          radius: this.data.shape.accuracy,
+          interactive: false // not clickable
+        })
+        this.map.getLayer(this.config.accuracyCircle.layerName).addLayer(this.accuracyCircle)
+      }
     }
   }
 

diff --git a/src/iotMapManager/src/iot-map-types.ts b/src/iotMapManager/src/iot-map-types.ts
@@ -43,7 +43,7 @@ export abstract class IotMapDisplay extends L.Marker {
     // By default : Nothing to do
   }
 
-  updateAccuracyDisplay (selectedLayer: string, display: boolean): void {
+  updateAccuracyDisplay (selectedLayers: string[], display: boolean): void {
     // By default : Nothing to do
   }
 }

diff --git a/src/iotMapManager/src/iot-map-user-marker.ts b/src/iotMapManager/src/iot-map-user-marker.ts
@@ -65,8 +65,8 @@ export class IotMapUserMarker extends IotMapDisplay {
     this.accuracyCircle.setLatLng(newLatLng)
   }
 
-  public updateAccuracyDisplay (selectedLayer: string, display: boolean): void {
-    if (selectedLayer === this.config.userMarker.layerName) {
+  public updateAccuracyDisplay (selectedLayers: string[], display: boolean): void {
+    if (selectedLayers.includes(this.config.userMarker.layerName)) {
       if (display === true) {
         this.displayAccuracy()
       } else {