From f20b987b8f8a091fcbe42e19e1fbb9e05dbfc8a6 Mon Sep 17 00:00:00 2001 From: ange_lu Date: Fri, 1 Dec 2023 14:46:53 +0100 Subject: [PATCH 01/11] update: cesium engine and widgets dependencies --- package-lock.json | 24 +++++++++++++++--------- projects/map-cesium/package.json | 4 ++-- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index ba37057a5..a387880d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2388,15 +2388,16 @@ } }, "node_modules/@cesium/engine": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@cesium/engine/-/engine-3.0.2.tgz", - "integrity": "sha512-p7xawdNn6dHOSMD/LtedSrsLqxcTyISi3JpKoKQd8DV4Yev0uwCbo8p7V7NqGXQjPqW7Tq0yAvBYvOMBpg9d1g==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@cesium/engine/-/engine-6.1.0.tgz", + "integrity": "sha512-gufv2rfvbPVA3foYrMP+8RBOpH9z8zq6PaHqFOSCmNlRDPDsoAhsjGAog+sjFz1ybFiQ2/DY84YB/2cjs+DYxw==", "dependencies": { "@tweenjs/tween.js": "^21.0.0", "@zip.js/zip.js": "2.4.x", "autolinker": "^4.0.0", "bitmap-sdf": "^1.0.3", "dompurify": "^3.0.2", + "draco3d": "^1.5.1", "earcut": "^2.2.4", "grapheme-splitter": "^1.0.4", "jsep": "^1.3.8", @@ -2421,11 +2422,11 @@ "integrity": "sha512-7qo1Mq8ZNmaR4USHHm615nEW2lPeeWJ3bTyoqFbd35DLx0LUH7C6ptt5FDCTAlbIzs3+WKrk5SkJvw8AFDE2hg==" }, "node_modules/@cesium/widgets": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@cesium/widgets/-/widgets-3.0.2.tgz", - "integrity": "sha512-ai3BbbxQYcj639jG2rPI+4zz6Tmz+xFG+ynUYjIrYa672iqe2VXQy1ahX4wvmwEvf0YLROJuT53jU7Nq0KZHmA==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@cesium/widgets/-/widgets-4.3.0.tgz", + "integrity": "sha512-TZoJJJpv6Jp6bEl0t+nSQwGYvttp4RJbB6oYbtJPPqURz/JP/kYd+hAF+uV0DefRws3yl6waDDZ3Lrd09Ype4g==", "dependencies": { - "@cesium/engine": "^3.0.2", + "@cesium/engine": "^6.1.0", "nosleep.js": "^0.12.0" }, "engines": { @@ -8461,6 +8462,11 @@ "integrity": "sha512-kxM7fSnNQTXOmaeGuBSXM8O3fEsBb7XSDBllkGbRwa0lJSJTxxDE/4eSNGLKZUmlFw0f1vJ5qSV2BljrgQtgIA==", "dev": true }, + "node_modules/draco3d": { + "version": "1.5.6", + "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.6.tgz", + "integrity": "sha512-+3NaRjWktb5r61ZFoDejlykPEFKT5N/LkbXsaddlw6xNSXBanUYpFc2AXXpbJDilPHazcSreU/DpQIaxfX0NfQ==" + }, "node_modules/duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", @@ -20712,8 +20718,8 @@ "version": "12.0.0-alpha.2", "license": "Apache-2.0", "dependencies": { - "@cesium/engine": "^3.0.2", - "@cesium/widgets": "^3.0.2", + "@cesium/engine": "^6.1.0", + "@cesium/widgets": "^4.3.0", "@dlr-eoc/services-layers": "12.0.0-alpha.2", "@dlr-eoc/services-map-state": "12.0.0-alpha.2", "tslib": "^2.4.0" diff --git a/projects/map-cesium/package.json b/projects/map-cesium/package.json index 9c7c365b3..0e0e56fa2 100644 --- a/projects/map-cesium/package.json +++ b/projects/map-cesium/package.json @@ -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": "^3.0.2", - "@cesium/widgets": "^3.0.2", + "@cesium/engine": "^6.1.0", + "@cesium/widgets": "^4.3.0", "tslib": "^2.4.0" }, "devDependencies": { From 0cafdfa49b72e3114584863f44c8d37fc0e3b533 Mon Sep 17 00:00:00 2001 From: ange_lu Date: Fri, 1 Dec 2023 15:02:36 +0100 Subject: [PATCH 02/11] feat: Adjust infoBox showing geojson data --- projects/map-cesium/src/lib/map-cesium.component.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/projects/map-cesium/src/lib/map-cesium.component.ts b/projects/map-cesium/src/lib/map-cesium.component.ts index f7d43244d..6a536831a 100644 --- a/projects/map-cesium/src/lib/map-cesium.component.ts +++ b/projects/map-cesium/src/lib/map-cesium.component.ts @@ -6,6 +6,7 @@ import { filter } from 'rxjs/operators'; import { MapCesiumService } from './map-cesium.service'; import { LayersService, Layer, TFiltertypes, TFiltertypesUncap } from '@dlr-eoc/services-layers'; import { Viewer } from '@cesium/widgets'; +import { GeoJsonDataSource } from '@cesium/engine'; export interface ICesiumControls { @@ -157,10 +158,7 @@ export class MapCesiumComponent implements OnInit, AfterViewInit, OnDestroy { const newCenter = this.mapSvc.getCenter(); const extent = this.mapSvc.getCurrentExtent(); const ms = new MapState(zoom, newCenter, { notifier: 'user' }, extent); - //console.log('New Cesium Map State: '); - //console.log(ms); this.mapStateSvc.setMapState(ms); - //console.log(this.mapStateSvc.getMapState().getValue()); }); //Changing entitiy parameters for the display in he infoBox window @@ -170,6 +168,12 @@ export class MapCesiumComponent implements OnInit, AfterViewInit, OnDestroy { const titleDiv = this.viewer.infoBox.container.getElementsByClassName('cesium-infoBox-title')[0]; titleDiv.innerHTML = 'Layer Attributes'; if (entity) { + if(entity.entityCollection.owner instanceof GeoJsonDataSource){ + titleDiv.innerHTML = entity.entityCollection.owner.name; + entity.name = entity.entityCollection.owner.name; + }else{ + entity.name = 'Layer Attributes'; + } if (entity.description) { const description = entity.description.getValue(this.mapSvc.cesiumCurrentTime); const contentDiv = this.viewer.infoBox.container.getElementsByClassName('cesium-infoBox-content')[0]; From f3649e6a0979763cf90c09ac5ec2182c1a3d4515 Mon Sep 17 00:00:00 2001 From: ange_lu Date: Fri, 1 Dec 2023 15:03:07 +0100 Subject: [PATCH 03/11] feat: Adding geojson styling options --- .../map-cesium/src/lib/map-cesium.service.ts | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/projects/map-cesium/src/lib/map-cesium.service.ts b/projects/map-cesium/src/lib/map-cesium.service.ts index c63fee082..7b19c8cce 100644 --- a/projects/map-cesium/src/lib/map-cesium.service.ts +++ b/projects/map-cesium/src/lib/map-cesium.service.ts @@ -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, OpenStreetMapImageryProvider, PrimitiveCollection, Rectangle, TileMapServiceImageryProvider, TimeIntervalCollection, UrlTemplateImageryProvider, WebMapServiceImageryProvider, WebMapTileServiceImageryProvider, WebMercatorTilingScheme, } from '@cesium/engine'; +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, filtertype: Tgroupfiltertype) { const lowerType = filtertype.toLowerCase() as Tgroupfiltertype; - const tempLayers: ImageryLayer[] = []; this.remove3DLayers(lowerType); layers.forEach((newLayer) => { - const layer = this.create_3D_layer(newLayer as CustomLayer); + this.create_3D_layer(newLayer as CustomLayer); }) } private create_2D_layer(newLayer: Layer) { - //console.log('Creating new '+newLayer.type+' layer: '+ newLayer.name); let newImageryLayer!: ImageryLayer; switch (newLayer.type) { case XyzLayertype: @@ -501,8 +499,6 @@ export class MapCesiumService { } private create_wms_layer(l: WmsLayer): ImageryLayer { - //console.log(l.name); - //console.log(l); let defaultFormat = 'image/png'; let maxLevel = 20; if (l.maxZoom) { @@ -624,11 +620,25 @@ export class MapCesiumService { private create_geojson_layer(l: VectorLayer): GeoJsonDataSource { const newGeoJsonDataSource = new GeoJsonDataSource(); - // https://github.com/CesiumGS/cesium/blob/690b4e8850493c9c208b7bd137e9692cbeeca698/packages/engine/Source/Core/Color.js#L2244 const YELLOW = Object.freeze(Color.fromCssColorString("#FFFF00")); + let fillColor = YELLOW; + let strokeColor = YELLOW; + let clamp = false; + if(l.options){ + if(l.options['fillColor']){ + fillColor = Object.freeze(Color.fromCssColorString(l.options['fillColor'])); + } + if(l.options['strokeColor']){ + strokeColor = Object.freeze(Color.fromCssColorString(l.options['strokeColor'])); + } + if(l.options['clampToGround']){ + clamp = l.options['clampToGround']; + } + } const dataSourceOptions = { - fill: YELLOW.withAlpha(l.opacity), - stroke: YELLOW.withAlpha(l.opacity) + fill: fillColor.withAlpha(l.opacity/1.5), + stroke: strokeColor.withAlpha(l.opacity), + clampToGround: clamp } as GeoJsonDataSource.LoadOptions; if (l.attribution) { From e5948e5a447d34357831f1aeb91713f220af9ca3 Mon Sep 17 00:00:00 2001 From: ange_lu Date: Fri, 1 Dec 2023 15:06:16 +0100 Subject: [PATCH 04/11] fix: bug in updateDataSourceZIndex --- projects/map-cesium/src/lib/map-cesium.service.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/projects/map-cesium/src/lib/map-cesium.service.ts b/projects/map-cesium/src/lib/map-cesium.service.ts index 7b19c8cce..5b8ac0cdf 100644 --- a/projects/map-cesium/src/lib/map-cesium.service.ts +++ b/projects/map-cesium/src/lib/map-cesium.service.ts @@ -1017,7 +1017,7 @@ export class MapCesiumService { if (viewerLayer) { const cesiumIndex = dataSourceCollection.indexOf(viewerLayer); const layerIndex = layers.indexOf(layer); - if (cesiumIndex !== layerIndex) { + if (cesiumIndex !== layerIndex && cesiumIndex >= 0) { const diffIndex = cesiumIndex - layerIndex; if (diffIndex < 0) { // Move layer up in collection @@ -1041,7 +1041,7 @@ export class MapCesiumService { if (viewerLayer) { const cesiumIndex = dataSourceCollection.indexOf(viewerLayer); const layerIndex = layers.indexOf(layer) + this.getDataSourceLayersSize('baselayers'); - if (cesiumIndex !== layerIndex) { + if (cesiumIndex !== layerIndex && cesiumIndex >= 0) { const diffIndex = cesiumIndex - layerIndex; if (diffIndex < 0) { // Move layer up in collection @@ -1065,9 +1065,6 @@ export class MapCesiumService { if (viewerLayer) { const cesiumIndex = dataSourceCollection.indexOf(viewerLayer); const layerIndex = layers.indexOf(layer) + this.getDataSourceLayersSize('baselayers') + this.getDataSourceLayersSize('layers'); -/* console.log(layer.name); - console.log('CesiumIndex: '+ cesiumIndex); - console.log('LayerIndex: '+ layerIndex); */ if (cesiumIndex !== layerIndex && cesiumIndex >= 0){ const diffIndex = cesiumIndex - layerIndex; if (diffIndex < 0) { @@ -1081,7 +1078,6 @@ export class MapCesiumService { dataSourceCollection.lower(viewerLayer); } } - //console.log('New CesiumIndex: '+ dataSourceCollection.indexOf(viewerLayer)); } } } From 94fa819387ad8e5444165c3e1da41e80f87c1491 Mon Sep 17 00:00:00 2001 From: ange_lu Date: Fri, 1 Dec 2023 15:30:51 +0100 Subject: [PATCH 05/11] feat: Adding strokeWidth to GeoJsonDataSource --- projects/map-cesium/src/lib/map-cesium.service.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/projects/map-cesium/src/lib/map-cesium.service.ts b/projects/map-cesium/src/lib/map-cesium.service.ts index 5b8ac0cdf..afc059b6e 100644 --- a/projects/map-cesium/src/lib/map-cesium.service.ts +++ b/projects/map-cesium/src/lib/map-cesium.service.ts @@ -620,9 +620,10 @@ export class MapCesiumService { private create_geojson_layer(l: VectorLayer): GeoJsonDataSource { const newGeoJsonDataSource = new GeoJsonDataSource(); - const YELLOW = Object.freeze(Color.fromCssColorString("#FFFF00")); - let fillColor = YELLOW; - let strokeColor = YELLOW; + // default GeoJsonDataSource values + let fillColor = GeoJsonDataSource.fill; + let strokeColor = GeoJsonDataSource.stroke; + let strokeWidth = GeoJsonDataSource.strokeWidth; let clamp = false; if(l.options){ if(l.options['fillColor']){ @@ -631,6 +632,9 @@ export class MapCesiumService { if(l.options['strokeColor']){ strokeColor = Object.freeze(Color.fromCssColorString(l.options['strokeColor'])); } + if(l.options['strokeWidth']){ + strokeWidth = l.options['strokeWidth']; + } if(l.options['clampToGround']){ clamp = l.options['clampToGround']; } @@ -638,6 +642,7 @@ export class MapCesiumService { const dataSourceOptions = { fill: fillColor.withAlpha(l.opacity/1.5), stroke: strokeColor.withAlpha(l.opacity), + strokeWidth: strokeWidth, clampToGround: clamp } as GeoJsonDataSource.LoadOptions; From da109052c16332ce48315a053171d80c5818fcd7 Mon Sep 17 00:00:00 2001 From: ange_lu Date: Fri, 1 Dec 2023 15:31:22 +0100 Subject: [PATCH 06/11] feat: Adding geojson example to cesium demo --- .../route-example-cesium.component.ts | 35 ++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/projects/demo-maps/src/app/route-components/route-example-cesium/route-example-cesium.component.ts b/projects/demo-maps/src/app/route-components/route-example-cesium/route-example-cesium.component.ts index e4a07ad7c..4209942c3 100644 --- a/projects/demo-maps/src/app/route-components/route-example-cesium/route-example-cesium.component.ts +++ b/projects/demo-maps/src/app/route-components/route-example-cesium/route-example-cesium.component.ts @@ -8,6 +8,8 @@ import { MapOlService } from '@dlr-eoc/map-ol'; import olMap from 'ol/Map'; import { Cesium3DTileset, CesiumTerrainProvider, Credit, EllipsoidTerrainProvider, I3SDataProvider, createGooglePhotorealistic3DTileset } from '@cesium/engine'; import testData from '@dlr-eoc/shared-assets/geojson/test.json'; +import { Feature } from 'ol'; +import { Fill, Stroke, Style } from 'ol/style'; @Component({ selector: 'app-route-example-cesium', @@ -197,12 +199,43 @@ export class RouteExampleCesiumComponent implements OnInit, OnDestroy { }), new VectorLayer({ id: 'geojson_test', - name: 'GeoJSON Vector Layer', + name: 'GeoJSON Vector Layer (default)', attribution: `© DLR GeoJSON`, type: 'geojson', data: testData, visible: false, popup: true + }), + new VectorLayer({ + id: 'geojson_test2', + name: 'GeoJSON Vector Layer (styled)', + attribution: `© DLR GeoJSON`, + type: 'geojson', + data: testData, + visible: false, + popup: true, + options: { + style: (feature: Feature) => { + let styles = []; + + let polygonStyle = new Style({ + stroke: new Stroke({ + color: '#0072a3', + width: 1 + }), + fill: new Fill({ + color: '#FFFFFF' + '99', + + }), + }); + styles.push(polygonStyle); + return styles; + }, + fillColor: '#FFFFFF', + strokeColor: '#0072a3', + strokeWidth: 2, + clampToGround: false + } }) ]; From 73aab9589360f0446e99354366c193108ec116bb Mon Sep 17 00:00:00 2001 From: ange_lu Date: Fri, 1 Dec 2023 15:50:38 +0100 Subject: [PATCH 07/11] docs: adding map-cesium changes --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2df0380a9..f6714752b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,8 +28,8 @@ * **@dlr-eoc/map-cesium:** - New UKIS library for working with [CesiumJS](https://github.com/CesiumGS/cesium) was added. - - A new example has been added to the demo-maps to show how to work with the new cesium library. + - The GeoJsonDatasource in map-cesium was updated and styling of vector layers is now possible. * **@dlr-eoc/services-layers:** - The `layer.popup` gets more types and uses `IPopupParams` which will be applied to all popups. From 49ec3dedfdf8fb630172f06cd0732c090cb9dc9e Mon Sep 17 00:00:00 2001 From: ange_lu Date: Thu, 7 Dec 2023 14:33:45 +0100 Subject: [PATCH 08/11] feat: Changing source for vector styling. --- .../map-cesium/src/lib/map-cesium.service.ts | 46 ++++++++++++------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/projects/map-cesium/src/lib/map-cesium.service.ts b/projects/map-cesium/src/lib/map-cesium.service.ts index afc059b6e..f00e9188b 100644 --- a/projects/map-cesium/src/lib/map-cesium.service.ts +++ b/projects/map-cesium/src/lib/map-cesium.service.ts @@ -620,28 +620,40 @@ export class MapCesiumService { private create_geojson_layer(l: VectorLayer): GeoJsonDataSource { const newGeoJsonDataSource = new GeoJsonDataSource(); - // default GeoJsonDataSource values - let fillColor = GeoJsonDataSource.fill; - let strokeColor = GeoJsonDataSource.stroke; - let strokeWidth = GeoJsonDataSource.strokeWidth; + // 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){ - if(l.options['fillColor']){ - fillColor = Object.freeze(Color.fromCssColorString(l.options['fillColor'])); - } - if(l.options['strokeColor']){ - strokeColor = Object.freeze(Color.fromCssColorString(l.options['strokeColor'])); - } - if(l.options['strokeWidth']){ - strokeWidth = l.options['strokeWidth']; + + if(l.options && l.options.style){ + const styleProperties = l.options.style(l.data)[0]; + if(styleProperties){ + fillColor = Color.fromCssColorString(styleProperties.fill_.color_) || fillColor; + 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(l.opacity/1.5), - stroke: strokeColor.withAlpha(l.opacity), + fill: fillColor.withAlpha(fillOpacity), + stroke: strokeColor.withAlpha(strokeOpacity), strokeWidth: strokeWidth, clampToGround: clamp } as GeoJsonDataSource.LoadOptions; @@ -652,7 +664,7 @@ export class MapCesiumService { newGeoJsonDataSource.load(l.data, dataSourceOptions); newGeoJsonDataSource.show = l.visible; - newGeoJsonDataSource.name = l.id; + newGeoJsonDataSource.name = l.name; this.dataSourceOpacity.set(l.id, l.opacity); return newGeoJsonDataSource; From 404323b7ee9442d13984931a320793d899cd4a54 Mon Sep 17 00:00:00 2001 From: ange_lu Date: Thu, 7 Dec 2023 14:34:12 +0100 Subject: [PATCH 09/11] feat: Adapting vector style. --- .../route-example-cesium/route-example-cesium.component.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/projects/demo-maps/src/app/route-components/route-example-cesium/route-example-cesium.component.ts b/projects/demo-maps/src/app/route-components/route-example-cesium/route-example-cesium.component.ts index 4209942c3..9243b406d 100644 --- a/projects/demo-maps/src/app/route-components/route-example-cesium/route-example-cesium.component.ts +++ b/projects/demo-maps/src/app/route-components/route-example-cesium/route-example-cesium.component.ts @@ -220,20 +220,17 @@ export class RouteExampleCesiumComponent implements OnInit, OnDestroy { let polygonStyle = new Style({ stroke: new Stroke({ - color: '#0072a3', + color: '#FF7400', width: 1 }), fill: new Fill({ - color: '#FFFFFF' + '99', + color: '#FF7400' + '99', }), }); styles.push(polygonStyle); return styles; }, - fillColor: '#FFFFFF', - strokeColor: '#0072a3', - strokeWidth: 2, clampToGround: false } }) From 3f6f355e8092636327bd352e5b595b5800de7f09 Mon Sep 17 00:00:00 2001 From: ange_lu Date: Thu, 7 Dec 2023 14:45:29 +0100 Subject: [PATCH 10/11] docs: Updating Cesium README --- projects/map-cesium/README.md | 36 ++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/projects/map-cesium/README.md b/projects/map-cesium/README.md index 92a45646f..57d50921a 100644 --- a/projects/map-cesium/README.md +++ b/projects/map-cesium/README.md @@ -255,11 +255,45 @@ Instead of a new 3D layer service, the existing [@dlr-eoc/services-layers](https #### Serving 3D content At the moment there are not many services out there, which serve 3D data. If you have data in the right format ([Cesium 3D Tiles](https://github.com/CesiumGS/3d-tiles), [Cesium quantized-mesh](https://github.com/CesiumGS/quantized-mesh)) available, everything you need is a web server for making the data accessible to the app. To quickly test the 3D capabilities you could use [http-server](https://github.com/http-party/http-server) to host 3D tiles and terrain meshes locally. A useful tool for generating terrain in the quantized-mesh format is the [Cesium Terrain Builder Docker](https://github.com/tum-gis/cesium-terrain-builder-docker). +#### Styling geoJSON vector layer +GeoJSON layer in Cesium access the layer.options style property. To clamp a vector layer to the ground use `clampToGround: true` as an optional property of layer.options. Here is an example: +``` +new VectorLayer({ + id: 'geojson_test', + name: 'GeoJSON Vector Layer', + attribution: `© Attribution`, + type: 'geojson', + data: testData, + visible: true, + options: { + style: (feature: Feature) => { + let styles = []; + + let polygonStyle = new Style({ + stroke: new Stroke({ + color: '#FF7400', + width: 1 + }), + fill: new Fill({ + color: '#FF7400' + '99', + + }), + }); + styles.push(polygonStyle); + return styles; + }, + clampToGround: false + } + }) +``` + #### Notes - Terrain has to be attributed with a new Cesium Credit object, see the example above. - GeoJSON layer are supported, but they are always shown above imagery layers, regardless of their ordering index in the layer control. Therefore they should be added as overlays. - As of 01/2023, WFS is not supported by Cesium yet. -- KmlDataSource does not support opacity change at the moment +- KmlDataSource does not support opacity change at the moment. +- The stroke-width of vector polygons in Cesium does not change on non Apple browsers. There seems to be an issue with the browser support for this feature. +- When a vector layer is clamped to the ground, Cesium does not display the stroke anymore. Cesium's proposed workaround at the moment is to include the stroke as additional polyline vector layer. === From 0db77c0404b32bf51bdafc8d7af57face0620176 Mon Sep 17 00:00:00 2001 From: ange_lu Date: Thu, 7 Dec 2023 15:48:19 +0100 Subject: [PATCH 11/11] feat: Simplify opacity behavior for vector layers --- .../map-cesium/src/lib/map-cesium.service.ts | 20 ++++--------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/projects/map-cesium/src/lib/map-cesium.service.ts b/projects/map-cesium/src/lib/map-cesium.service.ts index f00e9188b..f6f593607 100644 --- a/projects/map-cesium/src/lib/map-cesium.service.ts +++ b/projects/map-cesium/src/lib/map-cesium.service.ts @@ -624,8 +624,6 @@ export class MapCesiumService { 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){ @@ -639,21 +637,11 @@ export class MapCesiumService { 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), + // as Cesium cannot handle an opacity for the whole datasource, we need to modify the layer opacity, + // in case the cesium color already has an opacity value + fill: fillColor.withAlpha(l.opacity*fillColor.alpha), + stroke: strokeColor.withAlpha(l.opacity*strokeColor.alpha), strokeWidth: strokeWidth, clampToGround: clamp } as GeoJsonDataSource.LoadOptions;