Daha çox

Openlayers 3 -də GPX faylını masaüstündən oxuyun


Openlayers 3 -ün sürüklə/buraxma hadisəsini istifadə edərək gpx fayllarını oxumaq və təhlil etmək qabiliyyətinə malik olduğunu bilirəm və bu funksiyanı xəritəmə daxil etdim. İstədiyim şey, istifadəçiyə fayl sisteminə göz ataraq faylı daha ənənəvi şəkildə yükləmək imkanı verməkdir.

Əsas funksiyanı bağladım və ortaya çıxan fayl bir mətn olaraq div -ə çıxarıla bilər, ancaq Openlayerlərə bu məlumatları oxumağı və sonradan xəritədə göstərməyi öyrətməyin son addımını necə əldə edə bilərəm?

Bununla əlaqədar çox az məlumat var və ol-debug.js faylını oxumaq heç bir işığa səbəb olmadı. Kimsə mənə göstəriş verə bilərmi?


bir fayl seçici yaradın və sonra seçilmiş faylı oxuyun. GPX faylları mətn sənədləridir, buna görə hər hansı bir problem olmalıdır. Gpx faylınızın və xəritənizin proyeksiyasının nə olduğunu bilmək də vacibdir. Mənim nümunəmdə, gps girişlərini epsg: 4326 -da əldə etməyi və yenidən EPSG: 3857 -ə köçürməyi gözləyirəm.

  1. sizin html

     
  2. sənin js

    var gpxFormat = yeni ol.format.GPX (); var gpxFeatures; funksiyası handleFileSelect (evt) {var files = evt.target.files; // FileList obyekti // fayllar Fayl obyektlərinin Fayl Siyahısıdır. Bəzi mülkləri sadalayın. var çıxışı = []; for (var i = 0, f; f = files [i]; i ++) {console.log ("files [i]", files [i]); var reader = yeni FileReader (); reader.readAsText (fayllar [i], "UTF-8"); reader.onload = funksiya (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 (): 'yox', '
  4. '); } document.getElementById ('siyahı'). innerHTML = '
      ' + output.join (") +'
    '; } var defaultStyle = {'Point': yeni ol.style.Style ({image: new ol.style.Circle ({fill: new ol.style.Fill ({color: 'rgba (255,255,0,0.5)' ')) ), radius: 5, vuruş: yeni ol.style.Strrok ({color: '#ff0', width: 1})})})), 'LineString': yeni ol.style.Style ({vuruş: yeni ol. style.Troke ({color: '#f00', width: 3})}), 'Polygon': new ol.style.Style ({fill: new ol.style.Fill ({color: 'rgba (0,255,255,0,5) ) '}), vuruş: yeni ol.style.Stroke ({color:'#0ff ', width: 1})}),' MultiPoint ': new ol.style.Style ({image: new ol.style.Circle ({doldurun: yeni ol.style.Fill ({rəng: 'rgba (255,0,255,0.5)'})), radius: 5, vuruş: yeni ol.style. Zərbə ({rəng: '#f0f', en: 1})})}), 'MultiLineString': yeni ol.style.Style ({vuruş: yeni ol.style. Vuruş ({rəng: '#0f0', genişlik: 3})}), 'MultiPolygon': yeni ol.style.Style ({doldurun: yeni ol.style.Fill ({rəng: 'rgba (0,0,255,0,5)'})), vuruş: yeni ol.style.Surdu ({rəng: '#00f', eni) : 1})})}; var styleFunction = funksiya (xüsusiyyət, qətnamə) {var featureStyleFunction = feature.getStyleFunction (); if (featureStyleFunction) {return featureStyleFunction.call (xüsusiyyət, qətnamə); } başqa {return defaultStyle [feature.getGeometry (). getType ()]; }}; var gpxLayer = yeni ol.layer.Vector ({mənbə: yeni ol.source.Vector ({}), stil: styleFunction}); var map = new ol.Map ({target: 'map', layer: [new ol.layer.Tile ({source: new ol.source.MapQuest ({layer: 'sat'})}}), gpxLayer], görünüş : yeni ol.View ({mərkəz: ol.proj.fromLonLat ([37.41, 8.82]), böyüt: 4})})); document.getElementById ('fayllar'). addEventListener ('dəyişiklik', handleFileSelect, yalan);
  5. Və bir skripka. Bilirəm ki, qarışıqlıqdır, amma səliqəyə salmağa vaxtım yox idi. Fikri almalısan.