diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts')
| -rw-r--r-- | sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts | 332 |
1 files changed, 0 insertions, 332 deletions
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts b/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts deleted file mode 100644 index 7ce4bfa92..000000000 --- a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts +++ /dev/null @@ -1,332 +0,0 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved. - * ================================================================================================= - * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under the License - * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing permissions and limitations under - * the License. - * ============LICENSE_END========================================================================== - */ - -import * as mapboxgl from 'mapbox-gl'; -import { Feature } from 'model/Feature'; -import { NetworkMapThemes, ThemeElement } from 'model/settings'; - -const fibreLinkColor = "#1154d9"; -const microwaveLinkColor = "#039903"; - -class MapLayerService { - - checkedLayers = false; - settings: NetworkMapThemes; - selectedTheme: string | null = null; - - public addBaseSources = (map: mapboxgl.Map, selectedPoint: Feature | null, selectedLine: Feature | null) => { - - - // make sure the sources don't already exist - // (if the networkmap app gets opened quickly within short time periods, the prior sources might not be fully removed) - - if (!map.getSource("lines")) { - - map.addSource('lines', { - type: 'geojson', - data: { type: "FeatureCollection", features: [] } - }); - } - - if (!map.getSource("selectedLine")) { - const features = selectedLine !== null ? [selectedLine] : []; - map.addSource('selectedLine', { - type: 'geojson', - data: { type: "FeatureCollection", features: features } - }); - } - - if (!map.getSource("points")) { - map.addSource('points', { - type: 'geojson', - data: { type: "FeatureCollection", features: [] } - }); - } - - if (!map.getSource("selectedPoints")) { - const selectedPointFeature = selectedPoint !== null ? [selectedPoint] : []; - map.addSource('selectedPoints', { - type: 'geojson', - data: { type: "FeatureCollection", features: selectedPointFeature } - - }); - } - - if (!map.getSource("alarmedPoints")) { - map.addSource("alarmedPoints", { - type: 'geojson', - data: { type: "FeatureCollection", features: [] } - }); - } - } - - private addCircleLayer = (map: mapboxgl.Map, id: string, source: string, circleColor: string, radius: number, strokeWidth: number, outerColor: string) => { - - map.addLayer({ - id: id, - source: source, - type: 'circle', - paint: { - 'circle-color': circleColor, - 'circle-radius': radius, - 'circle-stroke-width': strokeWidth, - 'circle-stroke-color': outerColor - } - }); - } - - private addLineLayer = (map: mapboxgl.Map, id: string, source: string, color: string, width: number, filter: string[]) => { - - map.addLayer({ - 'id': id, - 'type': 'line', - 'source': source, - 'layout': { - 'line-join': 'round', - 'line-cap': 'round' - }, - 'paint': { - 'line-color': color, - 'line-width': width - }, - 'filter': filter - }); - } - - private addIconLayer = (map: mapboxgl.Map, id: string, source: string, iconName: string, iconSize: number, filter: (string | string[])[]) => { - map.addLayer({ - 'id': id, - 'type': 'symbol', - 'source': source, - 'layout': { - 'icon-allow-overlap': true, - 'icon-image': iconName, - 'icon-size': iconSize - - }, - 'filter': filter, - }); - } - - /** - * Pick the correct theme based on user selection - */ - private pickTheme = () => { - if (this.selectedTheme !== null) { - const result = this.settings.networkMapThemes.themes.find(el => el.key === this.selectedTheme); - if (result) - return result; - - } - - return this.settings.networkMapThemes.themes[0]; - - } - - public addBaseLayers = (map: mapboxgl.Map, themesettings?: ThemeElement) => { - - const theme = !themesettings ? this.pickTheme() : themesettings; - console.log("user selected theme: " + this.selectedTheme) - console.log("found theme:" + theme); - - this.addCommonLayers(map); - - this.addCircleLayer(map, 'points', 'points', theme.site, 7, 1, '#fff'); - this.addCircleLayer(map, 'selectedPoints', 'selectedPoints', theme.selectedSite, 9, 1, '#fff'); - this.addCircleLayer(map, 'alarmedPoints', 'alarmedPoints', '#CC0000', 9, 1, '#fff'); - } - - public addIconLayers = (map: mapboxgl.Map, selectedSiteId?: string) => { - - this.addCommonLayers(map); - this.createIconLayers(map, selectedSiteId); - } - - private createIconLayers = (map: mapboxgl.Map, selectedSiteId?: string) => { - - this.addIconLayer(map, 'point-lamps', 'points', 'lamp', 0.1, this.createFilter("street lamp", selectedSiteId)); - this.addIconLayer(map, 'point-building', 'points', 'house', 0.1, this.createFilter("high rise building", selectedSiteId)); - this.addIconLayer(map, 'point-data-center', 'points', 'data-center', 0.1, this.createFilter("data center", selectedSiteId)); - this.addIconLayer(map, 'point-factory', 'points', 'factory', 0.2, this.createFilter("factory", selectedSiteId)); - - - //select layers - this.addIconLayer(map, 'select-point-lamps', 'selectedPoints', 'lamp', 0.15, ['==', 'type', 'street lamp']); - this.addIconLayer(map, 'select-point-buildings', 'selectedPoints', 'house', 0.15, ['==', 'type', 'high rise building']); - this.addIconLayer(map, 'select-point-data-center', 'selectedPoints', 'data-center', 0.15, ['==', 'type', 'data center']); - this.addIconLayer(map, 'select-point-factory', 'selectedPoints', 'factory', 0.3, ['==', 'type', 'factory']); - - //alarm layers - this.addIconLayer(map, 'point-lamps-alarm', 'alarmedPoints', 'lamp-red', 0.3, this.createFilter("street lamp")); - this.addIconLayer(map, 'point-building-alarm', 'alarmedPoints', 'house-red', 0.3, this.createFilter("high rise building")); - this.addIconLayer(map, 'point-data-center-alarm', 'alarmedPoints', 'data-center-red', 0.3, this.createFilter("data center")); - this.addIconLayer(map, 'point-factory-alarm', 'alarmedPoints', 'factory-red', 0.45, this.createFilter("factory")); - - map.addLayer({ - id: 'point-remaining', - source: 'points', - type: 'circle', - 'filter': ['none', ['==', 'type', "high rise building"], ['==', 'type', "data center"], ['==', 'type', "factory"], ['==', 'type', "street lamp"]], - paint: { - 'circle-color': '#11b4da', - 'circle-radius': 7, - 'circle-stroke-width': 1, - 'circle-stroke-color': '#fff' - } - }); - } - - private addCommonLayers = (map: mapboxgl.Map, themesettings?: ThemeElement) => { - - const theme = !themesettings ? this.pickTheme() : themesettings; - - this.addLineLayer(map, 'microwave-lines', 'lines', theme.microwaveLink, 2, ['==', 'type', 'microwave']); - this.addLineLayer(map, 'fibre-lines', 'lines', theme.fiberLink, 2, ['==', 'type', 'fibre']); - this.addLineLayer(map, 'selectedLineMicrowave', 'selectedLine', theme.microwaveLink, 4, ['==', 'type', 'microwave']); - this.addLineLayer(map, 'selectedLineFibre', 'selectedLine', theme.fiberLink, 4, ['==', 'type', 'fibre']); - } - - public removeBaseLayers = (map: mapboxgl.Map) => { - - map.removeLayer("points"); - map.removeLayer("lines"); - map.removeLayer('selectedPoints'); - map.removeLayer('selectedLine'); - } - - private removeIconLayers = (map: mapboxgl.Map) => { - - map.removeLayer('point-building'); - map.removeLayer('point-lamps'); - map.removeLayer('point-data-center'); - map.removeLayer('point-factory'); - map.removeLayer('point-remaining'); - map.removeLayer('select-point-data-center'); - map.removeLayer('select-point-buildings'); - map.removeLayer('select-point-lamps'); - map.removeLayer('select-point-factory'); - map.removeLayer('point-building-alarm'); - map.removeLayer('point-lamps-alarm'); - map.removeLayer('point-data-center-alarm'); - map.removeLayer('point-factory-alarm'); - } - - - private createFilter = (type: 'street lamp' | 'high rise building' | 'data center' | 'factory', selectedSiteId?: string) => { - - return selectedSiteId === undefined ? ['==', 'type', type] : ["all", ['==', 'type', type], ['!=', 'id', selectedSiteId]] - } - - public showIconLayers = (map: mapboxgl.Map, show: boolean, selectedSiteId?: string) => { - - const zoom = map.getZoom(); - - if (show) { - - if (zoom > 11) { - - const bounds = map.getBounds(); - - if (map.getLayer('points') !== undefined && map.getLayer('point-lamps') === undefined && !this.checkedLayers) { - - // if sites don't have a type don't change layers to icons - const elements = map.queryRenderedFeatures(undefined, { - layers: ['points'], filter: ['has', 'type'] - }); - this.checkedLayers = true; - - if (elements.length > 0 && elements.length < 1000) { - - if (map.getLayer('point-lamps') === undefined) { - map.removeLayer('points'); - map.setLayoutProperty('alarmedPoints', 'visibility', 'none'); - map.setLayoutProperty('selectedPoints', 'visibility', 'none'); - this.createIconLayers(map, selectedSiteId); - //map.moveLayer('point-remaining','selectedPoints'); - - } - } - } - - } else { - this.swapLayersBack(map); - } - } else { - this.swapLayersBack(map); - } - } - - public swapLayersBack = (map: mapboxgl.Map) => { - this.checkedLayers = false; - const theme = this.pickTheme(); - - if (map.getLayer('selectedPoints') === undefined) { - this.addCircleLayer(map, 'selectedPoints', 'selectedPoints', theme.selectedSite, 9, 1, '#fff'); - - } - - if (map.getLayer('alarmedPoints') === undefined) { - this.addCircleLayer(map, 'alarmedPoints', 'alarmedPoints', '#CC0000', 9, 1, '#fff'); - - } - - - if (map.getLayer('points') === undefined) { - - map.setLayoutProperty('selectedPoints', 'visibility', 'visible'); - map.setLayoutProperty('alarmedPoints', 'visibility', 'visible'); - this.removeIconLayers(map); - - this.addCircleLayer(map, 'points', 'points', theme.site, 7, 1, '#fff'); - - - map.moveLayer('points', map.getLayer('selectedPoints').id); - } - } - - public changeMapOpacity = (map: mapboxgl.Map, newValue: number) => { - const newOpacity = newValue / 100; - if (map) { - const tiles = map.getStyle().layers?.filter(el => el.id.includes("tiles")) - tiles?.forEach(layer => { - if (layer.type === 'symbol') { - map.setPaintProperty(layer.id, `icon-opacity`, newOpacity); - map.setPaintProperty(layer.id, `text-opacity`, newOpacity); - } else { - map.setPaintProperty(layer.id, `${layer.type}-opacity`, newOpacity); - } - }) - } - - } - - public changeTheme = (map: mapboxgl.Map, themeName: string) => { - this.selectedTheme = themeName; - const theme = this.pickTheme(); - if (theme && map.loaded()) { - map.setPaintProperty('points', 'circle-color', theme.site); - map.setPaintProperty('selectedPoints', 'circle-color', theme.selectedSite); - map.setPaintProperty('microwave-lines', 'line-color', theme.microwaveLink); - map.setPaintProperty('fibre-lines', 'line-color', theme.fiberLink); - } - } -} - -const mapLayerService = new MapLayerService(); -export default mapLayerService; - |