diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/networkMapApp/src/utils')
-rw-r--r-- | sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts | 332 | ||||
-rw-r--r-- | sdnr/wt/odlux/apps/networkMapApp/src/utils/mapUtils.ts | 146 | ||||
-rw-r--r-- | sdnr/wt/odlux/apps/networkMapApp/src/utils/utils.ts | 25 |
3 files changed, 0 insertions, 503 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; - diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapUtils.ts b/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapUtils.ts deleted file mode 100644 index da3e97ee3..000000000 --- a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapUtils.ts +++ /dev/null @@ -1,146 +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========================================================================== - */ - -const EARTHRADIUSM = 6378137; - -type updatedCoordinates = { south: number, west: number, north: number, east: number }; - - -export const increaseBoundingBox = (map: mapboxgl.Map) =>{ - - const bbox = map.getBounds(); - - const distance = map.getCenter().distanceTo(bbox.getNorthEast()); // radius of visible area (center -> corner) (in meters) - - //calculate new boundingBox - const increasedBoundingBox = addDistance(bbox.getSouth(), bbox.getWest(), bbox.getNorth(), bbox.getEast(), (distance / 1000) / 2); - return increasedBoundingBox; -} - - - -export const addDistance = (south: number, west: number, north: number, east: number, distanceKm: number): updatedCoordinates => { - - const distanceInM = distanceKm * 1000; - - const dLat = distanceInM / EARTHRADIUSM; - const dLon = distanceInM / (EARTHRADIUSM * Math.cos(Math.PI * (north + south) / 360)); - - const latOffset = dLat * 180 / Math.PI; - const lonOffset = dLon * 180 / Math.PI; - - const newEast = checkLongitude(east + lonOffset); - const newWest = checkLongitude(west - lonOffset); - const newNorth = checkLatitude(north + latOffset); - const newSouth = checkLatitude(south - latOffset); - - return { east: newEast, north: newNorth, south: newSouth, west: newWest }; - -} - - -//taken from https://www.movable-type.co.uk/scripts/latlong.html -export const calculateMidPoint = (lat1: number, lon1: number, lat2: number, lon2: number) =>{ - - const dLon = degrees_to_radians(lon2 - lon1); - - //convert to radians - lat1 = degrees_to_radians(lat1); - lat2 = degrees_to_radians(lat2); - lon1 = degrees_to_radians(lon1); - - const Bx = Math.cos(lat2) * Math.cos(dLon); - const By = Math.cos(lat2) * Math.sin(dLon); - const lat3 = Math.atan2(Math.sin(lat1) + Math.sin(lat2), Math.sqrt((Math.cos(lat1) + Bx) * (Math.cos(lat1) + Bx) + By * By)); - const lon3 = lon1 + Math.atan2(By, Math.cos(lat1) + Bx); - - return [radians_to_degrees(lon3), radians_to_degrees(lat3)]; -} - - -export const LatLonToDMS = (value:number, isLon:boolean=false) =>{ - const absoluteValue = Math.abs(value); - const d = Math.floor(absoluteValue); - const m = Math.floor((absoluteValue -d)* 60); - const s = (absoluteValue - d - m / 60 ) * 3600; - const dms=`${d}° ${m}' ${s.toFixed(2)}"` - - const sign = Math.sign(value); - - if(isLon){ - return (sign === -1 || sign === -0 ) ? dms + " W" : dms + " E"; - }else{ - return (sign === -1 || sign === -0 ) ? dms + " S" : dms + " N"; - } -} - -// Because features come from tiled vector data, feature geometries may be split -// or duplicated across tile boundaries and, as a result, features may appear -// multiple times in query results. - -//taken from https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/ - -export const getUniqueFeatures = (array: mapboxgl.MapboxGeoJSONFeature[], comparatorProperty:string) =>{ - var existingFeatureKeys: any = {}; - - var uniqueFeatures = array.filter(function(el) { - if (existingFeatureKeys[el.properties![comparatorProperty]]) { - return false; - } else { - existingFeatureKeys[el.properties![comparatorProperty]] = true; - return true; - } - }); - - return uniqueFeatures; - } - -const radians_to_degrees = (radians:number) =>{ - - var pi = Math.PI; - return radians * (180/pi); -} - - const degrees_to_radians = (degrees: number) => - { - return degrees * (Math.PI/180); - } - - -const checkLatitude = (lat: number) => { - - if (lat > 90) - return 90; - else if (lat < -90) - return -90; - else - return lat; - -} - -const checkLongitude = (lon: number) => { - if (lon > 180) - return 180; - else if (lon < -180) - return -180; - else - return lon; -} - - - diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/utils/utils.ts b/sdnr/wt/odlux/apps/networkMapApp/src/utils/utils.ts deleted file mode 100644 index 59085d499..000000000 --- a/sdnr/wt/odlux/apps/networkMapApp/src/utils/utils.ts +++ /dev/null @@ -1,25 +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 { link } from "../model/link"; -import { Site } from "../model/site"; - - -export function isSite(data: link | Site): data is Site { - return (data as Site).location !== undefined; -}
\ No newline at end of file |