设置样式缩放级别 openlayers 3答案

【问题标题】：Set style zoom level openlayers 3设置样式缩放级别 openlayers 3
【发布时间】：2016-06-14 15:46:40
【问题描述】：

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

【问题讨论】：

矢量层初始化minResolution , maxResolution 是否满足您的需求？？？？ api 文档在这里 --> openlayers.org/en/latest/apidoc/ol.layer.Vector.html
并不是因为样式是图层的一部分，所以不仅隐藏了文本，整个图层也被隐藏了......
那么您可以使用ol.style.StyleFunction() 而不是静态样式。它接受两个参数ol.Feature 和resolution。因此，使用分辨率返回带有或不带有文本的静态样式。如果您需要进一步的帮助，我会尝试制作小提琴。
如果你愿意做一个小提琴，我将不胜感激，我查看了许多示例，它们似乎都不同......当我尝试使用其中许多时，我收到“功能不存在”错误的
...当我尝试使用“ol.style.styleFunction”时出现错误“ol.style.styleFunction 不是构造函数”，并且我还尝试了其他命名约定“ol .style.StyleFunction" 结果一样

标签： javascript openlayers openlayers-3

【解决方案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 个地图单元的分辨率渲染要素 names。

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

【讨论】：

谢谢蒂姆！！！这正是我需要的！我可以在一个图层中添加多个这样的样式吗？例如，我希望“填充”样式保持不变，但“文本”样式的行为方式与上面一样。
@user3557112 - 样式函数可以返回单个 ol.style.Style 对象或相同的数组。在单个样式对象中，您可以同时拥有文本和填充符号（只需将 fill 属性添加到上面的 ol.style.Style 对象）。如果您想要多个笔划、不同的渲染几何图形、z-index 控件或类似的东西，您只需要返回多个样式对象。因此，只需将fill 添加到上面的单一样式对象即可开始。
是的，我明白这一点，“填充”仅在分辨率小于 5000 的情况下有效，我需要它保持不变。我尝试在没有条件的样式数组 [ ] 中添加一个额外的样式，但它不起作用。

【解决方案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];
                        }

【讨论】：