2016-07-20 10 views
1

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/WxzbjvOpenlayer3 Symbol Maus Hover Animation

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]); 

Antwort

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]); 
+0

Dank @jolmos. Aber ich möchte etwas Animation darüber wie beim Schwebeflug und beim Zurückschweben zurück zur Normalität. –

+0

Ich möchte das Flackern bei Hover wie auf dem Link vermeiden: http://codepen.io/anon/pen/Wxzbjv?editors=0010. Es sollte glatte Animation beim Expandieren und Zusammenklappen geben –

+1

Ich weiß nicht, ob Sie Animationen auf ein Icon-Element anwenden können ... sonst könnten Sie Overlays verwenden (http://openlayers.org/en/latest/apidoc/ol.Overlay .html) als Marker. Diese Überlagerung kann als HTML-Element CSS-Eigenschaften (wie Animationen) haben – jolmos

0

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(); 
    } 
};