FR:OpenLayers Simple Example

From OpenStreetMap Wiki
Jump to navigation Jump to search
OpenLayers Simple Example - Other languages

Déployer une Slippymap OpenStreetMap sur mon site web

Cet exemple simple peut vous aider si vous souhaitez déployer votre propre Slippy Map. Ces bribes de DHTML utilisent la librairie javascript OpenLayers pour afficher une carte OSM !

Note: OpenStreetMap se sert d'images tuilées (tile images)

Merci de noter que les images tuilées provienent des servers OpenStreetMap. Bien qu'OSM permette ce type d'utilisation pour le moment, nous n'offrons aucune garanties. Il peut y avoir un abandon (planifié ou non), et les URL des tuiles peuvent changer.

Si vous avez prévu d'utiliser massivement ces ressources, vous devriez d'abord en parler sur de site (Contact). Vous devriez suivre les instuctions suivantes creating your own tiles, ou mettre en place votre propre cache squid pour les tuiles. Cela permettra de diminuer votre dépendance, et réduire l'utilisation de la bande passante pour les serveurs OSM.

Bien sûr, les images elles-mêmes (nos cartes) peuvent changer au fil du temps, et pas nécessairement en mieux.

Instructions

Copier ce qui suit dans un nouveau fichier HTML, et observez le résultat dans un navigateur.

Un exemple minimal

<!DOCTYPE HTML>
<title>OpenLayers Simplest Example</title>
<div id="demoMap" style="height:250px"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
    map = new OpenLayers.Map("demoMap");
    map.addLayer(new OpenLayers.Layer.OSM());
    map.zoomToMaxExtent();
</script>

Le code montre comment vous:

  • initialisez un objet id Map avec une balise DIV
  • ajoutez une couche OpenStreetMap
  • forcez l'affichage des tuiles en appelant zoomToMaxExtent, vous pouvez aussi appeler zoomToExtent, mais pour cela vous avez besoin d'un objet défini dans la projection correcte...

Un exemple un peu plus élaboré

<!DOCTYPE HTML>
<html>
  <head>
    <title>OpenLayers Demo</title>
    <style type="text/css">
      html, body, #basicMap {
          width: 100%;
          height: 100%;
          margin: 0;
      }
    </style>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script>
      function init() {
        map = new OpenLayers.Map("basicMap");
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);
        map.setCenter(new OpenLayers.LonLat(13.41,52.52) // Centre de la carte
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transformation de WGS 1984
            new OpenLayers.Projection("EPSG:900913") // en projection Mercator sphérique
          ), 15 // Zoom level
        );
      }
    </script>
  </head>
  <body onload="init();">
    <div id="basicMap"></div>
  </body>
</html>

Extensions

D'autres ensembles de tuiles

Si vous souhaitez déployer vos propres tuiles (par exemple avec Mapnik), utilisez la définition de couche ci-dessous: 

 var newLayer = new OpenLayers.Layer.OSM("New Layer", "URL_TO_TILES/${z}/${x}/${y}.png", {numZoomLevels: 19});
 map.addLayer(newLayer);

L'ajout de l'url /${z}/${x}/${y}.png est requis depuis le 27 juin 2009.

Modifiez l'URL et la valeur de numZoomLevels en fonction du résultat souhaité.

Restreindre les limites & niveaux de zoom

Ce qui suit restreint les limites de la carte à la région située autour d'Oxford et le niveau de zoom entre 13 et 16. Pour ajouter des niveaux de zoom plus faibles, ajoutez les nouvelles valeurs dans le tableaux des résolutions (chacune est le double de la suivante) 

      var fromProjection = new OpenLayers.Projection("EPSG:4326"); // transform from WGS 1984
      var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
      var extent = new OpenLayers.Bounds(-1.32,51.71,-1.18,51.80).transform(fromProjection,toProjection);
      function init() {
        var options = {
          restrictedExtent : extent,
          controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.Attribution()
          ]
        };
        map = new OpenLayers.Map("Map", options);
        var newLayer = new OpenLayers.Layer.OSM(
          "New Layer", 
          "URL_TO_TILES/${z}/${x}/${y}.png", 
          {zoomOffset: 13, resolutions: [19.1092570678711,9.55462853393555,4.77731426696777,2.38865713348389]}
        );
        map.addLayer(newLayer);
        map.setCenter(new OpenLayers.LonLat(-1.25,51.75).transform(fromProjection,toProjection), 0); // 0=relative zoom level
      }

Modification de la ligne de texte d'attribution et de l'échelle

Il est possible de modifier l'emplacement du texte d'attribution, l'échelle et la fonte utilisée, en ajoutant les lignes suivantes dans la section style. 

      div.olControlAttribution, div.olControlScaleLine {
          font-family: Verdana;
          font-size: 0.7em;
          bottom: 3px;
      }

Utilisation de OpenLayers.js

Vous pouvez charger le script OpenLayers.js sur votre propre serveur comme ceci: 

$wget http://www.openlayers.org/api/OpenLayers.js

et utilisez une référence relative à la place de l'URL du script dans votre code HTML

Utiliser Proj4js pour d'autres transformations

L'exemple vous permet d'utiliser les coordonnées WGS84 pour naviguer dans une carte en projection Mercator sphérique. Si vos coordonnées sont dans une projection différente, vous pouvez ajouter proj4js pour effectuer une autre projections.

Ajoutez à votre page, le script proj4js.js depuis http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-combined.js (après l'instruction OpenLayers lib!)

Ajoutez votre propre définition de la projection (on peut obtenir celles-ci à partir du projet Proj4, vous avez besoin du dossier \proj\nad\epsg

Voir http://svn.osgeo.org/metacrs/proj4js/trunk/lib/defs pour des exemples.

Example pour EPSG:28992 (new RD)

Proj4js.defs["EPSG:28992"] = "+title=Amersfoort / RD New +proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +no_defs";

Ensuite, vous pouvez utiliser des coordonnées EPSG:28992 et ce code epsg dans la fonction transform à la place de WGS84


comme ceci: 

map.setCenter(
    new OpenLayers.LonLat(155000,465000) // Center of the map
        .transform(
            new OpenLayers.Projection("EPSG:28992"), // transform from new RD 
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
        ),
    15); // Zoom level

Développez cet exemple ?

N'hésitez pas à modifier cette page en y apportant vos améliorations.

Cet exemple a été créé à l'origine par Harry Wood (et toutes les personnes qui l'ont amélioré). Il est intentionellement simple, avec une seule couche définie, et aucun support pour d'autres URL (permalink) etc. Donc, l'ajout de ces fonctionnalités n'est pas nécessaire pour l'améliorer. En fait, si vous avez des idées pour faire encore plus simple, ce serait bien.

Sujets connexes

Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=FR:OpenLayers_Simple_Example&oldid=2706437"