Mehr

Lesen Sie die GPX-Datei vom Desktop in Openlayers 3

Lesen Sie die GPX-Datei vom Desktop in Openlayers 3


Mir ist bewusst, dass Openlayers 3 die Fähigkeit hat, gpx-Dateien mit dem Drag/Drop-Ereignis zu lesen und zu parsen, und ich habe diese Funktionalität in meine Karte integriert. Ich möchte dem Benutzer auch die Möglichkeit geben, die Datei auf konventionellere Weise hochzuladen, indem er ihr Dateisystem durchsucht.

Ich habe die Grundfunktionalität angeschlossen und die resultierende Datei kann als Text an ein div ausgegeben werden, aber wie bekomme ich den letzten Schritt, Openlayers anzuweisen, diese Informationen zu lesen und anschließend auf einer Karte anzuzeigen?

Es scheint sehr wenige Informationen darüber zu geben und das Lesen der Datei ol-debug.js hat kein Licht ins Dunkel gebracht. Kann mir bitte jemand Hinweise geben?


Erstellen Sie eine Dateiauswahl und lesen Sie dann die ausgewählte Datei. GPX-Dateien sind Textdateien, daher sollte es damit Probleme geben. Außerdem ist es wichtig zu wissen, wie hoch die Projektion Ihrer gpx-Datei sowie die Projektion Ihrer Karte ist. In meinem Beispiel erwarte ich GPS-Einträge in epsg:4326 und projiziere sie auf EPSG:3857

  1. dein html

     
  2. dein js

    var gpxFormat = new ol.format.GPX(); var gpxFeatures; Funktion handleFileSelect(evt) { var files = evt.target.files; // FileList-Objekt // files ist eine FileList von File-Objekten. Listen Sie einige Eigenschaften auf. var-Ausgabe = []; for (var i = 0, f; f = files[i]; i++) { console.log("files[i]",files[i]); var-Reader = neuer FileReader(); reader.readAsText(files[i], "UTF-8"); reader.onload = Funktion (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, zuletzt geändert: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', '
  4. '); } document.getElementById('list').innerHTML = '
      ' + ausgabe.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)' } ), Radius: 5, Stroke: new ol.style.Stroke({ color: '#ff0', width: 1 }) }) }), 'LineString': new ol.style.Style({ Stroke: new ol. style.Stroke({ color: '#f00', width: 3 }) }), 'Polygon': new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0,255,255,0.5 )' }), Strich: 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)' }), Radius: 5, Stroke: 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 = Funktion (Feature, Auflösung) { var featureStyleFunction = feature.getStyleFunction(); if (featureStyleFunction) { return featureStyleFunction.call (Feature, Auflösung); aufrechtzuerhalten. Else { return defaultStyle[feature.getGeometry().getType()]; } }; var gpxLayer = new ol.layer.Vector({ source: new ol.source.Vector({ }), style: styleFunction }); var map = new ol.Map({ target: 'map', layer: [ 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. Und eine Geige. Ich weiß, es ist ein Chaos, aber ich hatte keine Zeit, es aufzuräumen. Sie sollten die Idee haben.


Schau das Video: GPX Dateien in Komoot am Desktop importieren. Tutorial 3