org.argeo.app.geo.js/OpenLayersMapPart.js

   1 /** OpenLayers-based implementation.
   2  * @module OpenLayersMapPart
   3  */
   4
   5 import Map from 'ol/Map.js';
   6 import OSM from 'ol/source/OSM.js';
   7 import TileLayer from 'ol/layer/Tile.js';
   8 import { fromLonLat } from 'ol/proj.js';
   9 import VectorSource from 'ol/source/Vector.js';
  10 import Feature from 'ol/Feature.js';
  11 import { Point } from 'ol/geom.js';
  12 import VectorLayer from 'ol/layer/Vector.js';
  13 import GeoJSON from 'ol/format/GeoJSON.js';
  14 import GPX from 'ol/format/GPX.js';
  15 import Select from 'ol/interaction/Select.js';
  16
  17 import MapPart from './MapPart.js';
  18 import { SentinelCloudless } from './OpenLayerTileSources.js';
  19
  20 /** OpenLayers implementation of MapPart. */
  21 export default class OpenLayersMapPart extends MapPart {
  22         /** The OpenLayers Map. */
  23         #map;
  24         callbacks = {};
  25
  26         // Constructor
  27         constructor() {
  28                 super();
  29                 this.#map = new Map({
  30                         layers: [
  31                                 new TileLayer({
  32                                         source: new SentinelCloudless(),
  33                                 }),
  34                                 new TileLayer({
  35                                         source: new OSM(),
  36                                         opacity: 0.4,
  37                                         transition: 0,
  38                                 }),
  39                         ],
  40                         target: 'map',
  41                 });
  42         }
  43
  44         /* GEOGRAPHICAL METHODS */
  45
  46         setZoom(zoom) {
  47                 this.#map.getView().setZoom(zoom);
  48         }
  49
  50         setCenter(lng, lat) {
  51                 this.#map.getView().setCenter(fromLonLat([lng, lat]));
  52         }
  53
  54         addPoint(lng, lat, style) {
  55                 let vectorSource = new VectorSource({
  56                         features: [new Feature({
  57                                 geometry: new Point(fromLonLat([lng, lat]))
  58                         })]
  59                 });
  60                 this.#map.addLayer(new VectorLayer({ source: vectorSource }));
  61         }
  62
  63         addUrlLayer(url, format) {
  64                 let vectorSource;
  65                 if (format === 'GEOJSON') {
  66                         vectorSource = new VectorSource({ url: url, format: new GeoJSON() })
  67                 }
  68                 else if (format === 'GPX') {
  69                         vectorSource = new VectorSource({ url: url, format: new GPX() })
  70                 }
  71                 this.#map.addLayer(new VectorLayer({
  72                         source: vectorSource,
  73                 }));
  74         }
  75
  76         /* CALLBACKS */
  77         enableFeatureSingleClick() {
  78                 // we cannot use 'this' in the function provided to OpenLayers
  79                 let mapPart = this;
  80                 this.#map.on('singleclick', function(e) {
  81                         let feature = null;
  82                         // we chose only one
  83                         e.map.forEachFeatureAtPixel(e.pixel, function(f) {
  84                                 feature = f;
  85                         });
  86                         if (feature !== null)
  87                                 mapPart.callbacks['onFeatureSingleClick'](feature.get('path'));
  88                 });
  89         }
  90
  91         enableFeatureSelected() {
  92                 // we cannot use 'this' in the function provided to OpenLayers
  93                 let mapPart = this;
  94                 var select = new Select();
  95                 this.#map.addInteraction(select);
  96                 select.on('select', function(e) {
  97                         if (e.selected.length > 0) {
  98                                 let feature = e.selected[0];
  99                                 mapPart.callbacks['onFeatureSelected'](feature.get('path'));
 100                         }
 101                 });
 102         }
 103 }