Criando vector tiles clusterizados com Tippecanoe, servindo com Tileserver-gl e plotando com a Mapbox

Biblioitecas utilizadas:

• Tippecanoe - para criar um arquivo .mbtiles a partir de um geojson;
• Tileserver-gl - para servir os arquivos criados;

Instalando bibliotecas:

Tileserver-gl:

• Disponível para node, logo basta apenas escrever o comando npm install -g tileserver-gl e esperar a instalação;

Tippecanoe:

• Disponível apenas para Linux;
• Se você estiver utilizando Windows instale a wsl pelo teminal com o comando wsl --install;
• Ao abrir a máquina virtual escreva o comando cd mnt/<seu_disco>;
• Após configurar o ambiente escreva os comandos:

git clone https://github.com/mapbox/tippecanoe.git
cd tippecanoe
make -j
make install

• Se houver algum erro com o comando make escreva o comando sudo apt-get install build-essential;

Usando-as:

Tippecanoe:

• Para criar o arquivo .mbtiles, que é o vector tile, basta escrever o comando tippecanoe -zg -o <nome_tile>.mbtiles -r1 --cluster-distance=10 <nome_geojson>.geojson, na máquina virtual;
  • O comando acima gera uma clusterização do arquivo geojson;
  • -o significa output e é o nome do arquivo a ser criado;
  • -zg faz a biblioteca decidir qual o melhor zoom máximo;
  • -r1 não exclui certos pontos que foram clusterizados;
  • --cluster-distance indica o raio em pixels da distância a ser clusterizada;

Tileserver-gl:

• Para servir os arquivos recomendo que faça um config.json antes com informações básicas;

  • por exemplo:

       {
           "options": {
               "paths": {
                   "root": "<repositório do modulo>",
                   "fonts": "fonts",
                   "styles": "styles",
                   "mbtiles": "<repositorio dos vector tiles>",
                   "pmtiles": "<repositório dos pmtiles>"
   		}
           },
           "data":{
   	"<nome_camada>":{
                   "mbtiles":<nome_arquivo>.mbtiles"
  		},
   		"<nome_camada>":{
                   "mbtiles":"<nome_arquivo>.mbtiles"
   		}
           }
   }
  

• Assim, ao executar o comando tileserver-gl -c config.json um servidor será aberto na porta 8080 onde será servido os arquivos;

Plotando com a mapbox:

• Crie um mapa qualquer;
• Ao escrever o bloco de código da função addSource deverá ser feito da seguinte forma:

map.addSource('<id_source>', {
          type:'vector',
          tiles: [`http://localhost:8080/data/<nome_camada>/{z}/{x}/{y}.pbf`]
        })

• Assim o dado clusterizado será plotado.

Para mais informações acesse a documentação da Tippecanoe (https://github.com/mapbox/tippecanoe) e da Tileserver-gl (https://github.com/maptiler/tileserver-gl).