1

I want to display the labels for each feature, but I get the "Uncaught ReferenceError: Style is not defined" error. How do I fix it correctly?

     var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([102.291163, 12.809588]),
            zoom: 9
        })
    });
    var labelStyle = new Style({
        text: new Text({
            font: '12px Calibri,sans-serif',
            overflow: true,
            fill: new Fill({
            color: '#000'
            }),
            stroke: new Stroke({
            color: '#fff',
            width: 3
            })
        })
    });

    var tambonStyle = new Style({
        fill: new Fill({
            color: 'rgba(255, 255, 255, 0.6)'
        }),
        stroke: new Stroke({
            color: '#319FD3',
            width: 1
        })
    });

    var style = [tambonStyle, labelStyle];

    var layer_source = new ol.source.Vector({
        url: 'geojson/tambon_wgs84.geojson',
        format: new ol.format.GeoJSON()
    });

    var layer_tambon = new ol.layer.Vector({
        source: layer_source,
        style: function(features) {
            labelStyle.getText().setText(features.get('TAM_NAM_T'));
            return style;
        },
        declutter: true
    });

    map.addLayer(layer_tambon);
1

Since you are using complete OpenLayers ol.js library, you have to use appropriate calls that start with ol. for all the modules. This is easy to forget when you copy code from OpenLayers official examples, which use import for individual modules.

In your case this would be:

  • ol.style.Style
  • ol.style.Text
  • ol.style.Fill
  • ol.style.Stroke
| improve this answer | |
  • Thank you TomazicM. I will remember about your suggestions. – user154259 Dec 25 '19 at 5:30

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.