openlayersで選択とホバーリスナーを使用する2 - ホバー変更スタイル

Question

マウスオーバー時にスタイリング機能に問題があります。私はイベントを得ることができますが、スタイルを変えるだけでは機能しません。選択するには有効ですが、ホバー/マウスオーバーの場合はまったく表示されません。誰もそれで私を助けてもらえますか？ここに私のコードは次のとおりです。

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/

多分私の穴のアプローチは、多分私はちょうど1 SelectControlを使用する必要があり、間違っていますか？

歓声

Answer 1

私はあなたの問題はoverFeatureとoutFeatureの宣言であると思います。

実際には、onSelectとonUnselectはテンプレートメソッドであり、オーバーライドされるように設計されていますが、overFeatureとoutFeatureはそうではありません。 これらのメソッドをオーバーライドすると、デフォルト動作（layer.drawFeature（feature、style）;）がオーバーライドされます。

とにかく、代わりにイベントを使用することをおすすめします。また

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

で試してみてください、私はあなたが2の代わりに1つのコントロールを使用できることを非常に確信している、しかし、あなたが何をしようとして知っていない、私はあなたに別のアプローチを提案することはできません。