canvas - 增加 OpenLayer 地图/画布的大小/高度
问题描述
我试图让 OpenLayers 的 Map/Canvas 高度为 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
解决方案
推荐阅读
- substrate - Substrate 从运行时创建权限
- vba - 自动运行 OPCTest 状态
- python - Python 过滤器(谓词、电流、阈值)
- java - th:replace 时添加了不必要的元素
- javascript - 如何在Javascript中添加动态切换案例?
- c++ - 在 C++ 中从 C 库中声明和访问结构
- git - 当 git merge 发现冲突或其他问题时,我可以强制失败吗?
- github - 复制和重命名文件的 GitHub 操作
- android - 如何请求许可:READ_PRIVILEGED_PHONE_STATE?
- c# - 如何认证 UWP .appxbundle?