Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Suite à un problème technique intervenu entre le 22 et le 23 mars, nous avons du procéder dans la soirée du 25 mars, à la restauration de la base de données du 24 mars (matinée).

En clair, nous avons perdu vos contributions et inscriptions du dimanche 24 et du lundi 25 mars.
Nous vous prions de nous excuser.

#1 Mon 07 November 2016 16:36

kartogravele
Juste Inscrit !
Date d'inscription: 13 Oct 2016
Messages: 6

Openlaysers - afficher la trace d'une fichier GPX

Bonjour,

A partir d'un fichier GPX, j'affiche les marqueurs avec Openlayers.

Mais comment afficher aussi les traces ?
Je souhaite aussi pouvoir indiquer la couleur de la trace.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>GPX Data</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="info">&nbsp;</div>
    <script>

      var raster = new ol.layer.Tile({
        source: new ol.source.OSM({
          imagerySet: 'osmfr',
          key: ''
        })
      });

      var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: 'fichier.gpx',
          format: new ol.format.GPX()
        }),

       style: function(feature) {

  var properties = feature.getProperties();

 var name = properties['name'];

         style = {
        'Point': new ol.style.Style({
          text: new ol.style.Text ({ text:name,font:'10px Palace Script',textAlign:'center', offsetX:0
                            ,fill: new ol.style.Fill({color: 'red'}),

              }),
          image: new ol.style.Circle({
            fill: null,
            radius: 7,
            stroke: new ol.style.Stroke({
              color: 'red',
              width: 1
            })
          })
        })
      };
        return style[feature.getGeometry().getType()]
        }
      });


      var map = new ol.Map({
        layers: [raster, vector],
        target: document.getElementById('map'),
        view: new ol.View({})
      });

map.getView().setCenter(ol.proj.transform([4.85, 45.75], 'EPSG:4326', 'EPSG:3857'));
map.getView().setZoom(15);

    </script>
  </body>
</html>

Dernière modification par kartogravele (Mon 07 November 2016 16:37)

Hors ligne

 

Pied de page des forums

Powered by FluxBB