The last example only used one linear ring for the polygon. Let's use the Web Inspector's console to create a polygon and then add a linear ring to see what happens. Open the vector_template.html
file in your browser and then open the Web Inspector's Console. We'll be typing the commands into the console directly and observing the result on the map.
First, create a polygon using the preceding example:
var polygon = new ol.geom.Polygon([ [ [-20,-20],[-20,20],[20,20],[20,-20],[-20,-20] ] ]);
We'll need to reproject the coordinates into our view's projection:
polygon.transform('EPSG:4326', 'EPSG:3857');
Now, we'll need a source and a layer:
var source = new ol.source.vector({ features: [new ol.Feature(polygon)], projection: 'EPSG:4326' }); var layer = new ol.layer.vector({ source: source, style: vectorStyle });
And add it to the map:
map.addLayer(layer);
You should see something like the following screenshot:
Now create a linear ring that will make a hole...