Question

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

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

  });

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

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

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

A working demo。

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

Answer 3

您是否也设置了其他样式（选择/高亮度）的半径？

OL3：如何根据缩放修改所选的功能样式？

3 个答案: