各リーフレットのスタイルを設定する

Question

私はいくつかの地域のリーフレットとジオジーンを使って、地図上のそれらの地域に関する関連する計算を色で表示しています。 calculation()という関数で各領域の値を計算します。この関数の出力は単純なfloatです。ここに私がしたことがあります：

1. 私はonEachFeature各機能の読み込みに使用します。
2. 次に、Ajaxを使用していくつかの計算を行います。 （ここではJqueryを使用します）
3. 計算結果を配列に保存します。
4. 次に、.doneを使用して、各フィーチャのスタイル（領域）を設定して色を設定します。ここで

私のコードです：ここで私は色

function get_feature_color(input) { 
var x= input; 
switch (true) { 
case (x>=0 && x<=0.5): 
    return 'blue'; 
    break; 
case (x>0.5 && x<=1): 
    return 'green'; 
} 
} 

を設定する。しかし、残念ながら、私が得る結果は

function set_feature_style (feature, calculation_array) { 
for (i=0;i<calculation_array.length;i++) { 
    if (calculation_array[i][0]==feature.properties.region_id) { 
     return { 
      weight: 0.5, 
      opacity: 0.3, 
      color: 'Black', 
      dashArray: '3', 
      fillOpacity: 0.2, 
      fillColor:get_feature_color(calculation_array[i][1]) 
     } 
    } 
} 
} 

：ここ

var region=L.geoJSON(qom, {onEachFeature: 
function (feature, layer) { 
    $.ajax({ //send the ajax with following parameter 
     type:"POST", 
     timeout: 2000, 
     cache:false, 
     url: "../tool/calculation.php", //the php we are sending info too and has got 
     data: { }, // multiple data sent using ajax 
     success: function (data) { //now we have data 
      $.each(data, function(calculation_related_key,calculation_related_content) { 
       region_array_calculation.push([the_region_id, calculation_related_content['result']]); 
      }); 
     } 
    }).done(function(){ 
     L.geoJSON(qom, {style : set_feature_style(feature, region_array_calculation)}).addTo(mymap); 
     }); 
} 
}); 

は、スタイルのコードを設定していますすべて青でしかし、いくつかの領域の計算は0.5以上です。

Answer 1

私は、コードはOKだと思う：私は次の配列を使用して関数を使用：

var calcArray = [ 
    [0,0.4], 
    [1,0.9], 
    [2,0.1], 
    [3,0.89], 
    [4,0.7] 
]; 

と地域をペイントするために、次のコード：

$("#regionX").css("background-color",(set_feature_style({properties:{region_id:X}},calcArray).fillColor)); 

あなたは以下のライブデモを見ることができます:)

var calcArray = [ 
 
    [0,0.4], 
 
    [1,0.9], 
 
    [2,0.1], 
 
    [3,0.89], 
 
    [4,0.7] 
 
]; 
 

 
function set_feature_style (feature, calculation_array) { 
 
for (i=0;i<calculation_array.length;i++) { 
 
    if (calculation_array[i][0]==feature.properties.region_id) { 
 
     return { 
 
      weight: 0.5, 
 
      opacity: 0.3, 
 
      color: 'Black', 
 
      dashArray: '3', 
 
      fillOpacity: 0.2, 
 
      fillColor:get_feature_color(calculation_array[i][1]) 
 
     } 
 
    } 
 
} 
 
} 
 

 
function get_feature_color(input) { 
 
var x= input; 
 
switch (true) { 
 
case (x>=0 && x<=0.5): 
 
    return 'blue'; 
 
    break; 
 
case (x>0.5 && x<=1): 
 
    return 'green'; 
 
} 
 
} 
 

 
$("#region0").css("background-color",(set_feature_style({properties:{region_id:0}},calcArray).fillColor)); 
 
$("#region1").css("background-color",(set_feature_style({properties:{region_id:1}},calcArray).fillColor)); 
 
$("#region2").css("background-color",(set_feature_style({properties:{region_id:2}},calcArray).fillColor)); 
 
$("#region3").css("background-color",(set_feature_style({properties:{region_id:3}},calcArray).fillColor)); 
 
$("#region4").css("background-color",(set_feature_style({properties:{region_id:4}},calcArray).fillColor));

.region{ 
 
    width:100px; 
 
    height:100px; 
 
    color:white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="region" id="region0">region 0</div> 
 
<div class="region" id="region1">region 1</div> 
 
<div class="region" id="region2">region 2</div> 
 
<div class="region" id="region3">region 3</div> 
 
<div class="region" id="region4">region 4</div>