function go() { var photosLyr = new ol.layer.GeoportalWMTS({ layer: "ORTHOIMAGERY.ORTHOPHOTOS" }) ; var map = new ol.Map({ target: 'map', layers: [ photosLyr ], view: new ol.View({ center: [288074.8449901076, 6247982.515792289], zoom: 15 }) }); var azi = new ol.control.MeasureAzimuth({ }); map.addControl(azi); var area = new ol.control.MeasureArea({ }); map.addControl(area); var length = new ol.control.MeasureLength({ }); map.addControl(length); var elep = new ol.control.ElevationPath({ }); map.addControl(elep); var draw = new ol.control.Drawing({ collapsed: false}) ; map.addControl(draw); var ls = new ol.control.LayerSwitcher( {options: { collapsed: false }}) ; map.addControl(ls) ; // 1) Save last drawn features $('#savelastkml').click(function(){ try{ var kml = draw.exportFeatures(); if(kml){ // on enregistre le KML $('#kmlsaved').val(kml); $('#savelastkml').prop( "disabled", true ); $('#loadlastkml').prop( "disabled", false ); map.getLayers().forEach(function(layer) { //console.log(layer); // on supprime toutes les couches, sauf celle initiale if(layer.gpLayerId != 0) map.removeLayer(layer); }); } else { alert("Merci d'ajouter une ou plusieurs annotations avant de sauvegarder."); } } catch (err) { alert(err); } }); // 2) Load last drawn features $('#loadlastkml').click(function(){ $('#loadlastkml').prop( "disabled", true ); $('#savelastkml').prop( "disabled", false ); var vectorSource = new ol.source.Vector({ opacity: 1, features : new ol.Collection(), visible: true }); // From : http://gis.stackexchange.com/questions/219023/openlayers3-add-a-source-vector-from-string-not-url-for-layers var features = new ol.format.KMLExtended().readFeatures( $('#kmlsaved').val(), { dataProjection: 'EPSG:4326', featureProjection: map.getView().getProjection() }); vectorSource.addFeatures(features); var vector = new ol.layer.Vector({ title: 'Données chargées', source: vectorSource, visible: true, }); // on remet à jour les composants (suggéré par @gcebelieu) draw.setMap(map); map.addLayer(vector); draw.setLayer(vector); ls.addLayer( vector, { title: 'Données chargées' } ); }); } Gp.Services.getConfig({ apiKey: "jhyvi0fgmnuxvfv0zjzorvdn", onSuccess: go }); var infoDiv = document.getElementById("info"); infoDiv.innerHTML = "<p> Extension OL3 version " + Gp.ol3extVersion + " (" + Gp.ol3extDate + ")</p>";
<input type="button" id="savelastkml" value='Save last KML'/> <input type="button" id="loadlastkml" value='Load last KML' disabled=disabled/> <input type="hidden" id="kmlsaved" name="kmlsaved"/> <div id="map"></div> <div id="info"></div>