GeoJSON 기능을위한 setStyle () 함수-전단지

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

});

내가하고 싶은 것은 나중에 코드에서 한 국가를 파란색으로 만들고 다른 국가를 회색으로 만드는 것입니다. 모든 국가를 회색으로 칠한 다음 파란색을 만드는 것은 2 단계입니다.

첫 번째는 각 기능을 반복하고 setStyle()모든 국가가 회색으로 반복하는 루프가 필요하다는 것 입니다. 내가 그냥 everything.setStyle({color: "#4B1BDE"})또는 무언가 하면 작동합니까 ?

두 번째는 (저는 잠들지 않는 밤을줍니다) GeoJSON 다각형 그룹에서 작업 할 기능 을 하나만 어떻게 선택 합니까? 파란색으로 칠해야 할 나라입니다.

마우스 호버링 문제라면 Leaflet 튜토리얼에서와 같이 이벤트 리스너를 배치 할 수 있습니다. 그러나 사용자 상호 작용에 관계없이 위의 사각형과 마찬가지로 이름을 사용하여 스타일을 설정하고 재설정하고 싶습니다.

leaflet  geojson  features 
— 도룩 카린 카
소스
1
전단지 setStyle()기능 을 지적 해 주셔서 감사합니다 .
— berto

답변:

27

위에서 설명한대로 레이어를 제거하고 새 레이어를 다시 만들 필요 없이 작동합니다 .

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

geoJson 레이어를 제거하고 다시 만드는 것보다 훨씬 더 효율적인 것 같습니다. 문서에서 GeoJSON레이어가 확장FeatureGroup 되어 확장됩니다 LayerGroup.
또한 각 geoJson 기능에는 FeatureGroup!

— 대담 M
소스
스타일을 동적으로 변경하려고 할 때이 메소드를 어떻게 트리거합니까?
— Karussell
3
나는 geojson_layer.setStyle (function ...)과 동일하다고 생각합니다.
— PeterVermont
레이어를 변경하면 (자식 레이어 추가) 여기에서 한 가지 문제가 있습니다. 즉, 레이어를 설정 한 것이 아니라 옵션의 원래 스타일에서 만들어집니다.
— MikeT
19

전단지를 사용하여 특정 geojson 기능의 스타일을 지정하는 작은 코드를 작성했습니다. 당신은 그것을 시도 할 수 JSFiddle (비 기능 원본) , 기능 JSFiddle 2018년 2월 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>
— 파 하트 압바스
소스
3
따라서 값을 style(feature)검사 하는 기능을 만드는 것이 전부였습니다 feature.properties.name. 감사!
— Doruk Karınca
@ DorukKarınca 예 :)
— Farhat Abbas
대박! 이것은 내가 찾던 것입니다!
— joosthoek
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.