X-Git-Url: http://git.argeo.org/?a=blobdiff_plain;f=js%2Fsrc%2Fgeo%2FOpenLayersMapPart.js;h=a31bc214c0b521bfb68219b47051ab4bc80c5c75;hb=362c92fd2bdb555e1d691b661f0ee69c513be5a8;hp=6fedd7a2a382f9f6d8b77de9cbfae761a96b72cb;hpb=6e13b9416a5fd1f5477eb7233f86d3eacbb88c55;p=gpl%2Fargeo-suite.git diff --git a/js/src/geo/OpenLayersMapPart.js b/js/src/geo/OpenLayersMapPart.js index 6fedd7a..a31bc21 100644 --- a/js/src/geo/OpenLayersMapPart.js +++ b/js/src/geo/OpenLayersMapPart.js @@ -3,25 +3,20 @@ */ 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'; @@ -32,13 +27,15 @@ export default class OpenLayersMapPart extends MapPart { /** The OpenLayers Map. */ #map; + /** The overview map */ #overviewMap; - select; - /** Styled layer descriptor */ #sld; + /** The select interaction */ + select; + /** Externally added callback functions. */ callbacks = {}; @@ -79,10 +76,6 @@ export default class OpenLayersMapPart extends MapPart { /* GEOGRAPHICAL METHODS */ - setZoom(zoom) { - this.#map.getView().setZoom(zoom); - } - setCenter(lat, lon) { this.#map.getView().setCenter(fromLonLat([lon, lat])); } @@ -92,49 +85,7 @@ export default class OpenLayersMapPart extends MapPart { 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, - })); - } - - 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); - } - this.#map.addLayer(vectorLayer); - } - - addLayer(js) { - const func = new Function(js); - const layer = (func)(); - this.#map.addLayer(layer); - } - + /** Accessors */ getMap() { return this.#map; } @@ -233,13 +184,6 @@ export default class OpenLayersMapPart extends MapPart { }); } - // - // HTML - // - getMapDivCssClass() { - return 'map'; - } - selectFeatures(layerName, featureIds) { // we cannot use 'this' in the function provided to OpenLayers let mapPart = this; @@ -260,6 +204,32 @@ export default class OpenLayersMapPart extends MapPart { } } + 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 + // + getMapDivCssClass() { + return 'map'; + } + + // // STATIC FOR EXTENSION //