Question

我使用mapbox和leaflet在地图中绘制线条，下面是我的代码：

var lines= {


        "type":"FeatureCollection",

        "features": [

      {
       "type": "Feature",
       "geometry":{"type":"LineString", 
       "coordinates":[[103.85909,1.2941],[103.85895,1.2940450000000001],[103.85881,1.29399]]},
       "properties": {"id":"01","score":10}
      }


// totally having 100 elements in the array

                   ]};

var map = L.map('map').setView([1.3096622448984000, 103.7689017333800], 12);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=token', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(map);
    map.doubleClickZoom.disable();

    var options = {
            position: 'topleft',
            title: 'Search',
            placeholder: 'enter link id ',
            maxResultLength: 15,
            threshold: 0.5,
            showInvisibleFeatures: true,
            showResultFct: function(feature, container) {
                props = feature.properties;
                var name = L.DomUtil.create('b', null, container);
                name.innerHTML = props.id;

                container.appendChild(L.DomUtil.create('br', null, container));

                var cat = props.id
                    info = '' + cat + ', ' + 'th link';
                container.appendChild(document.createTextNode(info));
            }
        };

    var searchCtrl = L.control.fuseSearch(options);

    searchCtrl.addTo(map);


    var geojson;

    function getColor(d) {


           if(d=10){
               return '#ff0000';
           }

           else if(d<10){
               return '#00FF00';
           }
           else{
               return '#00FF00';

           }
    } 


    function style(feature) {
        return {
            weight: 2,
            opacity: 1,
            color: getColor(feature.properties.score),


            fillOpacity: 0.7,

        };
    }


    function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color:'#0000FF',
        dashArray: '',
        fillOpacity: 0.7
    });


    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }

    info.update(layer.feature.properties);

    }
function resetHighlight(e) {
    geojson.resetStyle(e.target);
    info.update();
}
function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
    map.doubleClickZoom.disable();
}
var info = L.control();


info.update = function (props) {
    this._div.innerHTML = '<h4><b>August 2016: <b></h4>' +  (props ?
        '<b>Link ' + props.id + '</b><br />'  
        : 'Hover over a link');


};


function onEachFeature(feature, layer) {
     feature.layer = layer;

    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,


    });
    var popupContent = 
      '<b>Link ' + feature.properties.id + '</b>';

    layer.bindPopup(popupContent);          
    feature.layer = layer;

}




function mapupdatecolor(){




          $.ajax({
            type: "GET",

            url: 'http://'+backend+':8081/lines', 
            success: function(data) {


//data is 100 elements data array in the form of           [{"street":1,"score":8},....


                for (i = 0; i <100; i++) { 

                    console.log("1 time score in console--"+zones['features'][i]['properties']['score']);
                    lines['features'][i]['properties']['score']=data[i].score;
                    console.log(data[i].score)
                    console.log("2 time score in console after change--"+lines['features'][i]['properties']['score']);

                }

                if (geojson) {

                    geojson.remove(); 
                    console.log("removed");

                }




                geojson = L.geoJson(lines, {
                     style: style,
                     onEachFeature: onEachFeature
                }).addTo(map);
                console.log("update done")
            },
            error: function (xhr, ajaxOptions, thrownError) {

                alert(thrownError);
              },
            complete: function() {

              setTimeout(mapupdatecolor, 1000);
            }
          });










}

geojson = L.geoJson(lines, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);


info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this.update();
    return this._div;
};




searchCtrl.indexFeatures(lines.features, ['id']);
info.addTo(map);

setTimeout( mapupdatecolor, 1000);

因此，setTimeout( mapupdatecolor, 1000)行会在每个时间段调用ajax调用，然后预计会更改该行的得分。对于第一个元素，最初得分为10，在第一次调用后，它应更改为8并且颜色也应该改变。当我运行它时显示

    1 time score in console--10
    8
    2 time score in console after change--8

在控制台中。但是线条的颜色没有变化（它应该改变，因为在getColor函数中d是8而不是10所以它应该变为绿色而不是红色。）非常感谢。

Answer 1

问题在于：

if(d=10){
    return '#ff0000';
}

表达式(d=10)始终为真。请改用(d === 10)。

恕我直言，您可以在询问并显示如此大量的代码之前测试getColor函数的行为。这个问题似乎与Leaflet有关，实际上并非如此。

更改geoJSON属性后颜色不会更改

1 个答案: