0

さまざまなスクリプトとインターネットからのレンダリング アルゴリズムを使用して、OpenStreetMaps のキャンバス ビジュアライゼーションを開発しました。この上に、Openlayers の機能では描画できないカスタム オブジェクトを描画するキネティック ステージがあります。

Openlayers は、私が使用したい多くの機能を提供するため、このフレームワークに切り替えようとしています。イベントを Openlayers に伝播する方法がわからないため、現在、イベントの伝播に行き詰まっています。

index.html

<div id="canvasdiv">
  <div id="KineticDiv"> </div>
  <div id="OLMapDiv"> </div>
</div>

スタイル.css

#KineticDiv {
  position: absolute;
  z-index: 1000;
}
#OLMapDiv {
  position: absolute;
  width: 1000px;
  height: 600px;
  z-index: 0;
}

ol.js

function OpenLayersMap(divname) {
  var osmLayer = new OpenLayers.Layer.OSM("Open Street Maps",
    ["http://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
     "http://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
     "http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"]);
                                        ]);
  var gmLayer = new OpenLayers.Layer.Google("Google Maps");
  var proj = new OpenLayers.Projection("EPSG:4326");

  OpenLayers.ImgPath = "/static/img/";

  this.map = new OpenLayers.Map({
    div: divname,
    allOverlays: false,
    theme: null,
    controls: [
      new OpenLayers.Control.Attribution(),
      new OpenLayers.Control.Navigation(),
      new OpenLayers.Control.LayerSwitcher(),
      new OpenLayers.Control.PanZoomBar(),
      new OpenLayers.Control.ScaleLine(),
      new OpenLayers.Control.MousePosition({
        displayProjection: proj
      }),
      new OpenLayers.Control.KeyboardDefaults()
      ]
  });
  this.map.addLayers([osmLayer, gmLayer]);
  this.map.setCenter(
    new OpenLayers.LonLat(8.56, 50).transform(proj, this.map.getProjectionObject()), 10
  );
}

OpenLayersMap.prototype = {
  constructor: OpenLayersMap
}

main.js

function main() {
  var self = this;
  this.olmap = new OpenLayersMap("OLMapDiv");
  this.kinetic = new KineticStage("KineticDiv");

  $("div#canvasdiv").bind("mouseout", function(event){
// TODO self.olmap.mouseOut(event);
  }).bind("mouseup", function(event){
// TODO self.olmap.mouseUp(event);
  }).bind("mousedown", function(event){
// TODO self.olmap.mouseDown(event);
  }).bind("mousewheel", function(event, delta){
// TODO self.olmap.mouseWheel(event, delta);
  }).bind("touchmove", function(event){
// TODO self.olmap.touchMove(event);
  }).bind("touchstart", function(event){
// TODO self.olmap.touchStart(event);
  }).bind("touchend", function(event){
// TODO self.olmap.touchEnd(event);
  });
}

キネティック ステージの z-index が高いため、そこでイベントが認識されます。キネティック シェイプがヒットした場合にのみ、イベントの伝播が停止します。

イベントを受け入れるOpenlayersに適切な方法はありますか? (OpenLayers.Events.triggerEvent を見つけましたが、成功しませんでした)

4

1 に答える 1

0

私はほぼ満足のいく解決策を思いつきました。ユーザーが処理する必要があるイベントはごくわずかです。TODO を次のように置き換えます

self.olmap.map.events.handleBrowserEvent(event);

地図上でドラッグ＆ドロップ機能を有効にします。マウスホイールイベントを処理する方法の例を次に示します。

// main.js
$("div#canvasdiv").bind("mousewheel", function(event, delta){
   self.olmap.zoom(event, delta);
})

// ol.js
zoom : function(event, delta) {
    if(this.zoomExpireTime && this.zoomExpireTime == 0) {
        this.zoomExpireTime = event.timeStamp - 1;
    }
    if(this.zoomExpireTime < event.timeStamp) {
        this.map.zoomTo(this.map.getZoom() + delta);
        this.zoomExpireTime = event.timeStamp + 500;
    }
}

OpenLayers のコントロールは、クリックイベントにのみ反応し、マウスダウン イベントには反応しないため、使用できません。マウスダウン イベントをクリック イベントに変換しようとしましたが、ドラッグ アンド ドロップが機能しなくなりました。したがって、次のようにコントロールのみを一番上に上げる回避策を実行しました。

var z = parseInt($("div#KineticDiv").css("z-index")) + 100;
$("div[id=OpenLayers\\.Control\\.LayerSwitcher_8]").css("z-index", z);
$("div[id=OpenLayers\\.Control\\.LayerSwitcher_8]").appendTo($("div#canvasdiv"));
$("div[id=OpenLayers\\.Control\\.PanZoomBar_9]").css("z-index", z);
$("div[id=OpenLayers\\.Control\\.PanZoomBar_9]").appendTo($("div#canvasdiv"));

これは私の最初のスクラッチソリューションですが、改善する可能性があると思います...

于 2012-11-22T07:23:42.403 に答える