2

I am following this very big example to set labels on the style of the vector but it's confusing.

The labels should be the Plot numbers, of each feature, which come from the JSON file.

Also i have seen this API. How can I get the data and display it?

new ol.style.Text({
  font: '12px Calibri,sans-serif',
  textBaseline: 'bottom',
  fill: new ol.style.Fill({
    color: 'rgba(0,0,0,1)'
  }),
  stroke: new ol.style.Stroke({
    color: 'rgba(255,255,255,1)',
    width: 3
  })
});

var style_simple = new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'khaki'
  }),
   stroke: new ol.style.Stroke({
      color: 'blue',
      width: 2,
      opacity:1
    })
});

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
    url: 'JS/getjson.json',
    format: new ol.format.GeoJSON()
    }),style:style_simple
});

var map = new ol.Map({
  target: 'map',
  layers: [roadlayer,vector],
    controls: ol.control.defaults().extend([new ol.control.ScaleLine()]),
    view: new ol.View({
    center: ol.proj.fromLonLat([33.33386, 35.14710]),
    zoom: 14,
    maxZoom: 19
  })
});
2

@Dataform's answer is correct but creating a new style object every time the function is called is inefficient and can, with large numbers of features, cause performance issues. It is better to predefine a style and set the text property as required

let style = new ol.style.Style({
    // ...........
    text: new ol.style.Text({
      text: ''
    })
    // ...........
  });

let styleFunction = function (feature, resolution) {
  style.getText().setText(feature.get("fieldname_for_plotnumber"));
  return style;
}
2

You can pass a function to the style option of the vector layer. The function is called for each feature and must return a style object.

let styleFunction = function (feature, resolution) {
  return new ol.style.Style({
    // ...........
    text: new ol.style.Text({
      text: feature.get("fieldname_for_plotnumber")
    })
    // ...........
  });
}

let vector = new ol.layer.Vector({
  // ...........
  style: styleFunction
})
  • getting error on text: feature.get("parcel_nbr"): TypeError: t.split is not a function – csandreas1 Jun 12 at 11:17
  • I have avoided that error by declaring a variable in the function : var getParcelTXT = feature.get("parcel_nbr")+""; – csandreas1 Jun 12 at 11:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.