X-Git-Url: https://git.argeo.org/?a=blobdiff_plain;f=org.argeo.app.geo.js%2Fsrc%2Forg.argeo.app.geo.js%2FOpenLayersMapPart.js;h=7c157eb19226a1716545aa4e11f09232060292fb;hb=9728ee7133bc787a1796670b7622d0cc4c62b5e0;hp=6284296f87492760383f0f614f5cb5b6afde7135;hpb=fc0e6e51c8167a19e76dbaf4fe60a13fe4f4215e;p=gpl%2Fargeo-suite.git diff --git a/org.argeo.app.geo.js/src/org.argeo.app.geo.js/OpenLayersMapPart.js b/org.argeo.app.geo.js/src/org.argeo.app.geo.js/OpenLayersMapPart.js index 6284296..7c157eb 100644 --- a/org.argeo.app.geo.js/src/org.argeo.app.geo.js/OpenLayersMapPart.js +++ b/org.argeo.app.geo.js/src/org.argeo.app.geo.js/OpenLayersMapPart.js @@ -5,10 +5,16 @@ import Map from 'ol/Map.js'; import OSM from 'ol/source/OSM.js'; import TileLayer from 'ol/layer/Tile.js'; -import View from 'ol/View.js'; -import { fromLonLat, toLonLat } from 'ol/proj.js'; +import { fromLonLat } 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 MapPart from './MapPart.js'; +import { SentinelCloudless } from './OpenLayerTileSources.js'; /** OpenLayers implementation of MapPart. */ export default class OpenLayersMapPart extends MapPart { @@ -19,8 +25,13 @@ export default class OpenLayersMapPart extends MapPart { super(); this.#map = new Map({ layers: [ + new TileLayer({ + source: new SentinelCloudless(), + }), new TileLayer({ source: new OSM(), + opacity: 0.4, + transition: 0, }), ], target: 'map', @@ -34,4 +45,26 @@ export default class OpenLayersMapPart extends MapPart { setCenter(lng, lat) { this.#map.getView().setCenter(fromLonLat([lng, lat])); } + + addPoint(lng, lat, style) { + let vectorSource = new VectorSource({ + features: [new Feature({ + geometry: new Point(fromLonLat([lng, lat])) + })] + }); + this.#map.addLayer(new VectorLayer({ source: vectorSource })); + } + + addUrlLayer(url, format) { + let vectorSource; + if (format === 'GEOJSON') { + vectorSource = new VectorSource({ url: url, format: new GeoJSON() }) + } + else if (format === 'GPX') { + vectorSource = new VectorSource({ url: url, format: new GPX() }) + } + this.#map.addLayer(new VectorLayer({ + source: vectorSource, + })); + } }