Esta página foi traduzida pela API Cloud Translation.

Explorador de área 3D: guia de personalização

O 3D Area Explorer é uma solução que permite explorar comunidades de maneira cativante em 3D. A solução usa os seguintes recursos: Blocos fotorrealistas em 3D do Google, Places Search, Place Details e APIs Autocomplete.

Primeiros passos:

Ativar

Personalizar a experiência

A solução 3D Area Explorer é altamente personalizável, permitindo que você adapte a experiência às jornadas do cliente. É possível personalizar usando o painel de controle na interface ou o arquivo config.json.

Tudo pronto para personalizar? Veja como fazer isso:

Local

Defina o ponto de partida da sua experiência ajustando a latitude e a longitude no arquivo config.json.

Controle de câmera

Assuma o controle da sua jornada selecionando o tipo de órbita da câmera: um caminho circular clássico ou uma onda senoidal intrigante.

Órbita fixa:

Trata-se de uma órbita circular de altura fixa e em torno de um ponto de interesse específico.

Veja uma órbita fixa em ação explorando o escritório do Google em Sydney.
Órbita dinâmica:

A câmera se move suavemente em uma trajetória de onda senoidal em torno de um ponto de interesse designado. Esse movimento único permite que os espectadores observem o ponto de interesse de várias alturas e ângulos, oferecendo uma experiência visual dinâmica e imersiva.

Veja uma órbita dinâmica em ação explorando a Torre Eiffel.

Pontos de interesse (PDIs):

Personalize sua análise detalhada determinando os tipos de lugar que você quer descobrir. Escolha entre museus, parques, escolas e muito mais usando a matriz types em config.json.
Defina o número máximo de pontos de interesse mostrados ajustando o parâmetro density.
Modifique o searchRadius (in meters) para incluir tesouros escondidos por perto ou se concentrar em áreas específicas.
Defina a velocidade escolhida para o movimento da câmera com o parâmetro speed (in revolutions per minute).

Pré-carregar sua análise detalhada: saiba mais com a personalização de URLs

Com a ferramenta 3D Area Explorer, você pode predefinir sua análise detalhada com a personalização do URL. Isso elimina a necessidade de configuração manual, simplificando a experiência do usuário.

Criar o URL perfeito:

Basta anexar parâmetros específicos ao URL do Explorador de área para predefinir o local e outras configurações. Exemplo:

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

Esse URL define o ponto de partida como a latitude e a longitude especificadas, transportando você instantaneamente para o local escolhido. Parâmetros disponíveis:

location.coordinates.lat: latitude do local escolhido.
location.coordinates.lng: longitude do local escolhido.
poi.types: uma lista separada por vírgulas de tipos de PDIs a serem exibidos.
poi.density: o número máximo escolhido de PDIs.
poi.searchRadius: o raio para pesquisar PDIs próximos.
camera.speed: velocidade da órbita da câmera.
camera.orbitType: tipo de órbita da câmera ("órbita fixa" ou "órbita dinâmica").

Benefícios da personalização de URLs:

Simplifique a experiência do usuário definindo previamente as configurações que você escolheu.
Compartilhe viagens segmentadas com locais e PDIs pré-carregados específicos.
Incorpore experiências pré-configuradas do Area Explorer nos sites.

Ao aproveitar a personalização de URLs, você pode criar experiências personalizadas e convidar outras pessoas a embarcar em aventuras selecionadas.

Observação: teste um URL personalizado totalmente carregado: https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#camera.orbitType=fixed-orbit&camera.speed=2.2&poi.types=restaurant&poi.types=parking&poi.types=movie_theater&poi.types=bus_station&poi.density=40&poi.searchRadius=5100

Outras personalizações

A seção anterior explorou os ajustes acessíveis por meio da interface ou do arquivo de configuração. No entanto, há também vários outros parâmetros integrados que podem ser modificados para personalizar ainda mais o aplicativo.

Para fazer essas personalizações avançadas, você precisará analisar o código no arquivo src/utils/cesium.js localizado no diretório src. É possível mudar as variáveis abaixo para mudar a aparência e a experiência do aplicativo

Altura da câmera

Controle a altura em que a câmera se posiciona ao voar em direção a um ponto ajustando o valor de CAMERA_HEIGHT. Valores mais altos oferecem uma visualização panorâmica mais ampliada, enquanto valores mais baixos aproximam você dos detalhes da área.

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;

Configuração: CAMERA_HEIGHT
Valor padrão: 100
Descrição: define a altura da câmera acima do local de destino ao voar até um ponto.
Exemplos de valores:
- 50: visão mais próxima, enfatizando detalhes.
- 200: uma perspectiva mais panorâmica.

Inclinação da câmera

A inclinação inicial da câmera é definida por BASE_PITCH. Use valores negativos para inclinação para baixo e valores positivos para vista para cima. Para adicionar um movimento dinâmico sutil à sua exploração, mude o AUTO_ORBIT_PITCH_AMPLITUDE.

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;

Configuração: BASE_PITCH e AUTO_ORBIT_PITCH_AMPLITUDE
Valores padrão:
- BASE_PITCH: -30 (inclinação de 30 graus para baixo)
- AUTO_ORBIT_PITCH_AMPLITUDE: 10 (mudando o tom em 10 graus ao longo do tempo)

Descrição:a inclinação da câmera é a inclinação visual de um mapa, medida em graus. Também é conhecida como inclinação. Essas configurações definem a inclinação inicial e o ajuste dinâmico da inclinação da câmera durante as rotações automáticas.

Exemplos de valores:

BASE_PITCH: 0 (câmera nivelada)
AUTO_ORBIT_PITCH_AMPLITUDE: 0 (sem variação de tom)

Alcance e zoom da câmera

Esses parâmetros definem o nível de zoom aplicado ao focar em pontos específicos. Valores menores significam um zoom mais próximo.

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

Configuração: RANGE_AMPLITUDE_RELATIVE e ZOOM_FACTOR

Valores padrão:

RANGE_AMPLITUDE_RELATIVE: 0,55 (variação da distância relativa)
ZOOM_FACTOR: 20 (fator de zoom da câmera)

Descrição:essas configurações definem a variação do intervalo durante o movimento da câmera e o nível de zoom para uma visão mais próxima.

Exemplos de valores:

RANGE_AMPLITUDE_RELATIVE: 1 (variação da faixa completa)
ZOOM_FACTOR: 10 (menos zoom)

// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

Redefinição da câmera

Quando um usuário quer redefinir a câmera para a posição original, os valores de CAMERA_OFFSET são usados. Essa configuração inclui a direção (rotação), a inclinação (inclinação) e o intervalo (a distância entre a câmera e o centro).

Configuração: CAMERA_OFFSET
Valores padrão:
- heading: 0 (sem deslocamento de rotação)
- pitch: Cesium.Math.toRadians(-30) (inclinação de 30 graus para baixo)
- range: 800 (800 metros do centro)
Descrição: define a direção, a inclinação e o alcance da câmera para redefinir a visualização.
Exemplos de valores:
- heading: 45 (graus, visualização noroeste)
- range: 1.500 metros (mais longe do centro)

Coordenadas iniciais:

As START_COORDINATES definem a longitude, a latitude e a altura iniciais da câmera. É aqui que a análise vai começar. Defina a área que você quer que os usuários vejam primeiro.

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};

Configuração: START_COORDINATES
Valores padrão:
- longitude: 0
- latitude: 60
- height: 15.0000000 (15.000 km acima da superfície)
Exemplos de valores:
- longitude: -122.4934, latitude: 37.7951 (Ponte Golden Gate)
- height: 2000 (posição inicial mais próxima)

Carregar um local predefinido

O objeto location em config.json define o centro da área. Esse é o ponto de vista inicial da câmera no visualizador do Cesium.coordinates: Define a latitude (lat) e a longitude (lng) do local em que você quer mover a câmera primeiro. Ajuste esses valores para definir a câmera em qualquer local específico do globo.

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

Essa configuração permite iniciar o aplicativo 3D Place Navigator com zoom em um local específico de sua escolha. Você pode usar a ferramenta Geocoding do Google para ver as coordenadas de latitude e longitude de um endereço ou nome de lugar especificando-o no objeto location:

Acesse a ferramenta de geocodificação.
Criar uma solicitação de geocodificação clique na seção "Faça um teste" e insira o local escolhido no campo "Endereço". Você pode especificar um endereço, nome de lugar ou até pontos de referência.
Gerar coordenadas Clique no botão "Executar" para enviar sua solicitação. A ferramenta retornará uma resposta com várias informações sobre o local, incluindo as coordenadas de latitude e longitude exibidas na seção geometry.location.
Usar geocódigos: copie os valores de latitude e longitude recuperados da resposta e cole-os no objeto coordinates na configuração.

Observação: os geocódigos usados dessa forma precisam seguir os termos descritos na seção 3.4 dos Termos de Serviço da Plataforma Google Maps. Eles não podem ser armazenados em cache por mais de 30 dias e precisam ser atualizados depois disso.

imagem

Essa configuração usa a ferramenta Geocoding para determinar automaticamente as coordenadas da sede do Google em Mountain View, na Califórnia, e inicia o aplicativo 3D Place Navigator com a câmera centralizada nesse local.

Personalizações avançadas

É possível fazer personalizações adicionais se aprofundando no código. A seção a seguir mostra algumas opções

Adicionar um novo caminho da câmera

Por padrão, a solução implementa dois caminhos de câmera diferentes:

fixed-orbit" | "dynamic-orbit"

Mas, se quiser, você pode criar um novo caminho de câmera, pode implementá-lo usando o

/src/utils/cesium.js na função calculateAutoOrbitFrame.

Para usar esse novo cálculo de caminho no painel de configuração,consulte a implementação em demo/src/camera-settings.js..

Adicionar mais tipos de lugar

A lista de tipos de lugares para a configuração pode ser ajustada no arquivo demo/src/place-settings.js. A partir da linha 4, estão os tipos de local disponíveis na demonstração.

Se você quiser usar tipos de lugares específicos sem alterar a origem da demonstração, basta adicioná-los ao arquivo config.json em poi.types.

Personalizar o estilo (css)

Para os estilos que trabalhamos com variáveis CSS. Elas são compatíveis com os principais navegadores e possibilitam alterar uma linha em um lugar central e atualizar propriedades CSS específicas. Nossas variáveis CSS são definidas em src/main.css.. Você pode ajustar cores, configurações de fonte e paddings ou margens para todo o aplicativo.

Sobrepor dados adicionais

Para sobrepor outros dados, é necessário atualizar o arquivo src/utils/cesium.js e consultar a documentação do cesium sobre como adicionar o GeoJSON ou outros dados georeferenciados ao globo.

Remover seções de configuração

Nosso aplicativo JavaScript tem três seções principais no arquivo de configuração: demo/src/[config-panel.js](config-panel.js): location, poi e camera. Cada uma dessas seções oferece opções de configuração para diferentes aspectos do aplicativo. Os desenvolvedores podem personalizar essas seções de acordo com as necessidades.

1.Remova uma seção específica da configuração

Seção "Local"

Para remover a seção location, encontre a linha abaixo no seu código e comente ou exclua a seção:

const locationConfig = { ...config.location, ...customConfig.location };

Seção de PDIs

Para remover a seção poi, encontre a linha a seguir no seu código e comente ou exclua-a:

const poiConfig = { ...config.poi, ...customConfig.poi };

Seção "Câmera"

Para remover a seção camera, encontre a linha a seguir no seu código e comente ou exclua-a:

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. Atualizar configurações combinadas

Depois de remover uma seção, é essencial atualizar o objeto de configuração combinado. Esse objeto mescla a configuração padrão com qualquer personalização. Remova a propriedade correspondente do objeto combinedConfig:

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. Ajustar elementos da interface

Se a remoção de uma seção também significa remover elementos da interface relacionados, atualize o código de acordo com o código HTML. Por exemplo, se você quiser remover uma seção específica do painel do administrador, como a velocidade da câmera, precisará atualizar o código js e html.

4. Remover seção de configurações da câmera

Para remover a seção de configurações da câmera da interface, encontre a linha abaixo e comente ou exclua:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Remoção do resumo da seção de local

const locationSection = await getLocationSettingsSection(locationConfig);

Conclusão

Neste documento, exploramos as várias opções de personalização disponíveis no Explorador de área para adaptar sua experiência de exploração em 3D. Ao modificar o comportamento da câmera, ajustar a inclinação visual e mudar os níveis de zoom, você pode criar experiências únicas e envolventes que mostram as configurações e os pontos de interesse selecionados.

Não se esqueça de testar configurações diferentes e ajustar os parâmetros para atender às suas necessidades específicas. Ao aproveitar o poder da personalização, é possível criar jornadas imersivas e personalizadas que cativam o público e dão vida à sua visão.