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

O 3D Area Explorer é uma solução que permite explorar comunidades em 3D muito interessante. A solução aproveita: Blocos fotorrealistas em 3D do Google, Pesquisa do Google Places, Place Details, e APIs Autocomplete.

Primeiros passos:

Use o app 3D Area Explorer Admin

Ou

Receba uma chave de API e faça o download do código no GitHub.

Ativar

• API Photo etc. de Blocos em 3D
• API Places

Personalizar a experiência

A solução 3D Area Explorer é altamente personalizável, permitindo que você adapte a experiência às jornadas dos clientes. Você pode personalizar usando o painel de controle na IU ou o arquivo config.json.

Tudo pronto para personalizar? Veja como fazer isso:

Local

Ajuste a latitude e a longitude para definir o ponto de partida da sua experiência no arquivo config.json.

Controle de câmera

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

• Órbita fixa:

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

  Confira uma órbita fixa em ação conhecendo 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 exclusivo permite que os espectadores observem o ponto de interesse de várias alturas e ângulos, oferecendo uma experiência visual dinâmica e imersiva.

  Confira uma órbita dinâmica em ação conhecendo a Torre Eiffel.

Pontos de interesse (PDIs):

• Defina os tipos de lugar que você quer conhecer para personalizar sua análise descobrir. Escolha entre museus, parques, escolas e muito mais usando a types matriz em config.json.
• Defina o número máximo de pontos de interesse exibidos ajustando o parâmetro density.
• Modifique o searchRadius (in meters) para incluir focos ou tesouros escondidos por perto 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 exploração com URL. e personalização. Isso elimina a necessidade de configuração manual, agilizando a experiência do usuário.

Criar o URL perfeito:

Basta anexar parâmetros específicos ao URL do Explorador de área para pré-definir os 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 longitude especificadas, e 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 pontos de interesse.
• poi.searchRadius: o raio para pesquisar pontos de interesse nas proximidades.
• 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 do URL, você pode criar experiências e convide 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 que podem ser acessados pela interface ou pela configuração. . No entanto, há também vários outros parâmetros integrados que você pode modificar para personalizar ainda mais o aplicativo.

Para fazer essas personalizações avançadas, você precisará examinar o código na src/utils/cesium.js, localizado no diretório src. O seguinte variáveis podem ser alteradas para alterar a aparência e a sensação do aplicativo

Altura da câmera

Controle a altura para onde a câmera se posiciona ao voar em direção a um ponto: ajustando o valor de CAMERA_HEIGHT. Valores mais altos fornecem uma vista panorâmica sem zoom, enquanto valores mais baixos o aproximam do 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 quando voando até certo ponto.
• Exemplos de valores:
  • 50: Vista mais próxima, enfatizando os detalhes.
  • 200: Uma perspectiva mais ampla.

Inclinação da câmera

O valor inicial inclinar da câmera é definido por BASE_PITCH. Usar valores negativos para inclinação para baixo e valores positivos para uma visão para cima. Para adicionar um movimento dinâmico sutil à sua análise detalhada, 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 acima vez)

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 o tamanho inicial ajuste de inclinação e inclinação dinâmica 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 elementos pontos. 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 a câmera movimento e o nível de zoom para conferir mais detalhes.

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 deseja redefinir a câmera para a posição original, a Os valores CAMERA_OFFSET são usados. Essa configuração inclui a direção (rotação), inclinação (inclinação) e alcance (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 o 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 desejada 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. É o ponto de vista inicial da câmera no visualizador do Cesium.coordinates: Define o Latitude (lat) e longitude (lng) do local onde você quer que a câmera movimentar para o primeiro. Ajuste esses valores para definir a câmera em qualquer local específico do mundo.

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

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

1. Acesse a API Ferramenta.
2. Crie uma solicitação de geocodificação clique no botão "Faça um teste". seção e insira o local escolhido no campo "Endereço" . É possível especificar um endereço, nome de lugar ou até mesmo pontos de referência.
3. Gerar coordenadas: clique no botão "Executar" para enviar sua solicitação. O de destino retornará uma resposta com várias informações sobre o local, incluindo as coordenadas de latitude e longitude exibidas na geometry.location.
4. Usar geocódigos Copie os valores de latitude e longitude recuperados do e cole-as no objeto coordinates da sua configuração.

Observação: os geocódigos usados dessa forma devem seguir os termos descritos no Google Maps. Termos de Serviços seção 3.4: elas não podem ser armazenadas em cache por mais de 30 dias e precisam ser atualizada depois disso.

Essa configuração usaria a ferramenta de geocodificação para determinar automaticamente os coordenadas da sede do Google em Mountain View, Califórnia, e lançar seu aplicativo do 3D Place Navigator com a câmera centralizada nesse local.

Observação: esse método simplifica o processo de encontrar coordenadas e reduz a necessidade de identificação manual. Ela permite que você explore qualquer local com facilidade usando o endereço ou nome dele na sua configuração.

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 lugar disponíveis na demonstração.

Se você quiser usar tipos de lugares específicos sem alterar a origem da demonstração eles podem ser adicionados ao arquivo config.json em poi.types

Personalizar o estilo (css)

Para os estilos que trabalhamos com variáveis CSS. Elas têm suporte em todos os principais navegadores e permitem mudar uma linha em um local central e atualizar propriedades CSS específicas. Nossas variáveis CSS são definidas em src/main.css.. Nele, você pode ajustar cores, configurações de fonte e preenchimentos ou margens para todo o aplicativo.

Sobrepor dados adicionais

Para sobrepor dados adicionais, você precisa atualizar o arquivo src/utils/cesium.js e consulte a documentação do cesium sobre como adicionar GeoJSON ou outros georreferenciados dados para o mundo.

Remover seções de configuração

Nosso aplicativo JavaScript tem três seções principais na 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 aspectos diferentes do aplicativo. Os desenvolvedores podem personalizar essas seções de acordo com as necessidades específicas.

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

• Seção de local

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

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

• Seção de PDIs

Para remover a seção poi, encontre a linha abaixo no seu código e comente ou excluí-lo:

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

• Seção "Câmera"

Para remover a seção camera, encontre a linha abaixo no seu código e comente ou excluí-lo:

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

2. Atualizar configurações combinadas

Depois de remover uma seção, é essencial atualizar a configuração combinada objeto. 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 de interface relacionados, atualize o código. de acordo com o código html. Por exemplo, se você quiser remover do painel do administrador, como velocidade da câmera, é necessário atualizar 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 comentar ou excluir:

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 personalizar sua experiência de exploração em 3D. Modificando comportamento da câmera, ajustar a inclinação visual e alterar os níveis de zoom, é possível criar experiências únicas e envolventes que mostram as configurações e pontos selecionados de interesse.

Teste diferentes configurações e ajuste os parâmetros de acordo com suas necessidades específicas. Ao aproveitar o poder de personalização, é possível criar jornadas imersivas e personalizadas que cativam seu público e dar vida à sua visão.