openlayers - 更新到OpenLayers 3

Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。












想要改善这个问题吗？更新问题，以便将其作为on-topic用于堆栈溢出。

3年前关闭。



Improve this question




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

是否有人知道《迁移指南》(或类似指南)会对此有所帮助？

最佳答案

FWIW-当我们将http://www.nufosmatic.com的简单页面从ol2迁移到ol3时，我们希望做出贡献。这个问题看起来很艰巨，但是很多地方是ol3看起来比ol2更好，示例看起来也有了很大的改进，但是文档却好得多，但是它们却是不同的，如果您已经将它们弄糊涂了，就会感到困惑。终于习惯了ol2文档。

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

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