IGN

Géoservices IGN

Guide de migration depuis l'API v2 - Covisualisation d'un fichier KML

Dernière mise à jour : 1 Décembre 2017

Table des matières

On montre ici comment afficher une carte incluant les données issues d’un fichier KML (ici, un fichier de stations velib) et on explique comment appliquer les mêmes principes à des données aux formats GPX ou GeoJSON.

Avec l’ancienne version (API V2)

L’exemple suivant montre comment on pouvait faire cela avec l’API V2 :

La suite du tutoriel montre comment obtenir un résultat similaire avec les nouveaux outils du Géoportail.

Avec OpenLayers et l’extension Géoportail pour Openlayers

Principe

Pour ajouter une couche KML, il faut créer une couche de type ol.layer.vector dont la propriété source est de type ol.source.Vector.

On va instancier un objet de cette classe avec les options suivantes :

La méthode map.addLayer() permet d’ajouter la couche créée à la carte.

Le code suivant permet d’ajouter le fichier KML de stations Vélib hébergé sur le site : /documentation/exemples/ressources/velib.kml.

var layerKML = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: "https://geoservices.ign.fr/documentation/exemples/ressources/velib.kml",
    format: new ol.format.KML({
        // applique les styles du fichier KML
        extractStyles: true
      })
  })
});
map.addLayer(layerKML);

NB : la propriété booléenne extractSyles utilisée lors de la création du format KML permet d’indiquer à OpenLayers d’appliquer les styles définis dans le fichier KML à l’affichage.

Paramétrage du Gestionnaire de couches

Si vous utilisez le gestionnaire de couches, il est possible de modifier le nom et la description de la couche dans ce gestionnaire dans les options de l’outil ol.control.LayerSwitcher :

var lsControl = new ol.control.LayerSwitcher({
  layers:[{
    layer : layerKML,
    config : {
      title : 'Stations Vélib',
    }
  }]
}) ;
map.addControl(lsControl) ;

Plus d’informations sur le gestionnaire d’empilement des couches sont disponibles ICI

Paramétrage du clic sur les objets affichés

Pour accéder, au clic, aux informations attributaires des objets du fichier KML, vous pouvez utiliser l’outil ol.control.GetFeatureInfo proposé par l’extension Géoportail :

  // gestion du clic sur les objects
  var gfiControl = new ol.control.GetFeatureInfo({
    options: {
      auto: true,
      hidden: true
    }
  });
  map.addControl(gfiControl);

Plus d’informations sur l’outil d’accès aux informations attributaires des objets sont disponibles ICI.

Mise en oeuvre

Application aux formats GPX ou GeoJSON

La méthode décrite ci-dessus s’applique pour l’affichage de données vecteurs au format GPX ou GeoJSON. Il suffit seulement de remplacer l’utilisation de la classe ol.format.KML par celle correspondante au format utilisé : ol.format.GPX ou ol.format.GeoJSON. Ou tout autre format supporté par OpenLayers.

NB : La propriété extractStyles ne s’appliquera par car ces formats ne permettent pas la définition de styles dans les données.

Avec le SDK

Principe

La propriété layersOptions de l’objet de paramètres de la fonction Gp.Map.load() permet de préciser les couches à rajouter à la carte. Chaque couche est définie par une propriété (identifiant au choix du développeur) de cet objet qui va prendre comme valeur un objet javascript portant ses caractéristiques. Pour une couche KML, cet objet va comporter les propriétés suivantes :

Plus d’informations sont disponibles ICI

Pour accéder, au clic, aux informations attributaires des objets du fichier KML, il faut utiliser la propriété getfeatureinfo du paramètre controlsOptions au chargement de la carte.

Plus d’informations sur l’ajout d’outils à la carte sont disponibles ICI

Le code suivant permet d’afficher avec le SDK la carte avec une couche KML externe “cliquable” et l’outil d’empilement des couches.

var map = Gp.Map.load(
    "map",   // identifiant du conteneur HTML
    // options d'affichage de la carte (Gp.MapOptions)
    {   
        ...
        layersOptions : {
            ...
            "Velib" : {
  	        format: "kml",
  	        url : "https://geoservices.ign.fr/documentation/exemples/ressources/velib.kml",
  	        title : "Stations Vélib",
  	        extractStyles : true
            }
        },
        controlsOptions : {
            "layerswitcher" : {},
            "getfeatureinfo" : {
                "options" : {
                    hidden : true,
                    auto : true
                }
            }
        }
    }
) ;

Plus d’informations sur la propriété layersOptions sont disponibles ICI.

Mise en oeuvre

Application aux formats GPX ou GeoJSON

La méthode décrite ci-dessus s’applique pour l’affichage de données vecteurs au format GPX ou GeoJSON. Il suffit seulement de changer la valeur de la propriété format correspondant au style voulu (“gpx” ou “geojson”).

NB : La propriété extractStyles ne s’appliquera par car ces formats ne permettent pas la définition de styles dans les données.