2016-06-14 113 views
1

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

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

不'minResolution','maxResolution'矢量层初始化满足您的需求???? api doc here - > http://openlayers.org/en/latest/apidoc/ol.layer.Vector.html – pavlos

+0

不是因为Style是图层的一部分,所以不仅仅是文本隐藏整个图层隐藏... –

+0

那么你可以使用'ol.style.StyleFunction()'而不是静态样式。它接受两个参数'ol.Feature'和'resolution'。因此使用该分辨率可以返回带有或者没有文本的静态样式。如果你需要进一步的帮助,我会尽量做一个小提琴。 – pavlos

回答

7

的载体层的示例演示分辨率取决于定型使用样式函数: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 
     }) 
     }) 
    }); 
    } 
}); 

上面的层将使得特征name s的分辨率低于每个像素5000个地图单​​位。

上面的矢量图层示例中有一些额外的代码可用于重用样式。如果你有很多功能,你可以通过为每个渲染框架创建新的样式实例来为垃圾收集器施加过大的压力。

+0

谢谢添!这正是我需要的!我可以像这样将多个样式添加到图层吗?例如,我希望“填充”风格保持不变,但“文本”风格的行为方式与上面的相同。 –

+0

@ user3557112 - 样式函数可以返回一个“ol.style.Style”对象或一个相同的数组。在单个样式对象中,可以同时使用文本和填充符号(只需在上面的ol.style.Style对象中添加“fill”属性)。如果您需要多个笔画,不同的渲染几何图形,z-index控件或类似的东西,则只需要返回多个样式对象。所以,只需在上面的单个样式对象中添加一个“fill”即可。 –

+0

是的,我明白这一点,并且“填充”仅在分辨率小于5000的情况下才有效,我需要它不变。我尝试在没有条件的样式的数组[]中添加一个额外的样式,但它不起作用。 –

0

这是我结束了与显示标签,但保持恒定的风格之下......

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