X-Git-Url: https://git.argeo.org/?a=blobdiff_plain;f=js%2Fsrc%2Fgeo%2FOpenLayersMapPart.js;h=293b6995c8f086b278bc0f8846da4c8c047ba5e2;hb=efda92d76cd7ccce3925763bf95f68d7927ac5c7;hp=e1d8642c0fd99a8bd85098b1706c2e6af957cb26;hpb=7328e106f7523d006b9516651dc9f6dd5475b035;p=gpl%2Fargeo-suite.git diff --git a/js/src/geo/OpenLayersMapPart.js b/js/src/geo/OpenLayersMapPart.js index e1d8642..293b699 100644 --- a/js/src/geo/OpenLayersMapPart.js +++ b/js/src/geo/OpenLayersMapPart.js @@ -4,8 +4,6 @@ import Map from 'ol/Map.js'; import View from 'ol/View.js'; -import OSM from 'ol/source/OSM.js'; -import TileLayer from 'ol/layer/Tile.js'; import { fromLonLat, getPointResolution } from 'ol/proj.js'; import VectorSource from 'ol/source/Vector.js'; import Feature from 'ol/Feature.js'; @@ -20,13 +18,15 @@ import { Style, Icon } from 'ol/style.js'; import * as SLDReader from '@nieuwlandgeo/sldreader'; import MapPart from './MapPart.js'; -import { SentinelCloudless } from './OpenLayerTileSources.js'; /** OpenLayers implementation of MapPart. */ export default class OpenLayersMapPart extends MapPart { /** The OpenLayers Map. */ #map; + /** Styled layer descriptor */ + #sld; + /** Externally added callback functions. */ callbacks = {}; @@ -35,17 +35,15 @@ export default class OpenLayersMapPart extends MapPart { super(mapName); this.#map = new Map({ layers: [ - // new TileLayer({ - // source: new SentinelCloudless(), - // }), - new TileLayer({ - source: new OSM(), - opacity: 0.4, - transition: 0, - }), ], + // view: new View({ + // projection: 'EPSG:4326', + // center: [0, 0], + // zoom: 2, + // }), target: this.getMapName(), }); + //this.#map.getView().set('projection', 'EPSG:4326', true); } /* GEOGRAPHICAL METHODS */ @@ -54,8 +52,8 @@ export default class OpenLayersMapPart extends MapPart { this.#map.getView().setZoom(zoom); } - setCenter(lng, lat) { - this.#map.getView().setCenter(fromLonLat([lng, lat])); + setCenter(lat, lon) { + this.#map.getView().setCenter(fromLonLat([lon, lat])); } addPoint(lng, lat, style) { @@ -95,6 +93,28 @@ export default class OpenLayersMapPart extends MapPart { this.#map.addLayer(vectorLayer); } + addLayer(js) { + const func = new Function(js); + const layer = (func)(); + this.#map.addLayer(layer); + } + + getMap() { + return this.#map; + } + + getLayerByName(name) { + let layers = this.#map.getLayers(); + for (let i = 0; i < layers.getLength(); i++) { + let layer = layers.item(i); + let n = layer.get('name'); + if (n !== undefined) { + if (name === n) + return layer; + } + } + return undefined; + } /* CALLBACKS */ enableFeatureSingleClick() { @@ -198,6 +218,40 @@ export default class OpenLayersMapPart extends MapPart { // // SLD STYLING // + + setSld(xml) { + this.#sld = SLDReader.Reader(xml); + } + + /** Get a FeatureTypeStyle (https://nieuwlandgeo.github.io/SLDReader/api.html#FeatureTypeStyle). */ + getFeatureTypeStyle(styledLayerName, styleName) { + const sldLayer = SLDReader.getLayer(this.#sld, styledLayerName); + const style = styleName === undefined ? SLDReader.getStyle(sldLayer) : SLDReader.getStyle(sldLayer, styleName); + // OpenLayers can only use one definition + const featureTypeStyle = style.featuretypestyles[0]; + return featureTypeStyle; + } + + applyStyle(layerName, styledLayerName, styleName) { + const layer = this.getLayerByName(layerName); + const featureTypeStyle = this.getFeatureTypeStyle(styledLayerName, styleName); + const viewProjection = this.#map.getView().getProjection(); + const olStyleFunction = SLDReader.createOlStyleFunction(featureTypeStyle, { + // Use the convertResolution option to calculate a more accurate resolution. + convertResolution: viewResolution => { + const viewCenter = this.#map.getView().getCenter(); + return getPointResolution(viewProjection, viewResolution, viewCenter); + }, + // If you use point icons with an ExternalGraphic, you have to use imageLoadCallback + // to update the vector layer when an image finishes loading. + // If you do not do this, the image will only be visible after next layer pan/zoom. + imageLoadedCallback: () => { + layer.changed(); + }, + }); + layer.setStyle(olStyleFunction); + } + #applySLD(vectorLayer, text) { const sldObject = SLDReader.Reader(text); const sldLayer = SLDReader.getLayer(sldObject); @@ -220,4 +274,4 @@ export default class OpenLayersMapPart extends MapPart { }); vectorLayer.setStyle(olStyleFunction); } -} \ No newline at end of file +}