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

— दोरुक करिनका
स्रोत

1

पत्रक के setStyle()कार्य को इंगित करने के लिए धन्यवाद ।

— बर्टो

27

यह परत को हटाने की आवश्यकता के बिना काम करता है और ऊपर वर्णित के अनुसार एक नया निर्माण करता है:

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

यह जियोसन परत को हटाने और पुन: निर्मित करने की तुलना में काफी अधिक कुशल प्रतीत होता है। डॉक्स से, एक GeoJSONपरत फैली हुई हैFeatureGroup जो बदले में फैली हुई है LayerGroup।
इसके अतिरिक्त, ऐसा लगता है कि प्रत्येक जियोसन फीचर की अपनी परत है FeatureGroup!

— डेव्म एम
स्रोत

जब मैं शैली को गतिशील रूप से बदलना चाहता हूं तो मैं इस विधि को कैसे ट्रिगर करूं?

— Karussell

3

मुझे लगता है कि geojson_layer.setStyle (फ़ंक्शन ...) के बराबर है

— पीटरवर्मोंट

यहाँ एक समस्या यह है कि अगर आप लेयर्स बदलते हैं अर्थात चाइल्ड लेयर्स जोड़ते हैं, तो वे ऑप्शन में मूल शैली से

— बनेंगे

19

मैंने पत्रक के उपयोग से विशिष्ट जियोजोन सुविधा को स्टाइल करने के लिए एक छोटा कोड लिखा है। आप इसे JSFiddle (मूल, गैर-कार्यात्मक) , कार्यात्मक JSFiddle 2018-02-17 पर आज़मा सकते हैं , या स्थानीय स्तर पर निम्न परीक्षण परीक्षण का उपयोग कर सकते हैं।

इस उदाहरण के लिए मैं us-States.json फ़ाइलों का उपयोग कर रहा हूं, लेकिन इसका उपयोग किसी भी जियोजोन फ़ाइल के लिए किया जा सकता है।

मुझे उम्मीद है इससे मदद मिलेगी।

यहाँ कोड है:

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

— फरहत अब्बास
स्रोत

3

इसलिए, यह सभी मान के style(feature)ऊपर एक फ़ंक्शन की जाँच करने के बारे में था feature.properties.name। धन्यवाद!

— डोरुक करिनका

@ DorukKarınca हां :)

— फरहत अब्बास

बहुत बढ़िया! यह वही है जो मैं खोज रहा था!

— 12

setStyle () GeoJSON सुविधाओं के लिए फ़ंक्शन - USC