Update vectorlayer styling in map-cesium #207
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -21,8 +21,8 @@ | |
| "dependencies": { | ||
| "@dlr-eoc/services-map-state": "12.0.0-alpha.2", | ||
| "@dlr-eoc/services-layers": "12.0.0-alpha.2", | ||
| "@cesium/engine": "^6.1.0", | ||
|
There was a problem hiding this comment. Updating libraries in the major version could be considered a breaking change. @voinSR and @MichaelLangbein I think we discussed this once. But with a lot of libraries in our repo, the versions could get very high very quickly. We have to decide how to deal with that. For now, it is ok because this library was only available as an alpha version. There was a problem hiding this comment. Yes, I wanted to update the versions before we create a new release of the libraries. |
||
| "@cesium/widgets": "^4.3.0", | ||
| "tslib": "^2.4.0" | ||
| }, | ||
| "devDependencies": { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; | |
| import { Layer, VectorLayer, CustomLayer, RasterLayer, WmtsLayer, WmsLayer, TGeoExtent, TmsLayertype, WmtsLayertype, WmsLayertype, XyzLayertype, IListMatrixSet, TFiltertypesUncap, TFiltertypes } from '@dlr-eoc/services-layers'; | ||
|
|
||
| import { ICesiumControls } from './map-cesium.component'; | ||
| import { Cartesian3, Cesium3DTileStyle, Cesium3DTileset, CesiumTerrainProvider, Color, Credit, DataSource, EllipsoidTerrainProvider, GeoJsonDataSource, I3SDataProvider, ImageryLayer, Ion, JulianDate, KmlDataSource, Rectangle, TileMapServiceImageryProvider, TimeIntervalCollection, UrlTemplateImageryProvider, WebMapServiceImageryProvider, WebMapTileServiceImageryProvider, WebMercatorTilingScheme, } from '@cesium/engine'; | ||
| import { Viewer } from '@cesium/widgets'; | ||
| import { IMapCenter } from '@dlr-eoc/services-map-state'; | ||
|
|
||
|
|
@@ -416,16 +416,14 @@ export class MapCesiumService { | |
|
|
||
| public set3DUkisLayers(layers: Array<Layer>, filtertype: Tgroupfiltertype) { | ||
| const lowerType = filtertype.toLowerCase() as Tgroupfiltertype; | ||
| this.remove3DLayers(lowerType); | ||
|
|
||
| layers.forEach((newLayer) => { | ||
| this.create_3D_layer(newLayer as CustomLayer); | ||
| }) | ||
| } | ||
|
|
||
| private create_2D_layer(newLayer: Layer) { | ||
| let newImageryLayer!: ImageryLayer; | ||
| switch (newLayer.type) { | ||
| case XyzLayertype: | ||
|
|
@@ -501,8 +499,6 @@ export class MapCesiumService { | |
| } | ||
|
|
||
| private create_wms_layer(l: WmsLayer): ImageryLayer { | ||
| let defaultFormat = 'image/png'; | ||
| let maxLevel = 20; | ||
| if (l.maxZoom) { | ||
|
|
@@ -624,11 +620,42 @@ export class MapCesiumService { | |
|
|
||
| private create_geojson_layer(l: VectorLayer): GeoJsonDataSource { | ||
| const newGeoJsonDataSource = new GeoJsonDataSource(); | ||
| // default UKIS values | ||
| let fillColor = Color.fromCssColorString('#FFFFFF99'); | ||
| let strokeColor = Color.fromCssColorString('#3399CC'); | ||
| let strokeWidth = 1; | ||
| let strokeOpacity = 1; | ||
| let fillOpacity = 1; | ||
| let clamp = false; | ||
|
|
||
| if(l.options && l.options.style){ | ||
| const styleProperties = l.options.style(l.data)[0]; | ||
| if(styleProperties){ | ||
| fillColor = Color.fromCssColorString(styleProperties.fill_.color_) || fillColor; | ||
|
There was a problem hiding this comment. It is not optimal to use private properties from OpenLayers here, but we can change that later. Maybe we can define some common style properties. l.options.style{
fillColor?: string;
strokeColor?: string;
strokeWidth?: string;
strokeOpacity?: number;
fillOpacity?: number;
circleRadius?: number;
iconImg?: any;
...
}@voinSR what do you think about it? There was a problem hiding this comment. This would be ideal. |
||
| strokeColor = Color.fromCssColorString(styleProperties.stroke_.color_) || strokeColor; | ||
| strokeWidth = styleProperties.stroke_.width_ || strokeWidth; | ||
| } | ||
| if(l.options['clampToGround']){ | ||
| clamp = l.options['clampToGround']; | ||
| } | ||
| } | ||
| // as Cesium cannot handle an opacity for the whole datasource, we need to modify the color opacity, | ||
| // in case the cesium color already has an opacity value | ||
| if(fillColor.alpha != l.opacity){ | ||
| fillOpacity = l.opacity*fillColor.alpha; | ||
| }else{ | ||
| fillOpacity = l.opacity; | ||
| } | ||
| if(strokeColor.alpha != l.opacity){ | ||
| strokeOpacity = l.opacity*strokeColor.alpha; | ||
| }else{ | ||
| strokeOpacity = l.opacity; | ||
| } | ||
| const dataSourceOptions = { | ||
| fill: fillColor.withAlpha(fillOpacity), | ||
| stroke: strokeColor.withAlpha(strokeOpacity), | ||
| strokeWidth: strokeWidth, | ||
| clampToGround: clamp | ||
| } as GeoJsonDataSource.LoadOptions; | ||
|
|
||
| if (l.attribution) { | ||
|
|
@@ -637,7 +664,7 @@ export class MapCesiumService { | |
|
|
||
| newGeoJsonDataSource.load(l.data, dataSourceOptions); | ||
| newGeoJsonDataSource.show = l.visible; | ||
| newGeoJsonDataSource.name = l.name; | ||
|
|
||
| this.dataSourceOpacity.set(l.id, l.opacity); | ||
| return newGeoJsonDataSource; | ||
|
|
@@ -1007,7 +1034,7 @@ export class MapCesiumService { | |
| if (viewerLayer) { | ||
| const cesiumIndex = dataSourceCollection.indexOf(viewerLayer); | ||
| const layerIndex = layers.indexOf(layer); | ||
| if (cesiumIndex !== layerIndex && cesiumIndex >= 0) { | ||
| const diffIndex = cesiumIndex - layerIndex; | ||
| if (diffIndex < 0) { | ||
| // Move layer up in collection | ||
|
|
@@ -1031,7 +1058,7 @@ export class MapCesiumService { | |
| if (viewerLayer) { | ||
| const cesiumIndex = dataSourceCollection.indexOf(viewerLayer); | ||
| const layerIndex = layers.indexOf(layer) + this.getDataSourceLayersSize('baselayers'); | ||
| if (cesiumIndex !== layerIndex && cesiumIndex >= 0) { | ||
| const diffIndex = cesiumIndex - layerIndex; | ||
| if (diffIndex < 0) { | ||
| // Move layer up in collection | ||
|
|
@@ -1055,9 +1082,6 @@ export class MapCesiumService { | |
| if (viewerLayer) { | ||
| const cesiumIndex = dataSourceCollection.indexOf(viewerLayer); | ||
| const layerIndex = layers.indexOf(layer) + this.getDataSourceLayersSize('baselayers') + this.getDataSourceLayersSize('layers'); | ||
| if (cesiumIndex !== layerIndex && cesiumIndex >= 0){ | ||
| const diffIndex = cesiumIndex - layerIndex; | ||
| if (diffIndex < 0) { | ||
|
|
@@ -1071,7 +1095,6 @@ export class MapCesiumService { | |
| dataSourceCollection.lower(viewerLayer); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we can find a better solution here so that the values are not duplicated in the object.
Here is how this object is used in the other mapping libraries
map-ol:
ukis-frontend-libraries/projects/map-ol/src/lib/map-ol.service.ts
Line 1140 in dd51dd6
ukis-frontend-libraries/projects/map-ol/src/lib/map-ol.service.ts
Line 1184 in dd51dd6
ukis-frontend-libraries/projects/map-ol/src/lib/map-ol.service.ts
Line 933 in dd51dd6
map-maplibre:
ukis-frontend-libraries/projects/map-maplibre/src/lib/maplibre-layers.helpers.ts
Line 188 in dd51dd6
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I found a way to access the style properties in a similar way as in map-maplibre. Therefore, I removed the duplicate entries.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice.