传单折线未以自定义颜色显示

Question

我正在做一个项目，我正在使用 Leaflet。从从数据库中提取的对象列表中，我目前可以显示带有自定义图标的标记。现在我正在努力根据我在 DB 中获得的数据显示折线。使用 Javascript，我得到列表并到达显示折线，但它们都是蓝色的，我希望它们根据折线的属性具有不同的颜色。

var geoJsonFluxMatiere = {
    'type': 'FeatureCollection',
    'features': []
};
for (indexfluxMatiere = 0; indexfluxMatiere < listeFluxMatiere.length; indexfluxMatiere++) {
    var tableauFluxMatiere = {
        type: 'Feature',
        properties: {
            'id': listeFluxMatiere[indexfluxMatiere].idFluxMatiere,
            'fluxPrimaire': listeFluxMatiere[indexfluxMatiere].fluxPrimaire
        },
        geometry: {
            'type': 'LineString',
            'coordinates': [
                [listeFluxMatiere[indexfluxMatiere].posXDepart, listeFluxMatiere[indexfluxMatiere].poxYDepart],
                [listeFluxMatiere[indexfluxMatiere].posXArrivee, listeFluxMatiere[indexfluxMatiere].posYArrivee]
            ]
        }
    }
    geoJsonFluxMatiere['features'].push(tableauFluxMatiere);
}

var layerFluxMatiere = L.geoJson(geoJsonFluxMatiere, {
    pointToLayer: function (feature, latlng) {
        if(feature.properties.fluxPrimaire == true){
            var polylineFluxMatiere = new L.polyline(
                feature.geometry.coordinates,
                {
                    color: 'red',
                }
            );
        }else{
            var polylineFluxMatiere = new L.polyline(
                feature.geometry.coordinates,
                {
                    color: 'green',
                }
            );
        }
        return polylineFluxMatiere;
    },
}).addTo(map);

坐标没问题，折线显示在它们必须的位置，但就像颜色的参数被忽略了一样。
我是不是做错了什么？
顺便说一句，如果我的英语不完美，我很抱歉。 谢谢！

拉斐尔

Answer 1

使用.geoJSON() 时，您可以使用style 选项来设置特征样式。有两种方法可以做到这一点，您可能希望将一个函数传递给styles 属性，以再次执行您的检查fluxPrimaire。以下是来自geoJSON Docs 的示例：

var states = [{
    "type": "Feature",
    "properties": { "party": "Republican" },
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-104.05, 48.99],
            [-97.22, 48.98],
            [-96.58, 45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
        ]]
    }
}, {
    "type": "Feature",
    "properties": { "party": "Democrat" },
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-109.05, 41.00],
            [-102.06, 40.99],
            [-102.03, 36.99],
            [-109.04, 36.99],
            [-109.05, 41.00]
        ]]
    }
}];

L.geoJSON(states, {
    //this is where you will perform your check to change the polyline color
    style: function (feature) {
        switch (feature.properties.party) {
            case 'Republican': return { color: "#ff0000" };
            case 'Democrat': return { color: "#0000ff" };
        }
    }
}).addTo(map);

在您的情况下，您可以尝试以下方法：

var layerFluxMatiere = L.geoJson(geoJsonFluxMatiere, {
  style: function (feature) {
    if(feature.properties.fluxPrimaire == true){
        return { color: '#ff0000' };
    }else{
        return { color: '#0000ff' };       
     }
  },
}).addTo(map);

Answer 2

Leaflet GeoJSON 工厂的pointToLayer 选项仅用于"Point" 类型的几何图形。

对于"LineString"（折线）类型，您可以改用style 选项。请注意，它应该直接返回样式选项，而不是图层。