設置每個小冊子功能的樣式

Question

我正在使用一些區域的小冊子和幾何圖形按照顏色顯示有關這些區域在地圖上的相關計算。 我用一個稱爲calculation()的函數來計算每個區域值。這個函數的輸出是一個簡單的浮點數。這是我所做的：

1. 我使用onEachFeature加載每個功能。
2. 然後我使用Ajax做一些計算。 （我在這裏使用Jquery）
3. 我將計算結果保存在一個數組中。
4. 然後，我用.done來設置每個特徵（這是一個區域）的風格來設置它的顏色。

這裏是我的代碼：

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

這裏是設置樣式代碼：

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

但不幸的是，結果我得到的是全部用藍色。然而，一些地區的計算結果大於0.5。

Answer 1

我認爲的代碼是確定：我用了你的功能與下面的數組：

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>