Question

我是Leaflet和JavaScript的新手。我想知道我是否可以用更简洁的方式编写我的宣传单地图。

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

地图位于：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

我发现了一种允许一种风格功能而不是三种功能的策略。我只需要学习如何将参数传递给样式函数。在这种情况下，唯一的变化是color和fillColor，因此在制作图层时会设置这些参数。结果映射看起来与原始映射完全相同。这是更简洁的代码：

<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

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

2 个答案: