Javascript 我可以使用相同的样式函数设置不同的GeoJSON层的样式吗？

我不熟悉传单和JavaScript。我想知道我是否可以用一种更简洁的方式来编码我的传单地图

我的地图包括三个不同颜色的GeoJSON图层。我通过为每个层调用单独的样式函数来设置颜色。函数“style”返回蓝色，函数“style2”返回紫色，函数“style3”返回粉色。我告诉第1层使用“样式”，第2层使用“样式2”，等等

地图如下：

我可以做同样的事情，但有一个风格的功能？基本上，style函数是否可以检测到图层并执行以下操作：

if the layer is layer 1, style like this______
if the layer is layer 2, style like this______
if the layer is layer 3, style like this______

如果可以，我将如何用代码编写它

我经常想对几个层使用一个函数，例如设置弹出内容，但我不知道如何根据单击的层使函数的行为有所不同。我只知道如何编写类似但独立的函数并分别调用它们

<div id="map" style="width:800px; height: 600px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://talia.droppages.com/slccommcounc.js"></script>
<script src="http://talia.droppages.com/tract158slc.js"></script>
<script src="http://talia.droppages.com/slccouncil.js"></script>
<script>
var map = L.map('map').setView([40.8, -111.928], 11); 


    L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
  maxZoom: 18,
  minZoom: 7
  }
  ).addTo(map); 

function style(feature) {
    return {
        weight: 1,
        opacity: 1,
        color: 'blue',
        fillColor: 'cornflowerblue',
        fillOpacity: 0.5
    };
}
function style2(feature) {
    return {
        weight: 1,
        opacity: 1,
        color: 'blueviolet',
        fillColor: 'plum',
        fillOpacity: 0.5
    };
}
function style3(feature) {
    return {
        weight: 1,
        opacity: 1,
        color: 'fuchsia',
        fillColor: 'pink',
        fillOpacity: 0.5
    };
}

var layer1 = new L.geoJson(slccommcounc, {
    style: style,
}).addTo(map);

var layer2 = new L.geoJson(tract158slc, {
    style: style2,
})

var layer3 = new L.geoJson(slccouncil, {
    style: style3,
})

L.control.layers(null,{'Layer 1 Title':layer1,'Layer 3 Title':layer3,'Layer 2 Title':layer2},{collapsed:false}).addTo(map);

</script>

var map=L.map（'map'）.setView（[40.8，-111.928]，11）；
L.tileLayer（'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z} /{y}/{x}'{
maxZoom:18，
最小缩放：7
}
).addTo（地图）；
功能样式（特征）{
返回{
体重：1，
不透明度：1，
颜色：“蓝色”，
fillColor:‘矢车菊蓝’，
填充不透明度：0.5
};
}
函数样式2（特性）{
返回{
体重：1，
不透明度：1，
颜色：'蓝紫色'，
fillColor:‘李子’，
填充不透明度：0.5
};
}
函数样式3（特性）{
返回{
体重：1，
不透明度：1，
颜色：“紫红色”，
fillColor:'粉红色'，
填充不透明度：0.5
};
}
var layer1=新的L.geoJson（SLCCOMMCONC{
风格：风格，
}).addTo（地图）；
var layer2=新的L.geoJson（tract158slc{
风格：风格2，
})
var layer3=新的L.geoJson（SLCCOUNCEL{
风格：风格3，
})
层（null，{'Layer 1 Title'：layer1，'Layer 3 Title'：layer3，'Layer 2 Title'：layer2}，{折叠：false}）.addTo（映射）；

我想这就是你要找的。虽然不是最干净的，但它很管用

    function style(opt) {
        switch (opt) {
            case 's1':
                color = 'red';
                fillColor = 'cornflowerblue';
                break;
            case 's2':
                color = 'blueviolet';
                fillColor = 'plum';
                break;
            case 's3':
                color = 'fuchsia'
                fillColor = 'pink'
                break;
        }


    return {
            weight: 1,
            opacity: 1,
            color: color,
            fillColor: fillColor,
            fillOpacity: 0.5
        };
}

var layer1 = new L.geoJson(slccommcounc, {
    style: style('s1'),
}).addTo(map);

var layer2 = new L.geoJson(tract158slc, {
    style: style('s2'),
})

var layer3 = new L.geoJson(slccouncil, {
    style: style('s3'),
})

---

我发现了一种策略，允许使用一种样式的功能，而不是三种样式的功能。我只需要学习如何将参数传递到style函数中。在这种情况下，唯一的更改是颜色和填充颜色，因此这些参数是在制作图层时设置的。结果贴图看起来与原始贴图完全相同。下面是更简洁的代码：

<div id="map" style="width:800px; height: 600px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="slccommcounc.js"></script>
<script src="tract158slc.js"></script>
<script src="slccouncil.js"></script>
<script>
var map = L.map('map').setView([40.8, -111.928], 11); 

L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
  maxZoom: 18,
  minZoom: 7
  }
  ).addTo(map); 

function style(feature) {
    return {
        weight: 1,
        opacity: 1,
        color: color,
        fillColor: fillColor,
        fillOpacity: 0.5
    };
}

var layer1 = new L.geoJson(slccommcounc, {
    style: style(color= 'blue', fillColor = 'cornflowerblue'),
}).addTo(map);

var layer2 = new L.geoJson(tract158slc, {
    style: style(color= 'blueviolet', fillColor = 'plum'),
})

var layer3 = new L.geoJson(slccouncil, {
    style: style(color= 'fuchsia', fillColor = 'pink'),
})

L.control.layers(null,{'Layer 1 Title':layer1,'Layer 3 Title':layer3,'Layer 2 Title':layer2},{collapsed:false}).addTo(map);

</script>

var map=L.map（'map'）.setView（[40.8，-111.928]，11）；
L.tileLayer（'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z} /{y}/{x}'{
maxZoom:18，
最小缩放：7
}
).addTo（地图）；
功能样式（特征）{
返回{
体重：1，
不透明度：1，
颜色：颜色，
fillColor:fillColor，
填充不透明度：0.5
};
}
var layer1=新的L.geoJson（SLCCOMMCONC{
样式：样式（颜色为“蓝色”，填充颜色为“矢车菊蓝色”），
}).addTo（地图）；
var layer2=新的L.geoJson（tract158slc{
样式：样式（颜色为“蓝紫色”，填充颜色为“梅花”），
})
var layer3=新的L.geoJson（SLCCOUNCEL{
风格：风格（颜色=紫红色，填充颜色=粉红色），
})
层（null，{'Layer 1 Title'：layer1，'Layer 3 Title'：layer3，'Layer 2 Title'：layer2}，{折叠：false}）.addTo（映射）；

在我的例子中，我没有基于任何特定属性为图层着色。请注意，如果要根据GeoJson中已设置的特性设置图层样式，请参见以下示例：

---

最好指定为什么要为此使用一个函数：指定三种不同的样式。即使是最简洁的函数也只能在这三个函数之间进行选择——这比使用三个函数更复杂，也不那么简单。@tmcw我明白你的意思——一个函数仍然会分解成几个部分。我询问一个函数的原因是为了在以后的场景中简洁起见，在地图中添加了更多的图层。例：也许我有10层，我想有完全相同的风格属性，除了“颜色”属性。在“颜色”属性点为每个层指定颜色，而不是重复该功能和所有设置10次，似乎没有那么多余。我很想知道这是否可能，以及如何用传单编码。