So, what is a vector style? Quite simply, it is a set of instructions about how to draw graphic primitives—the points, lines, polygons, and text that make up our vector features. OpenLayers provides a basic default style that renders features in various shades of blue. While this is quite nice, it's probably not what you'll want to use all the time.
You've already seen an example of a basic vector style in the previous chapter. Let's review it here:
var fill = new ol.style.Fill({ color: 'rgba(0,0,0,0.2)' }); var stroke = new ol.style.Stroke({ color: 'rgba(0,0,0,0.4)' }); var circle = new ol.style.Circle({ radius: 6, fill: fill, stroke: stroke }); var vectorStyle = new ol.style.Style({ fill: fill, stroke: stroke, image: circle });
This code defines specific rules for the fill
, stroke
, and image
properties of a new ol.style.Style
object. The fill and stroke rules specify a color and opacity using the RGBA (Red, Green, Blue, and Alpha) format. The...