+++ /dev/null
-/**
- * ============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;
-
Code Review / ccsdk / features.git / blobdiff