Verwendung von Select und Hover-Listener in Openlayers 2 - Hover-Änderungsstil

Question

Ich habe ein Problem mit Styling-Funktion bei mouseover. Ich bin in der Lage, ein Event zu bekommen, aber das Ändern des Stils funktioniert einfach nicht. Zur Auswahl tut es das, aber für Hover/Mouseover geht es gar nicht. Kann mir bitte jemand dabei helfen. Hier ist mein Code:

var map, vectorLayer, wmsLayer, selectControl; 

window.onload = function() { 

    map = new OpenLayers.Map('map'); 

    wmsLayer = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     "http://vmap0.tiles.osgeo.org/wms/vmap0?", { 
      layers: 'basic' 
     }, { 
      'attribution': 'Provided by OSGeo' 
     } 
    ); 

    vectorLayer = new OpenLayers.Layer.Vector("My Layer Name", { 
     styleMap: new OpenLayers.StyleMap({ 
      "default": new OpenLayers.Style({ 
       strokeColor: "#ff0000", 
       strokeOpacity: .7, 
       strokeWidth: 1, 
       fillColor: "#ff0000", 
       fillOpacity: 0, 

       'pointRadius': 30 
      }), 
      "temporary": new OpenLayers.Style({ 
       strokeColor: "#ffff33", 
       strokeOpacity: .9, 
       strokeWidth: 2, 
       fillColor: "#ffff33", 
       fillOpacity: .3, 
       cursor: "pointer", 
       'pointRadius': 20 
      }), 
      "select": new OpenLayers.Style({ 
       strokeColor: "#0033ff", 
       strokeOpacity: .7, 
       strokeWidth: 2, 
       fillColor: "#0033ff", 
       fillOpacity: 0, 
       graphicZIndex: 2, 

       'pointRadius': 10 
      }) 
     }) 
    }); 


    map.addLayers([wmsLayer, vectorLayer]); 
    map.zoomToMaxExtent(); 

    vectorLayer.addFeatures([ 
     new OpenLayers.Feature.Vector(
      new OpenLayers.Geometry.Point(10, 10) 
     ) 
    ]); 


    var selectControlClicks = new OpenLayers.Control.SelectFeature(vectorLayer, { 
     onSelect: function(feature) { 
      console.log('select: number of selected features: ' + vectorLayer.selectedFeatures.length); 
     }, 
     onUnselect: function(feature) { 
      console.log('unselect: number of selected features: ' + vectorLayer.selectedFeatures.length); 
     } 
    }); 
    var selectControlHover = new OpenLayers.Control.SelectFeature(vectorLayer, { 
     hover: true, 
     highlightOnly: true, 
     renderIntent: 'temporary', 
     overFeature: function(feature) { 
      console.log('hover: number of selected features: ' + vectorLayer.selectedFeatures.length); 
     }, 
     outFeature: function(feature) { 
      console.log('hover out: number of selected features: ' + vectorLayer.selectedFeatures.length); 
     }, 
    }); 
    map.addControl(selectControlHover); 
    selectControlHover.activate(); 
    map.addControl(selectControlClicks); 
    selectControlClicks.activate(); 

} 

http://jsfiddle.net/eW8DV/80/

Vielleicht mein Loch Ansatz falsch ist, vielleicht sollte ich nur ein Select verwenden?

prost

Answer 1

Ich denke, Ihr Problem mit der Deklaration von overFeature und outFeature ist.

Tatsächlich sind onSelect und onUnselect Template-Methoden, die überschrieben werden sollen, overFeature und outFeature jedoch nicht. Durch das Überschreiben dieser Methoden wird das Standardverhalten überschrieben (layer.drawFeature (feature, style);).

Wie auch immer, ich würde vorschlagen, dass Sie stattdessen Ereignisse verwenden. Versuchen Sie, mit

selectControlHover.events.register('featurehighlighted', null, function(e) { 
console.log('feature selected ', e.feature); 
}); 

Auch bin ich mir sicher, dass Sie eine einzige Kontrolle anstelle von zwei verwenden können, aber nicht wissen, was Sie versuchen zu tun, kann ich Ihnen nicht einen anderen Ansatz vorschlagen.