Introdução ao 3D Area Explorer

imagem

Visão geral

A solução 3D Area Explorer oferece uma maneira totalmente nova de descobrir e experimentar locais. Essa solução aproveita os recursos dos blocos fotorrealistas em 3D da Plataforma Google Maps e da API Places para criar ambientes 3D interativos e atraentes.

O 3D Area Explorer foi criado para várias finalidades:

  • Melhorar a exploração da área:os usuários podem explorar bairros virtualmente com um alto grau de detalhes visuais, ganhando insights sobre recursos e pontos de referência locais.

  • Promover narrativas baseadas em local: a capacidade de incorporar pontos de interesse com descrições detalhadas permite a criação de experiências orientadas por narrativas que educam e informam os usuários sobre locais específicos.

  • Inspire o desenvolvimento usando os recursos 3D do Google Maps:demonstra o potencial dos dados de mapeamento 3D do Google para criar mapas imersivos e interativos.

Primeiros passos:

Ativar

Principais tecnologias

Esta solução foi criada usando duas tecnologias principais:

APIs da Plataforma Google Maps:

Usamos várias APIs da Plataforma Google Maps para receber o mapa base e os dados para criar essa experiência:

  • Blocos fotorrealistas em 3D do Google Maps: modelos 3D de alta resolução de edifícios e terrenos fornecem uma representação realista e visualmente atraente de ambientes urbanos.
  • API Places: o app pode identificar e mostrar informações detalhadas sobre pontos de interesse (PDIs) na área explorada, enriquecendo a experiência do usuário com conhecimento local.
  • O preenchimento automático (em inglês) ajuda os usuários a pesquisar locais ou áreas de interesse específicos.

CesiumJS

A CesiumJS é responsável por renderizar e exibir o globo 3D de alta resolução. Ele processa o carregamento e a visualização dos blocos fotorrealistas em 3D do Google, que fornecem um modelo de malha 3D de edifícios e terrenos.

Gerenciamento da câmera:o CesiumJS fornece as ferramentas para controlar a posição, a orientação e o movimento da câmera. Isso inclui:

  • Definir o ponto de vista inicial para focar no bairro especificado ao carregar o app.
  • Implementação de movimentos dinâmicos da câmera, como animações de órbita automatizadas para exploração.
  • Processamento das interações do usuário com o globo, se esses recursos estiverem incluídos (movimentação, zoom, rotação).

Saiba como o bloco fotorrealista em 3D pode funcionar com um renderizador de blocos em 3D.

Principais componentes

O aplicativo é dividido em dois diferentes:

  • App Admin
  • App de demonstração

Este diagrama mostra uma visão geral das diferenças e da correlação entre as duas aplicações:

imagem

Seria útil investigar cada app:

App para administradores

Esse aplicativo oferece uma interface fácil de usar que permite personalizar a experiência 3D:

  • Pesquisa de local :use a barra de pesquisa de preenchimento automático integrada da Plataforma Google Maps para encontrar a área que você quer mostrar. Depois de selecionar um local, a câmera vai voar para essa área.

  • Câmera:ajuste a velocidade de movimento da câmera e o tipo de órbita para criar a experiência de visualização selecionada.

  • Pontos de interesse (POIs): defina a densidade, o raio de pesquisa e os tipos de pontos de interesse (por exemplo, restaurantes, cafés, pontos de referência) que você quer destacar.

Use este app para personalizar a experiência dos seus usuários finais.

Há uma descrição detalhada de todas as personalizações do 3D Area Explorer.

App de demonstração

Esse é o aplicativo final voltado ao usuário que carrega a configuração que você criou no app Admin. Nesse ambiente imersivo em 3D, os usuários podem explorar as áreas selecionadas e descobrir os lugares que você destacou.

Depois de personalizar a aparência usando o app Admin, você pode fazer o download da configuração e executar o aplicativo personalizado pelo código-fonte.

Experiência do usuário

imagem

Alguns dos principais recursos do aplicativo são:

  1. Os usuários podem explorar uma área em 3D de maneira interativa, incluindo edifícios, pontos de referência e terrenos.
  2. Os usuários podem pesquisar e descobrir lugares por perto (por exemplo, museus, parques, restaurantes).
  3. Ao selecionar um lugar, os usuários podem conferir informações detalhadas ou narrativas relacionadas a esse local.

  4. Os desenvolvedores podem personalizar a experiência de exploração com configurações e controles (se estiverem usando o app Admin).

  5. A rotação automática é ativada, permitindo que a câmera gire automaticamente em torno do centro da área selecionada.

Pré-requisitos

  1. Chave da API Google Maps: você precisará de uma chave válida com as seguintes APIs ativadas:

  2. Servidor da Web: é possível servir o aplicativo de duas maneiras:

    • Um servidor da Web local (por exemplo, usando Node.js, http-server)
    • Um serviço de hospedagem na Web estático (o aplicativo vem com um Dockerfile)

Você pode encontrar uma descrição detalhada das opções de implantação na seção readme do projeto do GitHub.

Implantação

É possível implantar o app como um aplicativo de nó ou um contêiner do Docker em qualquer ambiente de contêiner, como o GKE ou o GAE. A demonstração hospedada usa a seguinte arquitetura:

imagem

  • Nesta arquitetura, o código fica em um projeto do GitHub.
  • O Cloud Build extrai o código em qualquer push para o principal e aciona uma operação de build.
  • Como parte do build, ele injeta a chave de API e cria uma imagem que é armazenada no registro de artefatos.
  • Por fim, ele implanta a imagem estável mais recente do Artifact Registry no Cloud Run.
  • Também temos algumas verificações de integridade e monitoramento em execução para verificar a integridade dos apps implantados.

Informações de faturamento

A solução 3D Area Explorer usa os serviços da Plataforma Google Maps para oferecer uma experiência imersiva e dinâmica. Algumas APIs podem gerar cobranças. Confira uma visão geral das APIs e links para preços.

Plataforma Google Maps: API 3D Tiles:

A solução de storytelling usa a API 3D Tiles para melhorar a experiência visual com dados geoespaciais. Para detalhes de preços relacionados à API 3D Tiles, consulte a Plataforma Google Maps - Preços da API 3D Tiles.

Plataforma Google Maps – API Places:

A API Places é usada para dados com base na localização, adicionando informações valiosas à experiência de narrativa. Para entender os custos associados à API Google Places,acesse a Plataforma Google Maps - Preços da API Places.

Plataforma Google Maps: API Autocomplete:

O recurso de preenchimento automático melhora a interação do usuário. Para detalhes de preços relacionados à API Google Maps Autocomplete, acesse a Plataforma Google Maps - Preços do Places Autocomplete.

CesiumJS:

O CesiumJS é usado para a visualização do globo em 3D. Embora o CesiumJS seja de código aberto, recursos ou serviços adicionais podem ter custos associados. Consulte a documentação do CesiumJS para conferir as ofertas premium.

É crucial revisar os detalhes de preços de cada API, já que as cobranças são determinadas individualmente com base no uso. A Plataforma Google Maps oferece um nível sem custo financeiro com uma certa quantidade de uso sem custo financeiro, e as especificações de preços podem variar com base em fatores como o número de solicitações e a região de uso.

Sempre consulte as páginas de preços oficiais para conferir as informações mais precisas e atualizadas sobre os custos de uso da Plataforma Google Maps e da CesiumJS. Garanta a conformidade com os termos e condições descritos por esses serviços para gerenciar e entender as despesas associadas de maneira eficaz.

Conclusão

Este documento fornece uma visão geral dos recursos, componentes, experiência do usuário e requisitos técnicos do explorador de área 3D.

Com os blocos fotorrealistas em 3D do Google e a API Places, é possível explorar bairros virtualmente, descobrir pontos de interesse e aprender sobre a história local.

Seja para mostrar uma área, melhorar a exploração ou promover a narrativa digital, o 3D Area Explorer oferece uma plataforma visualmente impressionante.

Teste a demonstração e personalize-a usando o app Admin para criar uma experiência 3D envolvente e informativa.