X-Git-Url: https://git.argeo.org/?a=blobdiff_plain;f=js%2Fsrc%2Fgeo%2FOpenLayersMapPart.js;h=a31bc214c0b521bfb68219b47051ab4bc80c5c75;hb=362c92fd2bdb555e1d691b661f0ee69c513be5a8;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..a31bc21 100644 --- a/js/src/geo/OpenLayersMapPart.js +++ b/js/src/geo/OpenLayersMapPart.js @@ -2,100 +2,107 @@ * @module OpenLayersMapPart */ -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'; -import { Point } from 'ol/geom.js'; -import VectorLayer from 'ol/layer/Vector.js'; -import GeoJSON from 'ol/format/GeoJSON.js'; -import GPX from 'ol/format/GPX.js'; +import { transformExtent } from 'ol/proj.js'; + +import TileLayer from 'ol/layer/Tile.js'; + +import OSM from 'ol/source/OSM.js'; +import { isEmpty } from 'ol/extent'; + import Select from 'ol/interaction/Select.js'; import Overlay from 'ol/Overlay.js'; -import { Style, Icon } from 'ol/style.js'; + +import Map from 'ol/Map.js'; + +import { OverviewMap, ScaleLine, defaults as defaultControls } from 'ol/control.js'; +import { easeOut } from 'ol/easing'; 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; + /** The overview map */ + #overviewMap; + + /** Styled layer descriptor */ + #sld; + + /** The select interaction */ + select; + /** Externally added callback functions. */ callbacks = {}; /** Constructor taking the mapName as an argument. */ constructor(mapName) { super(mapName); - this.#map = new Map({ + this.#overviewMap = new OverviewMap({ layers: [ - // new TileLayer({ - // source: new SentinelCloudless(), - // }), new TileLayer({ source: new OSM(), - opacity: 0.4, - transition: 0, }), ], + }); + this.select = new Select(); + this.#map = new Map({ + controls: defaultControls({ + attribution: false, + rotate: false, + }).extend([this.#overviewMap, new ScaleLine({ + bar: false, + steps: 2, + text: false, + minWidth: 150, + maxWidth: 200, + })]), + layers: [ + ], + // view: new View({ + // projection: 'EPSG:4326', + // center: [0, 0], + // zoom: 2, + // }), target: this.getMapName(), }); + this.#map.addInteraction(this.select); + //this.#map.getView().set('projection', 'EPSG:4326', true); } /* GEOGRAPHICAL METHODS */ - setZoom(zoom) { - this.#map.getView().setZoom(zoom); + setCenter(lat, lon) { + this.#map.getView().setCenter(fromLonLat([lon, lat])); } - setCenter(lng, lat) { - this.#map.getView().setCenter(fromLonLat([lng, lat])); + fit(extent, options) { + var transformed = transformExtent(extent, 'EPSG:4326', this.#map.getView().getProjection()); + this.#map.getView().fit(transformed, options); } - addPoint(lng, lat, style) { - let vectorSource = new VectorSource({ - features: [new Feature({ - geometry: new Point(fromLonLat([lng, lat])) - })] - }); - this.#map.addLayer(new VectorLayer({ - source: vectorSource, - style: style, - })); + /** Accessors */ + getMap() { + return this.#map; } - addUrlLayer(url, format, style, sld) { - let featureFormat; - if (format === 'GEOJSON') { - featureFormat = new GeoJSON(); - } - else if (format === 'GPX') { - featureFormat = new GPX(); - } else { - throw new Error("Unsupported format " + format); - } - const vectorSource = new VectorSource({ - url: url, - format: featureFormat, - }); - const vectorLayer = new VectorLayer({ - source: vectorSource, - }); - if (sld) { - this.#applySLD(vectorLayer, style); - } else if (style !== null) { - vectorLayer.setStyle(style); + 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; + } } - this.#map.addLayer(vectorLayer); + return undefined; } - /* CALLBACKS */ enableFeatureSingleClick() { // we cannot use 'this' in the function provided to OpenLayers @@ -108,7 +115,7 @@ export default class OpenLayersMapPart extends MapPart { return true; }); if (feature !== null) - mapPart.callbacks['onFeatureSingleClick'](feature.get('path')); + mapPart.callbacks['onFeatureSingleClick'](feature.get('cr:path')); }); } @@ -120,7 +127,7 @@ export default class OpenLayersMapPart extends MapPart { select.on('select', function(e) { if (e.selected.length > 0) { let feature = e.selected[0]; - mapPart.callbacks['onFeatureSelected'](feature.get('path')); + mapPart.callbacks['onFeatureSelected'](feature.get('cr:path')); } }); } @@ -164,7 +171,7 @@ export default class OpenLayersMapPart extends MapPart { return; } const coordinate = e.coordinate; - const path = selected.get('path'); + const path = selected.get('cr:path'); if (path === null) return true; const res = mapPart.callbacks['onFeaturePopup'](path); @@ -177,6 +184,44 @@ export default class OpenLayersMapPart extends MapPart { }); } + selectFeatures(layerName, featureIds) { + // we cannot use 'this' in the function provided to OpenLayers + let mapPart = this; + this.select.getFeatures().clear(); + const layer = this.getLayerByName(layerName); + const source = layer.getSource(); + for (const featureId of featureIds) { + let feature = source.getFeatureById(featureId); + if (feature === null) { + source.on('featuresloadend', function(e) { + feature = source.getFeatureById(featureId); + if (feature !== null) + mapPart.select.getFeatures().push(feature); + }); + } else { + this.select.getFeatures().push(feature); + } + } + } + + fitToLayer(layerName) { + // we cannot use 'this' in the function provided to OpenLayers + let mapPart = this; + const layer = this.getLayerByName(layerName); + const source = layer.getSource(); + const extent = source.getExtent(); + const options = { + duration: 1000, + padding: [20, 20, 20, 20], + easing: easeOut, + }; + if (!isEmpty(extent)) + this.#map.getView().fit(source.getExtent(), options); + source.on('featuresloadend', function(e) { + mapPart.getMap().getView().fit(source.getExtent(), options); + }); + } + // // HTML // @@ -184,6 +229,7 @@ export default class OpenLayersMapPart extends MapPart { return 'map'; } + // // STATIC FOR EXTENSION // @@ -198,6 +244,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 +300,4 @@ export default class OpenLayersMapPart extends MapPart { }); vectorLayer.setStyle(olStyleFunction); } -} \ No newline at end of file +}