Функция стиля OpenLayers 3 для настройки шрифта динамического объекта - PullRequest
Новая
       7

Функция стиля OpenLayers 3 для настройки шрифта динамического объекта

0 голосов
/ 11 мая 2018

Я использую 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
});

Заранее спасибо.

1 Ответ

0 голосов
/ 11 мая 2018

Есть несколько способов сделать это, вот один из них.

Во-первых, было бы более эффективно, если бы вы подготовили стили и просто применили их в другом масштабе, чтобы 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

...