鼠標拖拽用的OpenLayers

Question

功能

鏈接：http://www1.qhoach.com/

當拖動，這個地圖上搖擺......但是，如果你拖上KML功能（帶圓圈的圖標），沒有任何反應

Answer 1

首先， ，在你的應用程序中有四個級別的地圖，包括你在問題中用圓圈圖標提到的矢量圖層。

0: "Đường Sá"   ||---> Overlay Tiles 
    1: "Vệ Tinh"   ||---> Overlay Tiles 
    2: "TMS Overlay"  ||---> Markers ~ Icons 
    3: "KML"    ||---> Vector 

分析： 0開始到最後一個，只是載體似乎是最後一個，其他人保持原樣覆蓋tiles.In爲了來這個問題，我們必須把重點標記層上，即功能（圖標）。
正如您在地圖上看到的，當您嘗試拖動拖動地圖時，已觸發地圖的click事件。您無法拖動，因爲事件註冊對標記圖層起作用，而不是針對地圖。這意味着按順序拖動地圖，點擊後必須移動鼠標（拖動）。因爲你在矢量圖層上試圖這樣做，所以沒有機會將事件傳遞給覆蓋圖層。

解決方案：
我建議你兩種方法來實現這個錯誤類型的問題。

Let this be the long way
有一個在已知爲SelectFeature從Handler.Feature繼承。這通常控制的OpenLayers的控制允許從上點擊hover.Which給定層矢量特性意味着該處理程序可以響應與任何繪製的特徵相關的鼠標事件。只有回調與特徵相關聯，需要其中的一個點擊。現在我們所要做的就是將點擊事件返回到我們平移覆蓋圖塊的位置。

var selectFeat = new OpenLayers.Control.SelectFeature(
        vector, {toggle: true, clickout:false}); 
    selectFeat.handlers['feature'].stopDown = false; 
    selectFeat.handlers['feature'].stopUp = false; 
    map.addControl(selectFeat);//instance of map 
    selectFeat.activate(); 

一旦這個控件被激活，你必須確保你的圖層通過另一個layer.To傳遞事件做到這一點，只需

layer.events.fallThrough = true;//both for vector and marker layers 

後，我們所做的所有這些行動至今，留下最後一件事要做： 這是切換標記和kml圖層的順序。
And this should be the easiest way
這就是上layers.You z索引可以高於具有最高ID的層的層的順序檢查有也最高z索引。

layer.setZIndex(...any number...); 

除了這個解決方案，簡單的方法只允許您通過地圖，當所有的圖標點擊一下子功能可能沒有很長的路要走失去了拖，所以這是你的選擇離開他們後面。

Answer 2

鼠標事件不希望通過svg傳播矢量覆蓋到下面的圖層。

上述解決方案要求所有標記HTML層的Zindex都高於所有Vector SVG層。

下面的CSS提供了潛在的/部分的變通，通過svg元素傳播事件，但只有在存在SVG覆蓋內沒有矢量元素：

/** Hack so mouse events propagate(bubble) through svg elements, but not the 
images within svg */ 
.olLayerDiv svg { 
    pointer-events: none; 
} 

.olLayerDiv svg * { 
    pointer-events: auto; 
} 

合併上述CSS同時加入下通：對地圖，圖層和控件中的所有OpenLayers事件對象都成立。

// map events 
var map = new OpenLayers.Map(div, { fallThrough:true }); 

// layer events 
var lvec = new OpenLayers.Layer.Vector(....); 
lvec.events.fallThrough = true 
map.addLayers([lvec]) 

// all map controls 
var ctrl = new OpenLayers.Control.SelectFeature(lvec, {... 
    fallThrough: true, autoActivate:true }); 
map.addControl(ctrl)