fungsi setStyle () untuk fitur GeoJSON

23

Ok, karena saya sudah mengajukan pertanyaan yang sangat panjang tentang ini, tetapi karena tidak mendapatkan balasan baru untuk sementara waktu, dan tidak menjadi bingung secara detail, saya akan membuat yang sederhana ini dengan cara terbaik yang saya bisa.

Jika saya tidak salah, setStylefungsi untuk nama, fitur tertentu adalah sebagai berikut:

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

... yang akan mengubah warna dari oranye ke biru. Saya juga mengetahui resetStyle()fungsi yang akan mengembalikan gaya ke aslinya.

Ini adalah bagaimana saya mengatur GeoJSON saya:

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

});

Yang ingin saya lakukan adalah membuat satu negara menjadi biru dan yang lainnya menjadi abu-abu, kemudian dalam kode. Ini adalah langkah dua langkah, untuk melukis semua negara menjadi abu-abu, dan kemudian membuat satu biru.

Hal pertama adalah, saya perlu loop yang akan beralih ke setiap fitur dan setStyle()untuk semua negara menjadi abu-abu. Apakah itu berfungsi jika saya hanya everything.setStyle({color: "#4B1BDE"})atau sesuatu?

Yang kedua adalah, (itu membuat saya tidak bisa tidur malam) bagaimana cara memilih hanya satu fitur dari sekelompok poligon GeoJSON untuk dikerjakan? Hanya negara yang saya butuhkan untuk melukis menjadi biru.

Jika itu masalah mouse yang melayang, saya bisa menempatkan pendengar acara seperti yang dilakukan dalam tutorial Leaflet. Tetapi terlepas dari interaksi pengguna, saya ingin mengatur dan mengatur ulang gaya dengan memanggilnya dengan namanya, seperti yang saya lakukan dengan persegi panjang di atas.

leaflet geojson features Doruk Karınca
sumber

1

Terima kasih telah menunjukkan setStyle()fungsi leaflet .

berto

27

Ini berfungsi tanpa perlu menghapus layer dan membuat ulang yang baru seperti yang dijelaskan di atas:

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

Tampaknya menjadi sedikit lebih efisien daripada menghapus dan menciptakan kembali lapisan geoJson. Dari dokumen, GeoJSONlapisan memanjangFeatureGroup yang pada gilirannya memanjang LayerGroup.
Selain itu, tampaknya setiap fitur geoJson memiliki lapisan sendiri di FeatureGroup!

Davem M
sumber

Bagaimana saya memicu metode ini ketika saya ingin mengubah gaya secara dinamis?

Karussell

3

Saya pikir ini setara dengan geojson_layer.setStyle (fungsi ...)

PeterVermont

satu masalah di sini jika Anda mengubah lapisan yaitu menambahkan lapisan anak, mereka akan dibuat dari gaya asli dalam opsi, bukan apa yang Anda atur

MikeT

19

Saya telah menulis kode kecil untuk gaya fitur geojson spesifik menggunakan leaflet. Anda dapat mencobanya di JSFiddle (Asli, non-fungsional) , JSFiddle 2018-02-17 Fungsional , atau menggunakan tes kode berikut secara lokal.

Untuk contoh ini saya menggunakan file us-States.json tetapi dapat digunakan untuk file geojson.

Saya harap ini akan membantu.

Ini kodenya:

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

3

Jadi, itu semua tentang membuat style(feature)fungsi memeriksa feature.properties.namenilai. Terima kasih!

Doruk Karınca

@ DorukKarınca Ya :)

Farhat Abbas

Luar biasa! Ini persis apa yang saya cari!

joosthoek

fungsi setStyle () untuk fitur GeoJSON - Leaflet

Jawaban: