根据层级放大缩小图标

由于图标不会跟随图层的放大缩小而放大缩小，所以在某些业务应用中，可能并不合适，需要也跟随变化。 之前就有同学提到这个问题，在ol.style.Icon中是可以设置scale的，这样就为 我们提供了方便。 通过设置它，就可以做到。 下面这个地图中的锚点图标，就会随着地图放大缩小而变化大小：

和之前的代码绝大部分都是相同的：

<div id="map" style="width: 100%"></div>
<script type="text/javascript">
  var layer = new ol.layer.Vector({
    source: new ol.source.Vector()
  })
  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }), 
      layer
    ],
    target: 'map',
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [104, 30],
      zoom: 10
    })
  });

  var anchor = new ol.Feature({
    geometry: new ol.geom.Point([104, 30])
  });
  anchor.setStyle(new ol.style.Style({
    image: new ol.style.Icon({
      src: '../img/anchor.png'
    })
  }));
  layer.getSource().addFeature(anchor);

  // 监听地图层级变化
  map.getView().on('change:resolution', function(){
      var style = anchor.getStyle();
      // 重新设置图标的缩放率，基于层级10来做缩放
      style.getImage().setScale(this.getZoom() / 10);
      anchor.setStyle(style);
  })
</script>

利用一个监听和scale改变，就实现了这个同比缩放。 具体缩放多少，请根据业务来设置，可以设置的更加精细，此处只是功能示例。 其实还有另外一种方式，可以实现动态缩放大小，参见styleFunction应用。