জিওজেসন বৈশিষ্ট্যগুলির জন্য সেট স্টাইল () ফাংশন

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()ফাংশন সম্পর্কেও সচেতন যা স্টাইলটি মূলগুলিতে ফিরিয়ে দেবে।

এইভাবে আমি আমার জিওজনকে স্টাইল করি:

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()সমস্ত দেশের জন্য ধূসর হয়ে যায় ite আমি শুধু everything.setStyle({color: "#4B1BDE"})বা কিছু হলে কি এটি কাজ করে ?

দ্বিতীয়টি হল, (এটি আমাকে নিদ্রাহীন রাত দিচ্ছে) আমি কীভাবে জিওজেএসএন বহুভুজের একটি গ্রুপের সাথে কাজ করতে কেবল একটি বৈশিষ্ট্য নির্বাচন করব ? আমি নীল রঙ করতে প্রয়োজন যে দেশ।

যদি এটি মাউস ঘোরাফেরা করার বিষয়টি হত তবে আমি লিফলেট টিউটোরিয়ালে যেমন ইভেন্ট শ্রোতাদের রাখতে পারি। তবে ব্যবহারকারীর মিথস্ক্রিয়া নির্বিশেষে, আমি উপরের আয়তক্ষেত্রটি দিয়ে যেমন করেছিলাম তেমন নামের সাথে ডেকে স্টাইলটি সেট এবং পুনরায় সেট করতে চাই।

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!

— ডেভেম এম
সূত্র

আমি যখন স্টাইলটি পরিবর্তনশীল করতে চাই তখন আমি এই পদ্ধতিটি কীভাবে ট্রিগার করব?

— কারসেল

3

আমি জিওজসন_লেয়ার.সেটসাইল (ফাংশন ...) এর সমতুল্য বলে মনে করি

— পিটারভেরমন্ট

এখানে একটি সমস্যা যদি আপনি স্তরগুলি পরিবর্তন করেন অর্থাৎ শিশু স্তরগুলি যুক্ত করেন তবে সেগুলি অপশনগুলিতে মূল স্টাইল থেকে তৈরি করা হবে, আপনি যা সেট করেছেন তা নয়

— মাইকটি

19

লিফলেট ব্যবহার করে নির্দিষ্ট জিওজসন বৈশিষ্ট্যটির স্টাইল করতে আমি একটি ছোট কোড লিখেছি। আপনি এটি ব্যবহার করতে পারেন জেএসফিডেল (মূল, অ-কার্যকরী) , কার্যকরী জেএসফিডাল 2018-02-17 , বা স্থানীয়ভাবে নিম্নলিখিত কোড পরীক্ষাটি ব্যবহার করতে পারেন।

এই উদাহরণের জন্য আমি us-state.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। ধন্যবাদ!

— ডরুক করানকা

@ ডরুক্কারাঙ্কা হ্যাঁ :)

— ফরহাত আব্বাস

অসাধারণ! ঠিক এই আমিই অনুসন্ধান করছিলাম!

— joosthoek

জিওজেসন বৈশিষ্ট্যগুলির জন্য সেট স্টাইল () ফাংশন - লিফলেট