我看了你遇到的问题——在MapTiler地图上，圆形能正常渲染，但多边形死活不出来，哪怕更新了代码还是不行。咱们来一步步揪出问题所在。

核心错误原因 #

你当前的多边形代码里，有个关键的调用错误：你把.transform('EPSG:4326', 'EPSG:3857')直接挂在了ol.Feature实例上，但**ol.Feature并没有transform方法**，这个方法是属于ol.geom.Geometry类的。也就是说，你根本没把WGS84（EPSG:4326）的坐标转换成地图使用的Web墨卡托（EPSG:3857）投影，多边形的坐标还在原始坐标系里，自然不在当前地图视野范围内，也就看不到了。

修复后的代码 #

把transform方法移到ol.geom.Polygon对象上，同时调整一些细节方便验证：

/*********************************************************** 第3部分：修复后的多边形绘制 ***********************************************************/
var polygonLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [
      new ol.Feature(
        // 对Polygon几何对象调用transform，而不是Feature实例
        new ol.geom.Polygon([
          [
            [5.81, 51.33],
            [6.93, 52.44],
            [6.93, 52.33],
            [5.81, 51.33]
          ]
        ]).transform('EPSG:4326', 'EPSG:3857')
      )
    ]
  }),
  style: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({ color: 'black', width: 20 }),
      fill: new ol.style.Fill({ color: 'rgba(0,0,0,0.5)' }) // 用半透明填充，避免完全遮挡地图
    })
  ],
  zIndex: 6,
});
map.addLayer(polygonLayer);

额外验证建议 #

• 检查视野范围：你给的多边形坐标和地图初始中心[5.8, 51.34]有一定距离，修复后可能需要缩放或平移地图才能看到，也可以临时把多边形坐标改成和圆形接近的数值（比如[5.8,51.34]周边）来快速验证。
• 样式可读性：半透明填充能让你更直观地看到多边形是否覆盖在地图上，避免纯黑色填充和地图背景混淆。
• 变量命名规范：原来的Line变量名不符合多边形的语义，改成polygonLayer能让代码更清晰，减少后续维护的混淆。

内容的提问来源于stack exchange，提问作者Jos R