OpenLayers 3樣式功能，用於動態功能字體設置

Question

我正在使用php和mySQL為矢量層和功能生成javascript。 除了我需要能夠通過縮放來控制功能部件文本外，所有功能都可以正常工作，而從我的搜索中需要使用樣式功能。

我的問題是如何/在哪里創建一個函數來設置與地圖縮放設置相關的當前固定為“ font：140/10 +'px arial'”的內容？

我當前的設計使用數據庫的php循環來創建具有唯一位置和屬性的功能：

1）創建功能
2）設置樣式
3）推入數組iconFeatures0

var iconFeature = new ol.Feature({
 geometry: new ol.geom.Point(ol.proj.transform([-0.163741,51.507847], 'EPSG:4326', 'EPSG:3857')),
  p_title: 'Hyde Park Title',
  p_line1: 'Hyde Park',
  p_line2: 'Park information ...',
  lat: 51.507847,
  long: -0.163741,


});


iconFeature.setStyle(

              new ol.style.Style({
                  image: new ol.style.Icon(({
                        anchor: [0.5, 1.0],
                        anchorXUnits: 'fraction',
                        anchorYUnits: 'fraction',
                        opacity: 0.85,
                        src: 'test_map/marker_0.png',
                        size: [52,64],
                        scale:0.5,
                      })),
                  text: new ol.style.Text({
                        text: 'Hyde Park',
                        offsetY: -37.5,
                        fill: new ol.style.Fill({
                            color: '#FF3300'
                        }),
                        font: 140/10 + 'px arial'
                    })
              }),

          );

        iconFeatures0.push(iconFeature); 


//On completion of the loop:

var vectorSource0 = new ol.source.Vector({ 
    features: iconFeatures0 
}); 

vectorLayer0 = new ol.layer.Vector({ 
    source: vectorSource0 
}); 

//setting up the map
var myOSMLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});



// Create latitude and longitude and convert them to default projection
var myMapcentre = ol.proj.transform([-0.140180,51.501811], 'EPSG:4326', 'EPSG:3857');       //$long,$lat
var myMapView  = new ol.View({
    center: myMapcentre,
    zoom: 14
  })




var myMap = new ol.Map({
  controls: ol.control.defaults().extend([
          new ol.control.FullScreen()
        ]),
  layers: [myOSMLayer, vectorLayer0],
  loadTilesWhileInteracting: true,
  target: document.getElementById('demoMap1'),
  view: myMapView
});

提前致謝。

Answer 1

有多種方法可以完成此操作，這是其中一種。

首先，如果您准備樣式並簡單地以不同比例應用樣式，則效率會更高，因此OpenLayers不必在每次縮放更改時都重新創建樣式。

然后，您可以對整個圖層進行樣式設置（而不是分別對每個要素進行樣式設置）（仍可以通過圖層中的要素“類別”來區分）。

最后，您將從選項中受益，可以在設置圖層樣式時考慮分辨率：

vectorLayer0.setStyle(function(feature, resolution) {
   return [new ol.style.Style({
       text: new ol.style.Text({
         font: resolution/1000+'px Calibri,sans-serif',
         text: "test",
         fill: fill
       })
     })];
  });

您將從代碼中刪除代碼iconFeature.setStyle( ... ，並在創建vectorLayer0之后放入上面的代碼