地图组件仅在重新加载时正确显示

Question

我从 React 开始，我在 openlayers 中有一个地图组件，只是 returns div 和地图。当它从头加载地图页面时，这显然工作正常。但是，当您从任何其他站点导航到此页面时，它不会加载地图（如果您在此地图页面上单击重新加载，它会加载）。下面是地图组件的代码。

我试过 this but it won't work since the libraries are different and a lot more problems. And this 是我构建代码的地方。

import React, {Component} from 'react'

var ol = require('openlayers')
require('openlayers/css/ol.css')

class Map extends Component{
    componentDidMount(){
        var map = new ol.Map({
            target: this.refs.map,
            layers: [
                new ol.layer.Tile({
                  source: new ol.source.Stamen({
                      layer: 'toner'
                  })
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([-4.42, 36.71]),
                zoom: 13,
            })
        })

        this.setState({
            map: map,
        })
    }

    render () {
        return (
            <div id='map' ref='map'></div>
        )
    }
}

export default Map

Answer 1

更新：

原来这是 flex 的问题。 openlayers 容器位于 div 中，其中包含 display: flex、flex: 1 和 min-width: 0，所以当侧边栏菜单出现并且 占据了整个屏幕时 （这很重要，因为如果元素的宽度不为零，地图会完美调整到新大小），内容宽度被调整为 0，因为侧边栏菜单让位并且内容加载它从宽度加载0 对文本表现良好但对地图表现不佳。

<div className='content-wrapper'>
    <div className='another-div'>
        <div className='map'></div>
    </div>
</div>

解决方案：

将内容的弹性设置为 0，宽度设置为 100vw。因此，当侧边栏菜单打开时，内容只是滑出屏幕而没有调整大小。

地图组件仅在重新加载时正确显示

Map component only showing properly when reloading

openlayers

reactjs