From 3880730bdb5257e04b7ed582340afc344f2f799e Mon Sep 17 00:00:00 2001 From: BRKP5614 Date: Tue, 4 May 2021 18:17:28 +0200 Subject: [PATCH] =?UTF-8?q?IOTMAPCOMP-164=20-=20cercle=20de=20pr=C3=A9cisi?= =?UTF-8?q?on=20lors=20des=20changements=20de=20layers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/iotMapManager/src/iot-map-manager.ts | 55 ++++++++++++-------- src/iotMapManager/src/iot-map-marker.ts | 30 ++++++----- src/iotMapManager/src/iot-map-types.ts | 2 +- src/iotMapManager/src/iot-map-user-marker.ts | 4 +- 4 files changed, 54 insertions(+), 37 deletions(-) diff --git a/src/iotMapManager/src/iot-map-manager.ts b/src/iotMapManager/src/iot-map-manager.ts index c21440af..c9f77893 100644 --- 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: '© OpenStreetMap 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,7 +278,7 @@ export class IotMapManager { private onBaseLayerChange (event) { if (this.config.map.exclusiveLayers === true) { - this.currentDisplayedLayer = event.name + this.currentDisplayedLayers = event.name this.updateAccuracy() } } @@ -280,23 +286,28 @@ export class IotMapManager { 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 index 09ddfae6..d62fcc88 100644 --- 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 index ec0c96a6..c2a8921a 100644 --- 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 index 96620bb9..6a3182af 100644 --- 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 {