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

- Funn_Bobby

---

在矢量图层初始化时，minResolution和maxResolution是否符合您的需求？api文档请参考此处 --> http://openlayers.org/en/latest/apidoc/ol.layer.Vector.html - pavlos

并不是因为样式是层的一部分，所以不仅仅是文本被隐藏了，整个层都被隐藏了... - Funn_Bobby

您可以使用 ol.style.StyleFunction() 而不是静态样式。它接受两个参数：ol.Feature 和 resolution。因此，使用分辨率返回您的静态样式，有或没有文本。如果需要进一步帮助，我可以尝试为您创建一个 fiddle。 - pavlos

如果您能制作一个fiddle，我会非常感激。我已经看了很多例子，它们似乎都不同...当我尝试使用其中许多时，我会收到“函数不存在”的错误提示。 - Funn_Bobby

当我尝试使用"ol.style.styleFunction"时，我会得到错误信息"ol.style.styleFunction不是一个构造函数"，我还尝试了另一种命名约定"ol.style.StyleFunction"，结果也是一样的。 - Funn_Bobby

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。

上面的矢量层示例有一些额外的代码来尽可能地重用样式。如果你有大量的要素，在每个渲染帧中创建新的样式实例会给垃圾回收器带来过多压力。

- Tim Schaub

---

谢谢Tim！！！这正是我需要的！！！我可以像这样向一个图层添加多个样式吗？例如，我希望“填充”样式保持不变，但“文本”样式像上面那样运行。 - Funn_Bobby

@user3557112 - style函数可以返回单个ol.style.Style对象或相同的数组。在单个样式对象中，您可以同时拥有文本和填充符号化程序（只需将fill属性添加到上面的ol.style.Style对象即可）。如果您想要多个描边、不同的渲染几何图形、z-index控制或类似的东西，那么您只需要返回多个样式对象。因此，首先只需将fill添加到上面的单个样式对象中。 - Tim Schaub

是的，我理解这一点，“Fill”仅在分辨率小于5000的情况下才会生效，而我需要它是恒定的。我尝试在样式数组[ ]中添加另一个无条件的样式，但它没有起作用。 - Funn_Bobby

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

- Funn_Bobby