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

Answer 2

查看OpenLayers 3示例'Vector Layer'，修改displayFeatureInfo函数代码：

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

Openlayer3图标鼠标悬停动画

2 个答案: