动态数据

<!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>

相关阅读:
海思HI3516A开发板顺利上线
android WIFI信息获取
五------Jsp九大内置对象。
在Windows下搭建Apacheserver
基于ContentObserver来动态取消或加入屏幕超时任务
使用Intent的Flag设置启动參数
IntelliJ IDEA像Eclipse一样打开多个项目
怎样让IE支持自己定义协议
《TCP/IP具体解释卷2：实现》笔记--协议控制块
POJ2029:Get Many Persimmon Trees(二维树状数组)

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