更新到OpenLayers 3

FWIW-我们希望为迁移思想简单的页面提供帮助，网址为 http://www.nufosmatic.com 从ol2到ol3.这个问题看起来很可怕，但是很多地方是ol3看起来比ol2更好，并且示例看起来也有了很大的改进，但是文档却好得多，但是它们却是不同的，如果您已经将它们弄糊涂了，那就很困惑了.终于习惯了ol2文档.

FWIW - We'd like to contribute as we migrate our simple-minded page at http://www.nufosmatic.com from ol2 to ol3. The problem looks formidible, but a lot of it is that ol3 looks to be so much better than ol2, and the examples look to be much improved, and the docs are so much better BUT THEY ARE DIFFERENT and they are confusing if you've finally gotten used to ol2 docs.

命名空间已更改，并且由于某些语义上的差异，某些API调用的顺序也必须更改.这是一个思路简单的一阶地图迁移.这种思想简单的练习耗时约一个小时，主要是由于上面提到的新文档混乱:

Namespaces have changed, and some of the order of API calls must change as a result of some semantical differences. Here is a simple-minded, first-order map migration. This simple-minded exercise took about an hour mostly due to the new doc confusion mentioned above:

/*                                                                                         
  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文件中)对标记进行了一些更改:

The top-layer html changes a bit in the tags from with some wrapper changes (where the above are in the js/main.js file):

> 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'>