javascript - open layers 3 how to draw a polygon programmatically?

Question

How to draw a polygon use open layer 3 programmatically?

i have a json array coordinate:

[
        {
            "lng": 106.972534,
            "lat": -6.147714
        },
        {
            "lng": 106.972519,
            "lat": -6.133398
        },
        {
            "lng": 106.972496,
            "lat": -6.105892
        }
]

and now i want to draw it on map use open layers. how to do it?

Answer 1

You need to use the ol.geom.Polygon constructor. That constructor expects an array of rings, each ring being an array of coordinates.

In your case this is how you will create the polygon (this assumes your array of lng lat pairs is named a):

// A ring must be closed, that is its last coordinate
// should be the same as its first coordinate.
var ring = [
  [a[0].lng, a[0].lat], [a[1].lng, a[1].lat],
  [a[2].lng, a[2].lat], [a[0].lng, a[0].lat]
];

// A polygon is an array of rings, the first ring is
// the exterior ring, the others are the interior rings.
// In your case there is one ring only.
var polygon = new ol.geom.Polygon([ring]);

Now if you want to display this polygon in a map with a view whose projection is Web Mercator (EPSG:3857) you will need to transform the polygon from EPSG:4326 to EPSG:3857:

polygon.transform('EPSG:4326', 'EPSG:3857');

And to actually display the polygon you need to wrap it in a feature object, and add it to a vector layer (a vector source really, see below), which you add to the map as any other layer:

// Create feature with polygon.
var feature = new ol.Feature(polygon);

// Create vector source and the feature to it.
var vectorSource = new ol.source.Vector();
vectorSource.addFeature(feature);

// Create vector layer attached to the vector source.
var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

// Add the vector layer to the map.
map.addLayer(vectorLayer);