Кинетический слой поверх Openlayers

Я разработал визуализацию холста OpenStreetMaps с помощью различных скриптов и алгоритмов рендеринга из Интернета. Вдобавок к этому у меня есть Kinetic Stage, который рисует пользовательские объекты, которые нельзя нарисовать с помощью функциональности Openlayers.

Openlayers предоставляет множество функций, которые я хочу использовать, и поэтому я пытаюсь перейти на этот фреймворк. В настоящее время я застрял с распространением событий, потому что не знаю, как передать событие Openlayers.

index.html

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

style.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-индексу кинетической стадии событие там распознается. Распространение события останавливается только при попадании в кинетическую форму!

Есть ли в Openlayers подходящий метод, который принимает события? (нашел OpenLayers.Events.triggerEvent, но с ним не получилось)


javascript dom-events openlayers kineticjs
person janr    schedule 17.08.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я придумал решение, которое почти удовлетворяет. Только несколько событий должны быть обработаны пользователем. Замена TODO на

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

включает функцию перетаскивания на карту. Вот пример обработки события mousewheel:

// 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 использовать нельзя, потому что они реагируют только на события click, а не на события mousedown. Я попытался преобразовать событие mousedown в щелчок, но тогда перетаскивание больше не работало. Таким образом, я сделал обходной путь, который поднимает только элементы управления наверх следующим образом:

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"));

Итак, это мое первое набросочное решение, но я думаю, что есть потенциал для его улучшения...

person janr    schedule 22.11.2012