センターマーカーを表示するコントロール

openlayers

id:yellow_73:20120909 の続き。id:yellow_73:20130717 の通り、マウスホイールイベントが効かないのが解決されていましたので、あらためてセンターマーカーのコントロールを作ってみます。
OpenLayers 2.13以上でのみ有効です。

resizeイベントが取れない云々と言ってたことについては、 CSS でどうにかしちゃうことにして、resizeイベントを拾わなくて良いようにしました。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script>
function init() {
  // コントロールクラスを作成
  // -------- ここまでクラス
  var CenterMarker = OpenLayers.Class(OpenLayers.Control, {
    // 画像ソース
    url: null,
    // 画像オフセット デフォルトでは画像左上隅がマップ中心に来る
    offset: null,
    // 初期化
    initialize: function(options) {
      OpenLayers.Control.prototype.initialize.apply(this, arguments);
      this.url = options.url;
      this.offset = options.offset;
    },
    // 廃棄
    destroy: function() {
      OpenLayers.Control.prototype.destroy.apply(this, arguments);
    },
    // 表示
    draw: function() {
      OpenLayers.Control.prototype.draw.apply(this, arguments);
      var ox = 0, oy = 0;
      if( this.offset ) {
        ox = this.offset.x;
        oy = this.offset.y;
      }
      // コントロールの左上をマップ中心に持っていく
      this.div.style.position = "absolute";
      this.div.style.left = "50%";
      this.div.style.top = "50%";
      // マーカ作成
      // left, top はマップ中心からのオフセット
      var img = document.createElement("img");
      img.src = this.url;
      img.style.position = "absolute";
      img.style.left = ox + "px";
      img.style.top = oy + "px";
      img.className = "olScrollable";
      // マーカをコントロールに追加
      this.div.appendChild(img);
      return this.div;
    }
  });
  // -------- ここまでクラス

  var centerMarkerControl = new CenterMarker({url: "cmark.png", offset: new OpenLayers.Pixel(-16,-16)});
  var options = {
    maxResolution:1.40625/2,
    controls: [
      new OpenLayers.Control.PanZoomBar(),
      new OpenLayers.Control.LayerSwitcher(),
      new OpenLayers.Control.Navigation(),
      centerMarkerControl,
      new OpenLayers.Control.Attribution({displayClass: 'prmtcd'})
    ],
    numZoomLevels: 18
  };

  var map = new OpenLayers.Map('MAP',options);
  var kibanwms = new OpenLayers.Layer.TMS(
    "KIBAN 25000 TMS",
    "http://www.finds.jp/ws/tmc/",
    {
      layername: "KBN25000ANF-4326",
      type: "png",
      attribution: '<a target=\"_blank\" href="http://www.finds.jp/wsdocs/kibanwms/index.html">基盤地図情報(平20業使、第449号)</a>',
      isBaseLayer: true
    }
  );

  map.addLayer(kibanwms);
  map.setCenter(new OpenLayers.LonLat(133.39, 34.5), 15);
}
</script>
<style type="text/css">
html, body, #MAP {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
}

.prmtcd {
  bottom: 4px;
  right: 4px;
  background: #fff;
}
</style>
</head>
<body onload="init()">
<div id="MAP">
</div>
</body>
</html>