2013-07-11 34 views
2

在OpenLayers中,我試圖在光標移過它們時突出顯示矢量圖層的特徵。我可以做這個工作。如何突出顯示鼠標懸停而不消除選擇控件

我還試圖使這些功能可選,並在點擊時彈出一個框。 這也適用。

我不能做的工作是他們在同一時間。 hoverselect似乎覆蓋了彈出式選擇。我的代碼是http://dev.openlayers.org/releases/OpenLayers-2.11/examples/highlight-feature.html,但有一些差異。有誰知道爲什麼懸停選擇和選擇不能共存?

select = new OpenLayers.Control.SelectFeature(vector_Layer, {clickout: true}); 
     vector_Layer.events.on({ 
      "featureselected": onFeatureSelect, 
      "featureunselected": onFeatureUnselect 
     }); 
     map.addControl(select); 
     select.activate(); 

     select.handlers['feature'].stopDown = false; 
     select.handlers['feature'].stopUp = false; 

//REMOVED AS OVERRODE SELECT selectHover = new OpenLayers.Control.SelectFeature(vector_Layer, {hover: true}); 

function onPopupClose(event) { 
    select.unselectAll(); 
} 

function onFeatureSelect(event) { 
     var feature = event.feature; 
     var content = "<p>"+feature.attributes.SHEET.value + "</p>" + feature.attributes.description; 
     if (content.search("<script") != -1) { 
      content = "Content contained Javascript! Escaped content below.<br>" + content.replace(/</g, "&lt;"); 
     } 
     popup = new OpenLayers.Popup.FramedCloud("chicken", 
           feature.geometry.getBounds().getCenterLonLat(), 
           new OpenLayers.Size(100,100), 
           content, 
           null, true, onPopupClose); 
     feature.popup = popup; 
     map.addPopup(popup); 
} 

function onFeatureUnselect(event) { 
     var feature = event.feature; 
     if(feature.popup) { 
      map.removePopup(feature.popup); 
      feature.popup.destroy(); 
      delete feature.popup; 
     } 
} 

var info = function(evt) { 
      OpenLayers.Console.log(evt.type, evt.feature.id); 
     }; 

//REMOVED OF OVERODE SELECT var highlight = new OpenLayers.Control.SelectFeature(vector_Layer, { 
//    hover: true, 
//    highlightOnly: true, 
//    renderIntent: "temporary", 
//    eventListeners: { 
//     beforefeaturehighlighted: info , 
//     featurehighlighted: info , 
//     featureunhighlighted: info 
//    } 
//   }); 
//map.addControl(highlight); 
//highlight.activate(); 

var vector_style_d = new OpenLayers.Style({ 
    'fillColor': '#669933', 
    'fillOpacity': .5, 
    'strokeColor': '#aaee77', 
    'strokeWidth': 3, 
    'cursor': 'pointer' 
}) 

var vector_style_s = new OpenLayers.Style({ 
    'fillColor': '#FE2E2E', 
    'fillOpacity': .8, 
    'strokeColor': '#aaee47', 
    'strokeWidth': 4, 
    'cursor': 'pointer' 
}) 

var vector_style_t = new OpenLayers.Style({ 
    'fillColor': '#FE2E2E', 
    'fillOpacity': .8, 
    'strokeColor': '#aaee47', 
    'strokeWidth': 3, 
    'cursor': 'pointer' 
}) 

var vector_style_map = new OpenLayers.StyleMap({ 
    'default': vector_style_d, 
    'select': vector_style_s, 
    'temporary': vector_style_t, 
}); 

vector_Layer.styleMap = vector_style_map; 

回答

相關問題