我可以使用相同的样式函数设置不同的GeoJSON图层样式吗？ [英] Can I style different GeoJSON layers using the same style function?

问题描述

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

I am new to Leaflet and JavaScript. I would like to know whether or not I can code my Leaflet map in a more concise way.

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

My map includes three GeoJSON layers in three different colors. I have set the colors by calling separate style functions for each layer. The function "style" returns blue, the function "style2" returns purple, and the function "style3" returns pink. I tell Layer 1 to use "style" and Layer 2 to use "style2", etc.

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

我可以使用ONE风格功能做同样的事情吗？从本质上讲，样式函数可以检测图层并执行：

Can I do the same thing but with ONE style function? Essentially, could the style function detect the layer and do:

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______

如果可以，我该如何在代码中写出来？

If it can, how would I write that in code?

我经常想在多个图层中使用ONE功能，例如设置弹出内容，但我不知道我不知道如何根据点击的图层使函数的行为有所不同。我只知道如何编写类似但单独的函数并单独调用它们。

I frequently want to use ONE function for several layers, such as setting popup content, but I don't know how to make the function behave differently depending on which layer is clicked. I only know how to write similar but separate functions and call them separately.

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

推荐答案

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

I found a strategy that allows one style function instead of three. I just needed to learn how to pass a parameter into the style function. In this case the only changes were to color and fillColor, so those parameters are set when the layer is made. The result map looks exactly the same as the original map. Here is the more concise code:

<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

In my case, I did not color layers based on any particular property. Note that if you want to style a layer based on a property already set in the GeoJson, Leaflet gives an example of that here: http://leafletjs.com/examples/geojson.html

这篇关于我可以使用相同的样式函数设置不同的GeoJSON图层样式吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！