Regular Shapes

This example uses OpenLayers v4.0.1. The latest is v.

#### Regular Shapes

Example of some Regular Shape styles.

Related API documentation:

- ol.Feature
,
- ol.Map
,
- ol.View
,
- ol.geom.Point
,
- ol.layer.Vector
,
- ol.source.Vector
,
- ol.style.Fill
,
- ol.style.RegularShape
,
- ol.style.Stroke
,
- ol.style.Style

Copy Edit
Regular Shapes Example of some Regular Shape styles. var stroke = new ol.style.Stroke({color: 'black', width: 2}); var fill = new ol.style.Fill({color: 'red'}); var styles = { 'square': new ol.style.Style({ image: new ol.style.RegularShape({ fill: fill, stroke: stroke, points: 4, radius: 10, angle: Math.PI / 4 }) }), 'triangle': new ol.style.Style({ image: new ol.style.RegularShape({ fill: fill, stroke: stroke, points: 3, radius: 10, rotation: Math.PI / 4, angle: 0 }) }), 'star': new ol.style.Style({ image: new ol.style.RegularShape({ fill: fill, stroke: stroke, points: 5, radius: 10, radius2: 4, angle: 0 }) }), 'cross': new ol.style.Style({ image: new ol.style.RegularShape({ fill: fill, stroke: stroke, points: 4, radius: 10, radius2: 0, angle: 0 }) }), 'x': new ol.style.Style({ image: new ol.style.RegularShape({ fill: fill, stroke: stroke, points: 4, radius: 10, radius2: 0, angle: Math.PI / 4 }) }) }; var styleKeys = ['x', 'cross', 'star', 'triangle', 'square']; var count = 250; var features = new Array(count); var e = 4500000; for (var i = 0; i < count; ++i) { var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e]; features[i] = new ol.Feature(new ol.geom.Point(coordinates)); features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 5)]]); } var source = new ol.source.Vector({ features: features }); var vectorLayer = new ol.layer.Vector({ source: source }); var map = new ol.Map({ layers: [ vectorLayer ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); <div id="map" class="map"></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Regular Shapes</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <script>
          var stroke = new ol.style.Stroke({color: 'black', width: 2});
          var fill = new ol.style.Fill({color: 'red'});

          var styles = {
            'square': new ol.style.Style({
              image: new ol.style.RegularShape({
                fill: fill,
                stroke: stroke,
                points: 4,
                radius: 10,
                angle: Math.PI / 4
              })
            }),
            'triangle': new ol.style.Style({
              image: new ol.style.RegularShape({
                fill: fill,
                stroke: stroke,
                points: 3,
                radius: 10,
                rotation: Math.PI / 4,
                angle: 0
              })
            }),
            'star': new ol.style.Style({
              image: new ol.style.RegularShape({
                fill: fill,
                stroke: stroke,
                points: 5,
                radius: 10,
                radius2: 4,
                angle: 0
              })
            }),
            'cross': new ol.style.Style({
              image: new ol.style.RegularShape({
                fill: fill,
                stroke: stroke,
                points: 4,
                radius: 10,
                radius2: 0,
                angle: 0
              })
            }),
            'x': new ol.style.Style({
              image: new ol.style.RegularShape({
                fill: fill,
                stroke: stroke,
                points: 4,
                radius: 10,
                radius2: 0,
                angle: Math.PI / 4
              })
            })
          };

          var styleKeys = ['x', 'cross', 'star', 'triangle', 'square'];
          var count = 250;
          var features = new Array(count);
          var e = 4500000;
          for (var i = 0; i < count; ++i) {
            var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
            features[i] = new ol.Feature(new ol.geom.Point(coordinates));
            features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 5)]]);
          }

          var source = new ol.source.Vector({
            features: features
          });

          var vectorLayer = new ol.layer.Vector({
            source: source
          });

          var map = new ol.Map({
            layers: [
              vectorLayer
            ],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
          });
        </script>
      </body>
    </html>