ฟังก์ชัน setStyle () สำหรับคุณสมบัติ GeoJSON

23

ตกลงเนื่องจากฉันได้ถามคำถามที่ยาวมากเกี่ยวกับเรื่องนี้ แต่เนื่องจากมันไม่ได้รับคำตอบใหม่ใด ๆ ชั่วขณะหนึ่งและเพื่อไม่ให้สับสนในรายละเอียดฉันจะเก็บเรื่องนี้ไว้เป็นวิธีที่ดีที่สุดที่ฉันสามารถทำได้

ถ้าฉันไม่เข้าใจผิด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;
            }
    }

});

สิ่งที่ฉันต้องการจะทำคือทำให้ประเทศหนึ่งเป็นสีน้ำเงินและอีกประเทศหนึ่งเป็นสีเทาในภายหลังในรหัส มันเป็นสองขั้นตอนในการวาดทุกประเทศให้เป็นสีเทาแล้วทำให้เป็นสีฟ้า

สิ่งแรกคือฉันต้องการวงวนที่จะวนซ้ำในแต่ละฟีเจอร์และsetStyle()เพื่อให้ทุกประเทศเป็นสีเทา มันทำงานถ้าฉันแค่everything.setStyle({color: "#4B1BDE"})หรืออะไร?

สิ่งที่สองคือ (ให้คืนนอนไม่หลับ) ฉันจะเลือกคุณลักษณะหนึ่งจากกลุ่มรูปหลายเหลี่ยม GeoJSON เพื่อทำงานกับได้อย่างไร แค่ประเทศที่ฉันต้องทาสีให้เป็นสีฟ้า

ถ้ามันเป็นเรื่องของการวางเมาส์ไว้ฉันสามารถวางตัวฟังเหตุการณ์เช่นเดียวกับที่ทำในบทเรียนของแผ่นพับ แต่ไม่ว่าผู้ใช้จะโต้ตอบกับใครฉันต้องการตั้งค่าและตั้งค่าสไตล์ใหม่ด้วยการเรียกมันด้วยชื่อของมันเหมือนกับที่ฉันทำกับสี่เหลี่ยมด้านบน

leaflet geojson features

— Doruk Karınca
แหล่งที่มา

1

ขอบคุณที่ชี้นำsetStyle()ฟังก์ชั่นของแผ่นพับ

— berto

27

วิธีนี้ใช้งานได้ โดยไม่จำเป็นต้องลบเลเยอร์และสร้างขึ้นใหม่ตามที่อธิบายไว้ข้างต้น:

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

ดูเหมือนว่าจะมีประสิทธิภาพมากกว่าการลบและสร้างเลเยอร์ geoJson อีกเล็กน้อย จากเอกสารที่เป็นGeoJSONชั้นขยายFeatureGroupLayerGroupซึ่งจะขยาย
นอกจากนี้ดูเหมือนว่าคุณลักษณะ geoJson แต่ละรายการจะมีเลเยอร์ของตัวเองในFeatureGroup!

— Davem M
แหล่งที่มา

ฉันจะเรียกวิธีการนี้ได้อย่างไรเมื่อฉันต้องการเปลี่ยนสไตล์แบบไดนามิก?

— Karussell

3

ฉันคิดว่าเทียบเท่ากับ geojson_layer.setStyle (ฟังก์ชั่น ... )

— PeterVermont

ปัญหาหนึ่งที่นี่หากคุณเปลี่ยนเลเยอร์คือเพิ่มเลเยอร์ของเด็กพวกเขาจะสร้างจากสไตล์ดั้งเดิมในตัวเลือกไม่ใช่สิ่งที่คุณตั้งไว้

— MikeT

19

ฉันได้เขียนรหัสเล็ก ๆ เพื่อใช้งานคุณสมบัติรูปแบบเฉพาะของ geojson โดยใช้แผ่นพับ คุณสามารถลองใช้บนJSFiddle (ต้นฉบับไม่ใช่ฟังก์ชัน) , ฟังก์ชัน 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 &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
แหล่งที่มา

3

ดังนั้นมันคือทั้งหมดที่เกี่ยวกับการสร้างstyle(feature)ฟังก์ชั่นการตรวจสอบfeature.properties.nameค่า ขอบคุณ!

— Doruk Karınca

@ DorukKarıncaใช่ :)

— Farhat Abbas

! น่ากลัว นี่คือสิ่งที่ฉันกำลังค้นหา!

— joosthoek

ฟังก์ชัน setStyle () สำหรับคุณสมบัติ GeoJSON - แผ่นพับ