Charger une image dans l'API

**cmail** · 11/02/2010, 13h26

Le placement d'icones (images limitées en taille 32px*32px) dans l'API via les fichiers kml est déjà bien renseigné.

Mais la question que je me pose, est de savoir comment (si c'est possible) introduire des images png aux dimensions supérieures à 100 px, via les kml (pour pouvoir les gérer comme des couches ), comme des "grosses icones" à l'échelle 1.

Et cela sans les introduire par des ballonstyle.

**dgrichard** · 11/02/2010, 22h50

J'ai du mal à comprendre le besoin

Habituellement, les utilisateurs (dans la liste OpenLayers en tout cas) souhaitent savoir comment utiliser une image comme si c'était une couche comme une autre (ou presque). La réponse est alors: OpenLayers.Layer.Image ... Comme là !

Mais là, je comprends pô

Au passage, la taille des pictos n'est pas limitée ...

**cmail** · 12/02/2010, 12h03

Salut Didier,
Ta réponse évidemment entraine d'autres questions de ma part:

la taille des pictos n'est pas limitée ...

Bizarre, parce que je n'arrive pas, par exemple, à afficher une image .png en 317pix*78pix à l'echelle 1 via balise <icon> par kml... Truc classique que je croyais maitriser. Cette image est réduite à une taille environ 40*40... Bien sur, je peux jouer sur <scale> mais alors l'image est très dégradée.... Mais si tu le dis, il va falloir que je travaille la question...

D'où ma question avec ton renvoi vers OpenLayers.Layer.Image qui me semble intéressante à plus d'un titre... Mais alors là, je (re) butte sur la transposition du codage d'openlayers vers geoportail du fait de mon inexpérience en js. Cet exemple simple va peut-être me permettre de saisir mes erreurs. D'abord, je vais reprendre le code openlayer qui m'intéresse

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 function init(){
            map = new OpenLayers.Map('map');
            // var options = {numZoomLevels: 3}; que je remplacerai par mes propres options
            var graphic = new OpenLayers.Layer.Image(
                'City Lights',
                'http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif',
                new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
                new OpenLayers.Size(580, 288)//,
              //  options
            );
          map.addLayer(graphic);// dans le codage OL initial la ligne était   "map.addLayers([graphic, jpl_wms]);" mais comme je ne m'intéresse qu'à graphic ....

Je pensais pouvoir transposer ce bout de code dans ma fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function initGeoportalMap() {
    
    geoportalLoadviewer("GeoportalviewerDiv", "normal");
    viewer.addGeoportalLayer('GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC', {opacity:1.0});...

De la manière suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 var graphic = new OpenLayers.Layer.Image(
                'vivlig',
    './image/titrev00.png',
               new OpenLayers.Bounds(4.3231201,45.0657615,4.35,45.07),
                new OpenLayers.Size(317, 78) );viewer.getMap().addLayer(graphic, ,"vivlig",{visibility: true,opacity:1.0});

Mais la couche vivlig ne s'affiche pas. J'ai bien bidouillé autour de ce schéma, sans grand résultat. Je me doute bien que tu vas sourire de mon ignorance, mais ta réponse me permettra de mieux appréhender mes futures transpositions OL vers Geoportail.

Merci

**dgrichard** · 13/02/2010, 10h36

Envoyé par cmail

1. Bizarre, parce que je n'arrive pas, par exemple, à afficher une image .png en 317pix*78pix à l'echelle 1 via balise <icon> par kml... Truc classique que je croyais maitriser. Cette image est réduite à une taille environ 40*40... Bien sur, je peux jouer sur <scale> mais alors l'image est très dégradée.... Mais si tu le dis, il va falloir que je travaille la question...

Il faut utiliser la balise <icon> certes, mais aussi les attributs w, h. Par défaut, avec scale à 1 (valeur par défaut), la taille de l'image est 32 x 32.

Envoyé par cmail

D'où ma question avec ton renvoi vers OpenLayers.Layer.Image qui me semble intéressante à plus d'un titre... Mais alors là, je (re) butte sur la transposition du codage d'openlayers vers geoportail du fait de mon inexpérience en js. Cet exemple simple va peut-être me permettre de saisir mes erreurs. D'abord, je vais reprendre le code openlayer qui m'intéresse

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 function init(){
            map = new OpenLayers.Map('map');
            // var options = {numZoomLevels: 3}; que je remplacerai par mes propres options
            var graphic = new OpenLayers.Layer.Image(
                'City Lights',
                'http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif',
                new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
                new OpenLayers.Size(580, 288)//,
              //  options
            );
          map.addLayer(graphic);// dans le codage OL initial la ligne était   "map.addLayers([graphic, jpl_wms]);" mais comme je ne m'intéresse qu'à graphic ....

Je pensais pouvoir transposer ce bout de code dans ma fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function initGeoportalMap() {
    
    geoportalLoadviewer("GeoportalviewerDiv", "normal");
    viewer.addGeoportalLayer('GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC', {opacity:1.0});...

De la manière suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 var graphic = new OpenLayers.Layer.Image(
                'vivlig',
    './image/titrev00.png',
               new OpenLayers.Bounds(4.3231201,45.0657615,4.35,45.07),
                new OpenLayers.Size(317, 78) );viewer.getMap().addLayer(graphic, ,"vivlig",{visibility: true,opacity:1.0});

Mais la couche vivlig ne s'affiche pas. J'ai bien bidouillé autour de ce schéma, sans grand résultat. Je me doute bien que tu vas sourire de mon ignorance, mais ta réponse me permettra de mieux appréhender mes futures transpositions OL vers Geoportail.

Merci

L'exemple OpenLayers montre que l'image est insérée dans la carte en coordonnées géographique (EPSG:4326 par défaut dans OpenLayers).
Comme d'habitude avec les systèmes de coordonnées, il faut être attentif ...

Dans ta transposition, tu n'as pas indiqué à l'API son système de coordonnées (comme dans OpenLayers), mais l'API ne travaille pas par défaut en en EPSG:4326, mais en projection Géoportail (équidistant cylindrique) qui est "superposable" avec la plate-carré (EPSG:4326). De fait, l'API intéprête l'emprise en coordonnées GEOPORTALFXX ...
Il faudrait donc indiquer à la création que ton image est en EPSG:4326 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
graphic = new OpenLayers.Layer.Image(
    'vivlig',
    './image/titrev00.png',
    new OpenLayers.Bounds(4.3231201,45.0657615,4.35,45.07),
    new OpenLayers.Size(317, 78),
    //options
     {
      projection:new OpenLayers.Projection('EPSG:4326'),
      visibility: true,
      opacity:1.0
    });

Le layer ainsi créé et juste ajouté à la carte ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
viewer.getMap().addLayer(graphic);

**cmail** · 13/02/2010, 13h11

Envoyé par dgrichard

Il faut utiliser la balise <icon> certes, mais aussi les attributs w, h. Par défaut, avec scale à 1 (valeur par défaut), la taille de l'image est 32 x 32.

Je te crois volontiers, mais (il me semble) que j'avais bien indiqué la taille w:317 h:78... Avec un résultat à 32*32... Je vais reprendre la chose car si tu le dis, je me suis surement planté quelque part. Cependant, il me semble aussi avoir lu dans la doc kml, que les w et h étaient obsolètes et déconseillés... Faut que je recherche la page.

Pour la deuxième partie de ta réponse, il faut que je regarde de plus près cette question de coordonnées sur laquelle je suis passé allègrement. Focalisé par mes lignes de code...

**dgrichard** · 13/02/2010, 15h04

Envoyé par cmail

Je te crois volontiers, mais (il me semble) que j'avais bien indiqué la taille w:317 h:78... Avec un résultat à 32*32... Je vais reprendre la chose car si tu le dis, je me suis surement planté quelque part. Cependant, il me semble aussi avoir lu dans la doc kml, que les w et h étaient obsolètes et déconseillés... Faut que je recherche la page.

Dans les spécifications KML de Google peut être, mais pas dans le code OpenLayers

Dès que j'ai un peu de temps, j'essaierai avec des valeurs w/h quelconque pour voir le résultat.

**cmail** · 13/02/2010, 15h17

Pour l'icone, j'ai repris méthodiquement la chose et maintenant j'affiche l'image comme je veux. Dans mes essais précédents, j'ai du merdé quelque part. En effet, sur KML-google http://code.google.com/intl/fr/apis/...ence.html#icon on peut lire l'extrait suivant :

Elements Specific to Icon

<href>An HTTP address or a local file specification used to load an icon. <x>, <y>, <w>, <h> Use of these elements within <Icon> has been deprecated.

Quant à OpenLayers.Layer.Image, des choses m'échappent encore... Même si cette question devient négligeable puisque je réalise mon besoin avec <icon>. Mais tout de même... Mon code est le suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 var graphic = new OpenLayers.Layer.Image(
                'vivlig',
    './image/titrev00.png',
               new OpenLayers.Bounds(4.3231201,45.0657615,4.35,45.00),
                new OpenLayers.Size(317, 78),
               {
      projection:new OpenLayers.Projection('EPSG:4326'),
      visibility: true,
      opacity:1.0
    }            );
   
    viewer.getMap().addLayer(graphic);

OpenLayers.Bounds() est probablement mal renseigné? En tout cas rien ne s'affiche...

**mga_geo** · 13/02/2010, 19h35

Moi non plus, je n'arrive pas à afficher une couche image.
La couche kml par contre s'affiche avec une grande icône (256x256).
Bon son affichage n'est pas top dans le menu "Couches", il n'est plus coché après quelques instants (normal, un seul placemark).
L'icône est une tuile en provenance de bing.
La page avec ces essais est à l'adresse http://atlasnw.free.fr/geoportail/ex...ta5/image.html

**dgrichard** · 13/02/2010, 21h45

Aucune des URL suivantes ne fonctionnent :

L'emprise de la couche reste en géographique ... bizarre
Le nom n'apparaît pas dans le gestionnaire de couches ... bizarre

**dgrichard** · 13/02/2010, 22h12

J'ai jeté un oeil au code source d'OpenLayers.Layer.Image :

par défaut, c'est une baseLayer : il faudrait donc ajouter isBaseLayer:false dans les options de création;
cela utilise OpenLayers.Tile.Image que nous avons patché dans Geoportal.Tile.Image pour avoir des images de taille variable (un patch OpenLayers vise à faire quelque chose de similaire pour des grilles);

Il faudra approfondir le sujet avant que l'affichage fonctionne

**mga_geo** · 13/02/2010, 22h31

Je viens d'effectuer les modifications et le nom de la couche est maintenant présent dans le gestionnaire.
Par contre, je n'arrive pas à l'activer.

Je ne pense pas avoir besoin de cette fonctionnalité, c'était juste pour le Schmilblic!

**cmail** · 14/02/2010, 12h35

Envoyé par mga_geo

Je viens d'effectuer les modifications et le nom de la couche est maintenant présent dans le gestionnaire.

Ici, à cette heure, je ne vois pas cet affichage dans le gestionnaire...

Je suis bien dans l'incapacité de vous aider...

**Viglino** · 15/02/2010, 08h36

J'ai également eu quelques problème pour paramétrer un layer image, mais après avoir défini un maxResolution (par tâtonnement) dans les options, cela marche beaucoup mieux !
Il faut donc mettre dans les options :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
isBaseLayer : false,
maxResolution : 100

@+
jmv

**mga_geo** · 15/02/2010, 10h11

Après modif du code, j'ai toujours le même comportement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  var imgLayer = new OpenLayers.Layer.Image(
    'image',
    'MsnSat17.png',
    new OpenLayers.Bounds(-1.480408, 48.140432,-1.477661,48.142265),
    new OpenLayers.Size(256,256),
    {
      projection: new OpenLayers.Projection('EPSG:4326'),
      isBaseLayer: false,
      maxResolution : 100,
      visibility: true,
      minZoomLevel:12,
      maxZoomLevel:18,
      opacity:1.0
    }
  );
  viewer.getMap().addLayer(imgLayer);

**cmail** · 15/02/2010, 11h19

Encore une bêtise de ma part, (le ridicule ne tue pas!)mais si tu essayais:

new OpenLayers.Bounds(-1.480408, 48.140432,-1.477661,48.1400),

Il me semble que "bottom">"top"...

Charger une image dans l'API

IGN API Géoportail

Discussions similaires

Partager

Partager