更新到 OpenLayers 3

Question

我希望将我的应用程序从OpenLayers 2更新到OpenLayers 3。

是否有人知道迁移指南（或类似的东西），可以帮助完成此操作？

- sfletche

---

代码库完全不同，很多东西已经转移到了Google Closure、事件处理程序等。据我所知，这被认为是一个破坏性的升级，因此迁移基本上意味着重写，就我所知。 - John Powell

谢谢@JohnBarça，我对新代码库与旧代码库的区别有类似的感觉。我仍然希望有人能够编写一些指南来帮助升级... - sfletche

Answer 1

FWIW-我们希望在将http://www.nufosmatic.com的简单页面从ol2迁移到ol3时做出贡献。问题看起来很棘手，但其中很多是因为ol3看起来比ol2好得多，示例也看起来改进了很多，文档也好得多，但它们是不同的，如果你终于习惯了ol2文档，那么它们会让人感到困惑。

命名空间已更改，并且由于某些语义差异，一些API调用的顺序必须更改。这是一个简单的一级地图迁移。这个简单的练习大约花了一个小时，主要是由于上述新文档的混淆:

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

- Nufosmatic

---

我们已经完成了从ol2到ol6的升级。网站已经启用。 - Nufosmatic

使用Matt Walker的ol-layerswitcher和我通过使用ol.Features来模拟ol2兴趣点示例。https://github.com/walkermatt - Nufosmatic

Answer 2

OpenLayers3有一个新的设计和概念，模型不同，因此没有直接的翻译。

我认为最好的选择是开始阅读当前可用的书籍，这样你可以学习并自行评估：

• 《The book of OpenLayers3》( https://leanpub.com/thebookofopenlayers3 ), 含示例 ( http://acanimal.github.io/thebookofopenlayers3/ )。
• 《OpenLayers 3: Beginner's Guide》( https://www.packtpub.com/web-development/openlayers-3-beginner%E2%80%99s-guide )

请注意，OL3相对于OL2有许多改进，但尚未实现OL2的所有功能。

- acanimal