Question

我正在研究一个项目，我正在使用Leaflet。从DB中提取的对象列表中，我当前可以显示带有自定义图标的标记。现在我正在努力显示我在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选项。请注意，它应该直接返回样式选项，而不是图层。

传单折线不显示自定义颜色

2 个答案: