Question

我正在Mapbox中绘制LineStrings.So现在我在更改属性时更新了行的颜色。

function update_the_map(){
  $.ajax({ 
    url:"http://dataurl",
    contentType : "application/json; charset=utf-8",
    type: "GET",
    dataformat:"JSON",
    async : false,
    success: function(data){ 

        for (i = 0; i <lines.features.length; i++) { 
            lines['features'][i]['properties']['points']=data[i].points;
            var style_update =getColor( lines['features'][i]['properties']['points']); 
            geojson.setFeatureStyle(lines['features'][i]['properties']['id'], style_update);
        }

        setTimeout( update_the_map, 10000);
        console.log("updated");
    },
    error:function(){}  
  });
}

但这改变了线条的所有颜色而不是那些点大于5.因为我的颜色函数就像

function getColor(d) {
           if(d==10 || d==9 || d==8  || d==7  || d==6){
               return '#ff0000';
           }
           else {
               return '#00a1ff';
           }
    }

所以如果点> 5则返回红色，否则它返回蓝色。但是这会返回蓝色，并且整行颜色都会改变。非常感谢。这就是我创建图层的方式。

geojson = L.vectorGrid.slicer(lines, {
    vectorTileLayerStyles: {
        sliced: style},

    maxZoom: 24, // max zoom to preserve detail on
    interactive: true,
    getFeatureId: function(f) {
        return f.properties.id;
    }
}).on('mouseover', mouseover_function).addTo(map);

我的行是一个变量，如下所示：

 var lines= {

            "type":"FeatureCollection","features": [{"type": "Feature","geometry":{"type":"LineString", 
"coordinates":[[ 101.942139,4.252606],[101.766357,3.134346]]},
"properties": {"id":"01","points":10}},....
    ]};

Answer 1

你能说明line.features数组中的内容吗？或者在控制台中检查d的值，传递给getColor函数。

Answer 2

以下确实使更新像魅力一样发挥作用。因此只传递颜色的传递我通过了重量和不透明度和颜色它工作得很好。

function update_the_map(){
      $.ajax({ 
        url:"http://dataurl",
        contentType : "application/json; charset=utf-8",
        type: "GET",
        dataformat:"JSON",
        async : false,
        success: function(data){ 
             var style_update; //changed declaration here

        for (i = 0; i <lines.features.length; i++) { 
            lines['features'][i]['properties']['points']=data[i].points;
            style_update = {
                                            weight: 2,
                                            opacity: 1,                                             
                                            color: getColor(links['features'][i]['properties']['score']),                                                                           
                                            fillOpacity: 0.7
                           };//added this whole for variable style update

 geojson.setFeatureStyle(links['features'][i]['properties']['id'],style_update);
                                                    }

        setTimeout( update_the_map, 10000);
        console.log("updated");
    },
    error:function(){}  
  });
}

仅更新这些属性已更改

2 个答案: