OpenLayers 17i フューチャーを自動的に回転

Rotate vector features(rotate-features.html) フューチャーを自動的に回転
を参考にします。

次のようにコードを追加します。
openlayers17hで追加したコードは削除してください。

---
// we want opaque external graphics and non-opaque internal graphics
 var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
  layer_style.fillOpacity = 0.2;
  layer_style.graphicOpacity = 1;

 /*
  * Blue style
  */
 var style_blue = OpenLayers.Util.extend({}, layer_style);
  style_blue.strokeColor = "blue";
  style_blue.fillColor = "blue";

 /*
  * Green style
  */
 var style_green = {
  strokeColor: "#00FF00",
  strokeWidth: 3,
  pointRadius: 6,
  pointerEvents: "visiblePainted"
 };

 var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style: layer_style});

 // create a point feature
 var point = new OpenLayers.Geometry.Point(-28000, -76000);
 var pointFeature = new OpenLayers.Feature.Vector(point,null,style_blue);
 var point2 = new OpenLayers.Geometry.Point(-27000, -76000);
 var pointFeature2 = new OpenLayers.Feature.Vector(point2,null,style_green);

 // create a line feature from a list of points
 var pointList = [];
  newPoint = new OpenLayers.Geometry.Point(-25000,-73000);
  pointList.push(newPoint);
  newPoint = new OpenLayers.Geometry.Point(-26000,-74000);
  pointList.push(newPoint);
  newPoint = new OpenLayers.Geometry.Point(-27000,-75000);
  pointList.push(newPoint);
 var lineFeature = new OpenLayers.Feature.Vector(
  new OpenLayers.Geometry.LineString(pointList),null,style_green);

 // create a polygon feature from a linear ring of points
 var pointList = [];
  newPoint = new OpenLayers.Geometry.Point(-28000,-73000);
  pointList.push(newPoint);
  newPoint = new OpenLayers.Geometry.Point(-29500,-74000);
  pointList.push(newPoint);
  newPoint = new OpenLayers.Geometry.Point(-30000,-75000);
  pointList.push(newPoint);
  newPoint = new OpenLayers.Geometry.Point(-28500,-74500);
  pointList.push(newPoint);
  newPoint = new OpenLayers.Geometry.Point(-27500,-73500);
  pointList.push(newPoint);

 var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
 var polygonFeature = new OpenLayers.Feature.Vector(
 new OpenLayers.Geometry.Polygon([linearRing]));

 map.addLayer(vectorLayer);
 vectorLayer.addFeatures([pointFeature, pointFeature2, lineFeature, polygonFeature]);
   
 var boxes = new OpenLayers.Layer.Boxes("boxes");
 //Draw divs as ‘boxes’ on the layer.
 var bounds = new OpenLayers.Bounds(-29000, -72000, -28000, -71000); 
 var box = new OpenLayers.Marker.Box(bounds);

 boxes.addMarker(box);
 map.addLayer(boxes);
  
 var boxes2  = new OpenLayers.Layer.Vector( "Boxes" );
 var bounds2 = new OpenLayers.Bounds(-27000, -72000, -26000, -71000);
 var box2 = new OpenLayers.Feature.Vector(bounds2.toGeometry());
 //Create a new polygon geometry based on this bounds.

 boxes2.addFeatures(box2);
 map.addLayer(boxes2);
// ここから追加   
 // start rotating
 var origin = new OpenLayers.Geometry.Point(-26000, -74000); //修正
 var style = {
  strokeColor: "#666666",
  strokeOpacity: 1,
  strokeWidth: 1,
  pointRadius: 2,
  pointerEvents: "visiblePainted"
 };
 var center = new OpenLayers.Feature.Vector(origin, null, style);
 vectorLayer.addFeatures([center]);
 window.setInterval(rotateFeature, 100, pointFeature, 360 / 20, origin);
 window.setInterval(rotateFeature, 100, lineFeature, 360 / 40, origin);
 window.setInterval(rotateFeature, 100, polygonFeature, -360 / 20, origin);
} 

function rotateFeature(feature, angle, origin) {
 feature.geometry.rotate(angle, origin);
 feature.layer.drawFeature(feature);
} // function init() の最後
// ここまで

function displayZoom() {
　document.getElementById("zoom").innerHTML = map.zoom.toFixed(4);
}
---