Làm cách nào để tôi thiết lập fillcolor của đa giác trong Leaflet.js một cách linh hoạt?

9

Tôi đang sử dụng ví dụ chloropath tương tác cho leaflet.js

Tôi đã tìm ra cách làm cho mỗi đa giác của tôi thêm một giá trị đang chạy vào cuối trang sau khi mỗi đa giác được nhấp.

Khi nhấp vào một đa giác được chọn lần thứ hai, nó sẽ loại bỏ giá trị của nó khỏi kiểm đếm đang chạy.

Tôi muốn thể hiện trực quan điều này như một sự thay đổi màu sắc của đa giác trên bản đồ.

Đây là mã của tôi cho đến nay (bao gồm javascript với PHP): (Tôi đã bao gồm các nhận xét trong mã của mình để giải thích những gì tôi đang cố gắng làm. Một lần nữa, mọi trợ giúp đều được đánh giá cao)

function addUp(num, x)
{  
    <?php 
    // begin php code

    $places = $db->query("SELECT boundary_id, boundary_name FROM boundaries WHERE               
    boundary_state= '$thatstate'");

    while($row = $places->fetch_object()) { 
       //end php code ?> 
       //begin javascript
       if (x == "List<?php echo $row->boundary_name ?>" && List<?php echo $row->boundary_name  ?> == 1) {

           temp = document.theForm.ttl.value;
           tempo = parseInt(temp);
           numo = parseInt(num);
           nwTemp = tempo + numo;
           document.theForm.ttl.value = nwTemp;
           geojson.setStyle({fillColor: 'blue'}); // I want to set color to blue to show  highlighted

           List<?php echo $row->boundary_name ?> = 0;

           return List<?php echo $row->boundary_name ?>;
    }


    if (x == "List<?php echo $row->boundary_name ?>" && List<?php echo $row->boundary_name  ?> == 0) {

        temp = document.theForm.ttl.value;
        tempo = parseInt(temp);
        numo = parseInt(num);
        nwTemp = tempo - numo;
        document.theForm.ttl.value = nwTemp;

        // I want to reset color of polygon if deselected (this would be   the default)
        geojson.resetStyle; 

        List<?php echo $row->boundary_name ?> = 1; 
    }   
}

— alex
nguồn

Chào mừng bạn đến với Hệ thống thông tin địa lý , Alex! Đây có lẽ là nơi thích hợp cho câu hỏi của bạn, vì vậy nếu bạn vẫn có một bản sao được đăng trên SO, thì vui lòng xóa nó. Nếu sau một thời gian hợp lý (một hoặc hai ngày) bạn không nhận được câu trả lời tốt ở đây, thì chỉ cần gắn cờ câu hỏi này để người điều hành chú ý và chúng tôi có thể chuyển nó trở lại SO (hoặc bất cứ nơi nào thích hợp). Điều này sẽ giữ câu hỏi của bạn cùng với bất kỳ nhận xét hoặc câu trả lời một phần nào trong thời gian đó, thay vì buộc bạn phải bắt đầu lại với mỗi trang web khác nhau.

— whuber

13

Bạn có thể thay đổi màu tô của đa giác bằng setStylephương thức (được kế thừa từ Đường dẫn ).

polygon.setStyle({fillColor: '#0000FF'});

Nếu bạn gặp khó khăn khi hiển thị Geojson đúng cách, bạn có thể xem tài liệu của tờ rơi GeoJSON .

— sfletche
nguồn

Hum ... và để điền vào trong suốt, một số manh mối?

— Peter Krauss

1

Ngoài ra còn có jsfiddle này tôi tình cờ thấy. Tôi không thể xác nhận nó là của riêng tôi nhưng bạn có thể sắp xếp thông qua các đối tượng tùy chọn thông qua event.target.optionshoặc thậm chí đặt thuộc tính màu cho sự kiện đích thông quaevent.target.setAttribute()

— daniella
nguồn