地图大小未在 map.udpateSize() 上更新

Question

我正在使用开放图层发布地图。但我无法弄清楚根据屏幕大小使地图大小动态化的方法。因为无论屏幕大小如何，每个屏幕上的地图都保持不变。我也尝试了 map.updatesize()。但这也不起作用。 我的代码是

        layer = new ol.layer.Tile({
        title: 'Basemap',
        baseLayer: true,
        visible: true,
        
        

        source: new ol.source.TileWMS({
            url: 'http://mlinfomaps.in/geoserver/wms',
            params: { 'LAYERS': 'MSSDS_WS:MSSDS_BASEMAP', 'TILED': true },
            serverType: 'geoserver',
          
            // Countries have transparency, so do not fade tiles:
            transition: 0,
            crossOrigin: "anonymous"
        })
    });


    var mousePositionControl = new ol.control.MousePosition({
        coordinateFormat: ol.coordinate.createStringXY(4),
        projection: 'EPSG:4326',
        // comment the following two lines to have the mouse position
        // be placed within the map.
        //className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
        //undefinedHTML: ' '
    });


    var projection = new ol.proj.Projection({
        //code: 'EPSG: 4326', // *code says: 5261 ...try to see if this is right
        //extent: [71.6142, 22.3645, 81.8754, 15.1508],
        extent:[7970828.0670139585, 1681517.1260521673, 9127778.927138386, 2541280.8202038296]
    })
    function scaleControl() {
        control = new ol.control.ScaleLine({
            units: 'metric',
            bar: true,
            steps: 4,
            text: true,
            
            minWidth: 100
        });
        return control;
    }

    var sourceMeasure = new ol.source.Vector({
        crossOrigin: "anonymous",

        
    });
    var vectorMeasure = new ol.layer.Vector({
       
        source: sourceMeasure,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#df1c29',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 6,
                fill: new ol.style.Fill({
                    color: '#df1c29'
                })
            })
        }),
        title: 'Measure Overlay',
    });

    // The Map
    //var overlay = new ol.Overlay
    //    ({
    //        element: container,
    //        autoPan: true,
    //        autoPanAnimation: {
    //            duration: 250
    //        }
    //    });


    var view = new ol.View
        ({
            center: ol.proj.transform([76.7997, 18.6298], 'EPSG:4326','EPSG:3857'),
            zoom: 7,
            extent: projection.getExtent(),
            //minZoom:7,
            maxZoom: 12

        });

    var map = new ol.Map
        ({
            target: 'map',
            controls: ol.control.defaults().extend([mousePositionControl, scaleControl()]),
            view: view,   
            //fit: view.fit(),
            //overlays: [overlay],
            layers: [layer]
            
        });
    const extent = projection.getExtent()
    map.getView().fit(extent);
    map.updateSize();


    window.onresize = function()
        {
    setTimeout( function() { map.updateSize();}, 200);
        }

    '''

不同屏幕上的地图如下所示： 在我的屏幕上看起来像 https://i.stack.imgur.com/KIYio.png

在我同事的屏幕上看起来像 https://i.stack.imgur.com/6c4zk.png

请帮我解决这个问题。

提前致谢！

Answer 1

你好，我有同样的问题，我通过这样做来解决它

ts：

html：