GeoJSON özellikleri için setStyle () işlevi

23

Tamam, bu konuyla ilgili çok uzun bir soru sorduğum için, ancak bir süredir yeni bir cevap alamadığı ve ayrıntılarla kafam karıştıramadığı için, bunu en iyi şekilde basit tutacağım.

Yanılmıyorsam, setStyleadlandırılmış, belirli bir özellik için bir işlev şöyle olacaktır:

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"});

... rengi turuncudan maviye değiştirirdi. Ayrıca resetStyle(), stili aslına döndürecek olan fonksiyonun da farkındayım .

GeoJSON'uma şu şekilde tarz veriyorum:

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

});

Yapmak istediğim, daha sonra kodda sadece bir ülkeyi mavi, diğerini gri yapmak. Tüm ülkeleri griye boyamak ve sonra bir mavi yapmak iki adımlı bir şey.

İlk olarak, her özellik üzerinde ve setStyle()tüm ülkelerin grileşmesi için yinelenecek bir döngüye ihtiyacım var . Sadece everything.setStyle({color: "#4B1BDE"})ya da başka bir şey olursa işe yarar mı ?

İkincisi, (bu bana uykusuz geceler veriyor) birlikte çalışacak bir grup GeoJSON poligonundan sadece bir özelliği nasıl seçerim? Sadece maviye boyamam gereken ülke.

Fareyle geziniyor olsaydı, Leaflet derslerinde olduğu gibi bir olay dinleyicisi yerleştirebilirdim. Ancak kullanıcı etkileşimi ne olursa olsun, yukarıdaki dikdörtgende yaptığım gibi, adını ismiyle arayarak stili ayarlamak ve sıfırlamak istiyorum.

leaflet geojson features

— Doruk Karınca
kaynak

1

Broşürün setStyle()işlevini belirttiğiniz için teşekkür ederiz .

— Berto

27

Bu , katmanı kaldırmak ve yukarıda açıklandığı gibi yeni bir tane yeniden oluşturmak zorunda kalmadan çalışır :

geojson_layer.eachLayer(function (layer) {  
  if(layer.feature.properties.NAME == 'feature 1') {    
    layer.setStyle({fillColor :'blue'}) 
  }
});

GeoJson katmanını kaldırmak ve yeniden oluşturmaktan biraz daha verimli gibi görünüyor. Dokümanlardan, sırayla uzanan bir GeoJSONkatmanFeatureGroup uzanır LayerGroup.
Ek olarak, her geoJson özelliğinin de FeatureGroup!

— Davem M
kaynak

Stili dinamik olarak değiştirmek istediğimde bu yöntemi nasıl tetiklerim?

— Karussell

3

Sanırım geojson_layer.setStyle (function ...) ile eşdeğerdir

— PeterVermont

Eğer katmanlar ekleme çocuk katmanları yani değiştirirseniz bir sorun burada, onlar seçeneklerinde özgün tarzı oluşturulacaktır, aşağıda belirtilen yerlere ayarlı değil neyi

— miket

19

Broşür kullanarak belirli geojson özelliğine stil vermek için küçük bir kod yazdım. Eğer bunu deneyebilirsiniz JSFiddle (işlevsel olmayan Orijinal) , Fonksiyonel JSFiddle 2018/02/17 veya lokal olarak aşağıdaki kod testi kullanın.

Bu örnekte, us-states.json dosyalarını kullanıyorum ancak herhangi bir geojson dosyası için kullanılabilir.

Umarım yardımı olur.

İşte kod:

<!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 &copy; 2011 OpenStreetMap contributors, Imagery &copy; 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>

— Farhat Abbas
kaynak

3

Yani, her şey değeri style(feature)kontrol eden bir işlev yapmaktı feature.properties.name. Teşekkürler!

— Doruk Karınca

@ DorukKarınca Evet :)

— Farhat Abbas

Müthiş! Bu tam olarak aradığım şeydi!

— joosthoek

GeoJSON özellikleri için setStyle () işlevi - Leaflet