Dynamic Data

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

#### Dynamic Data

Example of dynamic data.

Example of dynamic data.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.geom.MultiPoint
,
- ol.geom.Point
,
- ol.layer.Tile
,
- ol.source.OSM
,
- ol.style.Circle
,
- ol.style.Fill
,
- ol.style.Stroke
,
- ol.style.Style

Copy Edit
Dynamic Data Example of dynamic data. var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); var imageStyle = new ol.style.Style({ image: new ol.style.Circle({ radius: 5, snapToPixel: false, fill: new ol.style.Fill({color: 'yellow'}), stroke: new ol.style.Stroke({color: 'red', width: 1}) }) }); var headInnerImageStyle = new ol.style.Style({ image: new ol.style.Circle({ radius: 2, snapToPixel: false, fill: new ol.style.Fill({color: 'blue'}) }) }); var headOuterImageStyle = new ol.style.Style({ image: new ol.style.Circle({ radius: 5, snapToPixel: false, fill: new ol.style.Fill({color: 'black'}) }) }); var n = 200; var omegaTheta = 30000; // Rotation period in ms var R = 7e6; var r = 2e6; var p = 2e6; map.on('postcompose', function(event) { var vectorContext = event.vectorContext; var frameState = event.frameState; var theta = 2 * Math.PI * frameState.time / omegaTheta; var coordinates = []; var i; for (i = 0; i < n; ++i) { var t = theta + 2 * Math.PI * i / n; var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r); var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r); coordinates.push([x, y]); } vectorContext.setStyle(imageStyle); vectorContext.drawGeometry(new ol.geom.MultiPoint(coordinates)); var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]); vectorContext.setStyle(headOuterImageStyle); vectorContext.drawGeometry(headPoint); vectorContext.setStyle(headInnerImageStyle); vectorContext.drawGeometry(headPoint); map.render(); }); map.render(); <div id="map" class="map"></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Dynamic Data</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 map = new ol.Map({
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
          });

          var imageStyle = new ol.style.Style({
            image: new ol.style.Circle({
              radius: 5,
              snapToPixel: false,
              fill: new ol.style.Fill({color: 'yellow'}),
              stroke: new ol.style.Stroke({color: 'red', width: 1})
            })
          });

          var headInnerImageStyle = new ol.style.Style({
            image: new ol.style.Circle({
              radius: 2,
              snapToPixel: false,
              fill: new ol.style.Fill({color: 'blue'})
            })
          });

          var headOuterImageStyle = new ol.style.Style({
            image: new ol.style.Circle({
              radius: 5,
              snapToPixel: false,
              fill: new ol.style.Fill({color: 'black'})
            })
          });

          var n = 200;
          var omegaTheta = 30000; // Rotation period in ms
          var R = 7e6;
          var r = 2e6;
          var p = 2e6;
          map.on('postcompose', function(event) {
            var vectorContext = event.vectorContext;
            var frameState = event.frameState;
            var theta = 2 * Math.PI * frameState.time / omegaTheta;
            var coordinates = [];
            var i;
            for (i = 0; i < n; ++i) {
              var t = theta + 2 * Math.PI * i / n;
              var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);
              var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);
              coordinates.push([x, y]);
            }
            vectorContext.setStyle(imageStyle);
            vectorContext.drawGeometry(new ol.geom.MultiPoint(coordinates));

            var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]);

            vectorContext.setStyle(headOuterImageStyle);
            vectorContext.drawGeometry(headPoint);

            vectorContext.setStyle(headInnerImageStyle);
            vectorContext.drawGeometry(headPoint);

            map.render();
          });
          map.render();
        </script>
      </body>
    </html>