OpenLayers 3 в мобильном приложении Qooxdoo

При подготовке к предстоящему выпуску OpenLayers 3 я попытался заставить базовый пример карты работать в мобильном приложении Qooxdoo.

Я использовал демонстрационную карту Qooxdoo mobileshowcase в качестве отправной точки, но после многих часов попыток мне не удалось заставить карту появиться.

Для краткости я включил ol3 css

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

Я оставил весь класс Maps.js таким же, за исключением того, что заменил mapUri на OL3:

_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();
    },

вроде должно работать...


openlayers-3 qooxdoo
person Jonathan    schedule 06.07.2014    source источник
comment
В общем должно работать. Может быть, у меня есть время, чтобы взглянуть на него.   -  person czuendorf    schedule 08.07.2014
comment
@czuendorf - у вас когда-нибудь была возможность взглянуть на это?   -  person Jonathan    schedule 22.09.2014

Ответы (1)


arrow_upward
0
arrow_downward

Хитрость заключалась в том, чтобы добавить эти две строки:

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;
},
person Jonathan    schedule 15.01.2015