OpenLayers 15c アニメーションでパン

map.panT Exsample（animated_panning.html）を参考にクリックした位置が中央になるように、地図がアニメーションして移動するようにします。
この動作のためのスクリプトを追加します。

---
<script type="text/javascript">
  var map = null; 
  var layer1, layer3, layer4, layer5, layer6, layer7, layer8;

  var running = false; //追加

  var extent = new OpenLayers.Bounds(-31337.715508,-77650.134635,-21796.513842,-70055.061952);
  //ここから追加
  OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
    defaultHandlerOptions: {
      'single': true,
      'delay': 200
     },

    initialize: function(options) {
      this.handlerOptions = OpenLayers.Util.extend(
        {}, this.defaultHandlerOptions
       );
      OpenLayers.Control.prototype.initialize.apply(
        this, arguments
       ); 
      this.handler = new OpenLayers.Handler.Click(
        this, {
          'click': this.onClick 
        }, this.handlerOptions
       );
     }, 

    onClick: function(evt) {  
      map.panTo(map.getLonLatFromPixel(evt.xy));
     }   

  });
  //ここまで
---

地図の表示部分のスクリプトに次のように追加します。

---
    map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
    var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
    map.addControl(panel);
    map.zoomToMaxExtent();
    map.setOptions({restrictedExtent: extent});

    var click = new OpenLayers.Control.Click(); //追加
    map.addControl(click);                      //追加
    click.activate();                           //追加
  }
</script>
---

*map.setOptions({restrictedExtent: extent});で地図が範囲外に移動しないので、地図を拡大して試してください。
*Overview はうまく表示しなかったので、map.addControl(new OpenLayers.Control.OverviewMap());は削除しました。


↓