Question

我正在尝试使OpenLayers的地图/画布高度为100％，但我无法做到这一点。

我已经尝试过将“高度：100％”放置在几个地方。并使用了“ map.updateSize（）”函数，但未成功。我已经尝试使用“高度：100vh;”同样，但是它会拉伸地图而不是增加画布。

我在下面发送打印屏幕，说明发生了什么：

我希望地图/画布在页面上的高度为100％

该段代码显示在图片上

<div id="map" class="olMap">
    <div class="ol-viewport" data-view="146" style="position: relative; overflow: hidden; width: 100%; height: 100%; touch-action: none;">

        <canvas class="ol-unselectable" width="937" height="480" style="width: 100%; height: 100%; display: block;"></canvas>

        <div class="ol-overlaycontainer"></div>
        <div class="ol-overlaycontainer-stopevent">
        <div class="ol-zoom ol-unselectable ol-control">
        <button class="ol-zoom-in" type="button" title="Zoom in">+</button>
        <button class="ol-zoom-out" type="button" title="Zoom out">−</button>
        </div>
        <div class="ol-rotate ol-unselectable ol-control ol-hidden">                
        <button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass" style="transform: rotate(0rad);">⇧</span></button>
        </div>
        <div class="ol-attribution ol-unselectable ol-control ol-collapsed" style="display: none;"><ul></ul><button type="button" title="Attributions"><span>i</span></button>
</div>
</div>
</div>
</div>

我在其中创建地图的代码（Explore.vue）：

export default {
  ...
  methods: {
    initMap: function () {
      // eslint-disable-next-line
      this.map = new Map({
        target: 'map',
        layers: [
          layerGroupBaseMap
        ],
        view: new View({
          projection: 'EPSG:4326',
          center: [0, 0],
          zoom: 5
        })
      })
    }
  },
  mounted: function () {
    this.initMap()
  },
  ...
}

源代码：https://github.com/rmmariano/executive_frontend/tree/dev-rodrigo

有人有什么主意吗？

PS：我已经在gis.stackexchange.com [1]中问过这个问题，但是在OpenLayers网站上说要在stackoverflow中问这个问题，因此，我在这里添加了这个问题。

[1] https://gis.stackexchange.com/questions/314059/increase-the-size-height-of-the-openlayer-map-canvas

Answer 1

确保您包含

<style>
    html, body, .olmap {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
</style>

检查Chrome的devtools是没有意义的，因为devtools会减少应用程序的可用页面大小，因此地图将按比例缩小。但是您可以使用Edge进行检查：

在1680 x 1050显示屏上所预期的1680 x 977（允许顶部显示条）

增加OpenLayer地图/画布的大小/高度

1 个答案: