Openlayer3 Symbol Maus Hover Animation

Question

Ich benutze Openlayer3. Und das Symbol als Markierung verwenden. Also meine Anforderung ist, dass wenn ich auf Marker schwebe, sollte es in der Größe zunehmen, um zu zeigen, dass es schwebt. Bis jetzt habe ich Erfolg, das Symbol zu entdecken und den Cursorzeiger zu ändern. Anschauliches Beispiel hierfür kann bei http://codepen.io/anon/pen/Wxzbjv

Javascript-Code zu finden ist wie folgt:

var 
    sourceFeatures = new ol.source.Vector(), 
     layerFeatures = new ol.layer.Vector({ 
      source: sourceFeatures 
     }) 
    ; 

    var map = new ol.Map({ 
     target: 'map', 
     view: new ol.View({ 
      center: [-5484116.753984261,-1884416.14606312], 
      zoom: 16, 
      minZoom: 2, 
      maxZoom: 20 
     }), 
     layers: [ 
     new ol.layer.Tile({ 
      source: new ol.source.OSM(), 
      opacity: 0.6 
     }), 
     layerFeatures 
     ] 
    }); 


      $(map.getViewport()).on('mousemove', function(e) { 
      var pixel = map.getEventPixel(e.originalEvent); 
      var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) { 
       return true; 
      }); 
      targetStr=map.getTarget(); 
      targetEle=typeof targetStr==="string"?$('#'+targetStr):$(targetStr); 
      if (hit) { 
       targetEle.css('cursor','pointer'); 
      } else { 
       targetEle.css('cursor',''); 
      } 
      }); 


    var 
    fill = new ol.style.Fill({color:'rgba(255,255,255,1)'}), 
     stroke = new ol.style.Stroke({color:'rgba(0,0,0,1)'}), 
     style1 = [ 
      new ol.style.Style({ 
       image: new ol.style.Icon(({ 
        scale: .7, opacity: 1, 
        rotateWithView: false, anchor: [0.5, 1], 
        anchorXUnits: 'fraction', anchorYUnits: 'fraction', 
        src: '//cdn.rawgit.com/jonataswalker/map-utils/' +      'master/images/marker.png' 
       })), 
       zIndex: 5 
      }) 
     ] 
    ; 


    var feature_start = new ol.Feature({ 
      geometry: new ol.geom.Point([-5484116.753984261,-1884416.14606312]) 
     }); 
    feature_start.setStyle(style1); 
    sourceFeatures.addFeatures([feature_start]); 

Answer 1

Nehmen Sie einfach die Referenz des Merkmals (feature_start) und einen neuen Stil auf der Maus über anzuwenden.

Etwas wie folgt aus:

var 
    sourceFeatures = new ol.source.Vector(), 
     layerFeatures = new ol.layer.Vector({ 
      source: sourceFeatures 
     }) 
    ; 

    var map = new ol.Map({ 
     target: 'map', 
     view: new ol.View({ 
      center: [-5484116.753984261,-1884416.14606312], 
      zoom: 16, 
      minZoom: 2, 
      maxZoom: 20 
     }), 
     layers: [ 
     new ol.layer.Tile({ 
      source: new ol.source.OSM(), 
      opacity: 0.6 
     }), 
     layerFeatures 
     ] 
    }); 


      $(map.getViewport()).on('mousemove', function(e) { 
      var pixel = map.getEventPixel(e.originalEvent); 
      var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) { 
       return true; 
      }); 
      targetStr=map.getTarget(); 
      targetEle=typeof targetStr==="string"?$('#'+targetStr):$(targetStr); 
      if (hit) { 
       targetEle.css('cursor','pointer'); 
       feature_start.setStyle(style_big); 
      } else { 
       targetEle.css('cursor',''); 
       feature_start.setStyle(style1); 
      } 
      }); 


    var 
    fill = new ol.style.Fill({color:'rgba(255,255,255,1)'}), 
     stroke = new ol.style.Stroke({color:'rgba(0,0,0,1)'}), 
     style1 = [ 
      new ol.style.Style({ 
       image: new ol.style.Icon(({ 
        scale: .7, opacity: 1, 
        rotateWithView: false, anchor: [0.5, 1], 
        anchorXUnits: 'fraction', anchorYUnits: 'fraction', 
        src: '//cdn.rawgit.com/jonataswalker/map-utils/' +      'master/images/marker.png' 
       })), 
       zIndex: 5 
      }) 
     ], 
     style_big = [ 
      new ol.style.Style({ 
       image: new ol.style.Icon(({ 
        scale: .7, opacity: 1, 
        rotateWithView: false, anchor: [0.5, 1], 
        anchorXUnits: 'fraction', anchorYUnits: 'fraction', 
        src: '//cdn.rawgit.com/jonataswalker/map-utils/' +      'master/images/marker.png' 
       })), 
       zIndex: 5 
      }) 
     ] 
    ; 


    var feature_start = new ol.Feature({ 
      geometry: new ol.geom.Point([-5484116.753984261,-1884416.14606312]) 
     }); 
    feature_start.setStyle(style1); 
    sourceFeatures.addFeatures([feature_start]); 

Answer 2

Blick Openlayers 3 Beispiele 'Vector-Layer', ändern displayFeatureInfo Funktionscode:

var displayFeatureInfo = function(pixel) { 
    var feature = emap.map.forEachFeatureAtPixel(pixel, function(feature) { 
     return feature; 
    }); 

    if(feature){ 
     var array = featureOverlay.getSource().getFeatures(); 

     if(array){ 
      featureOverlay.getSource().clear(); 
     } 

     var s = feature.clone(); 
     featureOverlay.getSource().addFeature(s); 
     s.setStyle(getHighlightStyle(s)); 
    } 
    else{ 
     featureOverlay.getSource().clear(); 
    } 
};