OpenLayers размещает полигон на карте

Question

Я пишу веб-приложение для противоугонного устройства для газонокосилки-робота.

Сначала я нарисовал карту, которая работает, и вот результат:

Изображение -> https://imgur.com/qJaPZnR.png

Следующее, что мне нужно было сделать, это добавить на карту многоугольник, представляющий область, в которой может находиться робот, за пределами которой звучит сигнал тревоги. , Проблема в том, что полигон не появляется на моем экране, и его площадь согласно OpenLayers равна 0: /

Вот мой код:

function draw_poly(points, style) {
  const poly = new ol.geom.Polygon([new ol.geom.LinearRing(points.map(p=>[p.long, p.lat]))], style)
  console.log(poly.getArea())
  console.log(points.map(p=>[p.long, p.lat]))
  return new ol.Feature({
        geometry: poly
      });
}
[...]

const mower_limit_rect = draw_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",
strokeOpacity: 1,
strokeWidth: 3,
fillColor: "#00FF00",
fillOpacity: 0.8
});

[...]

const vectorSource = new ol.source.Vector({
  features: [mower, mower_limit_rect]
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});


const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vectorLayer
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([14,44]),
    zoom: 4
  })
});

Заранее спасибо!

Answer 1

Полигон должен быть построен непосредственно из координат, и он должен быть замкнут (т.е. конечная координата совпадает с первой). Он также должен быть преобразован из lon / lat в проекцию вида. Конструктор geometery не принимает параметр стиля. Вам нужно будет создать стиль 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;

}