OL3：如何根据缩放修改选定的特征样式？答案

【问题标题】：OL3: how to modify selected feature style based on zoom?OL3：如何根据缩放修改选定的特征样式？
【发布时间】：2015-07-02 10:26:45
【问题描述】：

我使用以下代码根据缩放级别修改圆形标记的半径：

//add the layer to the map
map.addLayer(vectorLayer);

//add selection interactivity, using the default OL3 style
var select = new ol.interaction.Select();

map.addInteraction(select);


map.getView().on('change:resolution', function(evt) {

  var zoom = map.getView().getZoom();
  var radius = zoom / 2 + 1;

  var newStyle = new ol.style.Style({
      image: new ol.style.Circle({
        radius: radius,
        fill: new ol.style.Fill({color: 'red'}),
        stroke: new ol.style.Stroke({color: 'black', width: 1})
    })
  })

  vectorLayer.setStyle(newStyle);

  });

但我遇到的问题是，如果我在地图上选择一个特征，当地图缩放发生变化时，所选/突出显示的样式不会改变。如何还可以根据缩放/分辨率动态修改所选要素的样式？

澄清上面的代码已经用于更改地图上所有要素的半径，但除此之外，我还需要更改所选要素的半径。已选择和未选择的功能都应根据缩放级别进行更改。

【问题讨论】：

您是否有select 互动或您在pointermove 上突出显示？
我在此 change:resolution 事件之前启动了一个选择交互。我将更新代码以显示更多内容。

标签： javascript openlayers-3

【解决方案1】：

您需要在交互构造函数上设置style 函数，例如：

var select = new ol.interaction.Select({
    style: function(feature, resolution){
        var zoom = map.getView().getZoom();
        var radius = zoom / 2 + 1;
        console.info(radius);

        var newStyle = new ol.style.Style({
            image: new ol.style.Circle({
                radius: radius,
                fill: new ol.style.Fill({color: 'red'}),
                stroke: new ol.style.Stroke({color: 'black', width: 1})
            })
        });

        return [newStyle];
    } 
});

working demo。

【讨论】：

谢谢，但我不希望 selectStyle 为 [newStyle].... 这是为了在缩放更改时更改地图上所有标记的大小的代码。我需要在我共享的已经工作的代码中添加一些内容，以便在缩放更改时更改所选功能的标记大小。

【解决方案2】：

缩放时使用比例尺调整半径大小。

 map.getCurrentScale = function () {
            //var map = this.getMap();
            var map = this;
            var view = map.getView();
            var resolution = view.getResolution();
            var units = map.getView().getProjection().getUnits();
            var dpi = 25.4 / 0.28;
            var mpu = ol.proj.METERS_PER_UNIT[units];
            var scale = resolution * mpu * 39.37 * dpi;
            return scale;

        };
    map.getView().on('change:resolution', function(evt){

        var divScale = 60;// to adjusting
        var radius =  map.getCurrentScale()/divScale;
        feature.getStyle().getGeometry().setRadius(radius);
    })

【讨论】：

【解决方案3】：

您是否也将半径设置为其他样式（选中/突出显示）？

【讨论】：

它对选定点使用默认选择样式。我尝试添加一个 selectStyle 来定义 change:resolution 事件的半径，因为 Select 有一个 style 属性，但我无法让它工作。