动态数据

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Data</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.13.0/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.13.0/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.MapQuest({layer: 'sat'})
          })
        ],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      var imageStyle = new ol.style.Circle({
        radius: 5,
        snapToPixel: false,
        fill: new ol.style.Fill({color: 'yellow'}),
        stroke: new ol.style.Stroke({color: 'red',  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.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.setImageStyle(imageStyle);
        vectorContext.drawMultiPointGeometry(
            new ol.geom.MultiPoint(coordinates), null);

        var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]);
        var headFeature = new ol.Feature(headPoint);
        vectorContext.drawFeature(headFeature, headInnerImageStyle);

        vectorContext.setImageStyle(headOuterImageStyle);
        vectorContext.drawMultiPointGeometry(headPoint, null);

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

相关阅读:
Exp5 MSF基础应用
20155239 《网络对抗》Exp4 恶意代码分析
20155239吕宇轩《网络对抗》Exp3 免杀原理与实践
20155239 吕宇轩后门原理与实践
20155239吕宇轩 Exp1 PC平台逆向破解(5)M
学号—20155239—吕宇轩《信息安全系统设计基础》课程总结
20155238 2016-2017-2《Java程序设计》课程总结
20155238 第十五周课堂实践
20155238 实验四 Android程序设计
20155238 《JAVA程序设计》实验三（敏捷开发与XP实践）实验报告

原文地址：https://www.cnblogs.com/devgis/p/16542715.html