openlayers - OpenLayers 3 へのアップデート

Question

アプリケーションを OpenLayers 2 から OpenLayers 3 に更新しようとしています。

これに役立つ移行ガイド（または同様のもの）を知っている人はいますか？

Answer 1

FWIW - http://www.nufosmatic.comのシンプルなページを ol2 から ol3 に移行する際に貢献したいと思います。問題は手ごわいように見えますが、多くの場合、ol3 は ol2 よりもはるかに優れているように見え、例は大幅に改善されているように見え、ドキュメントははるかに優れていますが、それらは異なっており、ようやく ol2 ドキュメントに慣れました。

名前空間が変更されており、API 呼び出しの順序の一部は、意味上の違いの結果として変更する必要があります。これは単純な一次マップの移行です。この単純な演習には、主に上記の新しいドキュメントの混乱が原因で、約 1 時間かかりました。

/*                                                                                         
  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);                                                              
}

最上位の html は、いくつかのラッパーの変更によりタグが少し変更されています (上記は 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'>