0

为了准备即将发布的 OpenLayers 3，我尝试让基本地图示例在 Qooxdoo 移动应用程序中工作。

我使用 Qooxdoo mobileshowcase 演示地图作为起点，但经过数小时的尝试后，我无法显示地图。

为简洁起见，我包括了 ol3 css

   <link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css" type="text/css">

除了将 mapUri 替换为 OL3 类之外，我让整个 Maps.js 类保持不变：

_mapUri : "http://ol3js.org/en/master/build/ol.js",

然后将 _loadMapLibrary 替换为：

  _loadMapLibrary : function() {
      var req = new qx.bom.request.Script();
      req.onload = function() {
      var map = new ol.Map({
          target: 'osmMap',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'sat'})
            })
          ],
          view: new ol.View({
            center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
            zoom: 4
          })
        });
      }.bind(this);

      req.open("GET", this._mapUri);
      req.send();
    },

似乎它应该工作......

4

1 回答 1

0

诀窍是添加这两行：

mapContainer.setId("map");
mapContainer.addCssClass("map");

在此覆盖中：

// overridden
_createScrollContainer : function()
{
  // MapContainer
  var layout = new qx.ui.mobile.layout.VBox().set(
  {
    alignX : "center",
    alignY : "middle"
  });
  var mapContainer = new qx.ui.mobile.container.Composite(layout);
  mapContainer.setId("map");
  mapContainer.addCssClass("map");
  return mapContainer;
},
于 2015-01-15T17:17:14.803 回答