From 701393be52354cf7905b8fcaac79123c7e76e294 Mon Sep 17 00:00:00 2001 From: tylercchase Date: Thu, 21 Nov 2024 13:43:37 -0500 Subject: [PATCH] feat: test recolor --- package-lock.json | 179 ++++++++++------------- package.json | 2 +- src/app/services/browse-map.service.ts | 4 +- src/app/services/map/map.service.ts | 28 ++-- src/app/services/map/views/antarctic.ts | 1 + src/app/services/map/views/arctic.ts | 1 + src/app/services/map/views/equatorial.ts | 1 + 7 files changed, 99 insertions(+), 117 deletions(-) diff --git a/package-lock.json b/package-lock.json index 69ee467de..f9a62933f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -65,7 +65,7 @@ "ngx-toastr": "^17.0.2", "nouislider": "^15.6.1", "npm": "^8.11.0", - "ol": "^7.4.0", + "ol": "^10.2.1", "popper.js": "^1.16.1", "postcss": "^8.3.4", "prismjs": "^1.28.0", @@ -3802,45 +3802,6 @@ "node": ">= 0.4" } }, - "node_modules/@mapbox/jsonlint-lines-primitives": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz", - "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==", - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/@mapbox/mapbox-gl-style-spec": { - "version": "13.28.0", - "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.28.0.tgz", - "integrity": "sha512-B8xM7Fp1nh5kejfIl4SWeY0gtIeewbuRencqO3cJDrCHZpaPg7uY+V8abuR+esMeuOjRl5cLhVTP40v+1ywxbg==", - "dependencies": { - "@mapbox/jsonlint-lines-primitives": "~2.0.2", - "@mapbox/point-geometry": "^0.1.0", - "@mapbox/unitbezier": "^0.0.0", - "csscolorparser": "~1.0.2", - "json-stringify-pretty-compact": "^2.0.0", - "minimist": "^1.2.6", - "rw": "^1.3.3", - "sort-object": "^0.3.2" - }, - "bin": { - "gl-style-composite": "bin/gl-style-composite.js", - "gl-style-format": "bin/gl-style-format.js", - "gl-style-migrate": "bin/gl-style-migrate.js", - "gl-style-validate": "bin/gl-style-validate.js" - } - }, - "node_modules/@mapbox/point-geometry": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz", - "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==" - }, - "node_modules/@mapbox/unitbezier": { - "version": "0.0.0", - "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz", - "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==" - }, "node_modules/@material/animation": { "version": "15.0.0-canary.7f224ddd4.0", "resolved": "https://registry.npmjs.org/@material/animation/-/animation-15.0.0-canary.7f224ddd4.0.tgz", @@ -6067,6 +6028,12 @@ "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz", "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==" }, + "node_modules/@types/rbush": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/rbush/-/rbush-3.0.3.tgz", + "integrity": "sha512-lX55lR0iYCgapxD3IrgujpQA1zDxwZI5qMRelKvmKAsSMplFVr7wmMpG7/6+Op2tjrgEex8o3vjg8CRDrRNYxg==", + "license": "MIT" + }, "node_modules/@types/retry": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", @@ -8287,6 +8254,40 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, + "node_modules/color-parse": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-2.0.2.tgz", + "integrity": "sha512-eCtOz5w5ttWIUcaKLiktF+DxZO1R9KLNY/xhbV6CkhM7sR3GhVghmt6X6yOnzeaM24po+Z9/S1apbXMwA3Iepw==", + "license": "MIT", + "dependencies": { + "color-name": "^2.0.0" + } + }, + "node_modules/color-parse/node_modules/color-name": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-2.0.0.tgz", + "integrity": "sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow==", + "license": "MIT", + "engines": { + "node": ">=12.20" + } + }, + "node_modules/color-rgba": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/color-rgba/-/color-rgba-3.0.0.tgz", + "integrity": "sha512-PPwZYkEY3M2THEHHV6Y95sGUie77S7X8v+h1r6LSAPF3/LL2xJ8duUXSrkic31Nzc4odPwHgUbiX/XuTYzQHQg==", + "license": "MIT", + "dependencies": { + "color-parse": "^2.0.0", + "color-space": "^2.0.0" + } + }, + "node_modules/color-space": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-space/-/color-space-2.0.1.tgz", + "integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA==", + "license": "MIT" + }, "node_modules/colorette": { "version": "2.0.20", "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz", @@ -8841,11 +8842,6 @@ "url": "https://github.com/sponsors/fb55" } }, - "node_modules/csscolorparser": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz", - "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==" - }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -9646,9 +9642,10 @@ "dev": true }, "node_modules/earcut": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz", - "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==" + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.0.tgz", + "integrity": "sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg==", + "license": "ISC" }, "node_modules/eastasianwidth": { "version": "0.2.0", @@ -13495,11 +13492,6 @@ "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "dev": true }, - "node_modules/json-stringify-pretty-compact": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz", - "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ==" - }, "node_modules/json-stringify-safe": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", @@ -14202,11 +14194,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/mapbox-to-css-font": { - "version": "2.4.4", - "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.4.tgz", - "integrity": "sha512-X1dtuTuH2D1MRMuductMZCLV/fy9EoIgqW/lmu8vQSAhEatx/tdFebkYT3TVhdTwqFDHbLEgQBD3IKA4KI7aoQ==" - }, "node_modules/mathml-tag-names": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", @@ -18301,29 +18288,37 @@ "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==" }, "node_modules/ol": { - "version": "7.5.2", - "resolved": "https://registry.npmjs.org/ol/-/ol-7.5.2.tgz", - "integrity": "sha512-HJbb3CxXrksM6ct367LsP3N+uh+iBBMdP3DeGGipdV9YAYTP0vTJzqGnoqQ6C2IW4qf8krw9yuyQbc9fjOIaOQ==", + "version": "10.2.1", + "resolved": "https://registry.npmjs.org/ol/-/ol-10.2.1.tgz", + "integrity": "sha512-2bB/y2vEnmzjqynP0NA7Cp8k86No3Psn63Dueicep3E3i09axWRVIG5IS/bylEAGfWQx0QXD/uljkyFoY60Wig==", + "license": "BSD-2-Clause", "dependencies": { - "earcut": "^2.2.3", + "@types/rbush": "3.0.3", + "color-rgba": "^3.0.0", + "color-space": "^2.0.1", + "earcut": "^3.0.0", "geotiff": "^2.0.7", - "ol-mapbox-style": "^10.1.0", - "pbf": "3.2.1", - "rbush": "^3.0.1" + "pbf": "4.0.1", + "rbush": "^4.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/openlayers" } }, - "node_modules/ol-mapbox-style": { - "version": "10.7.0", - "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-10.7.0.tgz", - "integrity": "sha512-S/UdYBuOjrotcR95Iq9AejGYbifKeZE85D9VtH11ryJLQPTZXZSW1J5bIXcr4AlAH6tyjPPHTK34AdkwB32Myw==", + "node_modules/ol/node_modules/quickselect": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz", + "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==", + "license": "ISC" + }, + "node_modules/ol/node_modules/rbush": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/rbush/-/rbush-4.0.1.tgz", + "integrity": "sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==", + "license": "MIT", "dependencies": { - "@mapbox/mapbox-gl-style-spec": "^13.23.1", - "mapbox-to-css-font": "^2.4.1", - "ol": "^7.3.0" + "quickselect": "^3.0.0" } }, "node_modules/on-finished": { @@ -18804,11 +18799,11 @@ } }, "node_modules/pbf": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz", - "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz", + "integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==", + "license": "BSD-3-Clause", "dependencies": { - "ieee754": "^1.1.12", "resolve-protobuf-schema": "^2.1.0" }, "bin": { @@ -19619,7 +19614,8 @@ "node_modules/protocol-buffers-schema": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz", - "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==" + "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==", + "license": "MIT" }, "node_modules/protractor": { "version": "7.0.0", @@ -20647,6 +20643,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz", "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==", + "license": "MIT", "dependencies": { "protocol-buffers-schema": "^3.3.1" } @@ -21584,34 +21581,6 @@ "node": ">= 14" } }, - "node_modules/sort-asc": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz", - "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/sort-desc": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz", - "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/sort-object": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz", - "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==", - "dependencies": { - "sort-asc": "^0.1.0", - "sort-desc": "^0.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/source-map": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", diff --git a/package.json b/package.json index ce3252e04..9a93186ee 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ "ngx-toastr": "^17.0.2", "nouislider": "^15.6.1", "npm": "^8.11.0", - "ol": "^7.4.0", + "ol": "^10.2.1", "popper.js": "^1.16.1", "postcss": "^8.3.4", "prismjs": "^1.28.0", diff --git a/src/app/services/browse-map.service.ts b/src/app/services/browse-map.service.ts index a7886a402..5be234535 100644 --- a/src/app/services/browse-map.service.ts +++ b/src/app/services/browse-map.service.ts @@ -5,7 +5,7 @@ import View from 'ol/View.js'; import ImageLayer from 'ol/layer/Image'; import * as polygonStyle from './map/polygon.style'; import Static from 'ol/source/ImageStatic.js'; -import { XYZ } from 'ol/source'; +import XYZ from 'ol/source/XYZ'; import { mapOptions } from '@models'; import TileLayer from 'ol/layer/WebGLTile.js'; import { Layer, Vector } from 'ol/layer'; @@ -62,7 +62,7 @@ export class BrowseMapService { wrapX: mapOptions.wrapX, tileSize: [512, 512] }); - + //@ts-ignore const map_layer = new TileLayer({ source: mapSource }); if (!this.map) { diff --git a/src/app/services/map/map.service.ts b/src/app/services/map/map.service.ts index 4da700d9c..852202d27 100644 --- a/src/app/services/map/map.service.ts +++ b/src/app/services/map/map.service.ts @@ -5,7 +5,7 @@ import { first, map, sampleTime, tap } from 'rxjs/operators'; import { Collection, Feature, Map, View } from 'ol'; import { Layer, Vector as VectorLayer } from 'ol/layer'; -import { Vector as VectorSource, XYZ } from 'ol/source'; +import { ImageTile, Vector as VectorSource } from 'ol/source'; import * as proj from 'ol/proj'; import Point from 'ol/geom/Point'; import { OverviewMap, ScaleLine } from 'ol/control'; @@ -46,6 +46,8 @@ import { SetGeocode } from '@store/filters'; import { Extent } from 'ol/extent'; import { MultiPolygon } from 'ol/geom'; import GeoJSON from 'ol/format/GeoJSON.js'; +import RasterSource from 'ol/source/Raster'; +import ImageLayer from 'ol/layer/Image'; @Injectable({ providedIn: 'root' @@ -73,7 +75,7 @@ export class MapService { private localBrowseImageURL: string; - private displacementOverview: TileLayer; + private displacementOverview: ImageLayer; public displacementOverview$ = new BehaviorSubject(null); private priorityOverview: VectorLayer; @@ -763,15 +765,23 @@ export class MapService { this.displacementOverview = null; } - const overview_source = new XYZ({ - 'url': `${base_url}/{z}/{x}/{y}.png`, - wrapX: models.mapOptions.wrapX, - tileSize: [256, 256] + const overview_source = new RasterSource({ + sources: [ + new ImageTile({ + 'url': `${base_url}/{z}/{x}/{y}.png`, + tileSize: 256, + maxZoom: 12 + }) + ], + operation: function (pixels, _data) { + let test = pixels[0]; + test[1] = 255; + return test; + }, }); - - this.displacementOverview = new TileLayer({ + this.displacementOverview = new ImageLayer({ 'source': overview_source, - 'extent': response['extent'] + 'extent': response['extent'], }); this.map.addLayer(this.displacementOverview); diff --git a/src/app/services/map/views/antarctic.ts b/src/app/services/map/views/antarctic.ts index c42827d4e..19d4bd01c 100644 --- a/src/app/services/map/views/antarctic.ts +++ b/src/app/services/map/views/antarctic.ts @@ -40,6 +40,7 @@ export function antarctic(): MapView { const source = new WMTS(options); + //@ts-ignore const layer = new TileLayer({ source, extent }); const view = new View({ diff --git a/src/app/services/map/views/arctic.ts b/src/app/services/map/views/arctic.ts index c9206efeb..72d444a13 100644 --- a/src/app/services/map/views/arctic.ts +++ b/src/app/services/map/views/arctic.ts @@ -48,6 +48,7 @@ export function arctic(): MapView { }; const source = new WMTS(options); + //@ts-ignore const layer = new TileLayer({ source, extent }); diff --git a/src/app/services/map/views/equatorial.ts b/src/app/services/map/views/equatorial.ts index 9a737a59e..6ec7f8599 100644 --- a/src/app/services/map/views/equatorial.ts +++ b/src/app/services/map/views/equatorial.ts @@ -17,6 +17,7 @@ function equatorialView(url: string): MapView { tileSize: [512, 512] }); + //@ts-ignore const layer = new TileLayer({ source }); const lonFormatter = function(lon: number) {