并排示例未显示 DOM

Question

我正在尝试实现 openlayers 3 的并排示例：http://heiri.5cz.de/test.html，但未显示地图的 DOM 渲染版本。我在 Windows 8.1 下使用 Internet Explorer 11 打开页面。我错过了什么？

test.html 的内容：

<!DOCTYPE html>
<html>
<head>
<title>Side-by-side example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/resources/bootstrap/css/bootstrap.min.css" type="text/css">
<script src="http://openlayers.org/en/v3.4.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.4.0/build/ol.js"></script>

<link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">


</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
  <div class="span4">
    <h4>Canvas</h4>
    <div id="canvasMap" class="map"></div>
  </div>
  <div class="span4">
    <h4>WebGL</h4>
    <div id="webglMap" class="map"></div>
    <div id="no-webgl" class="alert alert-error" style="display: none">
      This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
    </div>
  </div>
  <div class="span4">
    <h4>DOM</h4>
    <div id="domMap" class="map"></div>
  </div>
</div>

</div>
<script>
var domMap = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'sat'})
    })
  ],
  renderer: 'dom',
  target: 'domMap',
  view: new ol.View({
    center: [0, 0],
    zoom: 1
  })
});

if (ol.has.WEBGL) {
  var webglMap = new ol.Map({
    renderer: 'webgl',
    target: 'webglMap',
    layers: domMap.getLayers(),
    view: domMap.getView()
  });
} else {
  var info = document.getElementById('no-webgl');
  /**
   * display error message
   */
  info.style.display = '';
}

var canvasMap = new ol.Map({
  target: 'canvasMap',
  layers: domMap.getLayers(),
  view: domMap.getView()
});

</script>
</body>
</html>

Answer 1

问题是您的地图 div 没有高度。

如果您查看 http://openlayers.org/en/v3.4.0/examples/side-by-side.html 并使用您最喜欢的开发工具检查页面，您会发现地图 div 具有高度。

您的示例与 ol3 的并排 side.html 示例之间的区别在于并排 side.html 示例使用的 layout.css 文件。

并排示例未显示 DOM

side-by-side example not displaying DOM

openlayers-3