Hàm setStyle () cho các tính năng GeoJSON

23

Ok, vì tôi đã hỏi một câu hỏi rất dài về vấn đề này, nhưng vì nó không nhận được bất kỳ câu trả lời mới nào trong một thời gian, và không bị nhầm lẫn chi tiết, tôi sẽ giữ câu hỏi này đơn giản nhất có thể.

Nếu tôi không nhầm, một setStylechức năng cho một tính năng cụ thể được đặt tên sẽ như sau:

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

... sẽ thay đổi màu từ cam sang xanh. Tôi cũng nhận thức được resetStyle()chức năng sẽ hoàn nguyên kiểu dáng ban đầu.

Đây là cách tôi tạo kiểu GeoJSON của mình:

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

});

Những gì tôi muốn làm là làm cho chỉ một quốc gia màu xanh và các quốc gia khác màu xám, sau đó trong mã. Đó là một điều hai bước, để sơn tất cả các quốc gia thành màu xám, và sau đó làm cho một màu xanh.

Điều đầu tiên là, tôi cần một vòng lặp như vậy sẽ lặp lại qua từng tính năng và setStyle()cho tất cả các quốc gia thành màu xám. Nó có hoạt động nếu tôi chỉ everything.setStyle({color: "#4B1BDE"})hoặc một cái gì đó?

Điều thứ hai là, (điều đó mang lại cho tôi những đêm không ngủ) làm cách nào để tôi chỉ chọn một tính năng trong số một nhóm đa giác GeoJSON để làm việc? Chỉ là đất nước mà tôi cần sơn thành màu xanh.

Nếu đó là vấn đề di chuột, tôi có thể đặt một trình lắng nghe sự kiện như được thực hiện trong hướng dẫn của Tờ rơi. Nhưng bất kể tương tác của người dùng, tôi muốn đặt và đặt lại kiểu bằng cách gọi nó với tên của nó, như tôi đã làm với hình chữ nhật ở trên.

leaflet geojson features

— Doruk Karınca
nguồn

1

Cảm ơn bạn đã chỉ ra setStyle()chức năng của tờ rơi .

— berto

27

Điều này hoạt động mà không cần phải loại bỏ lớp và tạo lại một lớp mới như được mô tả ở trên:

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

Nó có vẻ hiệu quả hơn một chút so với việc loại bỏ và tạo lại lớp GeoJson. Từ các tài liệu, một GeoJSONlớp mở rộngFeatureGroup lần lượt kéo dài LayerGroup.
Ngoài ra, dường như mỗi tính năng GeoJson có lớp riêng trong FeatureGroup!

— Davem M
nguồn

Làm cách nào để kích hoạt phương thức này khi tôi muốn thay đổi kiểu động?

— Karussell

3

Tôi nghĩ là tương đương với Geojson_layer.setStyle (chức năng ...)

— PeterVermont

một vấn đề ở đây nếu bạn thay đổi các lớp tức là thêm các lớp con, chúng sẽ được tạo từ kiểu gốc trong các tùy chọn, chứ không phải những gì bạn đặt nó

— MikeT

19

Tôi đã viết ra một mã nhỏ để định kiểu tính năng Geojson cụ thể bằng cách sử dụng tờ rơi. bạn có thể dùng thử trên JSFiddle (Bản gốc, không có chức năng) , JSFiddle chức năng 2018-02-17 hoặc sử dụng thử nghiệm mã sau đây cục bộ.

Trong ví dụ này, tôi đang sử dụng các tệp us-state.json nhưng nó có thể được sử dụng cho bất kỳ tệp Geojson nào.

Tôi mong nó sẽ có ích.

Đây là mã:

<!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
nguồn

3

Vì vậy, tất cả là về việc thực hiện một style(feature)chức năng kiểm tra feature.properties.namegiá trị. Cảm ơn!

— Doruk Karınca

@ DorukKarınca Có :)

— Farhat Abbas

Tuyệt vời! Đây chính xác là những gì tôi đang tìm kiếm!

— joosthoek

Hàm setStyle () cho các tính năng GeoJSON - Tờ rơi