A solução 3D Area Explorer é altamente personalizável, o que permite adaptar a experiência às jornadas dos seus clientes. É possível personalizar
usando o painel de controle na interface ou o arquivo config.json.
Defina o ponto de partida da sua experiência ajustando a latitude e a longitude no arquivo config.json.
Assuma o controle da sua jornada selecionando o tipo de órbita da câmera: um caminho
circular clássico ou uma onda senoidal intrigante.
Com o 3D Area Explorer, você pode predefinir sua análise detalhada com a personalização de URL. Isso elimina a necessidade de configuração manual, simplificando
a experiência do usuário.
Basta anexar parâmetros específicos ao URL do Explorador de área para pré-definir o local e outras configurações. Exemplo:
Esse URL define o ponto de partida para a latitude e longitude especificadas, transportando você instantaneamente para o local escolhido. Parâmetros disponíveis:
Ao aproveitar a personalização de URL, você pode criar experiências personalizadas e convidar outras pessoas para 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 pela interface ou pelo arquivo
de 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, consulte o código no arquivo
src/utils/cesium.js localizado no diretório src. As seguintes variáveis podem ser alteradas para alterar a aparência do aplicativo
Altura da câmera
Controle a altura da câmera 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, e 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 para um ponto.
Exemplos de valores:
50: visão mais próxima, enfatizando detalhes.
200: uma perspectiva mais panorâmica.
Passo da câmera
A inclinação inicial da câmera é definida por BASE_PITCH. Use valores negativos para uma inclinação para baixo
e valores positivos para uma visualização para cima. Para adicionar um movimento dinâmico sutil à análise, altere 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 (inclinando 30 graus para baixo)AUTO_ORBIT_PITCH_AMPLITUDE: 10 (mudando a inclinação em 10 graus ao longo do
tempo)
Descrição :a inclinação da câmera é a inclinação visual de um mapa, que é medida em graus. Ela também é conhecida como inclinação. Essas configurações definem o ajuste inicial
e a verticalidade dinâmica da câmera durante as rotações automáticas.
Exemplos de valores:
BASE_PITCH: 0 (câmera de nível)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 alcance durante o movimento da câmera e o nível de zoom para uma visualização mais aproximada.
Exemplos de valores:
RANGE_AMPLITUDE_RELATIVE: 1 (variação total)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 CAMERA_OFFSET são usados. Essa configuração inclui a direção (rotação), a inclinação (inclinação) e o 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) (levando 30 graus para baixo)range: 800 (800 metros do centro)
Descrição: define a direção, a inclinação e o intervalo da câmera para redefinir a visualização.
Exemplos de valores:
heading: 45 (graus, visualização noroeste)range: 1.500 metros (distante do centro)
Iniciar coordenadas:
Os parâmetros START_COORDINATES definem a longitude, a latitude e a altura iniciais da câmera. É por aqui que a análise começa. 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: 0latitude: 60height: 15.000.000 (15.000 km acima da superfície) Exemplos de valores:
longitude: -122.4934, latitude: 37.7951 (Ponte Golden Gate)height: 2.000 (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 da Cesium.coordinates: Define a
latitude (lat) e a longitude (lng) do local para o qual você quer que a câmera
se desloque primeiro. Ajuste esses valores para definir a câmera para qualquer local específico
no globo.
{
"location": {
"coordinates": { "lat": null, "lng": null }
},
Essa configuração permite que você inicie seu aplicativo 3D Place Navigator
com zoom ampliado em um local específico que você escolher.
Use a ferramenta de geocodificação do Google para conferir as coordenadas de latitude e longitude de um endereço ou nome de lugar especificando-o no objeto "location":
Acesse a ferramenta Geocoding .
Criar uma solicitação de geocodificação Clique na seção "Faça um teste por conta própria" e insira o local escolhido no campo "Endereço". Você pode especificar um endereço,
nome de lugar ou até mesmo pontos de referência.Gerar coordenadas Clique no botão "Executar" para enviar sua solicitação. A ferramenta vai 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.
Essa configuração usa a ferramenta Geocoding para determinar automaticamente as coordenadas da sede do Google em Mountain View, Califórnia, além de iniciar o aplicativo 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. Ele permite explorar qualquer local
usando o endereço ou o nome dele na configuração. Personalizações avançadas
Você pode fazer personalizações adicionais se aprofundar no código.
A seção a seguir mostra algumas opções
Adicionar um novo caminho de câmera
Pronto para uso, 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 a propriedade
/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 lugar para a configuração pode ser ajustada no arquivo demo/src/place-settings.js. A partir da linha 4, estão os Placetypes disponíveis na demonstração.
Para usar tipos de lugar específicos sem mudar a fonte de demonstração, basta adicioná-los ao arquivo config.json em poi.types.
Personalizar o estilo (css)
Para os estilos, trabalhamos com variáveis CSS. Elas são compatíveis com os principais navegadores e possibilitam a alteração de uma linha em um local central e a atualização de 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, atualize o arquivo src/utils/cesium.js e consulte a documentação do Césio sobre como adicionar o GeoJSON ou outros dados referenciados geograficamente 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
com base nas necessidades específicas.
1.Remover uma seção específica da configuração
Para remover a seção location, encontre a linha abaixo no código e
comente-a ou exclua-a:
const locationConfig = { ...config.location, ...customConfig.location };
Para remover a seção poi, encontre a linha a seguir no código e comente
ou exclua-a:
const poiConfig = { ...config.poi, ...customConfig.poi };
Para remover a seção camera, encontre a linha a seguir no 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
combinada. Esse objeto mescla a configuração padrão com todas as personalizações.
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 significar remover elementos da interface relacionados, atualize o código
adequadamente no código HTML. Por exemplo, para remover uma seção específica do painel do administrador, como a velocidade da câmera, atualize o código js e html.
4. Remover a 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-a ou exclua-a:
const cameraSettingsSecgetCameraSettingsSection(cameraConfig);
Como remover o resumo da seção "Local"
const locationSection = await getLocationSettingsSection(locationConfig);
Conclusão
Neste documento, exploramos as várias opções de personalização disponíveis no Area Explorer para adaptar sua experiência de exploração 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.
Teste diferentes configurações e ajuste os parâmetros para atender às suas necessidades específicas. Ao aproveitar o poder da
personalização, você pode criar jornadas imersivas e personalizadas que cativam
seu público e dão vida à sua visão.
