1

This is the code :

drawPoligon : function (vertices) {
    debugger;
    var map = peaMap;
    var feature = new ol.Feature({
        geometry: new ol.geom.Polygon([vertices])
    });

    var vectorSource= new ol.source.Vector({
        features: [feature ]
    });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    map.addLayer(vectorLayer);

}
vertices = [1253906.08982072, 5430790.35506443, 1253935.16019819, 5430769.74133789, 1253951.90741865, 5430793.82802342, 1253955.42311216........]

Format of my coordinates array:

[
  [1253906.08982072,5430790.35506443],
  [1253935.16019819,5430769.74133789],
  [1253951.90741865,5430793.82802342],
  [1253955.42311216,5430798.88815272],
  [1253953.91064413,5430800.28580152],
  [1253952.03520923,5430801.40886153],
  [1253945.88800332,5430791.50307534],
  [1253936.62615957,5430797.3914173]
]

...The coordinates list isnt full. Only part of it for exposure.

crackmigg
  • 5,571
  • 2
  • 30
  • 40
Christian Scarselli
  • 67
  • 10
  • 1
    A polygon on openLayers must include its first coordinates at the end (For the closed connection) So Add your first coordinates again. – Thomas J. Nov 22 '18 at 14:47
  • the coordinates entered are not complete, the complete ones are too long to report here. It was only to ask which one was the correct format – Christian Scarselli Nov 22 '18 at 14:49
  • Okey gotchya. Are you faimliar with projections of openLayers? And you could try to zoom to it, maybe it draws it just in totally wrong side. `map.zoomToExtent(vectorLayer.getDataExtent(), false);` – Thomas J. Nov 22 '18 at 14:51
  • Also not enough [ ]. Polygons can be multi-ring (i.e. have holes) so even a simple triangle would be [[[1253906.08982072,5430790.35506443],[1253935.16019819,5430769.74133789],[1253951.90741865,5430793.82802342],[1253906.08982072,5430790.35506443]]] – Mike Nov 22 '18 at 14:57
  • This guy provided with basic function how to draw a polygon. https://stackoverflow.com/questions/4002981/openlayers-how-do-i-draw-a-polygon-from-existing-lonlat-points this is how I do it https://jsfiddle.net/u01q7hcm/ It is most likely to do something with coordinates, its usually sensitive. Make sure you add your layer to the map in the first place. – Thomas J. Nov 22 '18 at 15:01
  • My previous comment isn't relevant in this case, since the extra [] are in `ol.geom.Polygon([vertices])` – Mike Nov 22 '18 at 15:22
  • You're right mike, I solved by changing the structure of the coordinates and adding the parenthesis [] – Christian Scarselli Nov 24 '18 at 10:31
  • To whom it may concern: From my point of view, the processing of the example code in a question corresponding to the given answers or comments makes no sense, especially not for readers who want to track the whole thing later. We all learn from mistakes. –  Nov 25 '18 at 06:37

1 Answers1

1

The format [ [lon, lat], … ] is the correct one. With a bigger zoom you can see the result:

var osmLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var vertices = [
    [1253906.08982072, 5430790.35506443],
    [1253935.16019819, 5430769.74133789],
    [1253951.90741865, 5430793.82802342],
    [1253955.42311216, 5430798.88815272],
    [1253953.91064413, 5430800.28580152],
    [1253952.03520923, 5430801.40886153],
    [1253945.88800332, 5430791.50307534],
    [1253936.62615957, 5430797.3914173]
  ];

  var feature = new ol.Feature({
    geometry: new ol.geom.Polygon([vertices])
  });

  var vectorSource = new ol.source.Vector({
    features: [feature]
  });
  var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
      stroke: new ol.style.Stroke({
        width: 2,
        color: [255, 0, 0]
      })
    })
  });

  var map = new ol.Map({
    layers: [osmLayer, vectorLayer],
    target: document.getElementById("map"),
    view: new ol.View({
      center: [1253950, 5430800],
      zoom: 20
    })
  });