0

I'm trying to put a label over a polygons. My polygons cames from a GeoJSON serialized by GeoDjango. I'm be able to categorize this polygons using the attribute "type" but I wanto to see the height as label. The height is inside the attribute "height", then I've write this:

var strokeEdificiCasalnuovo = new ol.style.Stroke({
    color: 'rgba(0,0,0,1.0)',
    lineDash: null,
    lineCap: 'butt',
    lineJoin: 'miter',
    width: 1,
});

var labelEdifici = function(feature) {
  return new ol.style.Text({
    textAlign: 'center',
    textBaseline: 'middle',
    font: '12px Verdana',
    text: function(feature) {
      var text = feature.get('height');
      return text;
      },
    fill: new ol.style.Fill({color: 'black'}),
    stroke: new ol.style.Stroke({color: 'white', width: 0.5})
  });
};

var baracca = new ol.style.Style({
  stroke: strokeEdificiCasalnuovo,
  fill: new ol.style.Fill({
    color: 'rgba(121,121,125,1.0)',
  }),
  text: labelEdifici,
});
.
.
.
.
var sourceEdificiCasalnuovo = new ol.source.Vector({
    url: '{% url 'edificicasalnuovo_geojson' %}',
    format: new ol.format.GeoJSON(),
  });

var edifici_casalnuovo = new ol.layer.Vector({
  title: '<p>Edificato</p>',
  source: sourceEdificiCasalnuovo,
  style: function(feature, resolution) {
            if ( feature.get('type') == 'Baracca') {
              return [baracca];
            } else if (feature.get('type') == 'Cabina di trasformazione') {
              return [cabinaTrasformazione];
            } else if (feature.get('type') == 'Edificio del terziario industriale') {
              return [edificioTerzIndustriale];
            } else if (feature.get('type') == 'Edificio di culto, cappella, campanile') {
              return [edificioCulto];
            } else if (feature.get('type') == 'Edificio diroccato o rudere') {
              return [edificioDiroccato];
            } else if (feature.get('type') == 'Edificio generico') {
              return [edificioGenerico];
            } else if (feature.get('type') == 'Edificio in costruzione') {
              return [edificioCostruzione];
            } else if (feature.get('type') == 'Edificio industriale') {
              return [edificioIndustriale];
            } else if (feature.get('type') == 'Serra') {
              return [serra];
            } else if (feature.get('type') == 'Tettoia o pensilina') {
              return [tettoia];  
            }
      }
});

With this in console I see this error:

Uncaught TypeError: t.getFill is not a function
    at e.setTextStyle (VM4026 ol.js:7)
    at MultiPolygon (VM4026 ol.js:7)
    at VM4026 ol.js:7
    at Ua (VM4026 ol.js:7)
    at e.renderFeature (VM4026 ol.js:7)
    at e.<anonymous> (VM4026 ol.js:7)
    at e.prepareFrame (VM4026 ol.js:7)
    at e.renderFrame (VM4026 ol.js:7)
    at e.renderFrame_ (VM4026 ol.js:7)
    at e.<anonymous> (VM4026 ol.js:7)

What is wrong in my code? I'm not an expert of JavaScript...

2

You have labelEdifici defined as a function but feature is never being passed to it. If you make it a constant you can set the text value in the style function where feature is passed

var labelEdifici = new ol.style.Text({
    textAlign: 'center',
    textBaseline: 'middle',
    font: '12px Verdana',
    fill: new ol.style.Fill({color: 'black'}),
    stroke: new ol.style.Stroke({color: 'white', width: 0.5})
  });

var baracca = new ol.style.Style({
  stroke: strokeEdificiCasalnuovo,
  fill: new ol.style.Fill({
    color: 'rgba(121,121,125,1.0)',
  }),
  text: labelEdifici,
});


  style: function(feature, resolution) {
            if ( feature.get('type') == 'Baracca') {
              baracca.getText().setText(feature.get('height'));
              return [baracca];
            } else if (feature.get('type') == 'Cabina di trasformazione') {

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.