[GIS] How to draw a polygon in OpenLayers 3

openlayers

enter image description hereAs 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

Best Answer

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

Related Question