RLayers RLayerVector 没有高度

问题描述 投票:0回答:0

我正在尝试将 RLayers 用于一个项目,但我很难完成非常简单的任务:“向地图添加一些 1 x 1 公里的正方形”。 我不知道这是否是问题所在,但我可以在检查时看到 RMap 本身具有正确的 100% 高度(也可以正常工作),但 RLayerVector 的高度为 0 - 这可以解释为什么我可以看到他们:

<RMap width={"100%"} height={"100%"}
    initial={view}
    view={[view, setView]} 
    className="MapView">
    <ROSM />
    <div className="MapView_squares_overlay"> //this div might not be needed
        <RLayerVector zIndex={10}>
            <RStyle.RStyle>
                {/* styling for said squares */}
                <RStyle.RRegularShape points={4}>
                    <RStyle.RFill color="blue" />
                </RStyle.RRegularShape>
            </RStyle.RStyle>
            {zones.map((zone, index) => {
                const x1 = view.center[0]; //to assure that they're within the viewport
                const y1 = view.center[1];
                return <RFeature
                    key={index}
                    geometry={
                        new Polygon([
                            [
                                [x1, y1],
                                [x1, y1 + 1000],
                                [x1 + 1000, y1 + 1000],
                                [x1 + 1000, y1],
                                [x1, y1],
                            ],
                        ])
                    }
                    style={undefined}
                />;
            })}
        </RLayerVector>
    </div>
</RMap>

我有一些样式可以搭配它,但我怀疑这现在有什么不同:

.MapView{
    position: fixed;
    top:0;
    right:0;
    margin: 0; 
    padding: 0;
    width: 100vw;
    height: 100vh;
}

.MapView_squares_overlay{
    position: absolute;
    top:0;
    right:0;
    margin: 0; 
    padding: 0;
    width: 100vw;
    height: 100vh;
}

任何建议表示赞赏!

reactjs typescript openlayers
© www.soinside.com 2019 - 2024. All rights reserved.