X-Git-Url: https://git.argeo.org/?a=blobdiff_plain;f=js%2Fsrc%2Fgeo%2FOpenLayersMapPart.js;h=4be5987b831f7d7617e9511b2f21449c0d1f805f;hb=720e78163faf96ccc966d155a516487af52ccec2;hp=71b9a17b0574dd1539e1eb00c4cc5fa7823598c6;hpb=b384a9cbe93b83b3aa94fe46cf2ff0a929f0332c;p=gpl%2Fargeo-suite.git diff --git a/js/src/geo/OpenLayersMapPart.js b/js/src/geo/OpenLayersMapPart.js index 71b9a17..4be5987 100644 --- a/js/src/geo/OpenLayersMapPart.js +++ b/js/src/geo/OpenLayersMapPart.js @@ -2,32 +2,42 @@ * @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, transformExtent } from 'ol/proj.js'; -import VectorSource from 'ol/source/Vector.js'; +import { fromLonLat, getPointResolution } from 'ol/proj.js'; import Feature from 'ol/Feature.js'; import { Point } from 'ol/geom.js'; +import { transformExtent } from 'ol/proj.js'; + import VectorLayer from 'ol/layer/Vector.js'; +import TileLayer from 'ol/layer/Tile.js'; + +import VectorSource from 'ol/source/Vector.js'; import GeoJSON from 'ol/format/GeoJSON.js'; import GPX from 'ol/format/GPX.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 View from 'ol/View.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 { bbox } from 'ol/loadingstrategy'; - /** OpenLayers implementation of MapPart. */ export default class OpenLayersMapPart extends MapPart { /** The OpenLayers Map. */ #map; + #overviewMap; + + select; + /** Styled layer descriptor */ #sld; @@ -37,16 +47,26 @@ export default class OpenLayersMapPart extends MapPart { /** Constructor taking the mapName as an argument. */ constructor(mapName) { super(mapName); + this.#overviewMap = new OverviewMap({ + layers: [ + new TileLayer({ + source: new OSM(), + }), + ], + }); + 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: [ - // new TileLayer({ - // source: new SentinelCloudless(), - // }), - // new TileLayer({ - // source: new OSM(), - // opacity: 0.4, - // transition: 0, - // }), ], // view: new View({ // projection: 'EPSG:4326', @@ -55,6 +75,7 @@ export default class OpenLayersMapPart extends MapPart { // }), target: this.getMapName(), }); + this.#map.addInteraction(this.select); //this.#map.getView().set('projection', 'EPSG:4326', true); } @@ -64,8 +85,13 @@ 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])); + } + + fit(extent, options) { + var transformed = transformExtent(extent, 'EPSG:4326', this.#map.getView().getProjection()); + this.#map.getView().fit(transformed, options); } addPoint(lng, lat, style) { @@ -140,7 +166,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')); }); } @@ -152,7 +178,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')); } }); } @@ -196,7 +222,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); @@ -216,6 +242,44 @@ export default class OpenLayersMapPart extends MapPart { return 'map'; } + 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); + }); + } + // // STATIC FOR EXTENSION // @@ -286,44 +350,4 @@ export default class OpenLayersMapPart extends MapPart { }); vectorLayer.setStyle(olStyleFunction); } - - // - // BBOX - // - applyBboxStrategy(layerName) { - const layer = this.getLayerByName(layerName); - const vectorSource = layer.getSource(); - const baseUrl = vectorSource.getUrl(); - if (typeof baseUrl === 'function') - throw new Error('A strategy was already applied to layer ' + layerName); - - const loadFunction = function(extent, resolution, projection, success, failure) { - - const proj = projection.getCode(); - var bbox = transformExtent(extent, proj, 'EPSG:4326'); - - const url = baseUrl + '&' + - 'bbox=' + bbox.join(',') ; -// 'bbox=' + extent.join(',') + ',' + proj; - const xhr = new XMLHttpRequest(); - xhr.open('GET', url); - const onError = function() { - vectorSource.removeLoadedExtent(extent); - failure(); - } - xhr.onerror = onError; - xhr.onload = function() { - if (xhr.status == 200) { - const features = vectorSource.getFormat().readFeatures(xhr.responseText); - vectorSource.addFeatures(features); - success(features); - } else { - onError(); - } - } - xhr.send(); - } - - vectorSource.setLoader(loadFunction); - } }