1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.geom.MultiPoint');
|
4 | goog.require('ol.geom.Point');
|
5 | goog.require('ol.layer.Tile');
|
6 | goog.require('ol.source.OSM');
|
7 | goog.require('ol.style.Circle');
|
8 | goog.require('ol.style.Fill');
|
9 | goog.require('ol.style.Stroke');
|
10 | goog.require('ol.style.Style');
|
11 |
|
12 |
|
13 | var map = new ol.Map({
|
14 | layers: [
|
15 | new ol.layer.Tile({
|
16 | source: new ol.source.OSM()
|
17 | })
|
18 | ],
|
19 | target: 'map',
|
20 | view: new ol.View({
|
21 | center: [0, 0],
|
22 | zoom: 2
|
23 | })
|
24 | });
|
25 |
|
26 | var imageStyle = new ol.style.Style({
|
27 | image: new ol.style.Circle({
|
28 | radius: 5,
|
29 | snapToPixel: false,
|
30 | fill: new ol.style.Fill({color: 'yellow'}),
|
31 | stroke: new ol.style.Stroke({color: 'red', width: 1})
|
32 | })
|
33 | });
|
34 |
|
35 | var headInnerImageStyle = new ol.style.Style({
|
36 | image: new ol.style.Circle({
|
37 | radius: 2,
|
38 | snapToPixel: false,
|
39 | fill: new ol.style.Fill({color: 'blue'})
|
40 | })
|
41 | });
|
42 |
|
43 | var headOuterImageStyle = new ol.style.Style({
|
44 | image: new ol.style.Circle({
|
45 | radius: 5,
|
46 | snapToPixel: false,
|
47 | fill: new ol.style.Fill({color: 'black'})
|
48 | })
|
49 | });
|
50 |
|
51 | var n = 200;
|
52 | var omegaTheta = 30000;
|
53 | var R = 7e6;
|
54 | var r = 2e6;
|
55 | var p = 2e6;
|
56 | map.on('postcompose', function(event) {
|
57 | var vectorContext = event.vectorContext;
|
58 | var frameState = event.frameState;
|
59 | var theta = 2 * Math.PI * frameState.time / omegaTheta;
|
60 | var coordinates = [];
|
61 | var i;
|
62 | for (i = 0; i < n; ++i) {
|
63 | var t = theta + 2 * Math.PI * i / n;
|
64 | var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);
|
65 | var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);
|
66 | coordinates.push([x, y]);
|
67 | }
|
68 | vectorContext.setStyle(imageStyle);
|
69 | vectorContext.drawGeometry(new ol.geom.MultiPoint(coordinates));
|
70 |
|
71 | var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]);
|
72 |
|
73 | vectorContext.setStyle(headOuterImageStyle);
|
74 | vectorContext.drawGeometry(headPoint);
|
75 |
|
76 | vectorContext.setStyle(headInnerImageStyle);
|
77 | vectorContext.drawGeometry(headPoint);
|
78 |
|
79 | map.render();
|
80 | });
|
81 | map.render();
|