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

Question

我是 Leaflet 和 JavaScript 的新手。我想知道我是否可以用更简洁的方式对我的 Leaflet 地图进行编码。

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

地图在这里：http://talia.droppages.com/ask/three_layers.html

我可以用 ONE 样式功能做同样的事情吗？本质上，样式功能是否可以检测图层并执行以下操作：

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______

如果可以，我将如何在代码中编写它？

我经常想对多个图层使用 ONE 功能，例如设置弹出内容，但我不知道如何使该功能根据单击的图层而表现不同。我只知道如何编写类似但独立的函数并分别调用。

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

Answer 2

我发现了一种策略，它允许一个样式函数而不是三个。我只需要学习如何将参数传递给样式函数。在这种情况下，唯一的变化是颜色和填充颜色，所以这些参数是在创建图层时设置的。结果地图看起来与原始地图完全相同。这是更简洁的代码：

<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>

就我而言，我没有根据任何特定属性为图层着色。请注意，如果您想根据 GeoJson 中已设置的属性设置图层样式，Leaflet 会在此处给出示例： http://leafletjs.com/examples/geojson.html