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

Question

我是 Leaflet 和 JavaScript 的新手。我想知道我是否可以用更简洁的方式编写我的 Leaflet map 。

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

map 在这里:http://talia.droppages.com/ask/three_layers.html

我可以做同样的事情但使用一种风格的功能吗？本质上，样式函数是否可以检测图层并执行以下操作:

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>

Answer 1

我认为这就是您要找的东西。不是最干净的，但它可以工作。

    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'),
})