Question

我正在使用某些地区的传单和地理信息来按地图显示有关这些地区的相关计算。我通过一个名为calculation()的函数计算每个区域值。这个函数的输出是一个简单的浮点数。这就是我所做的：

我使用onEachFeature加载每个功能。
然后我使用Ajax进行一些计算。（我在这里使用Jquery）
我将计算结果保存在一个数组中。
然后，我使用.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));

您可以在下面看到现场演示：）

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

设置每个传单功能的样式

1 个答案: