我正在尝试将 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;
}
任何建议表示赞赏!