中心マーカを描きたい

OpenLayers 解決

このエントリは参照しないで下さい。
id:yellow_73:20130718 を参照して下さい。
標記の通り。ユーザ定義コントロールを作るというのが目的に近いかも知れんです。

まだ途中なんだけれども、現状をソースに出しておきます。なお、元スクリプトは http://www.finds.jp/wsdocs/kibanwms/howtouse/ol.html です。

問題点は

  • ユーザ定義コントロールからresizeが拾えんのはなんでな?
  • アイコン上にマウスカーソルをあわせると各種イベントをアイコンが拾ってしまう

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="OpenLayers-2.12/OpenLayers.js"></script>
<script>
function init() {

  var CenterMarker = OpenLayers.Class(OpenLayers.Control, {
    icon: null,
    onResize: null,
    initialize: function(options) {
      OpenLayers.Control.prototype.initialize.apply(this, arguments);
      if( this.icon == null ) {
        this.icon = options.icon;
      }
      else {
        this.icon.url = options.icon.url;
        this.icon.size = options.icon.size;
        this.icon.offset = options.icon.offset;
      }
    },
    destroy: function() {
      if( this.icon != null ) {
        this.icon.erase();
        this.icon = null;
      }
      if( this.onResize != null ) {
        OpenLayers.Event.stopObserving(window, 'resize', this.onResize);
        this.onResize = null;
      }
    },
    display: function(display) {
      this.icon.display(display);
    },
    draw: function() {
      // this.map.events で resize イベント拾いたいのに拾えないから
      // OpenLayers.Event.oberveを使用
      // destroyでstopObservingを実行しておくのが礼儀ではないかと
      this.onResize = function(_this){return function(){
        var viewSize = _this.map.getSize();
        _this.icon.moveTo(new OpenLayers.Pixel(viewSize.w/2, viewSize.h/2));
      }}(this);
      OpenLayers.Event.observe(window, "resize", this.onResize);
      var viewSize = this.map.getSize();
      return this.icon.draw(new OpenLayers.Pixel(viewSize.w/2, viewSize.h/2));
    },
  });

  // 32x32のアイコンを左上隅を基点にして描くとセンターにいかないので
  // -16,-16ずらしてセンターがあうようになるように
  // アイコンを作る
  var centerIcon = new OpenLayers.Icon(
    "centermarker-32x32.png",
    new OpenLayers.Size(32,32),
    new OpenLayers.Pixel(-16,-16)
  );

  var centerMarkerControl = new CenterMarker({icon: centerIcon});
  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>