🇵🇹 Cesium.js — Guia completo de visualização geoespacial 3D para a Web Introdução: O mundo em 3D no seu navegador Imagine poder explorar um modelo tridimensional de todo o planeta Terra diretamente do seu navegador, sem instalar nenhum plugin. Para sobrevoar cidades com edifícios 3D fotorrealistas, analisar terrenos montanhosos com precisão centimétrica ou rastrear o voo de um avião de São Francisco a Copenhague em tempo real. Tudo isso é possível graças ao CesiumJS, a biblioteca JavaScript de código aberto que redefiniu a visualização geoespacial na web. CesiumJS é muito mais do que apenas uma biblioteca de mapas: é um verdadeiro mecanismo 3D geoespacial projetado para oferecer alto desempenho, precisão científica e qualidade visual de nível profissional. Desde a sua criação em 2012, tornou-se o padrão de facto para aqueles que precisam visualizar dados geoespaciais tridimensionais em áreas que vão desde a indústria aeroespacial ao planeamento urbano, da defesa à gestão de drones. Neste guia completo exploraremos todos os aspectos do CesiumJS: desde a arquitetura interna aos principais recursos, desde a configuração inicial até exemplos avançados, até casos de uso reais que demonstram o poder desta biblioteca. Seja você um desenvolvedor web, um profissional de GIS ou um entusiasta de tecnologia geoespacial, você encontrará tudo o que precisa para começar a criar aplicativos 3D impressionantes. Seção 1: O que é CesiumJS e por que é importante CesiumJS é uma biblioteca JavaScript lançada sob a licença Apache 2.0, portanto, totalmente gratuita para uso comercial e não comercial. Ele aproveita o WebGL para aceleração de gráficos por hardware, o que significa que qualquer navegador moderno pode renderizar globos 3D complexos sem dependências externas. O cerne da filosofia da Cesium é a interoperabilidade baseada em padrões abertos.

Em vez de criar formatos proprietários, a equipe da Cesium desenvolveu e promoveu especificações abertas como 3D Tiles (agora o padrão OGC) e se apoia em formatos estabelecidos como glTF, KML, GeoJSON e CZML. Esta abordagem garante que os dados permaneçam portáteis e que o ecossistema seja acessível a todos. A arquitetura foi projetada para gerenciar conjuntos de dados massivos por meio de streaming progressivo: em vez de carregar modelos inteiros na memória, o CesiumJS carrega dinamicamente apenas as porções de dados visíveis ao usuário, adaptando o nível de detalhe com base na distância da câmera. Esta técnica permite visualizar cidades inteiras com milhões de edifícios, nuvens de pontos com bilhões de pontos ou modelos de terreno em resolução global, tudo sem sacrificar a fluidez da interação. // Exemplo mínimo: crie um globo CesiumJS const viewer = new Cesium.Viewer('cesiumContainer', { terreno: Cesium.Terrain.fromWorldTerrain(), }); // Isso é tudo que você precisa para ter um globo 3D interativo! Com apenas três linhas de código, você tem um globo terrestre 3D interativo com terreno de alta resolução, navegação por mouse e toque e acesso aos widgets integrados do CesiumJS. A partir daqui você pode construir qualquer tipo de aplicação geoespacial. Seção 2: O Ecossistema de Césio — CésioJS e íon Césio É essencial distinguir entre os dois componentes principais do ecossistema de Césio, porque eles desempenham papéis complementares, mas distintos. CesiumJS é o mecanismo de renderização do lado do cliente: a biblioteca JavaScript que se encarrega de desenhar o globo, gerenciar a câmera, renderizar blocos 3D e gerenciar a interação do usuário. É totalmente de código aberto e pode ser usado de forma independente, conectando-se a qualquer servidor de blocos compatível. Cesium ion é a plataforma em nuvem (SaaS) que hospeda, otimiza e fornece dados geoespaciais em formato 3D Tiles.

Ao criar uma conta gratuita no Cesium ion, você obtém acesso instantâneo a conteúdo global pré-carregado, como: Cesium World Terrain — um modelo de elevação de terreno de alta resolução que cobre todo o planeta, incluindo dados batimétricos oceânicos. Cesium OSM Buildings — uma camada global de construção 3D derivada do OpenStreetMap, com mais de 350 milhões de estruturas. Imagens do Bing Maps — imagens de satélite de alta resolução que podem ser usadas como camada base para o globo. O íon de césio também oferece pipelines de ladrilhos que transformam automaticamente seus dados (fotogrametria, nuvens de pontos LiDAR, modelos BIM/CAD) no formato de ladrilhos 3D otimizado para streaming. A conta gratuita é suficiente para projetos de desenvolvimento e prototipagem, enquanto os planos pagos são destinados a aplicações de produção com alto volume de tráfego. // Configure o token de acesso ao íon césio Cesium.Ion.defaultAccessToken = 'YOUR_ACCESS_TOKEN'; // O token permite acesso ao conteúdo global: // - Cesium World Terrain (asset ID: 1) // - Cesium OSM Buildings (asset ID: 96188) // - Imagens aéreas do Bing Maps // - Seus ativos personalizados carregados no ion Seção 3: Configuração via CDN — A maneira mais rápida de começar Cenário: você deseja criar rapidamente uma página HTML com um globo 3D interativo sem configurar nenhuma ferramenta de construção. O método CDN é perfeito para protótipos, demonstrações e aprendizado do básico do CesiumJS. Basta incluir o arquivo JavaScript e a folha de estilo CSS diretamente do Cesium CDN oficial. Meu primeiro aplicativo CesiumJS

✅ Resultado: Ao abrir este arquivo no navegador você verá o globo voando em direção a Roma com os edifícios 3D visíveis: você pode girar, ampliar e inclinar a visualização com o mouse ou tocar em um aplicativo web moderno com um framework como React, Angular ou Vue, e você usa um empacotador de módulos como Webpack, Vite ou Rollup. # Instalação via npm npm install césio # ou com fio fio add césio # ou com pnpm pnpm add césio // IMPORTANTE: CESIUM_BASE_URL deve ser definido ANTES da janela de importação.CESIUM_BASE_URL = '/'; "cesium/Build/Cesium/Widgets/widgets.css"; // Configure o token de acesso Ion.defaultAccessToken = 'YOUR_ACCESS_TOKEN'; // Inicialize o Viewer const viewer = new Viewer('cesiumContainer', { terreno: Terrain.fromWorldTerrain(), }); // Voe em direção a Roma viewer.camera.flyTo({ destination: Cartesian3.fromDegrees(12.4964, 41.9028, 800), orientação: {título: CesiumMath.toRadians(0.

0), altura: CesiumMath.toRadians(-20.0), } }); // Adiciona edifícios 3D const building = await createOsmBuildingsAsync(); visualizador.scene.primitives.add(edifícios); Ao usar o NPM, você precisa configurar o empacotador para servir os seguintes diretórios da pasta node_modules/cesium/Build/Cesium/ como arquivos estáticos: Trabalhadores — Trabalhadores da Web para cálculos off-thread ThirdParty — Bibliotecas de terceiros Ativos — Ícones, imagens e ativos gráficos Widgets — Folhas de estilo e ativos de widgets ✅ Resultado: uma configuração limpa e modular, compatível com agitação de árvore e otimização de pacote para produção. Seção 5: Configuração do visualizador — Opções e personalização Cenário: Você deseja personalizar a aparência e o comportamento do globo: ocultar widgets desnecessários, alterar a camada da imagem base, configurar opções de renderização. // Visualizador com configuração completa const viewer = new Cesium.Viewer('cesiumContainer', { // Terreno: Cesium.Terrain.fromWorldTerrain({ requestWaterMask: true, // Máscara do oceano requestVertexNormals: true // Iluminação realista do terreno }), // Animação da UI do widget: false, // Ocultar widget de animação da linha do tempo: false, // Ocultar linha do tempo fullscreenButton: true, // Mostrar botão de tela cheia vrButton: false, // Ocultar botão do geocodificador VR: true, // Mostrar barra de pesquisa homeButton: true, // Mostrar botão home navigationHelpButton: false, // Ocultar ajuda de navegação baseLayerPicker: true, // Mostrar seletor de camada base sceneModePicker: true, // Mostrar seletor 3D/2D/Columbus // Renderizando sombras: true, // Habilitar sombras shouldAnimate: true, // Habilitar animações useBrowserRecommendedResolution: true, // Relógio (para dados dinâmicos de tempo) clockViewModel: novo Cesium.ClockViewModel( new Cesium.Clock({startTime: Cesium.JulianDate.fromIso8601('2025-01-01'), stopTime: Cesium.JulianDate.fromIso8601('2025-12-31'), currentTime: Cesium.JulianDate.

fromIso8601('2025-06-15'), clockRange: Cesium.ClockRange.LOOP_STOP, multiplicador: 1 }) ) }); // Personalize o fundo do céu viewer.scene.skyBox = new Cesium.SkyBox({fontes: { positivoX: 'stars/px.jpg', negativoX: 'stars/nx.jpg', positivoY: 'stars/py.jpg', negativoY: 'stars/ny.jpg', positivoZ: 'stars/pz.jpg', negativoZ: 'stars/nz.jpg' } }); // Habilita a atmosfera viewer.scene.skyAtmosphere.show = true; visualizador.scene.fog.enabled=true; visualizador.cena.fog.densidade = 0,0002; ✅ Resultado: Um visualizador totalmente customizado com sombras, atmosfera, neblina e widgets realistas selecionados de acordo com a necessidade da aplicação. Seção 6: Blocos 3D — O padrão para conjuntos de dados de cenários massivos: você tem um modelo fotogramétrico de uma cidade inteira, uma nuvem de pontos LiDAR com bilhões de pontos ou um conjunto de dados de construção 3D. Você deseja visualizá-lo no navegador sem problemas. A especificação 3D Tiles, originalmente desenvolvida pela equipe Cesium e posteriormente adotada como padrão pelo Open Geospatial Consortium (OGC), é o formato chave para streaming de dados 3D geoespaciais em grande escala. O sistema hierárquico de nível de detalhe garante que apenas os dados necessários sejam carregados. // Carrega um conjunto de blocos 3D de íon de césio const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(96188); visualizador.scene.primitives.add(tileset); // Zoom automático no tileset viewer.zoomTo(tileset); // Aplicar um estilo condicional aos blocos 3D tileset.style = new Cesium.Cesium3DTileStyle({ color: { condições: [ ["${height} > 100", "color('red')"], ["${height} > 50", "color('orange')"], ["${height} > 20", "color('yellow')"], ["true", "color('branco')"] ] }, show: "${altura} > 0" }); // Carrega blocos 3D de um URL personalizado (não de íon de césio) const customTileset = await Cesium.Cesium3DTileset.fromUrl( 'https://mio-server.com/tileset/tileset.

json', { maximumScreenSpaceError: 16, // Controla o nível de detalhe maximumMemoryUsage: 512, // Limite de memória em MB dynamicScreenSpaceError: true, // LOD adaptativo em movimento skipLevelOfDetail: true // Ignora níveis para carregamento mais rápido } ); visualizador.scene.primitives.add(customTileset); ✅ Resultado: conjuntos de dados de qualquer tamanho exibidos com fluidez graças ao streaming progressivo e ao nível de detalhe adaptável. Seção 7: Camadas de Terreno e Imagens Cenário: Você deseja visualizar o terreno realista da Terra com montanhas, vales e fundos oceânicos sobrepondo diversas camadas de imagens de satélite. // O Cesium World Terrain inclui: // - Dados de elevação de alta resolução // - Dados batimétricos (profundidades do oceano) // - Normais de vértices para iluminação realista // - Máscara de água para efeitos de reflexão const viewer = new Cesium.Viewer('cesiumContainer', { terreno: Cesium.Terrain.fromWorldTerrain({ requestWaterMask: true, requestVertexNormals: true }) }); // Adicione uma camada de imagem personalizada const imageryLayer = viewer.imageryLayers.addImageryProvider( new Cesium.UrlTemplateImageryProvider({ url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', mínimoLevel: 0, máximoLevel: 19, crédito: '© OpenStreetMap contribuidores' }) ); // Ajusta a transparência da camada imageryLayer.alpha = 0.7; // Adicionar uma camada WMS (Web Map Service) const wmsLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapServiceImageryProvider({ url: 'https://ows.terrestris.de/osm/service', camadas: 'OSM-WMS', parâmetros: { transparente: true, formato: 'image/png' } }) ); // Terreno personalizado do seu próprio servidor const customTerrain = await Cesium.CesiumTerrainProvider.fromUrl( 'https://my-server.com/terrain', { requestWaterMask: true, requestVertexNormals: true } ); viewer.scene.setTerrain(novo Césio.

Terreno(customTerreno)); // Habilita testes de profundidade contra terreno // (entidades atrás de colinas não são mostradas) viewer.scene.globe.profundidadeTestAgainstTerrain = true; ✅ Resultado: Um globo com terreno realista e múltiplas camadas de imagem sobrepostas, com controle total sobre transparência, brilho e ordem das camadas. Seção 8: Entidades e Geometrias — Marcadores, Polígonos, Linhas de Cenário: Você deseja adicionar pontos de interesse, áreas delimitadas, rotas e outras informações geoespaciais ao seu globo 3D. // Adicione um marcador com pop-up informativo viewer.entities.add({ name: 'Colosseum', position: Cesium.Cartesian3.fromDegrees(12.4924, 41.8902, 0), point: { pixelSize: 12, color: Cesium.Color.RED, OutlineColor: Cesium.Color.WHITE, OutlineWidth: 2, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND }, rótulo: {texto: 'Colosseum', fonte: '16px Helvetica', fillColor: Cesium.Color.WHITE, estilo: Cesium.LabelStyle.FILL_AND_OUTLINE, OutlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: novo Cesium.Cartesian2(0, -15), heightReference: Cesium.HeightReference.CLAMP_TO_GROUND }, descrição: '

Coliseu

Anfiteatro Flaviano, símbolo de Roma.

' }); // Adicione um outdoor (ícone personalizado) viewer.entities.add({ name: 'Trevi Fountain', position: Cesium.Cartesian3.fromDegrees(12.4833, 41.9009, 0), outdoor: { image: '/icons/landmark.png', width: 32, height: 32, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND } }); // Desenha um polígono com extrusão 3D viewer.entities.add({ nome: 'Centro Histórico de Roma', polígono: { hierarquia: Cesium.Cartesian3.fromDegreesArray([ 12.470, 41.898, 12.505, 41.898, 12.505, 41.880, 12.470, 41.880 ]), material: Cesium.Color.BLUE.withAlpha (0.3), contorno: verdadeiro, contornoColor: Cesium.Color.BLUE, extrudedHeight: 50, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND } }); // Desenha uma polilinha (caminho) viewer.entities.add({ name: 'Rota Turística', polyline: { positions: Cesium.

Cartesian3.fromDegreesArray ([12.4924, 41.8902, // Coliseu 12.4833, 41.9009, // Fonte de Trevi 12.4534, 41.9029, // Vaticano]), largura: 4, material: novo Cesium.PolylineGlowMaterialProperty ({glowPower: 0,2, cor: Césio.Color.YELLOW }), clampToGround: true } }); // Desenha um cilindro 3D viewer.entities.add({ nome: 'Área de cobertura', posição: Cesium.Cartesian3.fromDegrees(12.4964, 41.9028, 200), cilindro: { comprimento: 400, topRadius: 200, bottomRadius: 200, material: Cesium.Color.GREEN.withAlpha(0.3), contorno: true, OutlineColor: Cesium.Color.GREEN } }); // Desenha uma elipse (círculo geoespacial) viewer.entities.add({ name: 'Search Radius', position: Cesium.Cartesian3.fromDegrees(12.4964, 41.9028, 0), ellipse: { semiMajorAxis: 500, semiMinorAxis: 500, material: Cesium.Color.RED.withAlpha(0.2), heightReference: Cesium.HeightReference.CLAMP_TO_GROUND } }); ✅ Resultado: Um globo repleto de informações geoespaciais interativas com marcadores, áreas, caminhos e formas 3D. Ao clicar em cada entidade aparece um popup com a descrição. Seção 9: Modelos 3D com glTF Cenário: Você deseja colocar um modelo 3D (um edifício, um veículo, um drone) no globo com posição, orientação e escala precisas. // Carrega um modelo glTF da URL const modelEntity = viewer.entities.add({ name: '3D Model', position: Cesium.Cartesian3.fromDegrees(12.4964, 41.9028, 50), model: { uri: '/models/building.glb', mínimoPixelSize: 64, máximoScale: 20000, silhuetaColor: Cesium.Color.YELLOW, silhuetaSize: 2, cor: Cesium.Color.WHITE, colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT, heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND } }); // Carregar um modelo de íon de césio const ionModel = viewer.entities.add({ name: 'Model from ion', position: Cesium.Cartesian3.fromDegrees(12.4964, 41.9028, 0), model: { uri: await Cesium.IonResource.fromAssetId(YOUR_ASSET_ID), mínimoPixelSize: 128 } }); // Modelo 3D com orientação específica const position = Cesium.Cartesian3.fromDegrees(12.

4964, 41.9028, 100); título const = Cesium.Math.toRadians(45); // rotação horizontal const pitch = Cesium.Math.toRadians(0); // inclinação const roll = Cesium.Math.toRadians(0); // roll const orientação = Cesium.Transforms.headingPitchRollQuaternion(posição, new Cesium.HeadingPitchRoll(heading, pitch, roll) ); viewer.entities.add({ nome: 'Avião', posição: posição, orientação: orientação, modelo: { uri: '/models/airplane.glb', mínimoPixelSize: 64, runAnimations: true // Inicia animações do modelo } }); ✅ Resultado: modelos 3D posicionados com precisão geoespacial, com suporte para animações, materiais PBR e iluminação realista. Seção 10: Cenário de visualização dinâmica no tempo (4D): Você deseja visualizar dados que mudam ao longo do tempo: a trajetória de um satélite, a rota de um voo, a propagação de um fenômeno meteorológico. // Cria uma entidade que se move no tempo const start = Cesium.JulianDate.fromIso8601('2025-01-01T00:00:00Z'); const stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate()); // Configure o relógio viewer.clock.startTime = start.clone(); visualizador.clock.stopTime = stop.clone(); visualizador.clock.currentTime = start.clone(); viewer.clock.clockRange = Césio.ClockRange.LOOP_STOP; visualizador.clock.multiplicador = 10; // Cria a posição que muda ao longo do tempo const positionProperty = new Cesium.SampledPositionProperty(); // Adicionar amostras de posição positionProperty.addSample( Cesium.JulianDate.addSeconds(start, 0, new Cesium.JulianDate()), Cesium.Cartesian3.fromDegrees(12.4964, 41.9028, 10000) // Rome ); positionProperty.addSample( Cesium.JulianDate.addSeconds(start, 120, new Cesium.JulianDate()), Cesium.Cartesian3.fromDegrees(2.3522, 48.8566, 11000) // Paris ); positionProperty.addSample( Cesium.JulianDate.addSeconds(start, 240, new Cesium.JulianDate()), Cesium.Cartesian3.fromDegrees(-3.7038, 40.4168, 10500) // Madrid ); positionProperty.addSample(Césio.JulianDate.addSeconds(início, 360, novo Césio.

JulianDate()), Cesium.Cartesian3.fromDegrees(12.4964, 41.9028, 10000) // Retorno a Roma); // Cria a entidade móvel const plane = viewer.entities.add({ name: 'Flight Europe', disponibilidade: new Cesium.TimeIntervalCollection([ new Cesium.TimeInterval({ start: start, stop: stop }) ]), position: positionProperty, orientação: new Cesium.VelocityOrientationProperty(positionProperty), model: { uri: '/models/airplane.glb', mínimoPixelSize: 64 }, caminho: {resolução: 1, material: novo Cesium.PolylineGlowMaterialProperty ({glowPower: 0,1, cor: Cesium.Color.CYAN }), largura: 3 } }); // Rastreie a entidade com a câmera viewer.trackedEntity = avião; ✅ Resultado: Um avião animado voando na rota Roma → Paris → Madrid → Roma, com um rastro leve e a câmera que o segue automaticamente. A linha do tempo permite avançar, retroceder e ajustar a velocidade da simulação. Seção 11: Formato CZML — Dados Geoespaciais Temporais em JSON Cenário: Você deseja descrever cenas complexas com dados dinâmicos no tempo em um formato JSON declarativo, sem escrever código processual. // CZML é um formato JSON específico do CesiumJS para dados dinâmicos de tempo const czml = [ { "id": "document", "name": "Satellite Tracking", "version": "1.0", "clock": { "interval": "2025-01-01T00:00:00Z/2025-01-01T01:00:00Z", "currentTime": "2025-01-01T00:00:00Z", "multiplicador": 60 } }, { "id": "satellite-1", "nome": "ISS", "descrição": "Estação Espacial Internacional", "outdoor": { "image": "/icons/satellite.png", "escala": 0,5 }, "rótulo": { "texto": "ISS", "fonte": "14px sans-serif", "fillColor": { "rgba": [255, 255, 0, 255] } }, "posição": { "época": "2025-01-01T00:00:00Z", "cartographicDegrees": [ 0, 12,49, 41,90, 408000, 900, 45,00, 35,00, 410000, 1800, 90,00, 25,00, 407000, 2700, 135,00, 15,00, 409000, 3600, 180,00, 5.

00, 408000 ] }, "caminho": { "material": { "solidColor": { "color": { "rgba": [0, 255, 255, 128] } } }, "largura": 2, "leadTime": 3600, "trailTime": 3600, "resolução": 120 } } ]; // Carrega o CZML no visualizador const dataSource = await Cesium.CzmlDataSource.load(czml); visualizador.dataSources.add(dataSource); // Rastreie o satélite viewer.trackedEntity = dataSource.entities.getById('satellite-1'); ✅ Resultado: Um satélite animado em órbita com sua trajetória visível, carregado inteiramente a partir de um documento JSON declarativo. Perfeito para dados gerados por backends ou APIs externas. Seção 12: GeoJSON e KML — Importar dados vetoriais padrão Cenário: Você possui dados geoespaciais existentes no formato GeoJSON ou KML e deseja exibi-los no globo 3D. // Carrega um arquivo GeoJSON const geoJsonData = await Cesium.GeoJsonDataSource.load( '/data/regioni-italia.geojson', { acidente vascular cerebral: Cesium.Color.BLUE, fill: Cesium.Color.BLUE.withAlpha(0.2), acidente vascular cerebralWidth: 2, clampToGround: true } ); visualizador.dataSources.add(geoJsonData); visualizador.zoomTo(geoJsonData); // Personaliza entidades após carregar const entidades = geoJsonData.entities.values; for (let i = 0; i ✅ Resultado: Dados vetoriais padrão importados e exibidos no globo 3D com personalização completa de cores, estilos e interatividade. Seção 13: Interação do usuário - Clique, passar o mouse e seleção de cenário: Você deseja que o usuário seja capaz de clicar em entidades e blocos 3D para obter informações ou para que o mapa reaja ao passar o mouse. // Manipular o clique em entidades const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler.setInputAction((click) => { // Identifique o objeto clicado constpickedObject = viewer.scene.pick(click.position); if (Cesium.defined(pickedObject)) { // Se for uma entidade if (pickedObject.id &&pickedObject.id instanceof Cesium.Entity) { constentity =pickedObject.id; console.log('Entidade clicada:', entidade.name); alert(`Você clicou em: ${entidade.

nome}`); } // Se for um bloco 3D if (pickedObject instanceof Cesium.Cesium3DTileFeature) { const feature =pickedObject; const nome = feature.getProperty('nome'); const altura = feature.getProperty('altura'); console.log(`Edifício: ${nome}, Altura: ${height}m`); } } }, Césio.ScreenSpaceEventType.LEFT_CLICK); // Manipular o foco (passar o mouse) handler.setInputAction((movement) => { constpickedObject = viewer.scene.pick(movement.endPosition); if (Cesium.defined(pickedObject) &&pickedObject instanceof Cesium.Cesium3DTileFeature) { // Destaque o edifício sob o mousepickedObject.color = Cesium.Color.YELLOW.withAlpha(0.5); } }, Césio.ScreenSpaceEventType.MOUSE_MOVE); // Obtenha coordenadas geográficas de click handler.setInputAction((click) => { const cartesian = viewer.camera.pickEllipsoid( click.position, viewer.scene.globe.ellipsoid ); if (cartesian) { const cartographic = Cesium.Cartographic.fromCartesian(cartesian); const lon = Cesium.Math.toDegrees(cartographic.longitude); const lat = Cesium.Math.toDegrees(cartographic.latitude); console.log(`Coordenadas: ${lat.toFixed(6)}, ${lon.toFixed(6)}`); ✅ Resultado: Uma interface interativa onde o usuário pode explorar o globo e obter informações detalhadas clicando em entidades e objetos 3D. sobrevôos, siga entidades em movimento ou limite a navegação a uma área específica. // Voo animado para um destino viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(12.4964, 41.9028, 500), orientação: { header: Cesium.Math.toRadians(20.0), pitch: Cesium.Math.toRadians(-30.0), roll: 0.0 }, duração: 3, // duração em segundos completa: () => { console.log('Voo concluído!'); // Posicionamento instantâneo da câmera (sem animação) viewer.camera.setView({ destination: Cesium.Cartesian3.

fromDegrees(9.1900, 45.4642, 2000), orientação: {título: 0,0, pitch: Cesium.Math.toRadians(-45,0), roll: 0,0 } }); // Observe um ponto específico viewer.camera.lookAt( Cesium.Cartesian3.fromDegrees(12.4924, 41.8902, 0), // Colosseum new Cesium.HeadingPitchRange( Cesium.Math.toRadians(45), // rumo Cesium.Math.toRadians(-30), // pitch 500 // distância em metros ) ); // Limita a área de navegação viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100; visualizador.scene.screenSpaceCameraController.maximumZoomDistance = 50000; // Tour automático com múltiplas paradas async function tourItalia() { const stops = [ { lon: 12.4964, lat: 41.9028, alt: 800, name: 'Rome' }, { lon: 11.2558, lat: 43.7696, alt: 600, name: 'Florence' }, { lon: 12.3155, lat: 45.4408, alt: 500, nome: 'Veneza' }, { lon: 9.1900, lat: 45.4642, alt: 700, nome: 'Milão' }, ]; for (const stage of stage) {await new Promise((resolve) => { viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees( stage.lon, stage.lat, stage.alt ), orientação: {título: 0, pitch: Cesium.Math.toRadians(-25.0), }, duração: 2, completo: resolver }); }); // Pausa de 3 segundos em cada estágio await new Promise(r => setTimeout(r, 3000)); } } tourItália(); ✅ Resultado: Tours cinematográficos automatizados, rastreamento de entidades em movimento e navegação controlada para experiências de usuário guiadas e imersivas. Seção 15: Integração com React Cenário: Você está desenvolvendo um aplicativo React e deseja integrar um globo CesiumJS como um componente reutilizável. // CesiumGlobe.jsx — Componente React para CesiumJS import React, { useEffect, useRef } from 'react'; import {Viewer, Terrain, Ion, Cartesian3, Math as CesiumMath, createOsmBuildingsAsync } from 'cesium'; importar 'césio/Build/Césio/Widgets/widgets.css'; Ion.defaultAccessToken = 'SEU_ACCESS_TOKEN'; função padrão de exportação CesiumGlobe ({ lat = 41,9028, lon = 12,4964, height = 800 }) { const containerRef = useRef (null); const visualizadorRef = useRef(null); useEffect(() => { if (!

containerRef.atual) retorno; // Cria o visualizador const viewer = new Viewer(containerRef.current, { terreno: Terrain.fromWorldTerrain(), animação: false, linha do tempo: false, }); visualizadorRef.atual = visualizador; // Voe para a posição inicial viewer.camera.flyTo({ destino: Cartesian3.fromDegrees(lon, lat, height), orientação: {título: CesiumMath.toRadians(0), pitch: CesiumMath.toRadians(-20), } }); // Adicionar edifícios createOsmBuildingsAsync().then((tileset) => { viewer.scene.primitives.add(tileset); }); // Limpeza ao desmontar return () => { if (viewerRef.current && !viewerRef.current.isDestroyed()) { viewerRef.current.destroy(); } }; }, [lat, lon, altura]); return (