javascript - Openlayer3图标鼠标悬停动画

Question

我使用的是openlayer3。并使用图标作为标记。所以我的要求是，当我将鼠标悬停在标记上时，它应该增加尺寸以显示它已悬停。到目前为止，我已经成功检测到图标并更改光标指针。可以在 http://codepen.io/anon/pen/Wxzbjv 找到此示例。

Javascript代码如下:

  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

只需获取功能的引用 (feature_start) 并在鼠标悬停时应用新样式。

类似这样的事情:

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