RLayers中RLayerVector高度为0，无法添加1km×1km正方形图层求助

1. 移除多余的包裹div #

你加的MapView_squares_overlay div完全没必要，RLayerVector必须直接作为RMap的子组件存在——脱离RMap的容器上下文后，图层会丢失布局依赖，直接出现高度为0的情况。

修改后的核心结构：

<RMap width={"100%"} height={"100%"}
    initial={view}
    view={[view, setView]} 
    className="MapView">
    <ROSM />
    {/* 直接放置RLayerVector，去掉外层div */}
    <RLayerVector zIndex={10}>
        <RStyle.RStyle>
            {/* 多边形样式调整 */}
            <RStyle.RFill color="blue" opacity={0.5} />
            <RStyle.RStroke color="darkblue" width={2} />
        </RStyle.RStyle>
        {zones.map((zone, index) => {
            // 坐标逻辑放这里
        })}
    </RLayerVector>
</RMap>

2. 修正坐标单位问题 #

你直接给坐标加1000的逻辑有问题：

• 如果地图用的是EPSG:4326经纬度投影，1000的数值会把正方形放到地球另一端，完全不在可视范围；
• 如果是EPSG:3857墨卡托投影（米单位），1000是合理的，但要确保视图投影匹配。

适配EPSG:4326的做法 #

先把经纬度转成墨卡托计算1km范围，再转回经纬度：

import { transform } from 'ol/proj';

{zones.map((zone, index) => {
    // 把视图中心从经纬度转成墨卡托
    const centerMercator = transform(view.center, 'EPSG:4326', 'EPSG:3857');
    const x1 = centerMercator[0];
    const y1 = centerMercator[1];
    
    // 构建1km正方形的墨卡托坐标
    const polygon = new Polygon([
        [
            [x1, y1],
            [x1, y1 + 1000],
            [x1 + 1000, y1 + 1000],
            [x1 + 1000, y1],
            [x1, y1],
        ],
    ]);
    // 转回经纬度投影
    polygon.transform('EPSG:3857', 'EPSG:4326');
    
    return <RFeature
        key={index}
        geometry={polygon}
    />;
})}

适配EPSG:3857的做法 #

如果你的视图已经用墨卡托投影，直接用米单位计算即可，无需转换：

{zones.map((zone, index) => {
    const x1 = view.center[0];
    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],
                ],
            ])
        }
    />;
})}

3. 修正多边形样式配置 #

RStyle.RRegularShape是给点要素做规则形状标记用的，你这里是Polygon多边形，直接用填充和描边样式就行，不用绕弯子。

4. 移除冗余属性 #

删掉RFeature上的style={undefined}，让它自动继承RLayerVector的样式，避免样式冲突。

内容的提问来源于stack exchange，提问作者G. B. Wanscher