OpenLayers est un puissant outil JavaScript qui nous permet de créer et d’afficher toutes sortes de cartes sur un site Web. Cet article vous guidera dans la configuration d'OpenLayers 3, puis dans la création d'une carte simple comportant une couche de tuiles d'OpenStreetMaps.

Première partie de deux:
Installation et configuration d'OpenLayers

  1. 1 Ouvrez ou créez votre page Web. Si vous ne possédez pas encore de page Web dans laquelle vous souhaitez insérer la carte, vous pouvez utiliser le modèle HTML5 suivant. Enregistrez-le sous le nom 'map_page.html': 
      <html lang="fr"> <tête> <meta charset="utf-8"> <Titre>Ma carte OpenLayers 3</Titre> </tête> <corps>  </corps> </html>
  2. 2 Inclure OpenLayers. Votre page Web devra inclure le fichier JavaScript de la bibliothèque OpenLayers. Pour ce faire, collez la ligne de code suivante dans votre fichier HTML, à l'intérieur du zone, sur une nouvelle ligne en dessous du : 
     <scénario src="http://openlayers.org/en/v3.0.0/build/ol.js"  type="text / javascript"></scénario>
  3. 3 Ajouter un conteneur de carte HTML. OpenLayers affichera la carte dans un élément HTML, vous devez donc en fournir un pour cela. Collez la ligne de balisage suivante à l'intérieur du : 
     <div id="carte" classe="carte"></div>
  4. 4 Style du conteneur de carte. Vous devez définir la taille de la carte lorsqu'elle sera affichée et vous devez utiliser CSS pour ce faire. Vous pouvez ajouter les éléments suivants au document :  
     <>> .carte  la taille: 500px; largeur: 700px;  >


Deuxième partie de deux:
Création de la carte

  1. 1 Créez l'objet carte. Pour commencer à écrire le code JavaScript qui configure la carte, vous devez ajouter un zone à la après le conteneur de carte div. En outre, vous pouvez créer l’objet cartographique en appelant nouveau ol.Map () comme ça: 
     <type de script='text / javascript'> var carte = Nouveau ol.Carte( ); scénario>
  2. 2 Définit l'élément HTML cible de la carte. OpenLayers rendra (affichera) la carte dans un élément HTML tel qu'un div ou un p. La valeur que vous devez transmettre à la fonction setTarget () est simplement id de l'élément, que nous définissons sur 'map': 
     carte.Choisir la cible('carte');
  3. 3 Définissez la vue de la carte. La vue d'une carte OpenLayers est ce qui gère quelle partie de la carte vous voyez. Créez un nouvel objet de vue centré sur les coordonnées [0, 0] (au large des côtes d'Afrique centrale):
    Remarque: Contrairement à la bibliothèque de cartes Leaflet, OpenLayers 3 traite des coordonnées dans le format [longitude, latitude]. 
     var vue = Nouveau ol.Vue( centre: [0, 0], Zoom: 1 ) carte.setView(vue);
  4. 4 Ajoutez une couche de tuiles. Les cartes OpenLayers ont des couches empilées les unes sur les autres et sont ce que vous voyez réellement sur une carte. Il existe trois types de calques: Image, Mosaïque et Vecteur. Les couches de tuiles sont les couches standard de base et peuvent provenir de fournisseurs de cartes tels que Google Maps, MapQuest ou OpenStreetMaps. Chaque couche a une source, qui indique à OpenLayers d'où proviennent les informations de la couche. 
     var tile_layer = Nouveau ol.couche.Tuile( la source: Nouveau ol.la source.MapQuest(couche: 'osm') ) carte.addLayer(tile_layer);
  5. 5 Définissez le niveau de zoom. Dans OpenLayers, les cartes peuvent être zoomées sur l'un des niveaux, de 0 (le plus zoomé) à environ 20 (le plus zoomé). Le niveau de zoom est défini sur l'objet de vue, nous devons donc l'obtenir et définir son zoom: 
     carte.getView().setZoom(2);
  6. 6 Vérifiez votre code. Voici à quoi devrait ressembler votre code de page Web: 
     doctype html> <html lang="fr"> <tête> <meta charset="utf-8"> <Titre>Mes OpenLayers 3 CarteTitre> <script src="http://openlayers.org/fr/v3.0.0/build/ol-debug.js" type="text / javascript">scénario> <style> .carte  la taille: 500px; largeur: 700px;  style> tête> <corps> <ID div="carte" classe="carte">div> <type de script='text / javascript'> var carte = Nouveau ol.Carte( ); carte.Choisir la cible('carte'); var vue = Nouveau ol.Vue( centre: [0, 0], Zoom: 1 ) carte.setView(vue); var tile_layer = Nouveau ol.couche.Tuile( la source: Nouveau ol.la source.MapQuest(couche: 'osm') ) carte.addLayer(tile_layer); carte.getView().setZoom(2); scénario> corps> html>
  7. 7 La carte finie