设置样式缩放级别openlayers 3

Question

在Openlayers中，可以根据缩放级别打开或关闭某些功能。 尽管查看了文档，我还没有在OpenLayers 3中找到相同的功能。 有谁知道如何做到这一点？ 这是我放在地图上的功能， ol.style.Text是我想在用户放大到特定缩放级别后才显示的内容。

var geoJsonObj = {
  'type': 'Feature',
  'geometry': JSON.parse(response.FieldList[key].Shape)
}
var vectorSource = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(geoJsonObj)
});
Fields[Field.FieldID] = new ol.layer.Vector({
  projection: 'EPSG:4269',
  source: vectorSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'yellow',
      width: 1
    }),
    fill: new ol.style.Fill({
      color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5')
    }),
    text: new ol.style.Text({
      textAlign: 'Center',
      text: response.FieldList[key].Acres,
      scale: 1
    })
  })
});

Answer 1

矢量图层示例演示了使用样式函数进行分辨率相关的样式设置： http ： //openlayers.org/en/latest/examples/vector-layer.html

这是一个简化版本：

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

上面的图层将以低于每个像素5000个地图单​​位的分辨率渲染要素name 。

上面的向量层示例有一些额外的代码可以在可能的情况下重用样式。 如果你有很多功能，你可以通过为每个渲染帧创建新的样式实例来对垃圾收集器施加过大的压力。

Answer 2

这就是我最终展示标签但在下面保持恒定风格的结果......

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