diff --git a/package-lock.json b/package-lock.json index b48df5bd0..5174d0755 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,7 @@ "fast-text-encoding": "^1.0.4", "file-saver": "^2.0.2", "flexsearch": "0.7.21", + "geostyler-openlayers-parser": "^4.2.1", "hammerjs": "^2.0.8", "html2canvas": "^1.4.1", "jspdf": "^2.5.1", @@ -5414,6 +5415,11 @@ "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==", "dev": true }, + "node_modules/@types/lodash": { + "version": "4.14.195", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz", + "integrity": "sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==" + }, "node_modules/@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -9053,6 +9059,11 @@ "postcss": "^8.4" } }, + "node_modules/css-font-parser": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/css-font-parser/-/css-font-parser-2.0.0.tgz", + "integrity": "sha512-YjgBiAq5rFNXfsPHofaEZwsUbCoSK0avstS76BSqNyVCM7+oiO44wZxbtq6YFSaQafCG0llS/f79oqlsmzaBJg==" + }, "node_modules/css-has-pseudo": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz", @@ -12272,6 +12283,40 @@ "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz", "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==" }, + "node_modules/geostyler-openlayers-parser": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/geostyler-openlayers-parser/-/geostyler-openlayers-parser-4.2.1.tgz", + "integrity": "sha512-oP/wZyzHasSsYZFP0EA2rBG/6oWSZjt7aB+Ykbvz0Pn2Z9jDEFtSfWRgVeakfWubolzlXgLmb7JZko1EYOeW+g==", + "dependencies": { + "css-font-parser": "^2.0.0", + "geostyler-style": "^7.3.1" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://opencollective.com/geostyler" + }, + "peerDependencies": { + "ol": ">=7.4" + } + }, + "node_modules/geostyler-style": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/geostyler-style/-/geostyler-style-7.3.1.tgz", + "integrity": "sha512-9KOXmtRt0O7lhwWfmRORM5l3j3H1uR52NFHlHv1qTb1hgNGZIPhLUrGCaoceUdNkD9+P/Cjiqsea+X+H8h64zw==", + "dependencies": { + "@types/lodash": "^4.14.168", + "lodash": "^4.17.21" + }, + "engines": { + "node": ">=14.0.0", + "npm": ">=6.0.0" + }, + "funding": { + "url": "https://opencollective.com/geostyler" + } + }, "node_modules/geotiff": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.7.tgz", @@ -15976,8 +16021,7 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash.debounce": { "version": "4.0.8", @@ -22968,13 +23012,13 @@ "dev": true }, "node_modules/ol": { - "version": "7.3.0", - "resolved": "https://registry.npmjs.org/ol/-/ol-7.3.0.tgz", - "integrity": "sha512-08vJE4xITKPazQ9qJjeqYjRngnM9s+1eSv219Pdlrjj3LpLqjEH386ncq+76Dw1oGPGR8eLVEePk7FEd9XqqMw==", + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/ol/-/ol-7.4.0.tgz", + "integrity": "sha512-bgBbiah694HhC0jt8ptEFNRXwgO8d6xWH3G97PCg4bmn9Li5nLLbi59oSrvqUI6VPVwonPQF1YcqJymxxyMC6A==", "dependencies": { "earcut": "^2.2.3", "geotiff": "^2.0.7", - "ol-mapbox-style": "^9.2.0", + "ol-mapbox-style": "^10.1.0", "pbf": "3.2.1", "rbush": "^3.0.1" }, @@ -22984,12 +23028,13 @@ } }, "node_modules/ol-mapbox-style": { - "version": "9.7.0", - "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.7.0.tgz", - "integrity": "sha512-YX3u8FBJHsRHaoGxmd724Mp5WPTuV7wLQW6zZhcihMuInsSdCX1EiZfU+8IAL7jG0pbgl5YgC0aWE/MXJcUXxg==", + "version": "10.6.0", + "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-10.6.0.tgz", + "integrity": "sha512-s86QhCoyyKVRsYkvPzzdWd///bhYh3onWrBq4lNXnCd9G/hS6AoK023kn4zlDESVlTBDTWLz8vhOistp0M3TXA==", "dependencies": { "@mapbox/mapbox-gl-style-spec": "^13.23.1", - "mapbox-to-css-font": "^2.4.1" + "mapbox-to-css-font": "^2.4.1", + "ol": "^7.3.0" } }, "node_modules/on-finished": { @@ -33868,6 +33913,11 @@ "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==", "dev": true }, + "@types/lodash": { + "version": "4.14.195", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz", + "integrity": "sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==" + }, "@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -36648,6 +36698,11 @@ "postcss-selector-parser": "^6.0.9" } }, + "css-font-parser": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/css-font-parser/-/css-font-parser-2.0.0.tgz", + "integrity": "sha512-YjgBiAq5rFNXfsPHofaEZwsUbCoSK0avstS76BSqNyVCM7+oiO44wZxbtq6YFSaQafCG0llS/f79oqlsmzaBJg==" + }, "css-has-pseudo": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz", @@ -39046,6 +39101,24 @@ } } }, + "geostyler-openlayers-parser": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/geostyler-openlayers-parser/-/geostyler-openlayers-parser-4.2.1.tgz", + "integrity": "sha512-oP/wZyzHasSsYZFP0EA2rBG/6oWSZjt7aB+Ykbvz0Pn2Z9jDEFtSfWRgVeakfWubolzlXgLmb7JZko1EYOeW+g==", + "requires": { + "css-font-parser": "^2.0.0", + "geostyler-style": "^7.3.1" + } + }, + "geostyler-style": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/geostyler-style/-/geostyler-style-7.3.1.tgz", + "integrity": "sha512-9KOXmtRt0O7lhwWfmRORM5l3j3H1uR52NFHlHv1qTb1hgNGZIPhLUrGCaoceUdNkD9+P/Cjiqsea+X+H8h64zw==", + "requires": { + "@types/lodash": "^4.14.168", + "lodash": "^4.17.21" + } + }, "geotiff": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.7.tgz", @@ -41933,8 +42006,7 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash.debounce": { "version": "4.0.8", @@ -47384,24 +47456,25 @@ "dev": true }, "ol": { - "version": "7.3.0", - "resolved": "https://registry.npmjs.org/ol/-/ol-7.3.0.tgz", - "integrity": "sha512-08vJE4xITKPazQ9qJjeqYjRngnM9s+1eSv219Pdlrjj3LpLqjEH386ncq+76Dw1oGPGR8eLVEePk7FEd9XqqMw==", + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/ol/-/ol-7.4.0.tgz", + "integrity": "sha512-bgBbiah694HhC0jt8ptEFNRXwgO8d6xWH3G97PCg4bmn9Li5nLLbi59oSrvqUI6VPVwonPQF1YcqJymxxyMC6A==", "requires": { "earcut": "^2.2.3", "geotiff": "^2.0.7", - "ol-mapbox-style": "^9.2.0", + "ol-mapbox-style": "^10.1.0", "pbf": "3.2.1", "rbush": "^3.0.1" } }, "ol-mapbox-style": { - "version": "9.7.0", - "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.7.0.tgz", - "integrity": "sha512-YX3u8FBJHsRHaoGxmd724Mp5WPTuV7wLQW6zZhcihMuInsSdCX1EiZfU+8IAL7jG0pbgl5YgC0aWE/MXJcUXxg==", + "version": "10.6.0", + "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-10.6.0.tgz", + "integrity": "sha512-s86QhCoyyKVRsYkvPzzdWd///bhYh3onWrBq4lNXnCd9G/hS6AoK023kn4zlDESVlTBDTWLz8vhOistp0M3TXA==", "requires": { "@mapbox/mapbox-gl-style-spec": "^13.23.1", - "mapbox-to-css-font": "^2.4.1" + "mapbox-to-css-font": "^2.4.1", + "ol": "^7.3.0" } }, "on-finished": { diff --git a/package.json b/package.json index 5709e5a6e..ad8a0cb4c 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,7 @@ "fast-text-encoding": "^1.0.4", "file-saver": "^2.0.2", "flexsearch": "0.7.21", + "geostyler-openlayers-parser": "^4.2.1", "hammerjs": "^2.0.8", "html2canvas": "^1.4.1", "jspdf": "^2.5.1", @@ -107,9 +108,9 @@ "@angular-eslint/eslint-plugin-template": "14.1.2", "@angular-eslint/schematics": "14.1.2", "@angular-eslint/template-parser": "14.1.2", - "@angular/platform-browser-dynamic": "^14.3.0", "@angular/cli": "^14.2.10", "@angular/compiler-cli": "^14.3.0", + "@angular/platform-browser-dynamic": "^14.3.0", "@babel/core": "^7.18.10", "@babel/preset-env": "^7.18.10", "@compodoc/compodoc": "^1.1.19", diff --git a/src/app/pages/portal/portal.component.ts b/src/app/pages/portal/portal.component.ts index 93486f9ee..c19879c73 100644 --- a/src/app/pages/portal/portal.component.ts +++ b/src/app/pages/portal/portal.component.ts @@ -74,9 +74,12 @@ import { MapExtent, moveToOlFeatures, FeatureMotion, - ConfigFileToGeoDBService + ConfigFileToGeoDBService, + FeatureDataSource } from '@igo2/geo'; +import * as olGeom from 'ol/geom'; + import { ToolState, MapState, @@ -101,8 +104,9 @@ import { HttpClient, HttpParams } from '@angular/common/http'; import { WelcomeWindowComponent } from './welcome-window/welcome-window.component'; import { WelcomeWindowService } from './welcome-window/welcome-window.service'; import { MatPaginator } from '@angular/material/paginator'; -import { ObjectUtils } from '@igo2/utils'; +import { ObjectUtils, uuid } from '@igo2/utils'; import olFormatGeoJSON from 'ol/format/GeoJSON'; +import { KEY_FORMAT_JWK } from '@azure/msal-browser/dist/utils/BrowserConstants'; @Component({ selector: 'app-portal', @@ -394,6 +398,16 @@ export class PortalComponent implements OnInit, OnDestroy { title: 'Change style', handler: () => this.changeStyle() }, + { + id: 'Change new points style', + title: 'Change new points style', + handler:() => this.changePointsStyle() + }, + { + id: 'addLayer', + title: 'addLayer Point', + handler: () => this.addLayerWithPoint(this.contextMenuCoord) + }, { id: 'coordinates', title: 'coordinates', @@ -649,6 +663,38 @@ export class PortalComponent implements OnInit, OnDestroy { this.sidenavMediaAndOrientation$$.unsubscribe(); } + changePointsStyle() { + const lastLayer = this.map.getLayerById('layerWithPoints'); + + const pointGeoStyle: any = { + "name": "Basic star fill", + "rules": [ + { + "name": "Rule 2", + "symbolizers": [ + { + "kind": "Mark", + "wellKnownName": "star", + "color": "#ff0000", + "radius": 15 + } + ] + } + ] + }; + + const olParser2 = new OpenLayersParser; + olParser2.writeStyle(pointGeoStyle) + .then((output) => { + console.log("output", output); + (lastLayer.ol as any).setStyle(output.output) + console.log("output", output.output) + }) + .catch(error => console.log(error)); + console.log("lastLayer", lastLayer) + + } + changeStyle() { const lastLayer = this.map.layers .filter(l => l.showInLayerList) @@ -662,8 +708,10 @@ export class PortalComponent implements OnInit, OnDestroy { "symbolizers": [ { "kind": "Mark", - "wellKnownName": "circle", + "wellKnownName": "triangle", "color": "#ff8000", + "strokeColor": "#000000", + "rotate": 90, "radius": 30 }, { @@ -677,15 +725,16 @@ export class PortalComponent implements OnInit, OnDestroy { } ] }; + const olParser = new OpenLayersParser(); olParser.writeStyle(geoStylerStyle) .then((output) => { - console.log(output); + console.log("output", output); (lastLayer.ol as any).setStyle(output.output) - console.log(output.output) + console.log("output", output.output) }) .catch(error => console.log(error)); - console.log(lastLayer) + console.log("lastLayer", lastLayer) } /** @@ -957,6 +1006,29 @@ export class PortalComponent implements OnInit, OnDestroy { coord.map((c) => c.toFixed(6)).join(', ') : coord.reverse().map((c) => c.toFixed(6)).join(', '); } + addLayerWithPoint(coord: [number, number]) { + let layer = this.map.getLayerById('layerWithPoints') as VectorLayer; + if (!layer) { + layer = new VectorLayer({ + title: 'Layer de points créé afin de changer le style.', + isIgoInternalLayer: true, + id: `layerWithPoints`, + zIndex: 200, + source: new FeatureDataSource(), + igoStyle: undefined, + showInLayerList: true, + exportable: true, + browsable: false, + workspace: { enabled: true } + }); + this.map.addLayer(layer); + } + const geometry4326 = new olGeom.Point(coord); + const geometryMapProjection = geometry4326.transform('EPSG:4326',this.map.projection); + const feature = new olFeature({ id: uuid(), geometry: geometryMapProjection }); + layer.dataSource.ol.addFeature(feature) + } + updateMapBrowserClass() { const header = this.queryState.store.entities$.value.length > 0; if (this.hasExpansionPanel && this.workspaceState.workspaceEnabled$.value) { diff --git a/src/contexts/_geostylerStyles.json b/src/contexts/_geostylerStyles.json index 34ae10c77..21adf46f2 100644 --- a/src/contexts/_geostylerStyles.json +++ b/src/contexts/_geostylerStyles.json @@ -1,89 +1,102 @@ { - "uri": "geostylerStyles", - "base": "_base", - "layers": [ - { - "title": "World, Geostyler definition's based", - "zIndex": 10, - "id": "gs-style", - "sourceOptions": { - "queryable": false, - "type": "mvt", - "url": "https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countries@EPSG:900913@pbf/{z}/{x}/{-y}.pbf" - }, - "igoStyle": { - "geoStyler": { - "name": "GeoStyler Test", - "symbolizers":[ - { - "kind": "Mark", - "color": "#ff0000", - "width": 5 - } - ], - "scaleDenominator": { - "min": 50, - "max": 200 + "uri": "geostylerStyles", + "base": "_base", + "layers": [ + { + "title": "World, Geostyler definition's based", + "zIndex": 10, + "id": "gs-style", + "sourceOptions": { + "queryable": false, + "type": "mvt", + "url": "https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countries@EPSG:900913@pbf/{z}/{x}/{-y}.pbf" + }, + "igoStyle": { + "geoStylerStyle": { + "name": "GeoStyler Test", + "symbolizers":[ + { + "kind": "Mark", + "color": "#ff0000", + "width": 5 } + ], + "scaleDenominator": { + "min": 50, + "max": 200 } } - }, - { - "title": "WFS - Geostyler", - "visible": true, - "sourceOptions": { - "type": "wfs", - "url": "https://ws.mapserver.transports.gouv.qc.ca/swtq", - "queryable": true, - "queryTitle": "desclocal", - "params": { - "featureTypes": "telephone_urg", - "fieldNameGeometry": "geometry", - "maxFeatures": 5001, - "outputFormat": "geojson" - }, + } + }, + { + "title": "WFS - Geostyler", + "visible": true, + "sourceOptions": { + "type": "wfs", + "url": "https://ws.mapserver.transports.gouv.qc.ca/swtq", + "queryable": true, + "queryTitle": "desclocal", + "params": { + "featureTypes": "telephone_urg", + "fieldNameGeometry": "geometry", + "maxFeatures": 5001, + "outputFormat": "geojson" + }, - "ogcFilters": { - "enabled": true, - "editable": true, - "allowedOperatorsType": "all", - "filters": { - "operator": "PropertyIsEqualTo", - "propertyName": "orgresp", - "expression": "Bell" - }, - "pushButtons": { - "groups": [ - {"title": "Group 1 Title","name": "1","ids": ["id1","id2"]} - ], - "bundles": [ - { - "id": "id1", - "logical": "Or", - "selectors": [ - { - "title": "Bell", - "enabled": true, - "filters": { - "operator": "PropertyIsEqualTo", - "propertyName": "orgresp", - "expression": "Bell" - } - }, - { - "title": "MTQ", - "enabled": false, - "filters": { - "operator": "PropertyIsEqualTo", - "propertyName": "orgresp", - "expression": "MTQ" - } + "ogcFilters": { + "enabled": true, + "editable": true, + "allowedOperatorsType": "all", + "filters": { + "operator": "PropertyIsEqualTo", + "propertyName": "orgresp", + "expression": "Bell" + }, + "pushButtons": { + "groups": [ + {"title": "Group 1 Title","name": "1","ids": ["id1","id2"]} + ], + "bundles": [ + { + "id": "id1", + "logical": "Or", + "selectors": [ + { + "title": "Bell", + "enabled": true, + "filters": { + "operator": "PropertyIsEqualTo", + "propertyName": "orgresp", + "expression": "Bell" + } + }, + { + "title": "MTQ", + "enabled": false, + "filters": { + "operator": "PropertyIsEqualTo", + "propertyName": "orgresp", + "expression": "MTQ" } - ] - } - ] - }} + } + ] + } + ] + }} + }, + "igoStyle": { + "geoStylerStyle": { + "name": "WFS GeoStyler Test", + "symbolizers":[ + { + "kind": "Mark", + "wellKnownName": "circle", + "color": "#fc0000", + "radius": 92 + } + ] } } - ] - } \ No newline at end of file + } + ] + } \ No newline at end of file