Adicionar protocolo personalizado PMTiles

O SDK da Web do Azure Maps dá suporte a protocolos personalizados, como PMTiles. O pmtiles:// protocolo é usado para fazer referência a arquivos PMTiles, que são formatos de arquivo único para armazenar dados lado a lado, como mapas vetoriais e rasterizados. Esse protocolo permite que o Azure Maps acesse blocos específicos em um arquivo morto PMTiles usando uma solicitação HTTP, buscando apenas os dados necessários sob demanda.

Adicionar protocolo personalizado

Usando a addProtocol função, que registra um retorno de chamada acionado antes de qualquer solicitação AJAX feita pela biblioteca, você pode intercetar, modificar e retornar a solicitação para processamento e renderização adicionais. Isso permite a implementação de uma função de retorno de chamada personalizada para carregar recursos quando uma URL começa com o esquema personalizado designado.

O primeiro passo é adicionar uma referência ao protocolo. O exemplo a seguir faz referência à pmtiles biblioteca:

  <script src="https://unpkg.com/pmtiles@3.2.0/dist/pmtiles.js"></script>

Em seguida, inicialize o protocolo MapLibre PMTiles.

  //Initialize the plugin.
  const protocol = new pmtiles.Protocol();
  atlas.addProtocol("pmtiles", protocol.tile);

Adicionar PMTiles como fonte de mapa

O exemplo a seguir usa o conjunto de dados de construção Overture para adicionar dados de construção sobre o mapa base.

PMTiles são adicionados como uma fonte de mapa durante o evento de mapa. Uma vez adicionado, o esquema de URI especificado fica disponível para o SDK da Web do Azure Maps. No exemplo a seguir, a URL PMTiles é adicionada como um VectorTileSourcearquivo .

const PMTILES_URL = "https://overturemaps-tiles-us-west-2-beta.s3.amazonaws.com/2024-07-22/buildings.pmtiles";
//Add the source to the map.
map.sources.add(
  new atlas.source.VectorTileSource("my_source", {
    type: "vector",
    url: `pmtiles://${PMTILES_URL}`,
  })
);

Melhorar o mapa com dados de abertura

O Overture fornece um esquema de dados unificado e abrangente projetado para organizar e estruturar dados geoespaciais de forma eficaz. Este esquema é dividido em diferentes temas, cada um representando um tipo específico de informação geoespacial.

O exemplo a seguir usa as propriedades do tema de construção (por exemplo, tipo de construção e altura) para demonstrar a extrusão de construção e diferenciar entre categorias de construção no mapa base, em vez de apenas mostrar pegadas de construção.

//Create a polygon extrusion layer.
layer = new atlas.layer.PolygonExtrusionLayer(
  "my_source",
  "building",
  {
    sourceLayer: "building",
    height: ["get", "height"],
    fillOpacity: 0.5,
    fillColor: [
      "case",
      ['==', ['get', 'subtype'], 'agricultural'],
      "wheat",
      ['==', ['get', 'subtype'], 'civic'],
      "teal",
      ['==', ['get', 'subtype'], 'commercial'],
      "blue",
      ['==', ['get', 'subtype'], 'education'],
      "aqua",
      ['==', ['get', 'subtype'], 'entertainment'],
      "pink",
      ['==', ['get', 'subtype'], 'industrial'],
      "yellow",
      ['==', ['get', 'subtype'], 'medical'],
      "red",
      ['==', ['get', 'subtype'], 'military'],
      "darkgreen",
      ['==', ['get', 'subtype'], 'outbuilding'],
      "white",
      ['==', ['get', 'subtype'], 'religious'],
      "khaki",
      ['==', ['get', 'subtype'], 'residential'],
      "green",
      ['==', ['get', 'subtype'], 'service'],
      "gold",
      ['==', ['get', 'subtype'], 'transportation'],
      "orange",
      "grey",
    ],
    filter: ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']]
  }
);

A imagem a seguir mostra uma captura de tela exibindo a extrusão de edifícios de diferentes tipos perto do Central Park, em Nova York.

Para obter um exemplo totalmente funcional com código-fonte, consulte Azure Maps Samples GitHub Repo.

Passos Seguintes

Os seguintes artigos estão relacionados ao protocolo personalizado PMTiles: