2

I'm having trouble displaying the feature's label. From my code I can color each polygon and I want it to display the label name of each polygon as well. It only shows the coloring of the image functions below in the setStyle section, but in the lebels defined in

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
});

It doesn't show results. I find that it is overlapped. If the operation is disabled features [i] .setStyle (style_mid_risk_area); It will display the label name How do I fix it so it shows

This is my code.

var style_low_risk_area = new ol.style.Style({
    fill: new ol.style.Fill({
        color: [0, 250, 0, 1]
    }),
    stroke: new ol.style.Stroke({
        color: [100, 100, 100, 1],
        width: 1
    })
});

var style_mid_risk_area = new ol.style.Style({
    fill: new ol.style.Fill({
        color: [250, 250, 0, 1]
    }),
    stroke: new ol.style.Stroke({
        color: [100, 100, 100, 1],
        width: 1
    })

});

var style_hight_risk_area = new ol.style.Style({
    fill: new ol.style.Fill({
        color: [250, 0, 0, 1]
    }),
    stroke: new ol.style.Stroke({
        color: [100, 100, 100, 1],
        width: 1
    })
});

var labelStyle = new ol.style.Style({
    text: new ol.style.Text({
        font: '12px Calibri,sans-serif',
        overflow: true,
        fill: new ol.style.Fill({
        color: '#000'
        }),
        stroke: new ol.style.Stroke({
        color: '#fff',
        width: 3
        })
    })
});

var tambonStyle_default = new ol.style.Style({
    fill: new ol.style.Fill({
        color: [150, 150, 150, 1]
    }),
    stroke: new ol.style.Stroke({
        color: [100, 100, 100, 1],
        width: 1
    })
});

var style = [ tambonStyle_default , labelStyle ];

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 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
});

myFuntion();
map.addLayer(layer_tambon);

function myFuntion(){
    var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET', 'http://localhost/Prediction_DHF2/quryDataJson.php',true);
    ourRequest.onload = function(){
        var ourData = JSON.parse(ourRequest.responseText);
        var data_tambon_code;
        var data_risk;
            var key = layer_source.on ('change', function(evt) {
                if (evt.target.getState() === 'ready') {
                    ol.Observable.unByKey(key);
                    var features = layer_source.getFeatures();
                    var tambon_code_i;
                    var tambon_code_j;
                    for (var i = 0; i < features.length; i++) {
                        tambon_code_i = features[i].get('TAMBON_COD');
                        for (var j = 0; j < ourData.length; j++) {
                            tambon_code_j = ourData[j].TAMBON_COD;
                            data_risk_j = ourData[j].L_RISK;
                            if (tambon_code_i == tambon_code_j ){
                                if (data_risk_j<8.00){
                                    //console.log('low',tambon_code_i);
                                    features[i].setStyle(style_low_risk_area);
                                }else if (data_risk_j<=16.00){
                                    //console.log('mid',tambon_code_i);
                                    features[i].setStyle(style_mid_risk_area);
                                }else if (data_risk_j>16.01){
                                    //console.log('hight',tambon_code_i);
                                    features[i].setStyle(style_hight_risk_area);
                                }
                            }
                        }
                    }
                }
            });
    }   
    ourRequest.send();
}

This is the end result.

enter image description here

If I turn off the features [i] .setStyle (style_mid_risk_area); Found that the label name is up But on other lines that are not closed Up but only color

enter image description here

  • My answer was completely wrong, I mixed up a few things, so I deleted it. – TomazicM Dec 25 '19 at 18:32
  • Never mind, thank you for the answer just a moment ago – user154259 Dec 25 '19 at 18:35
1

You are setting a style on your features which overrides the layer style

Instead of using setStyle on the features you could set a property called 'risk_style'

                        if (tambon_code_i == tambon_code_j ){
                            if (data_risk_j<8.00){
                                //console.log('low',tambon_code_i);
                                features[i].set('risk_style', style_low_risk_area);
                            }else if (data_risk_j<=16.00){
                                //console.log('mid',tambon_code_i);
                                features[i].set('risk_style', style_mid_risk_area);
                            }else if (data_risk_j>16.01){
                                //console.log('hight',tambon_code_i);
                                features[i].set('risk_style', style_hight_risk_area);
                            }
                        }

Then in your layer style function you can set the text for the layer style and return an array containing that and the risk_style for the feature (or default if there is no risk_style set)

var layer_tambon = new ol.layer.Vector({
    source: layer_source,
    style: function(features) {
        labelStyle.getText().setText(features.get('TAM_NAM_T'));
        return [features.get('risk_style') || tambonStyle_default, labelStyle];
    },
    declutter: true
});
| improve this answer | |
  • Thank you Mike. It's already showing Labels from your suggestions. Thanks again for the help. – user154259 Dec 26 '19 at 8:59

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.