Como definir dinamicamente a cor de preenchimento dos polígonos no Leaflet.js?


9

Estou usando o exemplo interativo de cloropata para leaflet.js

Eu descobri como fazer com que cada um dos meus polígonos adicione uma contagem contínua de valores na parte inferior da página após o clique em cada polígono.

Ao clicar em um polígono selecionado pela segunda vez, ele remove seu valor do registro em execução.

Eu gostaria de representar isso visualmente como uma mudança de cor de preenchimento dos polígonos no mapa.

Aqui está o meu código até agora (javascript com PHP incluído): (incluí comentários no meu código para explicar o que estou tentando fazer. Novamente, qualquer ajuda seria muito apreciada)

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

Bem-vindo ao Sistemas de Informação Geográfica , Alex! Provavelmente, este é o lugar certo para sua pergunta; portanto, se você ainda tiver uma cópia postada no SO, exclua-a. Se após um tempo razoável (um ou dois dias) você não obtiver boas respostas aqui, basta sinalizar esta pergunta para obter atenção do moderador e poderemos migrá-la de volta para o SO (ou onde for apropriado). Isso manterá sua pergunta junto com quaisquer comentários ou respostas parciais que ela atrair enquanto isso, em vez de forçar você a começar de novo com cada site diferente.
whuber

Respostas:


13

Você pode alterar a cor de preenchimento de um polígono com o setStylemétodo (herdado de Path ).

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

Se você está tendo dificuldades para exibir o geojson corretamente, consulte os documentos do Leaflet GeoJSON .


Hum ... e para preencher transparente, alguma pista?
Peter Krauss

1

Há também esse problema que eu tropecei. Não posso reivindicá-lo como meu, mas você pode classificar os objetos de opções via event.target.optionsou até definir o atributo de cor para um evento de destino viaevent.target.setAttribute()

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.