Openlayers + Require.js + Backbone.js + jQueryMobile - >瓷砖没有加载

我建立了一个使用require.js，backbone.js，openlayers（移动单文件构建）和jquery mobile的项目。现在我有一些问题正确显示地图，因为没有瓷砖加载。我已经想通了如何与require.js垫片参数加载的OpenLayers API：Openlayers + Require.js + Backbone.js + jQueryMobile - >瓷砖没有加载

shim: { 
    "backbone": { 
     "deps": [ "underscore", "jquery" ], 
     "exports": "Backbone" 
    }, 
    "openlayers": { 
     "exports": "OpenLayers" 
    } 
}

在MapView.js文件创建一个新的OpenLayers地图：

define([ "jquery", "backbone", "openlayers" ], function($, Backbone, OpenLayers) { 
var MapView = Backbone.View.extend({ 

    // The View Constructor 
    initialize: function() { 
     console.log(3); 

     var mapOptions = { 
       div: this.el, 
       maxExtent: new OpenLayers.Bounds(-174,18.4,-63.5,71), 
       maxResolution: 0.25, 
       projection: "EPSG:102100", 
       theme: "/css/theme/default/style.css", 
       layers: [ 
        new OpenLayers.Layer.OSM("OpenStreetMap", null, { 
         transitionEffect: 'resize' 
        }) 
       ]}; 
     this.map = new OpenLayers.Map(mapOptions); 
    }, 

    render: function() { 
     console.log(4); 
    } 
}); 
return MapView; 
});

现在的地图部分工作。我可以看到缩放按钮，这些按钮由地图左上角的开放层添加，但没有加载Tiles。 Firebug告诉我，甚至没有要求瓷砖。目前我不知道问题可能是什么。

对于completetion这是我的骨干路由器：

define([ "jquery", "backbone", "../models/Map", "../views/Map" ], function($, Backbone, MapModel, MapView) { 

var Router = Backbone.Router.extend({ 
    initialize: function() { 
     console.log(2); 
     this.mapView = new MapView({ el: "#mapView" }); 
     Backbone.history.start(); 
    }, 

    // Backbone.js Routes 
    routes: { 
     "": "home", 

    }, 

    // Home method 
    home: function() { 
     console.log(0); 
     $.mobile.changePage("#map" , { reverse: false, changeHash: false }); 
    }, 
}); 

return Router; 

});

和HTML页面

<!doctype html> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="/css/jquerymobile.css" /> 
    <script src="/js/libs/require-min.js" data-main="/js/mobile"></script> 
    <style> 
     #mapView { 
     height: 500px; 
     width: 500px; 
     } 
    </style> 
</head> 

<body> 
    <div id="map" data-role="page" data-title="Map"> 
     <div data-role="header"> 
      <h1>Map</h1> 
     </div><!-- /header --> 

     <div data-role="content"> 
      <div id="mapView"></div> 
     </div><!-- /content --> 

     </div> 
</body> 
</html>

任何想法？

来源

2013-02-19 E. Lüders

我现在想通了。我所要做的就是添加this.map.zoomToMaxExtent();。出于某种原因，地图不能计算出瓦片的正确可见范围。

来源

2013-02-20 07:20:27

Openlayers + Require.js + Backbone.js + jQueryMobile - >瓷砖没有加载

回答

相关问题