代码之家  ›  专栏  ›  技术社区  ›  Poulain d'or

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

  •  2
  • Poulain d'or  · 技术社区  · 7 年前

    我正在做一个项目,我正在使用传单。从数据库中提取的对象列表中,我当前可以显示带有自定义图标的标记。现在,我正在根据数据库中的数据显示多段线。有了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);
    

    坐标是确定的,多段线显示在它们必须显示的位置,但这就像颜色的参数被忽略一样。
    我做错什么了吗?
    顺便说一句,如果我的英语不完美,我很抱歉。 非常感谢。

    2 回复  |  直到 7 年前
        1
  •  2
  •   Adam Paxton    7 年前

    使用时 .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);
    
        2
  •  1
  •   ghybs    7 年前

    pointToLayer 单张GeoJSON工厂选项仅用于 "Point" 键入几何图形。

    对于 "LineString" (折线)类型,可以使用 style