Javascript OpenLayers在地图上放置多边形

我正在为割草机机器人防盗装置编写一个web应用程序

我做的第一件事是画一张地图，这很有效，结果如下：

图片->

接下来我要做的是在地图上添加一个多边形，它代表机器人可能所在的区域，在该区域外会发出警报。 问题是多边形没有出现在我的屏幕上，根据OpenLayers，其面积为0:/

这是我的密码：

function draw\u poly（点、样式）{
常量多边形=新的ol.geom.Polygon（[新ol.geom.LinearRing（points.map（p=>[p.long，p.lat]）），样式）
console.log（poly.getArea（））
log（points.map（p=>[p.long，p.lat]））
返回新的ol.特性({
几何体：多边形
});
}
[...]
常数割草机\u限值\u rect=draw\u poly([
{lat:44.059052，long:1.344245}，
{lat:44.059022，long:1.344543}，
{lat:44.058733，long:1.344482}，
{lat:44.058773，long:1.344246}
], {
strokeColor:#00FF00“，
频闪不透明度：1，
冲程宽度：3，
fillColor:#00FF00“，
填充不透明度：0.8
});
[...]
const vectorSource=新ol.source.Vector({
特点：[割草机，割草机限制]
});
var vectorLayer=新ol.layer.Vector({
来源：矢量源
});
常量映射=新ol.map({
目标：“地图”，
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
}),
矢量层
],
视图：新ol.view({
中心：Lonlat的其他项目（[14,44]），
缩放：4
})
});

---

提前谢谢你

多边形应直接从坐标构建，且必须闭合（即最终坐标与第一个坐标相同）。它还必须从lon/lat转换为视图投影。Geometry构造函数不接受样式参数。您需要根据样式对象中的值构造OpenLayers样式，并将其设置为要素样式。单独的颜色和不透明度值需要组合为rgba颜色阵列

function draw_poly(points, style) {

  const closedPoints = points.concat([points[0]]);
  const poly = new ol.geom.Polygon([closedPoints.map(p=>[p.long, p.lat])]).transform('EPSG:4326', 'EPSG:3857');
  const feature = new ol.feature(poly);

  const fillColor = ol.color.asArray(style.fillColor).slice();
  fillColor[3] = style.fillOpacity;
  const strokeColor = ol.color.asArray(style.strokeColor).slice();
  strokeColor[3] = style.strokeOpacity;
  const olStyle = new ol.style.Style({
    fill: new ol.style.Fill({
      color: fillColor
    }),
    stroke: new ol.style.Stroke({
      color: strokeColor,
      width: style.strokeWidth
    })
  });
  feature.setStyle(olStyle);
  return feature;

}

---

非常感谢你！你真的帮了我的忙，这看起来确实很愚蠢，但是我在OpenLayers文档方面遇到了很多麻烦。