Suite

Lire le fichier GPX depuis le bureau dans Openlayers 3

Lire le fichier GPX depuis le bureau dans Openlayers 3


Je suis conscient qu'Openlayers 3 a la capacité de lire et d'analyser les fichiers gpx à l'aide de l'événement glisser/déposer et j'ai intégré cette fonctionnalité à ma carte. Ce que j'aimerais également faire, c'est donner à l'utilisateur la possibilité de « télécharger » le fichier d'une manière plus conventionnelle en parcourant son système de fichiers.

J'ai connecté les fonctionnalités de base et le fichier résultant peut être généré dans un div sous forme de texte, mais comment puis-je obtenir l'étape finale consistant à demander à Openlayers de lire ces informations et de les afficher ensuite sur une carte ?

Il semble y avoir très peu d'informations à ce sujet et la lecture du fichier ol-debug.js n'a apporté aucune lumière. Quelqu'un peut-il me donner des indications s'il vous plaît?


créer un sélecteur de fichier puis lire le fichier sélectionné. Les fichiers GPX sont des fichiers texte, il devrait donc y avoir un problème avec cela. Aussi il est important de savoir quelle est la projection de votre fichier gpx ainsi que la projection de votre carte. Dans mon exemple, je m'attends à obtenir des entrées GPS dans epsg:4326 et à les reprojeter dans EPSG:3857

  1. votre html

     
  2. votre js

    var gpxFormat = new ol.format.GPX(); var gpxCaractéristiques; function handleFileSelect(evt) { var files = evt.target.files; // Objet FileList // fichiers est une FileList d'objets File. Lister quelques propriétés. var sortie = []; for (var i = 0, f; f = fichiers[i]; i++) { console.log("fichiers[i]",fichiers[i]); var reader = new FileReader(); reader.readAsText(fichiers[i], "UTF-8"); reader.onload = function (evt) { console.log(evt.target.result); gpxFeatures = gpxFormat.readFeatures(evt.target.result,{ dataProjection:'EPSG:4326', featureProjection:'EPSG:3857' }); gpxLayer.getSource().addFeatures(gpxFeatures); console.log("gpxFeatures",gpxFeatures) } output.push('
  3. ', escape(f.name), ' (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', '
  4. '); } document.getElementById('list').innerHTML = '
      ' + sortie.join(") + '
    '; } var defaultStyle = { 'Point': new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: 'rgba(255,255,0,0.5)' } ), rayon : 5, trait : nouveau ol.style.Stroke({ couleur : '#ff0', largeur : 1 }) }) }), 'LineString' : nouveau ol.style.Style({ trait : nouveau ol. style.Stroke({ color: '#f00', width: 3 }) }), 'Polygon': new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0,255,255,0.5 )' }), trait : new ol.style.Stroke({ color : '#0ff', width : 1 }) }), 'MultiPoint' : new ol.style.Style({ image : new ol.style.Circle ({ fill : new ol.style.Fill({ color : 'rgba(255,0,255,0.5)' }), rayon : 5, trait : new ol.style.Stroke({ color : '#f0f', width : 1 }) }) }), 'MultiLineString': new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#0f0', width: 3 }) }), 'MultiPolygon': new ol.style.Style({ fill : new ol.style.Fill({ color : 'rgba(0,0,255,0.5)' }), stroke : new ol.style.Stroke({ color : '#00f', width : 1 }) }) }; var styleFunction = function(caractéristique, résolution) { var featureStyleFunction = feature.getStyleFunction(); if (featureStyleFunction) { return featureStyleFunction.call(feature, resolution); } else { return defaultStyle[feature.getGeometry().getType()] ; } } ; var gpxLayer = new ol.layer.Vector({ source: new ol.source.Vector({ }), style: styleFunction }); var map = new ol.Map({ cible : 'map', calques : [ new ol.layer.Tile({ source : new ol.source.MapQuest({ layer : 'sat' }) }), gpxLayer ], view : new ol.View({ center : ol.proj.fromLonLat([37.41, 8.82]), zoom : 4 }) }); document.getElementById('files').addEventListener('change', handleFileSelect, false);
  5. Et un violon. Je sais que c'est un gâchis mais je n'ai pas eu le temps de le ranger. Vous devriez avoir l'idée.


Voir la vidéo: , OpenLayers, PostgeSQL, GeoServer web application: create and deploy