Aggiornamento a OpenLayers 3

Question

Sto cercando di aggiornare la mia applicazione da OpenLayers 2 a 3. OpenLayers

C'è qualcuno che è a conoscenza di una Guida alla migrazione (o qualcosa di simile) che potrebbe aiutare con questo?

Answer 1

OpenLayers3 ha un nuovo design e concetti e modelli diversi, quindi non c'è una traduzione diretta.

penso che la soluzione migliore sta iniziando a leggere gli attuali libri disponibili in modo da poter imparare e valutare voi stessi:

• Il libro di OpenLayers3 (https://leanpub.com/thebookofopenlayers3), con campioni (http://acanimal.github.io/thebookofopenlayers3/).
• OpenLayers 3: Guida per principianti (https://www.packtpub.com/web-development/openlayers-3-beginner%E2%80%99s-guide)

Prendere in considerazione OL3 ha molti miglioramenti rispetto OL2 ma non tutte le caratteristiche di OL2 sono implementate in OL3 ancora.

Acclamazioni

Answer 2

FWIW - Vorremmo contribuire come migriamo nostra pagina ingenuo a http://www.nufosmatic.com da OL2 a OL3. Il problema sembra formidabile, ma molto altro è che ol3 sembra essere molto meglio di ol2, e gli esempi sembrano essere molto migliorati, e i documenti sono molto migliori, MA SONO DIVERSI e sono confusi se hai finalmente abituato a ol2 docs.

Gli spazi dei nomi sono cambiati e alcuni ordini delle chiamate API devono cambiare a causa di alcune differenze semantiche. Ecco una semplice migrazione della mappa del primo ordine. Questo esercizio ingenuo impiegato circa un'ora per lo più a causa della nuova confusione doc di cui sopra:

/*                       
    Very simple OpenLayers2 map                
*/ 
var map, layer, center; 

function init() { 
    map = new OpenLayers.Map('map'); 
    layer = new OpenLayers.Layer.OSM("Simple OSM Map"); 
    map.addLayer(layer); // this must come before the following        
    center = new OpenLayers.LonLat(-71.147, 42.472) 
     .transform(
        new OpenLayers.Projection("EPSG:4326"), 
        map.getProjectionObject() 
        ); 
    map.setCenter(center, 5); 
} 

---

/*                       
    Very simple OpenLayers3 map                
*/                       
var map, layer, center;                  

function init(){                   
    map = new ol.Map({                  
      target:'map',                 
      renderer:'canvas',                
      view: new ol.View({                
        projection: 'EPSG:900913',            
       })                   
     });                     
    layer = new ol.layer.Tile({                
      source: new ol.source.OSM()              
     });                     
    map.addLayer(layer); // this can actually come up last         
    center = new ol.proj.transform([-71.147, 42.472],          
            'EPSG:4326', // essentially LonLat      
            map.getView().getProjection());       
    map.getView().setCenter(center);              
    map.getView().setZoom(5);                
} 

Il top-layer html cambia un po 'nei tag da con alcune modifiche involucro (dove quanto sopra sono nel file js/main.js):

> diff -btw ../*[23]/index.html 
7c7 
<   <script src='OpenLayers-2.13.1/OpenLayers.js'></script> 
--- 
> <script src='v3.10.1/build/ol.js'></script> 
11c11 
<   <link rel='stylesheet' href='OpenLayers-2.13.1/theme/default/style.css'> 
--- 
> <link rel='stylesheet' href='v3.10.1/css/ol.css'>