如何为循环中的每个功能设置颜色

时间:2019-12-17 09:05:55

标签: openlayers openlayers-3

我有一个GeoJSON文件,数据库中的查询文件是JSON。两者具有相同的区号(TAMBON_COD)。现在,我可以通过区号连接他们的数据。接下来,我想通过使用JSON中的L_RISK值为每个功能添加颜色。我使用循环方法来匹配子代码(tambon_code_i是从GeoJSON文件获得的功能,而tambon_code_j是JSON文件)。我在if else if循环中将颜色设置为3级。它将由JSON中L_RISK的值分隔。如何创建函数功能?

     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,


    });

    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;

                layer_source.on('change', function(evt) {
                //var features = evt.target; 
                    if (evt.target.getState() === 'ready') {
                        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');
                            //console.log(tambon_code_i);

                            for (var j = 0; j < ourData.length; j++) {
                                tambon_code_j = ourData[j].TAMBON_COD;
                                data_risk_j = ourData[j].L_RISK;
                                //console.log(tambon_code_j);=

                                if(tambon_code_i == tambon_code_j ){
                                   // console.log(tambon_code_i);
                                   // console.log(tambon_code_j);
                                   // console.log(data_risk_j);

                                    if(data_risk_j<8.00){
                                        console.log('low',tambon_code_i);
                                        //tambon_code_i.setStyle(new ol.style.Style({fill: '#379422'}));
                                    }else if(data_risk_j<=16.00){
                                        //tambon_code_i.setStyle(new ol.style.Style({fill: '#F8EF2B'}));
                                        console.log('mid',tambon_code_i);
                                    }else if(data_risk_j>16.01){
                                        //tambon_code_i.setStyle(new ol.style.Style({fill: '#F7120B'}));
                                        console.log('hight',tambon_code_i);
                                    }
                                }
                            }
                        //break;
                        }
                    }
                });
        }   
        ourRequest.send();
    }

这是一些json

[
 {
  "TAMBON_COD": "220101",
  "L_RISK": "16.15385"
 },
 {
 "TAMBON_COD": "220102",
 "L_RISK": "11.53846"
 },
 {
 "TAMBON_COD": "220103",
 "L_RISK": "13.46154"
 }
]

0 个答案:

没有答案