Set style zoom level openlayers 3

狂风中的少年 提交于 2019-12-06 09:41:19

The vector layer example demonstrates the use of a style function for resolution dependent styling: http://openlayers.org/en/latest/examples/vector-layer.html

Here is a simplified version:

var layer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: function(feature, resolution) {
    var text = resolution < 5000 ? feature.get('name') : '';
    return new ol.style.Style({
      text: new ol.style.Text({
        text: text,
        fill: new ol.style.Fill({
          color: '#000'
        }),
        stroke: new ol.style.Stroke({
          color: '#f00',
          width: 3
        })
      })
    });
  }
});

The layer above would render feature names at resolutions below 5000 map units per pixel.

The vector layer example above has some additional code to reuse styles when possible. If you've got a ton of features, you can put excess pressure on the garbage collector by creating new style instances for every render frame.

This is what I ended up with to show labels but keep a constant style underneath...

 style: function (feature, resolution) {
                            var text = resolution * 100000 < 10 ? response.FieldList[key].Acres : '';

                            if (text != "") {
                                styleCache[text] = [new ol.style.Style({
                                    stroke: new ol.style.Stroke({
                                        color: '#319FD3',
                                        width: 1
                                    }),
                                    text: new ol.style.Text({
                                        font: '12px Calibri,sans-serif',
                                        text: text,
                                        fill: new ol.style.Fill({
                                            color: '#000'
                                        }),
                                        stroke: new ol.style.Stroke({
                                            color: '#fff',
                                            width: 3
                                        })
                                    }),
                                    fill: new ol.style.Fill({
                                        color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5')
                                    })
                                })];
                            }
                            else if (text == "") {
                                styleCache[text] = [new ol.style.Style({
                                    fill: new ol.style.Fill({
                                        color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5')
                                    })
                                })
                                ]
                            } return styleCache[text];
                        }
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!