传单多段线不显示自定义颜色

Question

我正在做一个项目，我正在使用 Leaflet。从数据库中提取的对象列表中，我目前可以显示带有自定义图标的标记。现在我正在努力显示我在数据库中获得的数据的折线。使用 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 选项代替。注意应该直接return样式选项，而不是图层。

传单多段线不显示自定义颜色

Leaflet polyline is not displayed with custom color

leaflet

geojson

polyline