Visualiser un preview d'une image satellitaire sur un fond cartographique

Bonjour,

on a développé une interface Web, elle contient un fond cartographique d'OSM et un tableau de 3 colonnes (product_id, download, show preview);
le but est lorsqu'on coche devant un produit, il va afficher un preview de l'image TIF sur la carte.

J'ai essayé de le faire par la modification dans le fichier .vue mais ça ne donne aucun résultat. Je ne sais pas qu'est ce qu'il manque.

partie Template:
Code:

1 2 3 4 5 6 7 8 9 <b-table-column field="show" label="SHOWPREVIEW" v-slot="props"> <b-checkbox style="font-size: 11px" :value="props.row.file_name" @input="ShowOnMap(props.row.filename)" ></b-checkbox> {{ props.row.selected }} </b-table-column>
partie Script:
Code:

1 2 3 4 5 6 7 8 9 10 11 methods: { ShowOnMap(filename) { const source = new GeoTIFF({ sources: [ { url: filename, }, ], });
Merci d'avance de m'aider.

quelle bibliothèque utilisez vous pour afficher la carte ? leaflet ?

OSM

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ShowOnMap(filename) {
 
     const source = new GeoTIFF({
        sources: [
          {
            url: filename,
          },
        ],
      });
      //const layer = new olLayer.Tile({
       // source: source,
      //})
      const layer = new TileLayer({
         source: source,
            });
      this.olMap.addLayer(layer);