时间戳

首页 > 解决方案 > 地图宽度变化时的openlayers map.updateSize

javascript - 地图宽度变化时的openlayers map.updateSize

问题描述

显示侧面板时，我希望地图的比例保持在新的 div 宽度（或高度）内。在那里它只是减少了，这影响了国家的广度。我试图 map.updateSize 没有成功。我该怎么做 ？更多细节

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
   
  })/*,
   minResolution: "auto",
   maxResolution: "auto"*/
});
/*window.onresize = function(event)
{
   map.zoomOut(); map.zoomIn();
}*/
/*$('#map').on('change',function(){setTimeout(() => { this.map.updateSize(); });})*/
$("#btn").click(function(){
  $("main aside").css("display","block");
  $("main section").css("width","1000px");
  $("#map").css("width","1000px")
   }); 
$("#close").click(function(){
  $("main aside").css("display","none");
  $("main section").css("width","1100px");
  $("#map").css("width","1100px")
   });
/*map.updateSize()*/
/*map.onresize = setTimeout(() => { this.map.updateSize() })*/
$(window).resize(function () {
  if (window.resizeMapUpdateTimer) {
    clearTimeout(window.resizeMapUpdateTimer)
  }
  window.resizeMapUpdateTimer= setTimeout(function () {
    // Update container size
    map.updateSize()
  }, 500)
})`var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
   
  })/*,
   minResolution: "auto",
   maxResolution: "auto"*/
});
/*window.onresize = function(event)
{
   map.zoomOut(); map.zoomIn();
}*/
/*$('#map').on('change',function(){setTimeout(() => { this.map.updateSize(); });})*/
$("#btn").click(function(){
  $("main aside").css("display","block");
  $("main section").css("width","1000px");
  $("#map").css("width","1000px")
   }); 
$("#close").click(function(){
  $("main aside").css("display","none");
  $("main section").css("width","1100px");
  $("#map").css("width","1100px")
   });
/*map.updateSize()*/
/*map.onresize = setTimeout(() => { this.map.updateSize() })*/
$(window).resize(function () {
  if (window.resizeMapUpdateTimer) {
    clearTimeout(window.resizeMapUpdateTimer)
  }
  window.resizeMapUpdateTimer= setTimeout(function () {
    // Update container size
    map.updateSize()
  }, 500)
})

https://codepen.io/epinrap/pen/gOgwLvZ

标签： javascriptjquerycssopenlayers

解决方案

map.updateSize 是解决方案，问题是稍后触发它，当我将它放在按钮脚本中时它可以工作：

setTimeout(function () {
    // Update container size
    map.updateSize()
  }, 300)

推荐阅读