如果我没记错的话,用于命名的特定功能的
setStyle
函数将如下所示: var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
var rect = L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
rect.setStyle({color: "#4B1BDE"});
...这会将颜色从橙色更改为蓝色。我也知道
resetStyle()
函数会将样式还原为原始样式。这就是我设置GeoJSON样式的方式:
var everything = L.geoJson(myfile, {
onEachFeature: function(feature){
array_of_layers.addLayer(feature);
},
style: function(feature){
switch(feature.properties.name){
case "belgium": return belgium_style; break;
case "bosnia": return bosnia_style; break;
case "denmark": return denmark_style; break;
case "great_britain": return britain_style; break;
case "greece": return greece_style; break;
case "italy": return italy_style; break;
case "serbia": return serbia_style; break;
case "spain": return spain_style; break;
}
}
});
我想做的就是在代码中稍后将一个国家/地区设为蓝色,将其他国家/地区设为灰色。这是两步操作,将所有国家/地区涂成灰色,然后再涂成蓝色。
第一件事是,我需要一个循环遍历每个功能的循环,并为所有国家/地区灰色。
第二件事是,(这让我不眠之夜)如何从一组GeoJSON多边形中仅选择一个要素进行处理?只是我需要涂成蓝色的国家。
如果是鼠标悬停的问题,我可以像Leaflet教程中那样放置一个事件侦听器。但是无论用户如何交互,我都希望通过使用其名称来调用样式,以设置和重置样式,就像在上面的矩形中一样。
#1 楼
无需删除该层并重新创建新的层即可如上所述进行操作:geojson_layer.eachLayer(function (layer) {
if(layer.feature.properties.NAME == 'feature 1') {
layer.setStyle({fillColor :'blue'})
}
});
似乎比删除并重新创建geoJson层要有效得多。
从文档来看,
GeoJSON
层扩展了FeatureGroup
,而LayerGroup
又扩展了FeatureGroup
。此外,似乎每个geoJson要素在q4312079q中都有自己的层!
评论
要动态更改样式时如何触发此方法?
–卡塞尔
16年1月7日在16:33
我认为相当于geojson_layer.setStyle(function ...)
– PeterVermont
16年8月9日在21:30
这里的一个问题是,如果您更改图层,即添加子图层,则将根据选项中的原始样式创建它们,而不是您将其设置为
–MikeT
18-2-22在13:16
#2 楼
我写下了一个小代码,以使用传单样式化特定的geojson功能。您可以在JSFiddle(原始,非功能性),Functional JSFiddle 2018-02-17上尝试使用它,或在本地使用以下代码测试。对于此示例,我使用的是us-states.json文件,但它可用于任何geojson文件。
希望对您有所帮助。
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Coloring Geojson Features</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
<style>
#map {
width: 800px;
height: 500px;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
text-align: left;
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://leafletjs.com/dist/leaflet.js"></script>
<script type="text/javascript" src="http://leafletjs.com/examples/us-states.js"></script>
<script type="text/javascript">
$(document).ready(function () {
init_map();
init_geojson();
$("#btn").on('click', function () {
var stateName = $('#statename').val();
console.log(stateName);
init_geojson(stateName);
});
});
var map, geojson, sn;
function init_map() {
map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2012 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707'
}).addTo(map);
geojson = L.geoJson(statesData, {
style: style
//onEachFeature: onEachFeature,
}).addTo(map);
}
function init_geojson(n) {
console.log(geojson.options);
map.removeLayer(geojson);
if (n != "") {
sn = n;
console.log(sn);
geojson = L.geoJson(statesData, {
style: style
}).addTo(map);
}
}
function style(feature) {
console.log(sn);
if (sn == feature.properties.name) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.3,
fillColor: '#ff0000'
};
} else {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.3,
fillColor: '#666666'
};
}
}
</script>
<input type="text" id="statename" value="Alaska">
<input type="button" id="btn" value="Set Color"/>
</body>
</html>
评论
因此,所有有关制作一个用于检查feature.properties.name值的style(feature)函数的问题。谢谢!
–多鲁克·卡林卡(DorukKarınca)
13-10-29在10:29
@DorukKarınca是:)
–Farhat Abbas
13-10-29在10:36
太棒了!这正是我要寻找的!
– joosthoek
2015年11月8日12:09
我看到您创建了函数样式(功能),但看不到您将其应用于数据的位置。
–CaD
20年4月6日在15:25
#3 楼
我将其添加为第二个答案,因为在尝试将我的问题表达到Google搜索中时,这个问题不断出现。基本上,我有一个
L.LayerGroup
,它由几个由GeoJSON组成的L.Layer
对象组成。这些图层中的要素已经可视化为L.CircleMarker
对象。我想要这样做,以便可以在侧边栏中修改图层中基础特征的属性,并通过更改其颜色立即将这些更改反映在图层中。由于所有内容都是一堆但是,我无法直接在
L.Layer
上设置样式,因此我不得不更深入一点:var buildingCircleMarkerStyle = function(propertyName) {
switch (propertyName) {
case 'A':
return {radius: 8, fillColor: "#cc9200", color: "#000000", weight: 1, opacity: 1, fillOpacity: 1}
case 'B':
return {radius: 8, fillColor: "#a0f545", color: "#000000", weight: 1, opacity: 1, fillOpacity: 1}
default:
return {radius: 4, fillColor: "#888888", color: "#000000", weight: 1, opacity: 1, fillOpacity: 1}
}
}
var buildingMarker = function (feature, latlng) {
return L.circleMarker(latlng, buildingCircleMarkerStyle(feature.properties["buildingProperty"]))
}
buildingLayerGroup.eachLayer(function (layer) {
layer.eachLayer(function (subLayer) {
console.log(subLayer);
subLayer.setStyle(buildingCircleMarkerStyle(subLayer.feature.properties["buildingProperty"]));
})
我没有知道这样做是否正确,但似乎对我有用。
评论
感谢您指出传单的setStyle()函数。