How to draw a polygon in OpenLayers 3?

Question

enter image description here As my project requirement I want to draw a polygon look like this (>. In this case draw polygon sides too dense for arc. Successfully draw this using LineString but how to draw it using polygon. Need polygon because I have to fill color in between.

code in OpenLayers 2

var linearRing = new OpenLayers.Geometry.LinearRing(vertices);
        return new OpenLayers.Geometry.Polygon([linearRing]);

Here vertices is the array of points successfully drawn like the image In OpenLayers 3

var layerLines = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.LineString(markers, 'XY'),

            })]
        })
        //style: iconStyle
    });

    map.addLayer(layerLines);

Working but can't fill the in between area.

If we replace geometry: new ol.geom.LineString(markers, 'XY'), line by this

geometry: new ol.geom.Polygon(markers, 'XY'),

then it can't draw a polygon

Welcome to GIS SE! I think you are trying to use true curves in OpenLayers. I suspect @erilem may be looking for you to include the code you used to successfully do it as a linestring, and perhaps a more detailed picture. — PolyGeo, Dec 10 '14 at 07:15

score 10 · Accepted Answer · edited Apr 27 '16 at 10:50

This code is working correctly. where vertices are the array of coordinates

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

feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
var vectorSource= new ol.source.Vector({
        features: [feature ]
    });

 var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
 var map = new ol.Map({
        target: $('#map')[0],
        layers: [
            new ol.layer.Tile({
                source: new ol.source.TileJSON({
                    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
                })
            }),
            vectorLayer 
        ],
        view: new ol.View({
            center: ol.proj.transform([104.07143559628913, 30.669867138240782], 'EPSG:4326', 'EPSG:3857'),
            zoom: 12
        })
    });

Demo

score 2 · Answer 2 · edited Apr 13 '17 at 12:33

I confirm the other answer is working with openlayer 3.16

 _area_polyline = new ol.Feature({ geometry : new ol.geom.LineString(_area_polygon_coord[_area]) });


        // must have this transform, otherwise, no line showup.
        _area_polyline.getGeometry().transform('EPSG:4326', 'EPSG:3857');

        _area_polyline.setStyle(
                                       new ol.style.Style({
                                           stroke: new ol.style.Style({
                                               color: '#FF8C00',
                                               width: 20
                                           })
                                       })
                                     );


        _area_boundaryline_vectorSource = new ol.source.Vector({
            features: [_area_polyline]
        });

        _area_boundaryline_layer = new ol.layer.Vector({
        source: _area_boundaryline_vectorSource
    })

    map.addLayer(_area_boundaryline_layer);

How to draw a polygon in OpenLayers 3?

2 Answers2