2016-06-14 74 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]; 
         }