Dominando os sistemas de informação geográfica (GIS) com JavaScript: um guia completo

1. Introdução ao ArcGIS Maps SDK para JavaScript: Bem-vindo ao domínio do GIS com o SDK de mapas ARC GIS Você está pronto para liberar o poder do mapeamento e dos dados espaciais? Mapas estáticos são coisa do passado. No mundo de hoje, mapas interativos baseados na web são uma necessidade para negócios, pesquisas e tomada de decisões. Mas como você cria mapas que são mais do que apenas imagens, mapas dinâmicos, interativos e responsivos Neste curso, você aprenderá a criar mapas permanentes da web usando o SDK do RGS Maps para Java Seja você um profissional de GIS ou um desenvolvedor web, eu o guiarei em todas as etapas da criação de mapas que dão vida aos dados Você começará com a base dos sistemas de informação geográfica e mergulhará em projetos práticos. Aprenda como integrar camadas de dados, criar visualizações de mapas personalizadas, adicionar recursos interativos e implantar seus mapas na web. No final, você terá as habilidades necessárias para criar belos mapas interativos da web que impressionarão seu público Da visualização de dados geográficos à criação soluções de mapeamento para setores como planejamento urbano e logística Este curso preparará você para enfrentar os desafios do mundo real com confiança. Você está pronto para elevar suas habilidades e se tornar um mestre em GIS E trabalhe hoje em dominar o GIS com mapas RGIS, SDK para Java Script e comece a criar mapas que Nos vemos no curso e vamos começar a mapear juntos. 2. Usando o componente viem: Bem-vindos, meus queridos amigos, à aula da série de aulas sobre o desenvolvimento sistemas de informação geográfica usando JavaScript. Na aula anterior, aprendemos como reproduzir o componente do mapa e também como adicionar o componente de legenda nesta lição da série SDK do AGS Maps para JavaScript Você aprenderá a usar uma visualização com componentes de mapa e componentes calcita para criar um aplicativo com cabeçalho, miniatura Esta lição será implementada usando o código do Visual Studio. Objetivos de aprendizagem. Entenda e use a visualização com componentes do mapa. Você aprenderá como integrar componentes do mapa com exibir um mapa da web pré-configurado armazenado no RGIS Para criar uma interface de usuário profissional com componentes de calcita. Você estruturará seu aplicativo usando componentes de calcita para criar um cabeçalho com título e logotipo e um mapa da web abaixo dele Indicadores de carregamento com três alças. Você aprenderá a exibir um indicador de carregamento até que o mapa esteja totalmente carregado, melhorando a experiência do usuário. Para acessar as informações do mapa em seu código. Você aprenderá como acessar dados do mapa, como título descrição e miniatura, por meio de seu script Etapas para criar o aplicativo. Um deles configura seu projeto de código do Visual Studio. Ou abra o código do Visual Studio. Inicialize um arquivo HTL básico. Crie um novo componente HTML de visualização de arquivo HTML, dentro da pasta do projeto. Adicionaremos um código HTML normal. Explicação: esse código importa os estilos e scripts necessários para o SDK de mapas RGIS, adiciona as referências necessárias na seção principal do seu componente de visualização, arquivo HTML, adiciona as referências para a biblioteca principal do RGS, calcita e componentes MP Crie o layout usando Calcite. No corpo do seu arquivo HTML, estruture o layout usando componentes de calcita Crie um layout usando calcita. Adicione o componente de concha de calcita, adicione o componente de navegação de calcita, colocando-o no slot do cabeçalho da concha Adicione o componente do logotipo de navegação por calcita, colocando-o no slot do logotipo da navegação por calcita Adicione o componente carregador de citações abaixo do componente de casca de calcita Explicação: esse código importa os estilos e scripts necessários para o SDK do RGIS, alcite e componentes de mapa Eles são essenciais para utilizar mapas R GIS e componentes de interface do usuário em seu aplicativo Adicione o componente Arches Map. Adicione o componente Arches Map após o componente de navegação de cálculo. Adicione o componente de legenda de Eras dentro do componente de mapa de Eras. Adicione a lógica Javascript abaixo da sua estrutura HTML. Adicione uma tag de script para lidar com o estado de carregamento dos mapas e atualizar o logotipo de navegação com dados do mapa da web. Adicione uma seção de script no corpo. Adicione um ouvinte de eventos para aguardar quando a visualização do componente do mapa estiver pronta Crie variáveis para a visualização e o item do portal usado para criá-la. Defina a descrição do título e miniatura do logotipo de navegação do Calcate Esconda o carregador. Esconda o carregador quando a visualização estiver pronta. Explicação. Esse script escuta o evento Args view, ready change, que indica que a visualização do mapa está Quando a visualização estiver pronta, o script recupera detalhes como título, descrição e miniatura do mapa do item Portal e atualiza o logotipo de navegação com Ele também oculta o carregador para indicar que o mapa está totalmente carregado Execute o aplicativo, abra o componente de exibição do arquivo Di TML em seu navegador ou use a extensão de servidor ativo no código do Visual Studio para visualizar seu aplicativo Você deve ver um mapa com título e logotipo na parte superior e uma legenda no mapa, representação visual. O layout a seguir explica visualmente como os componentes são estruturados no aplicativo. O cabeçalho contém o título e o logotipo. Mapa, o mapa interativo exibido abaixo do cabeçalho, incluindo uma legenda no canto inferior direito. O carregador é exibido até que o mapa esteja totalmente carregado. O que você espera? O aplicativo deve exibir um mapa com um cabeçalho na parte superior que inclua um título e um logotipo. O mapa também mostrará uma legenda no canto inferior direito e o carregador desaparecerá quando o mapa estiver totalmente carregado Muito bom. Na próxima palestra, aprenderemos outra forma de exibir o mapa Nos vemos na próxima palestra. 3. Exibir um componente de mapa: bem-vindos, meus queridos amigos, à nossa palestra de hoje, que é uma das lições básicas para aprender sistemas de informação geográfica Nesta lição, nós vamos aprender como exibir um mapa interativo usando componentes de mapa RC GIS no código do Visual Studio Abordaremos as etapas necessárias para configurar um aplicativo web básico. Nossa referência será o conhecido site para desenvolvedores de ER e adicionará uma legenda para uma melhor visualização dos dados Antes de tudo, devemos saber quais são os objetivos educacionais que o programador deve conhecer ao final da palestra Objetivos de aprendizagem, configure o Visual Studio Code. Entenda como criar um novo projeto. Crie uma estrutura HTML básica. Aprenda a escrever o HTML básico para seu mapa da web. Inclua bibliotecas RGIS. Adicione referências aos scripts e estilos RGS necessários. Carregue um mapa da web. Utilize um ID de item do webmap para carregar um mapa do ArcGIS online. Adicione uma legenda. Integre uma legenda para fornecer contexto aos dados do mapa. Execute o aplicativo. Verifique se o mapa e a legenda são exibidos corretamente. Depois de mencionarmos os objetivos educacionais, existem algumas definições básicas relacionadas a esta palestra que você deve conhecer Um mapa da web é um mapa armazenado como um item no GIS online. Um item do webmap contém todas as configurações do mapa no formato JSON Como a camada do mapa base, camadas de dados, estilos de camada e configurações de pop-up. Os aplicativos podem acessar e exibir um mapa da web usando seu ID do item. Instruções passo a passo. Primeiro passo, configure o Visual Studio Code. Instale o código do Visual Studio. Vamos até o site do Visual Studio e, em seguida, desça um pouco no site. Clicamos em baixar o Visual Studio Code. Em seguida, escolhemos o sistema em que estamos trabalhando. Vou escolher o Windows 64 porque é um sistema de janelas. Crie uma nova pasta para seu projeto, por exemplo, Argus Map. Inicie o Visual Studio Code e abra o mapa de pastas recém-criado. Mapeie a segunda etapa, crie o arquivo HTML. Escreva uma estrutura HTML básica, abra o HTML com pontos de índice e adicione o código a seguir. Primeiro, adicionaremos o código normal ao código HTML. Em segundo lugar, adicionaremos uma referência às bibliotecas particulares. Na tag principal, adicione referências ao CSS da biblioteca principal do RGIS e aos pacotes de componentes do mapa RCs Em terceiro lugar, adicionaremos um componente de mapa na tag do componente RGS e especificaremos o ID do item do mapa da web Quarto, dentro do mapa Ages em Ages legend. Etapa três, explicação do código. Estrutura HTML. A declaração To DTP HTML define o tipo de documento. A tag HTML envolve todo o documento. Meta tags. Essas tags ajudam a definir o conjunto de caracteres e comportamento responsivo da página da web Seção de estilo. Ele contém CSS para definir o preenchimento e a margem como zero, garantindo que o mapa toda a altura e largura da página Referências GIS. As tags de link e script importam os estilos e as bibliotecas JavaScript necessários do GIS componente RGS Map é uma parte fundamental da biblioteca de componentes Projetado para exibir um mapa da web em seu aplicativo. Esse componente atua como um contêiner para o mapa e quaisquer componentes adicionais, como a legenda. Atributos. Item ED. Esse atributo é crucial porque especifica o identificador exclusivo mapa da web que você deseja exibir O ID do item se refere a um mapa da web específico armazenado no RGS Ao fornecer esse ID, o componente do mapa RGS pode buscar e renderizar o mapa correspondente com todas as suas camadas e O item é o identificador exclusivo de um mapa da web. Você substituiria isso pela ID real do mapa que deseja exibir. Propósito da Matemática das Idades. Renderização de mapas. Ele inicializa o mapa com base nas configurações associadas ao ID do item fornecido, renderizando todas as camadas de dados, mapas base e configurações pop-up definidas no ARC Integração com outros componentes. Ele serve como um contêiner para outros componentes relacionados ao mapa, como os pop-ups de legendas e vários controles, permitindo uma abordagem modular ao design do mapa. Carregamento dinâmico usando a ID do item. O componente pode carregar mapas diferentes dinamicamente sem precisar alterar a estrutura do código subjacente, facilitando a troca de mapas Como obter um item? Faça login no AGS online. Acesse sua conta online do AGS. Encontre seu mapa da web, navegue até a seção de conteúdo e localize o mapa que você deseja usar. Copie a ID do item. A ID do item faz parte da URL quando você visualiza os detalhes do mapa. Por exemplo, se o URL estiver usando o componente de mapa RGS com a ID correta do item, você poderá exibir facilmente mapas interativos ricos, adaptados às suas necessidades em seus aplicativos da web O componente faz parte da biblioteca de componentes do mapa r GIS Ele é usado para exibir uma legenda para o mapa, que fornece informações essenciais sobre a simbologia e os dados representados no mapa A legenda ajuda os usuários a entender o significado das diferentes cores, ícones e padrões usados nas camadas do mapa. Atributos. Posição, esse atributo especifica onde a legenda será colocada no mapa Os valores de posição comuns incluem canto superior esquerdo, superior direito, inferior esquerdo e inferior direito. Nesse caso, a posição inferior direita significa que a legenda aparecerá no canto inferior direito do mapa. Propósito. Orientação ao usuário. A legenda auxilia os usuários na interpretação dos dados apresentados no mapa, facilitando a compreensão das informações que estão sendo transmitidas Claridade visual, ao exibir claramente os símbolos usados para diferentes camadas de dados, a legenda aprimora a clareza visual do mapa Etapa quatro, salve o arquivo. Depois de adicionar o código, salve o arquivo HTML indexado Etapa cinco, execute o aplicativo. Ou abra o Live Server. Se você tiver a extensão de servidor ativo instalada no VS Code, clique com o botão direito do mouse no arquivo HTML do índice e selecione Abrir W Live Server. Se você não tiver , você pode instalar a extensão no mercado do VS Code. Veja o mapa. Uma nova janela do navegador é aberta, exibindo o mapa com uma legenda no canto inferior direito. Conclusão Parabéns. Você criou com sucesso uma aplicação web básica que exibe um mapa usando componentes do mapa RGIS Você pode personalizar ainda mais o mapa e explorar mais recursos do RGIS Agora, se quisermos criar um cabeçalho para este mapa, esse cabeçalho contém um registro e um texto. É isso que abordaremos na próxima palestra e aprenderemos como exibir a vista Nos encontraremos com você na próxima palestra. 4. Exibir um mapa principal, parte 1: Bem-vindo à palestra de hoje sobre como criar e exibir um mapa usando os mapas ARC GIS como decadência para Esta lição é muito importante porque contém noções básicas importantes e será a base para as próximas aulas Esta sessão foi projetada para aqueles que estão interessados em criar mapas interativos da web e aprimorar suas habilidades de desenvolvimento web Começaremos com o básico da criação de um mapa, configuração de uma camada base do mapa e da personalização da visualização do mapa para focar em um local específico Objetivos de aprendizagem. Ao final desta sessão, você poderá entender o conceito de mapas e camadas, aprender a trabalhar com camadas aprender a trabalhar com dados geográficos e exibi-las usando mapas básicos. Segundo, crie um mapa usando o RGIS SDK, configure seu ambiente de desenvolvimento e escreva o código para criar um mapa básico Três, exiba um mapa em uma interface da web, aprenda como exibir o mapa em um navegador da web usando HTML e JavaScript. Quatro, personalize a visualização do mapa, aprenda como definir a localização e nível de zoom para exibir uma área específica no mapa. Visão geral do tutorial. Um mapa contém camadas de dados geográficos. Um mapa contém uma camada de mapa base e, opcionalmente, uma ou mais camadas de dados Você pode exibir uma área específica de um mapa usando uma visualização de mapa e definindo a localização e o nível de zoom. Criaremos um exemplo simples para exibir um mapa das montanhas de Santa Monica, na Califórnia, usando a camada topográfica do mapa base Existem algumas definições relacionadas ao nosso tópico que devemos entender bem. Definição de camada. Uma camada é uma referência a uma coleção de dados geográficos que podem ser acessados e exibidos em um mapa ou cena. Existem camadas de mapa base e camadas de dados, e seu formato é vetorial ou raster A fonte de dados para uma camada de mapa base é normalmente o serviço da camada de mapa base, e a fonte para camadas de dados são serviços de dados, mas pode ser uma variedade de formatos diferentes, incluindo arquivos, fluxos, bancos Definição da camada do mapa base. Uma camada de mapa base é uma camada ou camadas usadas para acessar e exibir dados de uma fonte de dados , como o serviço da camada de mapa base Ele fornece contexto visual e geográfico para um mapa ou cena e normalmente contém dados globais com limites administrativos e nomes de lugares. As camadas do mapa base podem ser compostas por diferentes subcamadas, como camadas de referência ou camadas Os desenvolvedores podem escolher entre uma variedade de camadas de mapa base ou estilizar seus próprios mapas base com o editor de estilo de mosaico vetorial GIS e sobrepor camadas com seus próprios dados Os desenvolvedores também podem criar e publicar seus próprios mapas base com o AGS pro Definição da camada de dados. Uma camada de dados é uma camada que faz referência a dados geográficos de um arquivo ou serviço e é usada para visualizar esses dados em um mapa ou cena As camadas de dados são exibidas na parte superior de uma camada de mapa base. As camadas de dados geralmente fazem referência a dados hospedados e gerenciados no RGS Alguns tipos comuns de camada de dados são camadas de feição, referenciando um serviço de feição, um pacote geográfico ou um arquivo de forma, camadas KML, referenciando um arquivo KML, camadas WFS, referenciando dados armazenados em um OGC WFS e camadas de mosaico que exibem mosaicos de um serviço de mosaico vetorial ou serviço de mosaico de referenciando um serviço de feição, um pacote geográfico ou um arquivo de forma, camadas KML, referenciando um arquivo KML, camadas WFS, referenciando dados armazenados em um OGC WFS e camadas de mosaico que exibem mosaicos de um serviço de mosaico vetorial ou serviço de mosaico de imagem. Definição de visualização do mapa e visualização da cena. Uma visualização de MAPA é uma interface de usuário que exibe camadas e gráficos do mapa em dois D. Ela controla a área, extensão do mapa que está visível e suporta interações do usuário , como panorâmica e zoom. Uma visualização de MAPA também fornece acesso aos dados da camada de mapa subjacente. Uma visualização de cena é uma interface de usuário que exibe camadas e gráficos de cena em três D. Ela usa uma câmera para controlar a área visível, a extensão da cena e oferece suporte às interações do usuário, como panorâmica, zoom, inclinação e rotação Uma visualização de cena também fornece acesso aos dados da camada subjacente em uma cena, definição de mapa. Um mapa é uma coleção de camadas que são exibidas em duas camadas D. Normalmente é composto por uma camada de mapa base e uma ou mais camadas de dados. Um mapa pode ser armazenado como um mapa da web. Os mapas também podem ser armazenados em pacotes de mapas móveis e exibidos em aplicativos online e offline. Definição de C. A cena é uma coleção de camadas que são exibidas em três camadas D. Normalmente é composta por uma camada de mapa base de ruas ou imagens de satélite, uma camada de elevação e camadas de dados adicionais de uma ampla variedade de fontes, incluindo serviços de cena As cenas podem exibir três representações de objetos D do mundo real , como edifícios, árvores e veículos. Uma cena pode ser salva como uma cena da web. As cenas também podem ser armazenadas em pacotes de cenas móveis e exibidas on-line. Paramos aqui e continuamos na próxima palestra Adeus, meus queridos. 5. Exibir uma parte central do mapa2: Bem-vindos, meus queridos amigos. Para a segunda parte da palestra, continuamos de onde paramos na aula anterior, vamos para a aplicação prática Primeiro passo, abra o código do Visual Studio. Etapa 2: configurar a página HTML. Primeiro, precisamos definir uma página HTML que servirá como base para nosso mapa. Crie uma página HTML chamada Disply Map Core. O objetivo é criar um mapa que ocupe toda a largura e altura da janela do navegador da web Meta tag, garanta a codificação adequada de caracteres e as configurações da janela de visualização, tornando a página compatível com dispositivos móveis CSS, as propriedades de preenchimento, margem, altura e largura garantem que o mapa preencha toda a janela do navegador Div ID ou view D. Esse é o contêiner em que o mapa será renderizado Etapa dois, referenciando a API. Para usar os mapas Argus como decadência, você precisa referenciar os arquivos CSS e JavaScript necessários fornecidos pela API Argus Na tag head, adicione referências ao arquivo CSS e à biblioteca JS. Link da folha de estilo Real, links para o arquivo CSS que estiliza os elementos do mapa. Roteiro. Carrega o SDK de mapas RC GIS para Java Script, permitindo que você use a API em Etapa três, adição de módulos. Ok, existem alguns conceitos que devemos conhecer relacionados a esse tópico. Definição de AGS Maps, SDK para JavaScript. RG GIS maps, SDK para JavaScript, anteriormente conhecido como API GIS para JavaScript, é um produto de desenvolvedor para criar aplicativos de mapeamento e análise espacial O SDK contém uma API JavaScript, referência de API, documentação, amostras e outros recursos para auxiliar na criação de aplicativos de mapeamento da web O SDK foi projetado para funcionar de forma otimizada com o sistema RGA e fornecer recursos GS abrangentes Na tag head, adicione uma tag de script e uma instrução necessária para carregar o mapa e os módulos de visualização do mapa. Agora podemos carregar os módulos RC GIS necessários em nosso aplicativo usando a instrução necessária É aqui que inicializaremos nosso mapa e visualizaremos. Etapa quatro, obter um token de acesso. Para usar serviços de localização, como mapas básicos, você precisará de um token de acesso. Crie uma chave de API, como obter a chave de API. Aqui, precisamos obter a chave da API. Se formos ao site do ER, então vá para a aula mostre a lição aqui. Em seguida, desça um pouco para seguir as instruções sobre como obter a chave da API aqui. Para criar uma chave de API. Clique no link para nos levar à página de instruções. Desça um pouco aqui. Em seguida, clique no link Pt. Isso nos direcionará para o RK GIs online. Nós fazemos login. Nós inserimos o nome de usuário e a senha. Depois de abrir o site, vamos ao conteúdo. Agora escolhemos um novo item. Em seguida, escolhemos as credenciais do APK na janela. Em seguida, clicamos em Avançar. Nós especificamos a data de validade. Aqui, não precisamos um link de referência atualmente porque teremos restrições quanto à capacidade de acessar serviços de chi, como o mapa básico. Em seguida, clicamos em Avançar. Nesta página, especificamos tudo. Na próxima página, clicamos em Ignorar. Então escrevemos aqui qualquer título. Em seguida, vem essa informação privada. Em seguida, clicamos em Avançar. Nessa página, geramos a chave da API. Copiamos a chave da API e retornamos ao código. Defina-o na sua configuração. Explicação. A configuração S re é usada para definir a chave de API O mapa é usado para criar o objeto do mapa. A visualização do mapa é usada para exibir o mapa na visualização df. O mapa está centralizado em um local específico com um nível de zoom de 13 Agora vamos executar a página para ver se o mapa será exibido. Nós nos absteremos de mencionar algumas definições importantes Muito bom O mapa apareceu lindamente Parabéns para nós. Paramos aqui e continuamos na próxima palestra. Adeus, meus queridos. 6. Exibir um mapa principal, parte 3: Bem-vindos, meus queridos amigos. Na terceira parte da palestra, continuaremos de onde paramos na palestra anterior, que apresentamos com sucesso no mapa Ao trabalhar com a API SRs RGIS para Java Script, os módulos ES são comumente usados para carregar e definir módulos de uma forma padronizada moderna Aqui está uma breve visão geral de como os módulos ES diferem dos módulos AMD no contexto de S. As diferenças entre AMD, definição de módulo assíncrono e módulos ES e módulos ECMAScript Módulos MD usados na definição de versões mais antigas do SR. O AMD é um formato de módulo que permite carregamento assíncrono da sintaxe de humor do script Java, usa as funções require e define para carregar e definir as funções require e define para carregar Sage, comumente usado na versão da API SRG antes de quatro pontos x, exemplo Módulos S usados nas três versões modernas do S. Definição, os módulos E são um formato de módulo padronizado introduzido na sintaxe ECMAScript six, ES six instruções de importação e exportação Us para carregamento e compartilhamento de módulos Uso suportado na API GIS do ER, a partir da versão quatro pontos x, fornecendo uma abordagem mais moderna Por exemplo, a principal diferença é uma : mecanismo de carregamento, AMD, carregamento síncrono com módulos ES de exigência e definição, carregamento síncrono com sintaxe de importação e exportação Requer funções de retorno de chamada para lidar com as dependências desses módulos Sintaxe mais limpa com importações e exportações diretas Integração AMD, menos compatível com ferramentas e fluxos de trabalho modernos de Java Script e módulos ES. Uma melhor integração com ambientes de desenvolvimento modernos e desempenho de ferramentas AMD pode levar a módulos ES de gerenciamento de dependências mais complexos módulos ES de gerenciamento de dependências Otimizado para desempenho com recursos de análise estática, conclusão A transição dos módulos AMD para ES na API ESR GS para JavaScript marca uma melhoria significativa gerenciamento e na sintaxe do módulo Os desenvolvedores são incentivados a adotar módulos ES para uma experiência de codificação mais simplificada e eficiente, especialmente em ambientes modernos de desenvolvimento de JavaScript. Os mapas ARC GIS, SDK para JavaScript, estão disponíveis como módulos AMD e módulos ES, mas este tutorial é baseado na A função necessária da AMD usa referências para determinar quais módulos serão carregados. Por exemplo, você pode especificar mapa S para carregar o módulo de mapa. Depois que os módulos são carregados, eles são passados como parâmetros, como mapear para a função de retorno de chamada, onde podem ser usados em seu aplicativo É importante manter as referências do módulo e os parâmetros de retorno de chamada na mesma ordem. Para obter mais informações sobre os diferentes tipos de módulos, visite o tópico do guia de visão geral. Muito bom Em nossa aula, usamos o token de acesso. Por que a definição de token de acesso. Um token de acesso é uma sequência de caracteres de autorização que fornece acesso seguro ao conteúdo, dados e funcionalidade nos serviços de localização GIS O formato é uma chave de API ou um token de 0,02 pontos. Os tokens de acesso definem o escopo e as permissões disponíveis para seu aplicativo, e seus recursos variam de acordo com o tipo de autenticação usada para obtê-los. Há três tipos de autenticação que podem ser usados para obter um token de acesso. Autenticação por chave de API. Isso cria um token permanente que concede seu aplicativo acesso aos serviços de localização e, com uma conta da plataforma de localização RGIS , conteúdo privado Autenticação do usuário, formalmente, identidade RGS. Isso gera um token de curta duração via 002.0, autorizando seu aplicativo a acessar serviços de localização, conteúdo e recursos em nome de um usuário conectado Autenticação de credenciais do aplicativo. Isso gera um token de curta duração por meio do ponto 002, autorizando seu aplicativo a acessar os serviços de localização em seu nome Finalmente, adotamos essa definição. Também na palestra, mencionamos qual é o nível de zoom e a localização de Isa lekinanto Definição do nível e localização do zoom. O nível de zoom é um valor que define a escala para uma visualização do mapa ou da cena. A faixa de valores do nível de zoom é de zero a 23. Os valores mais baixos zero, um, dois são os mais distantes da Terra e os menores em escala Os valores mais altos em 21, 22 , 23 são os mais próximos da Terra e os maiores em escala. Quanto maior o valor do nível de zoom, mais detalhes geográficos estarão presentes. Um local é uma posição ou região, ponto, linha ou polígono na superfície da Terra Muito bom Estamos quase terminando a palestra. Graças a Deus, apenas um resumo do que aprendemos. Nesta palestra, percorremos as etapas para criar e exibir um mapa simples usando o decaimento S dos mapas RGS Você aprendeu como configurar seu ambiente, escrever o código HTML e JavaScript necessário e personalizar a visualização do mapa para exibir uma área específica. Este é apenas o começo do que você pode fazer com o RGIS. Agora você pode construir sobre essa base para criar mapas mais complexos com várias camadas, recursos interativos e visualização de dados Obrigado por participar desta sessão e eu o encorajo a aplicar o que aprendeu em seus próprios projetos. Continue explorando e programando com prazer. Nos vemos na próxima palestra, que será intitulada Exibir um mapa da web como este. Adeus 7. Altere os estilos do mapa base, parte 1: Bem-vindos, meus queridos amigos, a esta maravilhosa lição, este tutorial sobre como alterar os estilos de mapas básicos, usando o SDK de mapas ARC GIS para JavaScript Nesta lição, você aprenderá a alternar dinamicamente entre vários estilos de mapa, como navegação, imagens e topografia, usando um componente moderno da interface do usuário, Calcite Este tutorial é perfeito para quem deseja criar mapas da web interativos e fáceis de usar que oferecem personalização por meio de vários estilos de mapas básicos Ao final desta lição, você não só entenderá como integrar vários estilos de mapas básicos, mas também ganhará confiança no uso dos serviços G em seus projetos. Objetivos de aprendizagem. Ao final desta lição, você será capaz de entender o conceito de estilos de mapa base no ARC GIS e no Open Street Map Implemente um recurso de troca de mapa base usando a caixa de combinação do site de chamada Acesse e configure o serviço de estilo de mapa base através da API RC GS Saiba como autenticar e usar chaves AP para serviços RC GIS Adicione um componente de interface de usuário responsivo para selecionar estilos de mapa Atualize dinamicamente o mapa base com base na interação do usuário Antes de mergulharmos no código, você precisará ter uma plataforma de localização Ag GIS ou uma conta online AG GIS e uma APIKey com acesso aos mapas básicos dos serviços de localização Compreensão básica de JavaScript, HTML e CSS. Aprendemos que a camada de mapa base na aula anterior é uma camada usada para acessar e exibir dados de uma fonte de dados , como o serviço da camada de mapa base Ele fornece contexto visual e geográfico para um mapa ou cena e normalmente contém dados globais com limites administrativos e nomes de lugares. Definição do estilo do mapa base. Um estilo de mapa base é um conjunto de propriedades visuais, como cores de campo, níveis de visualização e rótulos que definem como os elementos visuais em uma camada base vetorial são exibidos Existem dois tipos de estilos: estilos padrão, incluindo navegação de rua, topográfico e tela cinza claro São fornecidos pelo serviço da camada de mapa base. Os estilos personalizados são criados usando o editor de estilo de mosaico vetorial. Todos os estilos são armazenados como um item da camada de mosaico. Definição do serviço da camada de mapa base. serviço de estilo de mapa base, também conhecido como serviço de estilo RGS Basemap, é um serviço de localização hospedado pelo SR que fornece acesso a blocos vetoriais e blocos de mapas para e blocos de mapas O serviço fornece vários estilos para Arc GIS e fontes de dados de mapas de ruas abertos, como ruas, áreas externas, tela cinza, navegação e topografia Também existem serviços de blocos de imagens disponíveis para imagens de satélite, oceano e sombra do inferno O serviço básico de estilo de mapa, V two, tem funcionalidades adicionais, como rótulos de locais localizados e localizações de locais adicionais O serviço fornece o estilo JSON como um estilo de caixa de mapa ou um mapa da web Estilos de mapa personalizados podem ser criados a partir dos estilos padrão usando o editor de estilo ARC GIS Vector Tile É necessário um token de acesso para usar o serviço. O serviço de estilo de mapa base fornece vários estilos de camada de mapa base Rc GIS e OSM, como topografia, navegação, ambientes externos e Além disso, aprendemos sobre o token de acesso. Um token de acesso é uma string de autorização que fornece acesso seguro aos dados e funcionalidades do conteúdo nos serviços de localização RC GIS O formato é uma chave de API ou um token 002.0, definição de serviços de localização Os serviços de localização, também conhecidos como serviços de localização RGS, são serviços com funcionalidade geoespacial e dados hospedados pelo ER para desenvolvedores Eles incluem o serviço de estilos de mapas básico do RGS, o serviço RGIS Places, o serviço de geocodificação RGIS, o serviço de roteamento RGIS e o serviço R GIS Geo Enrichment . Todas as operações e parâmetros do serviço são definidos pela API REST do R GIS Alguns serviços oferecem suporte a endpoints padrão e avançados, e o Access Token é necessário para usar os Os serviços de localização estão disponíveis para desenvolvedores que têm uma conta na plataforma de localização RC GIS ou uma conta online RC GIS Os serviços de localização não estão disponíveis para desenvolvedores que tenham uma conta corporativa RC GIS Definição de APIK, uma chave de API é um token de acesso de longa duração criado usando credenciais de chave de API Eles são válidos por até um ano e normalmente são incorporados diretamente aos aplicativos do cliente. As chaves de API são necessárias para a autenticação da chave de API. As chaves de API podem ser gerenciadas e invalidadas por meio de um item de credenciais em Duas APIKs podem ser criadas em cada conjunto de credenciais de APIK Os privilégios e a data de expiração de uma APIK não podem ser editados sem invalidar a definição chave Privilégios são um conjunto de permissões que concedem acesso a recursos e funcionalidades seguras no RC Eles podem ser atribuídos a contas RC GIS, credenciais de desenvolvedor As contas de usuário recebem privilégios com funções enquanto os aplicativos personalizados recebem privilégios com credenciais de desenvolvedor Muito bom parando aqui nesta parte da palestra e nos encontraremos com você com a aplicação prática na segunda parte da palestra Adeus. 8. Altere os estilos do mapa base, parte 2: Bem-vindos, meus queridos amigos, à segunda parte da palestra, na qual focaremos na aplicação prática do item agora, configurando a página Criaremos um código HTML normal em uma página chamada change base bam style. Esse código conterá a API de referência e também adicionaremos o modo conforme aprendemos na aula anterior Em seguida, adicionaremos o script que contém a chamada à biblioteca de mapas e à visualização do mapa com a instrução necessária, adicionando o token de acesso. Na aula anterior, aprendemos como obter a chave da API Essa chave é necessária para exibir o mapa. Se você não estiver familiarizado com como obtê-lo, revise a aula anterior Em geral, vamos adicioná-lo usando a frase ry Config gappy kick Também definiremos o mapa, que conterá o Mapa Bis. Também adicionaremos a definição de visualização do mapa, que conterá as configurações do mapa, o centro e o Zoom. Além disso, quando a visualização do mapa for exibida conforme desejado, ela será exibida na visualização. Três, crie a caixa de combinação de seleção do mapa básico. Adicione os estilos de mapa base adicionais de referência que você gostaria de usar em sua Use todas as caixas de combinação laterais para permitir que o usuário selecione entre vários estilos de mapa base Dinamicamente, atualize o mapa base. Esta função atualizará o mapa quando o usuário selecionar um estilo de mapa base diferente Toque final, integração com a interface do usuário. Coloque a caixa de combinação na interface de visualização do mapa. Por fim, executaremos a página para ver o resultado do que fizemos. Muito excelente, o mapa apareceu maravilhosamente. Veja esta caixa de composição funcionando corretamente e afetando o mapa Vamos voltar ao código para explicar algumas coisas importantes. Explicação das seções do código. Na API, autenticação de chave, a chave de API fornece acesso aos serviços de mapa base Certifique-se de que sua chave tenha os privilégios adequados. Configuração do mapa e da visualização. Você inicializa um objeto de mapa com um mapa base padrão e cria uma visualização de mapa para Componente de três caixas de combinação. caixa de combinação de calcita permite que os usuários escolham interativamente um Mptyle com base em quatro pontos É uma solução simples e limpa para seleção de mapas básicos. Ouvinte de eventos para atualizações dinâmicas. Quando um usuário seleciona um novo mapa base, o ouvinte de eventos aciona função de atualização do estilo do mapa base para atualizar Conclusão. Nesta lição, você aprendeu como alternar entre vários estilos de mapa base em um mapa RC GIS usando JavaScript e Agora você tem uma forma flexível e interativa permitir que os usuários selecionem seu estilo de mapa base preferido, aprimorando a experiência do usuário em seus mapas da web Continue explorando o mundo do RGS Maps SDK e adicione funcionalidades mais avançadas às suas Nas próximas etapas, explore mais serviços de mapas baseados em rC GS, como imagens, oceanos e Implemente recursos adicionais, como controles de zoom ou camadas, para interações mais avançadas. Experimente com outros componentes de calcita para criar UIs mais ricas. Agora que você concluiu esta palestra, reserve um momento para avaliar sua compreensão dos conceitos-chave Você entendeu como alternar estilos de mapa base usando a caixa de combinação Calcate Você conseguiu configurar e autenticar a API para serviços G Você se sente confiante em integrar a troca dinâmica de mapas base em seu mapa O tutorial ajudou a esclarecer o uso de componentes de calcita para melhorias na interface do usuário Espero que você entenda bem. Na próxima palestra, que será intitulada, altere o idioma do mapa base Vamos aprender o mesmo método, mas a mudança será no idioma da caixa de combinação Nos encontraremos com você, se Deus quiser , na próxima palestra. 9. Alterar a linguagem do mapa base: Bem-vindo à sessão envolvente de hoje onde você aprenderá como localizar rótulos de mapa base usando o serviço de estilo de mapa base ARC GIS Neste tutorial, criaremos um mapa interativo em que os usuários podem alternar dinamicamente o idioma dos rótulos de mapas, tornando seus aplicativos da web acessíveis ao público em todo o mundo Se você está criando mapas para comunidades locais ou organizações globais, personalizar o idioma é uma ferramenta poderosa para aprimorar a experiência do usuário Vamos começar. Objetivos de aprendizagem. Ao final desta lição, você entenderá como localizar rótulos de mapa base usando Rc Aprenda a implementar a troca de idiomas dinamicamente, usando a API RC GIS Crie uma interface de usuário interativa com um menu suspenso de idiomas usando componentes de calcita Crie um aplicativo de mapeamento da web escalável e bem estruturado com técnicas de localização adequadas, como mencionamos anteriormente O serviço de estilo de mapa base fornece vários estilos de camada de mapa base, como topografia, ruas e imagens que Cada estilo aceita um parâmetro de idioma, que permite localizar rótulos de lugares Atualmente, existem mais de 30 idiomas diferentes disponíveis. Neste tutorial, você criará uma caixa de combinação do site CL para alternar entre diferentes idiomas para atualizar o entre diferentes idiomas para estilo do mapa base e o aplocal Vamos lembrá-lo de algumas definições importantes para que você possa entendê-las bem. Um porão é uma camada ou coleção de camadas usada para acessar e exibir dados de uma fonte de dados, como o serviço de estilo de porão Ele fornece contexto visual e geográfico para um mapa ou cena e normalmente contém dados globais com limites administrativos e nomes de lugares. O serviço básico de estilos de mapa, também conhecido como serviço de estilo de mapa básico RGIS, é um serviço de localização hospedado pelo SR que fornece acesso a blocos vetoriais e blocos de mapas para o mundo Um token de acesso é uma string de autorização que fornece acesso seguro aos dados e funcionalidades do conteúdo nos serviços de localização ARC Js. O formato é uma chave de API ou um token 00.0. Serviços de localização, também conhecidos como RC GS Location Services, serviços R com funcionalidade geoespacial e dados hospedados pela ESR Eles incluem o serviço de estilo de mapa básico RC GS, o serviço RC GS Places, o serviço de geocodificação RC GS, o serviço de roteamento RC GS e o serviço RC GIS Geo Enrichment . Uma chave de API é um token de acesso de longa duração criado usando credenciais de APIKey Eles são válidos por até um ano e normalmente são incorporados diretamente aos aplicativos do cliente. Privilégios são um conjunto de permissões atribuídas a contas, credenciais de desenvolvedor e aplicativos do RGIS que concedem acesso a recursos e funcionalidades seguros Pré-requisitos, uma conta AGS. Você precisa de uma conta online da AGS ou da plataforma de localização da AGS. APIK, você precisa de um APIK com privilégios para acessar mapas básicos e Começaremos criando a estrutura HTML para nosso projeto. Isso inclui configurar o contêiner do mapa e a caixa de combinação para seleção de idioma Tutorial passo a passo, primeiro passo, configurando a estrutura HTML básica. Abra o código do Visual Studio e vamos começar estabelecendo a base do projeto com um pouco de HTML básico chamado alterar a linguagem do mapa base Precisamos definir a para exibir o mapa. Uma lista suspensa para permitir que os usuários selecionem o idioma. Aqui está o código HTML inicial, explicação. O componente da caixa de combinação do site Kel cria uma lista suspensa amigável para O VDV é um espaço reservado para nosso mapa, estilizado para ocupar a tela inteira. 100 VH e 100% de largura, vinculamos à API GIS e componentes Calcite para renderização de mapas e Etapa 2: adicionar a API GS e inicializar o mapa. Agora que temos a estrutura HTML, vamos adicionar algumas funcionalidades incorporando a API GIS para exibir o mapa Explicação. Usamos a instrução necessária para carregar módulos RC GIS como Map e Map O mapa é inicializado com o mapa base topográfico. Centralizamos o mapa na Europa nas coordenadas 13 46 e definimos o nível de zoom para quatro Etapa três, adicionando localização de idiomas com a API R GIS Em seguida, vamos habilitar a localização de idiomas usando o módulo TL do RGS Isso nos permitirá alterar a localidade dos mapas com base na seleção do usuário Anteriormente, aprendemos como obter a chave AP. Usaremos a chave aqui na explicação. Adicionamos o módulo NTL, que fornece a capacidade de localidade para o mapa e seus elementos de interface do A função atualizar idioma do mapa base atualiza o idioma dos rótulos do mapa base com base na seleção do usuário na caixa de combinação Um ouvinte de eventos escuta as alterações na caixa de combinação e atualiza o Etapa quatro, finalizando a interface do usuário e executando o aplicativo. Para concluir a configuração, adicionaremos o seletor de idioma à interface do usuário e exibiremos o mapa com o menu suspenso para seleção de idioma Coloque essa linha dentro do script logo após a criação do objeto de visualização. Isso garante que o menu suspenso apareça no canto superior direito do mapa. Oh, meu Deus, o mapa apareceu sem erros e os caminhos não estão abertos. Parabéns para nós. Conclusão, você construiu com sucesso um mapa da web interativo que permite aos usuários alterar o idioma dos rótulos do mapa base Esse recurso é crucial para criar aplicativos acessíveis ao público global Com apenas algumas linhas de código, você localizou o mapa e o tornou mais fácil de usar para avaliação de diferentes regiões e idiomas Reserve um momento para refletir sobre a sessão de hoje. Você conseguiu acompanhar e implementar o alternador de idiomas Você entende como usar o módulo RGS EN TL para localização Você consegue pensar em outras linguagens ou estilos de mapa base que você possa querer implementar Em nossa próxima lição, exploraremos a adição de camadas de mosaico vetoriais no mapa, permitindo que você sobreponha dados personalizados sobre seus mapas base Isso é essencial para criar mapas da web mais dinâmicos e ricos em recursos. Fique ligado para um empolgante mergulho profundo nos blocos vetoriais? Obrigado, meus queridos amigos, e espero que entendam. Nos vemos na próxima palestra. 10. Criar e exibir mapa base personalizado: Bem-vindos, meus queridos amigos, à nossa nova palestra. Nesta palestra, aprenderemos como exibir um mapa base com estilo personalizado usando RC GIS em Exploraremos como acessar e usar uma camada de mosaico vetorial estilizada e combiná-la com outras camadas para melhorar a visualização Ao final desta sessão, você poderá criar um mapa com um estilo exclusivo que atenda às suas necessidades específicas, proporcionando uma experiência de usuário aprimorada. Objetivos de aprendizagem. Ao final desta lição, você será capaz de entender o que é uma camada de mapa base vetorial de estilo e como criá-la usando o editor de estilo de mosaico vetorial RGS Acesse e exiba um mapa base vetorial personalizado em seu aplicativo usando a API RGS JavaScript Crie e adicione várias camadas do mapa base, como camadas vetoriais e camadas masculinas para enriquecer a visualização do Configure uma visualização do mapa. Para exibir o mapa base em um local apropriado com propriedades específicas do Zoom. Definições-chave. Antes de começar a criar nosso mapa base com estilo personalizado Vamos analisar algumas das principais definições para garantir que estamos todos na mesma página. Style. Uma descrição de como o conteúdo do mapa deve ser renderizado. estilos podem incluir cores, rótulos e elementos visuais que melhoram a legibilidade do mapa de estilo de mapa base, um serviço hospedado fornecido pelo ER, oferece acesso a mosaicos vetoriais e camadas de mapas para diferentes regiões do mundo Mapa, uma coleção de camadas apresentadas em uma visualização em dois D. Normalmente inclui um mapa base e camadas de dados adicionais, editor de estilo de mosaico vetorial ARC GIS Uma ferramenta que permite criar e editar estilos personalizados para mapas base de mosaicos vetoriais. Token de acesso, uma string de autorização segura que fornece acesso ao conteúdo e à funcionalidade nos serviços R GIS Privilégios e privilégios são um conjunto de permissões atribuídas a contas RC GIS, credenciais de desenvolvedor e aplicativos que concedem acesso a recursos e funcionalidades seguros Essas definições ajudarão você a entender os termos usados ao longo desta lição e garantirão que você possa acompanhar com facilidade. Há algo muito importante que você deve conhecer e entender bem no site da SR, e se descermos um pouco aqui está uma definição para isso. Aqui no lado direito, você encontrará links rápidos para suas propriedades e funções. E você pode ler isso. E a mesma coisa. Se você for para a camada de mosaico vetorial, você pode navegar até as definições e aprender como usar e aprender sobre as feições usadas. Você pode se mover com muita facilidade, a mesma coisa, se você for para a camada de mosaico, definição para a camada de mapa base Astle Uma camada de mapa base estilizada é um conjunto de estilos que você define para substituir um dos estilos de mapa base padrão, estilos de camada de mosaico vetor de serviço Eles são usados para criar e exibir um mapa ou cena com seus próprios estilos, rótulos e cores personalizados. Para criar uma camada de mapa base de estilo, você pode usar o editor de estilo de mosaico RGIS editor armazena seus estilos no Arc GIS como um item de camada com um ID de item Neste tutorial, você utilizará uma ID de item para acessar e exibir uma camada de mosaico vetorial de estilo em um mapa. Você também adicionará uma camada de mosaico de imagem para aprimorar a visualização Ambas as camadas são hospedadas no ArcGIS online. Resumo da visão geral. Um mapa base é uma coleção de camadas que fornecem contexto geográfico para um mapa ou cena com dados como feições topográficas, redes de estradas, edifícios e rótulos Esses recursos podem ser representados com estilos diferentes, conforme aplicável ao seu aplicativo, como ruas, topografia ou imagens camada de mosaico vetorial acessa dados vetoriais em cache e os renderiza, permitindo alta adaptabilidade às resoluções de exibição e a capacidade de reestilizar mapas sem criar novos caches de imagens A camada de mosaico vetorial acessa dados vetoriais em cache e os renderiza, permitindo alta adaptabilidade às resoluções de exibição e a capacidade de reestilizar mapas sem criar novos caches de imagens. Ao contrário da camada de mosaico da web, que é renderizada como imagens, camada de mosaico vetorial usa dados vetoriais para maior flexibilidade A especificação do estilo Mp Libra define como esses blocos vetoriais são estilizados E o editor de estilo RC GIS vector Tile está disponível para criar estilos personalizados Se estiver acessando serviços de mosaico vetorial de um domínio diferente, será necessário um CORS ou um proxy A camada de mosaico permite trabalhar com um serviço de mapa em cache exposto pela API Rest do servidor RC GIS e adicionado a um mapa como uma Um serviço de cache acessa blocos de um cache em vez de renderizar imagens dinamicamente Por serem armazenadas em cache, as camadas lado a lado são renderizadas mais rapidamente do que as camadas de imagem do mapa Explicação passo a passo do código. Agora, vamos detalhar o processo de criação e exibição do seu mapa base personalizado. Primeiro passo, escreva primeiro o código HTML básico. Abra o código do Visual Studio. Crie a estrutura HTML na página chamada Estilo de mapa base personalizado em nosso Isso incluirá um contêiner onde o mapa será exibido. Aqui está o código do arquivo HTML. Nesse código, definimos um elemento Dev com a visualização de ID Dev, que servirá como contêiner para nosso mapa. Também incluímos as APIs GI, CSS e JavaScript necessárias no cabeçalho e no corpo do texto Etapa 2: adicione os módulos necessários. Inclua os módulos necessários para criar o mapa usando a função necessária, a camada de mosaico vetorial e os módulos da camada de mosaico. Etapa três, adicione uma camada de mosaico de imagem. Melhore a aparência do mapa com a camada de mosaico da imagem em forma de calcanhar Etapa quatro, combine camadas em um mapa base personalizado. Os mapas base podem conter várias camadas base. Use a classe base do mapa para adicionar a camada de mosaico vetorial e a camada de mosaico de imagem criada acima. Essas camadas serão mescladas para criar o estilo subjacente para o mapa A camada de mosaico vetorial fornece as cores básicas, e a camada de mosaico de imagem fornece uma sombra de colina ou efeito topográfico. Etapa cinco Crie uma instância de mapa. Use a classe map para criar uma instância de mapa usando o mapa base personalizado. Etapa seis. Configure a visualização do mapa. Configure a visualização do mapa para exibir o mapa no contêiner view div, centralizando-o na América do Norte Vamos detalhar essas etapas. Anteriormente, aprendemos como obter a chave da API. Vamos definir o código aqui. Defina sua chave de API, seu token de acesso para acessar os serviços de GI, incluindo mapas básicos e camadas. Crie uma camada de mosaico vetorial para representar a tela da floresta e dos parques, estilizada com cores e rótulos exclusivos Adicione uma camada de mosaico de imagem usando a sombra world hell para introduzir o efeito de profundidade e terreno Combine as duas camadas em um mapa base personalizado que reúne elementos visuais e terreno para uma aparência coesa Use a classe map para criar uma instância com o mapa base personalizado. Use a classe de visualização de mapa para renderizar o mapa dentro do contêiner de visualização div e definir o centro e o nível de zoom Execute o aplicativo. Execute-o, veja o mapa exibir a camada de mosaico vetorial estilizada, combinada com a camada de mosaico da imagem. Muito bom. O mapa funcionou e aprendemos algo novo sobre como criar um estilo de mapa base personalizado. Este é o final do resumo da palestra. Nesta palestra, abordamos as etapas para exibir um estilo de mapa base personalizado usando RC Você aprendeu como integrar uma camada de mosaico vetorial estilizada e uma camada de mosaico de imagem e como configurá-las usando JavaScript. Essa abordagem permite criar um mapa visualmente aprimorado com estilos personalizados que são adaptados às suas necessidades. Avaliação. Você entendeu como combinar camadas de mosaico vetorial com camadas de mosaico de imagem? Você conseguiu configurar a do mapa e exibir o mapa personalizado? Você se sente confortável com o uso módulos RC GIS em um ambiente JavaScript Na próxima palestra, aprenderemos como adicionar elementos interativos ao mapa, como pop-ups e camadas de feição, como pop-ups e camadas de feição, permitindo que os usuários interajam com as feições do mapa e visualizem informações adicionais Isso tornará seus mapas mais dinâmicos e envolventes. Fique ligado para saber mais. 11. Adicionar ponto, linha de Ploygon: Bem-vindo novamente a este tutorial detalhado, onde aprenderemos como adicionar gráficos de pontos, linhas e polígonos em um mapa utilizando o ArcGIS Maps, SDK for JavaScript Nesta sessão, detalharemos cada conceito, explicaremos o código e forneceremos uma sólida compreensão de como visualizar dados geográficos em seus mapas Ao final deste tutorial, você poderá criar mapas interativos com os quais os usuários poderão interagir, como exibir pop-ups ao clicarem em Objetivos de Aprendizagem gráficos. Ao final deste tutorial, você aprenderá. O que são gráficos de linhas de pontos e polígonos e como adicioná-los ao seu mapa, como usar geometrias e símbolos para criar elementos visuais em um mapa, como adicionar atributos e pop-ups para tornar Conceitos-chave, como referências especiais e como elas são aplicadas ao desenhar formas. Gráficos são elementos visuais usados para exibir pontos, linhas, polígonos e texto em um mapa ou cena Os gráficos são compostos por geometria, símbolo e atributos e podem exibir um pop-up quando clicados Normalmente, você usa gráficos para exibir dados geográficos que não estão conectados a um banco de dados, uma localização GPS. Existem algumas definições importantes relacionadas a esta palestra. Ponto, uma única localização no mapa definida por longitude e latitude, polilinha, uma sequência conectada de pontos que representa um caminho ou Polígono, uma forma fechada que representa uma área, como um parque ou uma O gráfico combina geometria e símbolos para representar visualmente os dados geográficos no mapa, na geometria Os dados de forma ou localização , como um ponto, linha ou polígono símbolo define a aparência da geometria, incluindo sua cor, tamanho e estilo Os dados de atributos associados a um gráfico, como nomes, descrições ou IDs, aparecem, uma janela interativa que exibe informações quando um usuário clica em um Referência espacial. O sistema de coordenadas usado para mapear dados geográficos é o que garante que todos os pontos, linhas e polígonos sejam desenhados com precisão no É o que garante que todos os pontos, linhas e polígonos sejam desenhados com precisão no mapa Configurando seu mapa. A primeira parte da lição envolve a configuração de um mapa básico com o SDK de mapas RGS O mapa é a base sobre a qual todos os seus polígonos gráficos de linhas de pontos serão adicionados Agora, abra o estúdio visual. E crie uma página chamada no polígono Point Line. E escreva código, normalmente o HTML contém SDK para CSS e JavaScript na seção principal e contém a definição de script necessária No código, substitua o token de acesso. Sabemos onde obter o ApikEyePlanation, um mapa e o MapView. mapa cria o mapa em si, e o Map View define como o mapa será exibido na tela A propriedade center define a longitude e a latitude das coordenadas geográficas, e o Zoom controla o nível de zoom Mapa base. O mapa base define a camada de fundo do mapa. Nesse caso, o estilo topográfico do ArcGIS, que mostra características geográficas como montanhas, rios e Adicione módulos na instrução necessária, adicione os módulos gráficos e da camada e defina-os em função, adicionando uma camada gráfica. Uma camada gráfica atua como um contêiner para todos os gráficos, pontos, linhas e polígonos que adicionaremos ao mapa Os gráficos não são armazenados em um banco de dados, mas são desenhados dinamicamente no mapa Uma camada gráfica é um contêiner para gráficos. Ele é usado com uma visualização de mapa para exibir gráficos em um mapa. Você pode adicionar mais de uma camada gráfica em uma visualização do mapa. As camadas gráficas são exibidas acima de todas as outras camadas. Em outras palavras, uma camada gráfica é um contêiner para gráficos. Ele é usado com uma visualização de mapa para exibir gráficos em um mapa. Você pode adicionar mais de uma camada gráfica em uma visualização do mapa. As camadas gráficas são exibidas acima de todas as outras camadas. Explicação. Camada gráfica. Essa camada armazena e gerencia os gráficos que desenharemos no mapa. Você pode pensar nisso como uma tela qual adicionaremos nossos pontos, linhas e polígonos, adicionando um gráfico de pontos Os pontos são usados para representar locais individuais, como um marcador de lugar no mapa Neste código, criamos um gráfico de pontos usando gráficos e o estilizamos usando um símbolo de marcador simples Em outras palavras, um gráfico de pontos é criado usando um símbolo de ponto e marcador Um ponto é definido com longitude e latitude, e um símbolo simples é definido com uma cor e um contorno As classes de símbolos de pontos e marcadores simples são usadas para criar o gráfico de pontos Crie um ponto e símbolo de marcador simples que será usado para criar um gráfico Crie um gráfico e defina as propriedades da geometria e do símbolo A classe gráfica transmitirá automaticamente ponto e um símbolo de marcador simples quando for construída Explicação. Antes de explicar o código, há algo importante que você deve saber. Você ouve muito a palavra autocast. O que isso significa? O Autocast simplifica o código ao permitir que o sistema converta automaticamente os valores nos tipos corretos, agilizando o desenvolvimento e reduzindo a necessidade de código repetitivo Ele melhora a legibilidade e reduz as conversões manuais. Exemplo de uso do Autocast Vamos considerar um exemplo simples em que queremos definir um centro de mapa Normalmente, você precisaria criar um objeto pontual como esse. Sem o Autocast, criação manual de objetos. Aqui, você precisava criar um objeto de ponto para o centro do mapa, que envolve mais código com a transmissão automática Agora, com o autocast, você não precisa criar o objeto ponto manualmente Em vez disso, você pode passar o centro como uma matriz. Nesse caso, a API arches converte automaticamente a matriz 140 em um objeto pontual, poupando o esforço de escrever esse código extra Como funciona o autocast. Conversão automática, o sistema detecta quando um valor pode ser convertido automaticamente em um objeto exigido pela API Por exemplo, matrizes para coordenadas geográficas podem ser convertidas em objetos pontuais Os números dos níveis de zoom podem ser convertidos nas configurações de zoom. Construção de objetos. Quando você fornece um valor, a API constrói internamente o objeto necessário com base no tipo esperado Se o valor de entrada for válido, ele cria o objeto apropriado. De qualquer forma, vamos voltar a explicar o código. Ponto geométrico, Geometria se refere às coordenadas específicas, longitude e latitude em que o ponto está localizado, símbolo, marcador simples, símbolo define a aparência do Cor, contorno, etc. Os símbolos são importantes para tornar o ponto visualmente distinto no mapa. E gráfico, um gráfico é usado para combinar a localização da geometria com o estilo visual do símbolo para criar algo que possa ser exibido no mapa Adicionando um gráfico de linha. Um gráfico de linha é criado usando uma polilinha e um símbolo de linha Uma polilinha é definida como uma sequência de pontos e uma referência espacial As classes de polilinha e símbolo de linha simples são usadas para criar um gráfico de linha As linhas representam conexões entre vários pontos, como estradas ou caminhos. Esse código usa uma polilinha, uma sequência de pontos conectados e um símbolo de linha simples para criar um gráfico Defina a polilinha e símbolo de linha simples que serão usados para criar um gráfico, criar um gráfico e definir a geometria e as propriedades do símbolo A classe gráfica converterá automaticamente a polilinha e o símbolo da linha simples quando for criada Explicação. Polilinha de geometria Uma polilinha é uma coleção de pontos conectados que formam uma linha Cada par de números representa a longitude e a latitude de um ponto Símbolo de linha simples. Esse símbolo define a aparência da linha, como cor e largura, adicionando um gráfico poligonal Os polígonos representam áreas fechadas, como um pacote ou um vazamento Esse código cria um polígono com um arquivo e um contorno. Explicação do polígono de geometria. Um polígono consiste em vários pontos conectados que formam uma forma próxima Nesse caso, a matriz de anéis contém os pontos que formam o limite. Símbolo de preenchimento simples. Esse símbolo define a cor e o contorno do polígono, onde a cor inclui uma Adicionar pop-ups aos gráficos. Os pop-ups tornam o mapa interativo. Quando os usuários clicarem nos gráficos, uma janela aparecerá exibindo informações, explicações e atributos. Esses são campos de dados associados ao gráfico. Você pode adicionar atributos personalizados como nome e descrição. Modelo pop-up. Isso define como o pop-up aparecerá. Você pode usar espaços reservados de atributos como nome, para inserir valores dinâmicos Excelente. Depois de terminarmos de escrever o código, agora queremos testar o código executando a página. Para esclarecer mais sobre como as camadas aparecem com base em seu tipo, sejam elas pontos, linhas ou polígonos, você pode ver aqui como controlar as camadas ocultas do código Essa é a camada de pontos. Essa é a camada de linhas e essas são as camadas de polígonos . Muito bom A página foi lançada com sucesso. Nós nos parabenizamos por alcançar esse nível de sucesso. Conclusão, neste tutorial, aprendemos como adicionar pontos, linhas e polígonos a um mapa usando o SDK do RGIS Maps Também abordamos como tornar esses gráficos interativos com pop-ups e explorar os principais conceitos de gráficos, geometrias, símbolos e referências especiais Avaliação. Você entendeu bem o processo de adicionar e estilizar gráficos de linhas de pontos e polígonos Os pop-ups foram fáceis de implementar para você? Você gostaria de mais exemplos de como trabalhar com dados geográficos externos? No próximo tutorial, exploraremos como adicionar camadas de feição, tornando seus aplicativos mais poderosos. 12. Adicionar camada Featrue: Bem-vindos, meus queridos amigos, a uma nova lição. No mundo atual, os dados geográficos desempenham um papel crucial na análise e no gerenciamento grandes quantidades de informações espaciais. Se você está mapeando trilhas de caminhada, identificando parques ou analisando layouts de cidades, as camadas de feição permitem que você armazene, gerencie e visualize grandes conjuntos Nesta palestra, exploraremos como adicionar e exibir feições de ponto, linha e polígono usando o ArcGIS e a classe da camada de feição usando o ArcGIS e a classe da camada de feição Você aprenderá a utilizar serviços de recursos para integrar dados geográficos em seus aplicativos da Web de forma perfeita, objetivos educacionais Ao final desta palestra, você entenderá como criar e configurar camadas de feição, linha de ponto e polígono Em um mapa do GGS, aprenda a interagir com diferentes tipos de dados geográficos, como trilhas, trilhas e parques usando os serviços do RGIS Obtenha informações sobre como usar tokens de acesso e definir as configurações de segurança para acessar os serviços de localização. Familiarize-se com o serviço AggisFeature e seu papel no fornecimento dados especiais para seus aplicativos web Depois de mencionar os objetivos educacionais, também mencionamos algumas definições relacionadas a esta palestra Antes de mergulharmos no código, vamos esclarecer alguns conceitos importantes que serão fundamentais nesta palestra. ponto representa um único local no mapa, como o início de uma trilha ou um prédio Polilinha de linha, uma série de pontos conectados que formam um caminho, como uma estrada ou uma trilha Polígono, uma forma formada pela conexão vários pontos usados para representar áreas como parques ou lagos Destaque um objeto especial em uma camada de feição com geometria, linha de ponto ou polígono e atributos associados Geometria, a forma ou estrutura de uma feição X maple, uma linha pontual ou Camada de feição, um conjunto de dados que armazena feições de um único tipo de geometria e seus atributos acessados por meio de um serviço de feição Atribui os dados não espaciais associados a um recurso, como nome, tipo ou qualquer outra informação descritiva Serviços de dados, APIs ou serviços que fornecem acesso a camadas de dados geográficos para aplicativos Token de acesso, um token seguro que fornece acesso autenticado aos serviços Rc GIS Privilégios, permissões necessárias para acessar específicos do Arc GIS, como serviços de localização ou acesso a itens Como sabemos, uma camada de feição é um conjunto de dados em um serviço de feição hospedado Cada camada de feição contém feições com um único tipo de geometria, linha de ponto ou polígono e um conjunto Você pode utilizar camadas de feição para armazenar acesso e gerenciar grandes quantidades de dados geográficos para seus aplicativos. Você obtém feições de uma camada de feição acessando sua URL. Neste tutorial, você utilizará URLs para acessar e exibir três camadas de feição hospedadas diferentes Detalhamento passo a passo do tutorial. Então, agora vamos abrir o Visual Studio. E crie uma nova página chamada Adicionar uma camada de recurso. E então escreveremos o código HTML normal com referências aos arquivos CS, bem como ao ArcGIS como um script A primeira etapa é configurar o mapa com um mapa base. Nesse caso, estamos usando o mapa base topográfico. Para utilizar os serviços do ArcGIS, você precisa de uma chave de API que forneça acesso autenticado Reconfigure o DOT APK. Essa linha define seu APK, que é necessário para autenticar seu acesso aos serviços ARC GIS O mapa base define a camada base do mapa. Nesse caso, é um mapa topográfico, adicionando módulos. Em seguida, você precisa carregar os módulos necessários do ArcGIS. O módulo de camada de feição permitirá que você adicione e gerencie a declaração de exigência de camadas de feição. Esta função é usada para carregar os módulos GIS necessários, como mapa, visualização de mapa e camada de feição Uma vez carregados, podemos usar esses módulos para criar um mapa e adicionar camadas, adicionando trilhas de camadas de feição de pontos. Aqui, usaremos um serviço chamado TrailheadsT para aprender sobre esse Trailheads é serviço. Se voltarmos ao site da SR para ver o que é, para ver o conteúdo desse serviço de mapas e ver suas propriedades. Por exemplo, se descermos até o final da página e clicarmos na consulta, um formulário será aberto para nós para esse serviço. No campo de guerra, escrevemos aqui um é igual um e também nos campos externos. Nós escrevemos estrela. Em seguida, clicamos em Consultar, veja aqui todos os dados desse serviço. Agora, adicionaremos uma camada de feição de pontos, que representa os cabeçalhos das trilhas no mapa Criamos uma instância da camada de feição e definimos sua propriedade URL para a URL da camada de feição que queremos adicionar. Adicione a camada de trailheads no mapa. A camada de feição representa um conjunto de dados de feições geográficas com um tipo de geometria comum, neste caso, pontos URL, a URL aponta para o serviço de recursos ARC GIS que fornece os dados do início da trilha Map dot add trailheads Layer, adicione a camada de feição trailheads ao Adicionando trilhas de camada de feição de linha. Agora, esperamos colocar outro serviço que é o Trails URL. E se quisermos navegar nesse serviço da mesma forma, podemos acessar o serviço para pesquisar suas propriedades e navegar pelas propriedades da camada. Anote o nome, o tipo , as informações do desenho e as propriedades dos campos. Em seguida, vamos adicionar uma camada de feição de linha. O que representa trilhas. Normalmente, as linhas são desenhadas abaixo dos pontos. Então, adicionamos essa camada com um índice de zero, garantindo que ela apareça abaixo da camada de pontos, adicionamos trilhas, colocamos camadas no mapa com um índice de zero. Isso garante que a camada seja adicionada ao topo da matriz e desenhada antes da camada trailheads A camada de trilhas exibe linhas geográficas, como trilhas de caminhada, ponto do mapa, adição de camada de rastreamento. Zero, o segundo parâmetro. Zero garante que a camada seja adicionada antes da camada do trailheads Adicionando camada de feição poligonal, parques e espaços abertos Da mesma forma, navegue pelo serviço e conheça os recursos do serviço chamado URL de Parques e OpenSpaces Finalmente, adicionamos uma camada de feição poligonal para representar parques e espaços abertos Como os polígonos normalmente são desenhados abaixo das linhas, adicionamos essa camada com um índice zero para garantir que ela apareça na parte inferior da pilha Adicione a camada de parques no mapa com um índice zero. Isso garante que a camada seja adicionada ao topo da matriz e desenhada antes da camada. Quando você executa o aplicativo, a visualização do mapa exibirá as camadas na seguinte ordem. Mapa base topográfico. Polígonos de parques e espaços abertos. Linhas de trilhas, pontos de Trailheads. Esse odor garante que os recursos sejam colocados corretamente e sejam fáceis de visualizar sem se sobreporem visualizar sem se sobreporem Agora vamos executar a página. Vamos ver o resultado. Nossa, muito bom. O mapa e as novas camadas adicionadas apareceram. Excelente, pessoal. Nosso trabalho é ótimo e adquirimos novos conhecimentos. Conclusão. Neste tutorial, adicionamos e exibimos com sucesso camadas de feição de ponto e polígono em um mapa usando Aprendemos a configurar e gerenciar camadas de dados usando serviços de recursos e a explorar a importância dos tokens e privilégios de acesso na proteção de nossos Isso é apenas o começo usando o RGIS. Você pode criar mapas interativos avançados para visualizar e gerenciar todos os tipos de informações geográficas Agora que você dominou a adição de camadas de feição, tente personalizar a simbologia dessas camadas ou consultar atributos específicos dos dados para tornar seu mapa para tornar seu Na próxima sessão, nos aprofundaremos nas configurações de pop-up e camadas de recursos de estilo para melhorar a interação do usuário e a visualização dos dados Teste seus conhecimentos com algumas perguntas. Quais são os diferentes tipos de geometria suportados pelas camadas de feição Como você pode proteger sua chave de API para serviços de recursos? Qual o papel dos atributos nas camadas de feição? Aprendemos coisas novas e há mais para você dominar. encontraremos com você na próxima palestra, que será intitulada style Feature Layer 13. Estilizar uma camada de característica: Bem-vindos, meus queridos amigos, a esta agradável palestra, que contém muitas informações Nesta lição, exploraremos como usar renderizadores no RGS para aplicar estilos orientados por dados às camadas de feição Os renderizadores permitem que você represente visualmente os dados em um mapa estilizando feições com base em seus atributos Isso facilita a interpretação rápida dos dados pelos usuários . As camadas de feição são conjuntos de dados hospedados em um serviço de feição contendo dados espaciais que podem representar pontos, linhas ou polígonos Cada recurso tem dois componentes principais. geometria define a forma, ponto, linha ou polígono e a posição de cada feição e posição de cada feição Os dados contêm todas as informações sobre cada recurso, como nomes, tipos ou elevação. Os renderizadores usam esses atributos para estilizar cada recurso, possibilitando visualizações orientadas por dados Além disso, as variáveis visuais podem aprimorar ainda mais essas visualizações ajustando estilos dinamicamente com base nos Objetivos de aprendizagem. Ao final desta lição, você deverá ser capaz de compreender termos essenciais, compreender termos essenciais como camadas de feição, atributos, geometria, renderizadores, variáveis visuais e expressões de definição Segundo, aplique renderizadores como renderizador simples, símbolo de marcador de imagem e classe de rótulo aos recursos de estilo com base em atributos Três, use com segurança uma chave de API para acesso autenticado aos serviços Ag Quatro, interprete e use funcionalidade do código de forma eficaz com explicações detalhadas Cinco, avalie seu conhecimento respondendo às perguntas de avaliação Agora, vamos detalhar o processo. Estilize uma camada de feição. Primeiro, abra o código do Visual Studio. Crie a estrutura HTML na página chamada camada de feição de estilo em nosso aplicativo. Agora, vamos começar escrevendo um código HTML normal, e esse código contém um contêiner onde o mapa será exibido. Então, definimos um elemento DIV com a visualização de ID DIV que servirá como contêiner para nosso mapa Também incluímos as APIs cgi CSS e JavaScript necessárias cabeçalho e no corpo Etapa 2, Importar os módulos necessários. Explicação: usamos a função necessária para inserir módulos de arcos essenciais SR configura as configurações do ArcGIS, incluindo a configuração da chave de API O AR Map cria e gerencia instâncias do mapa. Visualizações AR O MapView fornece uma visão em dois D do mapa. camada de feição das camadas SR carrega e gerencia camadas de feição, permitindo estilizar e renderizar dados geográficos. Para usar os serviços ARC GIS, com segurança, você precisa de uma Uma chave de API é um token de acesso que autentica e autoriza o acesso ao conteúdo do RCGIS SR configurando o APC, vejo que definimos o APKey aqui. Aqui, criamos um novo objeto de mapa e definimos o mapa base topográfico. Os mapas básicos fornecem contexto geográfico fundamental para E aqui, o MaveU exibe o mapa na exibição. A propriedade center especifica a localização inicial no mapa, a longitude e a latitude, enquanto Zoom controla o nível de zoom inicial Etapa quatro, estilizando pontos com renderizador simples e símbolo de marcador de imagem Para exibir cabeçotes de trilhas, pontos de partida de trilhas usamos um renderizador simples com um símbolo de marcador de imagem O que é um renderizador simples? Um renderizador simples aplica um estilo uniforme a todas as feições em uma camada É comumente usado para recursos que não exigem estilo individual O que é um símbolo de marcador de imagem? O símbolo do marcador de imagem é um tipo de símbolo que exibe uma imagem como um ícone como marcador para feições de pontos Defina o renderizador para pontos. Explicação: o renderizador de trailheads é um renderizador simples que usa um símbolo de marcador de imagem para representar cada início de trilha O URL fornece a fonte da imagem do ícone enquanto a largura e a altura controlam o tamanho do ícone. Adicione rótulos aos pontos com a classe label. classe Label nos permite definir como os rótulos aparecem nos recursos. Explicação: os rótulos do trailheads definem um símbolo de texto para os rótulos, definindo o estilo, a cor e o posicionamento do telefone informações da expressão do rótulo especificam o texto para exibir o nome da TRL usando um atributo nos dados das feições Adicione a camada de feição do trailheads. Explicação: essa camada de feição busca dados do início da trilha da UL, aplica o renderizador de cabeçotes de trilhas para estilização e usa rótulos de cabeçotes de trilhas para rotular e usa Etapa cinco, estilizar linhas com variáveis visuais. Em seguida, estilize as linhas de trilha usando variáveis visuais para representar o ganho de elevação. O que são variáveis visuais? As variáveis visuais ajustam o estilo do recurso dinamicamente com base nos valores dos atributos Eles são comumente usados para ajustes de tamanho, cor ou opacidade para refletir diferenças baseadas em dados Defina o renderizador com variáveis visuais. Explicação. Esse renderizador usa variáveis visuais para ajustar a largura da linha com base no atributo de ganho LF As linhas com maior ganho de elevação parecem mais espessas, indicando visualmente a dificuldade da trilha Adicione a camada de feição de trilhas. Explicação. Essa camada representa trilhas com espessura baseada na elevação. A opacidade reduz a transparência da camada, ajudando-a a se misturar com outros elementos do mapa Etapa seis, estilize trilhas somente para bicicletas com expressões de definição. O que é uma expressão de definição? A expressão de definição é um filtro semelhante ao SSQL que exibe somente recursos que atendem aos critérios especificados Aqui, nós o usamos para filtrar trilhas de bicicleta. Defina o renderizador para trilhas de bicicleta. Explicação. renderizador de trilhas de bicicleta usa um estilo de linha de pontos curta, tornando as trilhas de bicicleta facilmente distinguíveis Adicione as trilhas de bicicleta, camada de feição. Explicação. Essa camada aplica o renderizador de trilhas de bicicleta somente às trilhas em que a bicicleta usada é igual a sim, filtrando efetivamente as trilhas somente para Etapa sete, estilize espaços abertos com um renderizador de valor exclusivo. O que é um renderizador de valor exclusivo? Um renderizador de valor exclusivo atribui símbolos exclusivos com base nos valores dos atributos Aqui, ele é usado para colorir espaços abertos por tipo. Função auxiliar para criar símbolos de preenchimento. Explicação: essa função retorna um símbolo de preenchimento simples para cada tipo de parque, permitindo que cada tipo tenha uma cor distinta. Defina os renderizadores de valor exclusivos. Explicação. Esse renderizador atribui uma cor exclusiva a cada tipo de pacote, ajudando os usuários a distinguir facilmente os Adicione a camada de feição de espaços abertos, explicação. Essa camada exibe parques e espaços abertos com cores exclusivas com base no tipo com uma leve opacidade para se integrar bem com outros elementos do mapa Cumprimos esse código. Agora, vamos ver o resultado do nosso trabalho navegando até o patch o botão direito do mouse e selecione Abrir com o servidor Lav para abri-lo no navegador Excelente. O mapa apareceu, junto com a camada de feição estilizada lindamente Uau. Agora, queremos exibir o código ao lado da página e desativar alguns comandos para entender melhor como a camada de feição aparece e desaparece Acompanhe. Observe aqui como as cabeças das trilhas são adicionadas ao mapa quando você as oculta. Observe o que muda no mapa. O mesmo se aplica às trilhas. Quando você esconde as trilhas. Veja o efeito que isso tem no mapa. Da mesma forma, tente fazer isso com trilhas de bicicleta. Espaços abertos para observar as mudanças. Muito bom Conclusão. Usando renderizadores diferentes, criamos vários recursos no mapa, tornando os insights baseados em dados facilmente acessíveis Esta lição demonstrou como os atributos e as variáveis visuais melhoram a legibilidade e a interatividade do mapa Avaliação. Avalie seu conhecimento com as seguintes perguntas. Qual o papel das variáveis visuais no estilo orientado por dados Como uma expressão de definição filtra feições específicas em uma camada? E para a próxima aula? Na próxima vez, adicionaremos pop-ups interativos para tornar o mapa mais envolvente, permitindo que os usuários cliquem em recursos e visualizem detalhes. Desejamos a você um novo entendimento e nos encontraremos com você na próxima palestra. 14. Filhote de exibição: Bem-vindos, meus queridos amigos, à nossa nova aula. Nesta palestra, aprenderemos como exibir um pop-up para mostrar atributos de uma camada de feição utilizando o ArcGIS API for JavaScript Os pop-ups aprimoram a interação do usuário exibindo informações detalhadas sobre cada camada de feição. Ao final desta sessão, nosso aplicativo mostrará pop-ups com atributos formatados, incluindo texto básico, gráficos e tabelas Imagine um sistema de mapas. Hoje, daremos vida a essa experiência aprendendo a configurar pop-ups que exibem dados essenciais com apenas um clique. Ao dominar os pop-ups, poderemos criar uma experiência amigável que traz dados valiosos para o primeiro plano, tornando-os mais acessíveis e esclarecedores Objetivos de aprendizagem. Lembre-se dos principais componentes, como camadas de feição e configurações de pop-up , e suas funções na exibição de dados Entenda como configurar e formatar pop-ups para mostrar atributos de dados de camadas de feição. Aplique as configurações para definir modelos pop-up, gráficos e tabelas para exibição de dados. Avalie a eficácia dos pop-ups formatados na comunicação de informações detalhadas sobre os recursos do mapa Crie modelos pop-up e integre-os ao sistema de mapas de gerenciamento da clínica utilizando o ArcGIS API for JavaScript Esta parte da palestra abordará configuração do projeto no Visual Studio Code Adicionando as bibliotecas do ArcGIS e a estrutura básica do mapa, criando modelos pop-up, configurando pop-ups para exibir valores de atributos em um layout formatado, adicionando gráficos e tabelas, aprendendo como exibir dados em gráficos e tabelas Explorando conceitos relacionados, definindo termos essenciais, como camadas de feição, serviços de feição, modelo pop-up e muito mais. Guia de implementação passo a passo. Primeiro passo, configurando o projeto no Visual Studio Code. Primeiro, abra o código do Visual Studio e crie um novo arquivo HTML chamado display pop-up. Agora, vamos começar escrevendo um código HTML normal, e esse código contém um contêiner onde o mapa será exibido. E esse código HTML contém as bibliotecas do ArcGIS API for JavaScript. Também adicionaremos os módulos necessários para mapa, visualização do mapa e camada de feição para exibir o mapa e pop-ups na seção principal das tags do script. Usamos a função necessária para importar módulos GIS essenciais SR define as configurações do Arc GIS, incluindo a configuração da chave de API O AR Map cria e gerencia instâncias do mapa. As camadas AR apresentam uma camada. Carrega e gerencia camadas de feição. Para usar os serviços ARC GIS, você precisa secretamente de uma chave de API Uma chave de API é um token de acesso que autentica e autoriza o acesso ao conteúdo do RGS, como chave de API de reconfiguração Aqui, defina a chave da API. Aqui, criamos um novo objeto de mapa e definimos o mapa base como topográfico Os mapas básicos fornecem contexto geográfico básico para sobrepor outros E aqui, o Mp Ve exibe o mapa em uma visualização em dois d. A propriedade center especifica a localização inicial no mapa, a longitude e a latitude, enquanto Zoom controla o nível de zoom inicial Etapa 2, configurar um pop-up básico para os cabeçalhos das trilhas. Camada de feição, uma camada de feição representa feições geográficas em um mapa e os atributos associados. Em nosso exemplo, a camada de feição trailheads representará pontos de interesse no mapa O que é uma camada de feição? Uma camada de feição é um conjunto de dados contendo feições com um único tipo de geometria e um conjunto de atributos, que nos permite visualizar e consultar dados no O que é um modelo pop-up? Um modelo de pop-up é usado para definir o layout e o conteúdo para exibir os atributos da feição em um pop-up quando um usuário clica em uma feição do mapa Defina um modelo pop-up para trailheads. Nessa configuração, outfields especifica quais atributos estão disponíveis para exibição no pop-up modelo pop-up define como esses atributos aparecem quando o usuário clica em um recurso Etapa três, adicionar um gráfico a um pop-up. O que é conteúdo de mídia em pop-ups? O conteúdo de mídia nos permite exibir atributos em gráficos, como gráficos de barras, gráficos circulares e gráficos de linhas, para visualizar os dados com mais eficiência O que é um gráfico de colunas? Um gráfico de colunas é um tipo de conteúdo de mídia que exibe valores numéricos, facilitando a interpretação alterações ou diferenças entre atributos Nesse tipo de configuração, o gráfico de colunas especifica o tipo de mídia para o gráfico Os campos determinam quais valores de atributos. Exemplo, ELF principal ELF max a ser exibido no gráfico. O que são informações de campo em pop-ups? As informações de campo permitem configurar como cada atributo aparece em uma tabela pop-up, incluindo formatos como moeda ou precisão decimal Como o conteúdo da tabela aprimora os pop-ups? As tabelas fornecem uma visão estruturada dos atributos, facilitando aos usuários a verificação de informações detalhadas. Encontre um pop-up com conteúdo de tabela para parques e espaços abertos. Nesse tipo de configuração, os campos especificam que o conteúdo é uma tabela informações de campo definem as propriedades de exibição de cada atributo, como rótulos e formato Concluímos o código aqui. Agora queremos testar nosso trabalho, então vamos apontar para a página. Com o botão direito do mouse, escolhemos abrir com Live Server e clicamos nele para abrir a página conosco. Muito excelente. A página apareceu de forma maravilhosa e bonita, e também podemos ver camadas de feição Agora vamos clicar em qualquer local para ver a janela pop-up aparecer. E esse é o nosso objetivo nesta lição. E essa janela pop-up contém informações sobre o local. Conclusão muito excelente. Nesta palestra, adicionamos pop-ups ao nosso mapa, aprimorando a interação do usuário exibir atributos de recursos, gráficos e tabelas pop-ups melhoram a acessibilidade dos dados, permitindo que os usuários visualizem informações relevantes de forma fácil e intuitiva Ao dominar essas ferramentas, enriquecemos a experiência do usuário, tornando a exploração de dados no mapa mais Avaliação. Você entende bem o propósito dos pop-ups no mapa de gerenciamento da clínica? Você entende bem o propósito dos pop-ups em um mapa? Você conseguiu implementar modelos pop-up para exibir atributos, gráficos e tabelas? Você se sente confiante ao configurar diferentes tipos de conteúdo de mídia em pop-ups? Nos vemos na próxima palestra. Adeus, meus queridos amigos. 15. Adicionar lições completas de vetor para camada: Nesta palestra, exploraremos como aprimorar um mapa adicionando uma camada de mosaico vetorial As camadas de mosaico vetorial nos permitem exibir dados geográficos detalhados como mosaicos vetoriais, que são escaláveis e podem ser estilizados dinamicamente Ao final desta sessão, teremos integrado uma camada de mosaico vetorial em nosso mapa existente. Criação de uma representação visual mais clara para pontos de dados, como limites de propriedades e muito mais Imagine que você esteja gerenciando uma interface de mapa que precisa exibir várias camadas de dados, como limites de parcelas ou áreas administrativas uso de camadas de mosaico vetoriais fornece uma maneira exibir informações geográficas detalhadas forma suave e eficiente, garantindo clareza, mesmo quando os usuários ampliam ou diminuem o zoom. Nesta sessão, integraremos uma camada de mosaico vetorial e a configuraremos para exibir dados espaciais importantes em nosso mapa. Objetivos de aprendizagem. Primeiro, lembre-se da função das camadas de mosaico vetoriais e por que elas são benéficas para exibir dados geográficos detalhados. Segundo, entenda o processo de configuração da camada de mosaico vetorial no ArcGS API for JavaScript. Três, aplique as etapas de configuração para adicionar uma camada de mosaico vetorial e ajustar as propriedades do mapa para uma exibição ideal. Quatro, analise como diferentes camadas do mapa como mosaicos vetoriais, melhoram a clareza e os detalhes em uma interface de mapa. Cinco, avalie o impacto dos blocos vetoriais na eficiência e escalabilidade dos mapas interativos Seis, crie uma camada de mosaico vetorial totalmente integrada, adicionando uma camada de mosaico vetorial. Esta palestra aborda os seguintes pontos-chave. Primeiro, configurar o projeto no Visual Studio Code, adicionar bibliotecas archs e definir a configuração básica do mapa Dois, adicionando e configurando a camada de mosaico vetorial. Exibindo a camada com mosaico padrão e ajustando as propriedades do mapa Três, explorando os principais conceitos, definições e uso de termos como camada de mosaico vetorial, mapa base e chave de API. Quatro, implementando o código, instruções passo a passo para adicionar a camada de mosaico vetorial, guia de implementação passo a passo. Primeiro passo, configurando o projeto no Visual Studio Code, abra o Visual Studio Code. E crie um novo arquivo HTML. Chame isso de Victorti Player. Agora vamos começar escrevendo um código HTML normal, e esse código contém um contêiner onde o mapa será exibido. Então, definimos um elemento div com o ID view DIV, que servirá como contêiner para nosso mapa Também incluímos as APIs RGI CSS e JavaScript necessárias no cabeçalho e no corpo Adicione a API args para bibliotecas de JavaScript e importe os módulos necessários Usamos a função necessária para importar módulos GIS essenciais Vamos explicar alguns códigos. SR define as configurações do Arc GIS, incluindo a configuração da chave de API O AR Map cria e gerencia instâncias do mapa. Para utilizar os serviços do ARCGIS, você precisa de uma chave de API com segurança Uma APIKey é um token de acesso que autentica e autoriza o acesso ao conteúdo do RCGIS. Então, defina a chave Api aqui. Aqui, criamos um novo objeto de mapa e definimos o mapa base topográfico. Os mapas básicos fornecem contexto geográfico fundamental para E aqui, o MaveU exibe o mapa na exibição. A propriedade center especifica a localização inicial no mapa, longitude e latitude, enquanto o Zoom controla o nível de zoom inicial, etapa dois, adicionando e configurando a camada de mosaico vetorial Uma camada de mosaico vetorial representa dados como mosaicos vetoriais, que oferecem escalabilidade e tempos de carregamento eficientes As camadas de mosaico vetoriais são ideais para exibir dados geográficos detalhados, como parcelas ou limites, sem comprometer Importe o módulo da camada de mosaico vetorial. Adicione a camada de mosaico vetorial no mapa. Explicação. Isso cria uma camada de mosaico vetorial e define sua URL para um serviço público de mosaico vetorial. O URL fornece acesso aos blocos de dados, representando os limites dos lotes em Santa Monica Atualize o mapa com a camada de mosaico vetorial. Explicação: alteramos o mapa base para um estilo cinza claro, garantindo que a camada de mosaico vetorial se destaque para uma visibilidade mais clara A matriz de camadas inclui nossa camada Vt, integrando-a diretamente ao resumo do código do mapa Esse código adiciona uma camada de mosaico vetorial a um mapa no código do Visual Studio usando a API Rgs para JavaScript. A camada de mosaico vetorial é configurada para exibir dados de um serviço público e o mapa base é ajustado para complementar a visibilidade da camada. Conceitos-chave da camada de mosaico vetorial. Uma camada de dados que exibe mosaicos vetoriais escaláveis, permitindo um zoom eficiente e suave Ideal para dados altamente detalhados como limites administrativos. Mapeie base a camada fundamental do mapa fornece Ele pode ser estilizado cinza claro X maple para melhorar a visibilidade da camada de sobreposição Chave de API, um token de acesso seguro necessário para autenticar e acessar os serviços do RGIS É essencial para carregar mapas básicos e camadas de mosaico. Mapeie e mapeie alguns componentes principais para criar e exibir mapas. mapa contém os dados e a configuração enquanto a visualização do MAP renderiza o mapa visualmente Agora, depois de escrever o código, queremos testar nosso trabalho executando o código para publicá-lo na página Em seguida, com o botão direito do mouse, escolhemos abrir com Live Server para abri-lo com o navegador. Muito excelente O mapa apareceu e o efeito da camada de mosaico vetorial apareceu. Oh, meu Deus, muito excelente. Conclusão Ao integrar uma camada de mosaico vetorial, aprimoramos nossa capacidade de mapas para exibir dados detalhados e escaláveis Essa configuração é especialmente útil para aplicações de alto nível de detalhes, nas quais dados de pacotes e limites podem fornecer informações valiosas Avaliação: Você entende bem o propósito das camadas de mosaico vetoriais no RGIS Você conseguiu implementar e exibir com sucesso a camada de mosaico vetorial? Você se sente confiante em ajustar as propriedades do mapa básico e da camada para uma melhor visualização? Próximas etapas. Na próxima aula, expandiremos a interatividade dos mapas adicionando opções de filtragem, permitindo que os usuários refinem a exibição de dados com base em Esse recurso tornará nosso mapa ainda mais poderoso para exploração de dados. 16. Como implementar uma pesquisa de localização baseada em dropdown no ArcGIS Map: Implementando uma pesquisa de localização baseada em menu suspenso no ArcGIS Map bem-vindos, meus queridos amigos esta importante lição que a esta importante lição que explica como pesquisar no mapa por meio da lista suspensa Os mapas baseados na Web fornecem uma maneira interativa de explorar dados geográficos. No entanto, a experiência do usuário pode ser significativamente aprimorada com a integração de ferramentas de navegação, como menus suspensos para locais predefinidos Nesta palestra, abordaremos a criação de um mapa utilizando API do ArcGIS e a adição um menu suspenso que permite aos usuários navegar até os locais Este guia passo a passo garante uma compreensão clara dos conceitos subjacentes, criando progressivamente o mapa e sua funcionalidade enquanto explica cada parte do código Abordaremos a implementação passo a passo, explicando os conceitos relacionados e o papel de cada parte do código. O objetivo é garantir uma compreensão clara do processo. Objetivos de aprendizagem. Ao final desta palestra, você entenderá os principais componentes da API RGS Map, incluindo o map Mave e o Saiba como integrar uma lista suspensa para navegar até locais específicos no mapa Implemente um mapa interativo que permita uma navegação suave até locais selecionados. Explore a relação entre elementos HTML, como menus suspensos e a funcionalidade da API RGIS Tópicos relacionados a esta palestra. Antes de mergulhar na implementação, vamos analisar brevemente os tópicos relacionados. Mapa do ArcGIS. O módulo principal usado para criar mapas com as APIs do ArcGIS, o MapView, um módulo que renderiza o mapa no navegador e fornece recursos de interação, como panorâmica e fornece recursos de interação com as APIs do ArcGIS, o MapView, um módulo que renderiza o mapa no navegador e fornece recursos de interação, como panorâmica e zoom. Widget de pesquisa. Uma ferramenta que permite pesquisar endereços ou localizações no mapa, uma ferramenta integrada do ARCGS que permite aos usuários pesquisar lugares, endereços ou características geográficas Lista suspensa com um elemento HTML simples que permite aos usuários selecionar opções predefinidas ApiKey, uma credencial de segurança necessária para acessar os serviços ARC GIS, passo Agora vamos construir o projeto passo a passo, começando com uma estrutura HTML básica. E integrando gradualmente os recursos do mapa GIS em arco. O plano. Seguiremos uma abordagem estruturada. Comece com a estrutura HTML. Defina contêineres para o mapa e o menu suspenso. Integre a chave da API do AgS. Autentique seu aplicativo para acessar os serviços da AGG. Crie o mapa, adicione um mapa base de navegação e defina a visualização. Adicione interatividade, integre o widget de pesquisa e conecte-o ao menu suspenso Teste a funcionalidade, selecione locais no menu suspenso e observe a navegação no mapa Primeiro passo, estrutura HTML básica. Comece com um arquivo HTML simples contendo um div para o mapa e um espaço reservado para o Explicação. Exibir DIV Esta div hospedará o mapa. Recipiente suspenso. Esse DIV contém uma lista suspensa para navegação. CSS básico garante que o mapa e o menu suspenso sejam exibidos corretamente. Etapa 2: adicionar a chave da API GS. Os serviços ARC GIS exigem uma chave de API para acesso. Adicione a biblioteca JavaScript e configure a chave da API. Explicação. Chave de API. Substitua sua chave de API aqui por uma APIKey válida da sua conta ARC GIS O objeto srcFig é usado para definir opções de configuração global, como a chave de API Etapa três, configurando o mapa. Agora, crie uma instância do mapa SRI e use um mapa base de navegação Explicação. O mapa base especifica o estilo visual do mapa. Aqui, usamos a navegação Rg GIS, que é otimizada para maior clareza e Etapa quatro, adicionando a visualização do mapa. Em seguida, renderize o mapa no Vu Div usando o MapView. Ah. Explicação. A visualização do mapa vincula a instância do mapa ao DIV e fornece uma experiência de mapa interativa Centro especifica as coordenadas centrais iniciais do mapa O zoom define a que distância o mapa começa para dentro ou para fora. Etapa cinco, integrando o widget de pesquisa. O widget de pesquisa permite que os usuários pesquisem locais dinamicamente Ele será exibido no canto superior direito do mapa. Explicação. Widget de pesquisa Forneça a funcionalidade de pesquisa para o mapa. Clique em EN. Ouvinte, quando um usuário seleciona uma opção, o widget de pesquisa é usado para encontrar a localização e o mapa navega até o Vincule o menu suspenso ao widget de pesquisa para permitir a navegação com base na Explicação. Ouvinte do evento Detecta quando o usuário seleciona uma opção no menu suspenso Search dot such executa uma pesquisa de localização usando o valor suspenso selecionado Exibir ponto O GoTo navega pelo mapa até o resultado da pesquisa. Agora, esse é todo o código. Aqui está a implementação completa. Depois de concluirmos o código completo e o entendermos bem, vamos testar o código. Vamos até a página , clique com o botão direito do mouse e escolha abrir com o Live Server. Nossa, a página funcionou com sucesso e a lista suspensa apareceu aqui Agora, vamos consultar. Ok. Aqua, é muito bom. A consulta funciona com êxito. E os detalhes do site também aparecem em uma janela pop-up. Conclusão muito boa. Nesta palestra, construímos uma ferramenta de navegação de localização baseada em menu suspenso usando a API de mapas ARC GIS Começamos com uma estrutura HTML simples, adicionamos o mapa e seus componentes interativos e conectamos o menu suspenso ao widget de pesquisa Este projeto demonstra como integrar recursos de navegação fáceis em um aplicativo de mapeamento da web Avaliação, perguntas objetivas. Qual é a finalidade desse widget de pesquisa? Como o menu suspenso aciona a navegação no mapa, tarefas práticas e adiciona mais locais ao Personalize o estilo e o posicionamento do menu suspenso. O que vem a seguir? Na próxima palestra, vamos nos aprofundar na consulta de uma camada de feição SQL. Esta lição ensinará como executar consultas SQL para recuperar poligonais específicas de uma camada de feição no ArcGIS Você aprenderá a usar consultas SQL para filtrar dados com base em atributos Recupere os atributos e a geometria do recurso. Exiba os resultados consultados em um mapa para visualização interativa Esta palestra fornecerá uma explicação detalhada sobre SQL e sua aplicação na filtragem de SQL e sua aplicação na dados geográficos. Fique ligado. 17. Consultando uma camada de recurso usando consultas espaciais no ArcGIS Maps SDK: Bem-vindos, meus queridos amigos, à lição em que discutiremos a consulta uma camada de feição usando SQL no RGIS Maps SDK, o poder do GIS na filtragem dinâmica de Imagine trabalhar como planejador urbano responsável por gerenciar o desenvolvimento urbano Seu trabalho envolve identificar áreas para projetos residenciais em potencial ou avaliar parcelas com altos valores de terra para Tradicionalmente, essas tarefas exigem mapas estáticos e filtragem manual Hoje, no entanto, temos a tecnologia GIS que nos permite consultar dinamicamente grandes conjuntos de dados e visualizar instantaneamente Isso não é apenas uma melhoria técnica. É uma revolução na eficiência da tomada de decisões. Nesta palestra, exploraremos como aproveitar o SDK do RKISMPS para criar um aplicativo de mapas interativo que dinamicamente Essa ferramenta poderosa nos permite consultar uma camada de feição, visualizar feições geográficas e fornecer informações detalhadas aos usuários em Se você está em planejamento urbano, análise ambiental ou gerenciamento de recursos, essas habilidades são indispensáveis. Objetivos de aprendizagem. Ao final desta palestra, você entenderá o propósito e a funcionalidade de uma chave de API e camada de recursos no GIS Segundo, aplique consultas SQL para filtrar e recuperar dinamicamente dados desses conjuntos de dados Três, analise e visualize os resultados da consulta usando símbolos e pop-ups personalizados Quatro, desenvolva um aplicativo de mapa totalmente interativo com filtragem de consultas SQL baseada em menu suspenso. Plano educacional. Primeiro passo, visão geral conceitual. Definições, camada de feição APIKey, consulta de habilidades e suas funções no GIS Explicação do SDK de mapas RGS. Etapa dois, codificação passo a passo, construa incrementalmente a estrutura HTML, a lógica do JavaScript e as funcionalidades do mapa Etapa três, explicação dos principais conceitos. Por que carregamos scripts no corpo em vez da cabeça. Detalhamento detalhado da lógica e visualização da consulta. Etapa quatro, teste e prática. Execute e interaja com o aplicativo. Etapa cinco, recapitulação e próximas etapas. Analise os conceitos e visualize as consultas especiais para a próxima sessão Visão geral conceitual. O que é um APaKey? Um APaKey é um identificador exclusivo que autentica seu acesso aos serviços RGI como mapa base e camadas de feição Ele garante o uso seguro e controlado dos serviços. O que é uma camada de feição? Uma camada de feição é uma coleção de dados geográficos armazenados no ArcGIS, como pontos, linhas ou Cada feição na camada tem um exemplo de atributos, ID do quebra-cabeça, tipo de uso e Exemplo, um polígono para um quebra-cabeça. O que é uma consulta SQL? SQL, linguagem de consulta estruturada, é uma ferramenta para filtrar e recuperar dados de um conjunto de dados Por exemplo, o tipo de uso é igual ao residencial, recupera quebra-cabeças classificados como Valor do terreno em rolo maior que 1.000. Quebra-cabeças do Redis com valores de terra superiores a $1 milhão. Implementação passo a passo. Agora, criaremos o aplicativo passo a passo. Cada trecho de código é explicado em detalhes para maior clareza. Primeiro passo, crie a estrutura HTML básica. Abra o Visual Studio e crie um arquivo com a camada de feição de consulta de nomes usando sql dot HTML Em seguida, comece com uma estrutura HTML simples para hospedar o mapa e o menu suspenso. Explicação. Em DVED é igual ViewDV Esse é o contêiner do mapa. Dois, menu suspenso. O elemento select permite que os usuários escolham condições SQL dinamicamente Posicionamento do script, o JavaScript é carregado na parte inferior do corpo. Isso garante que todos os elementos DOM sejam carregados antes da execução do script. Etapa dois, configure o ApiKey e o mapeamento. Nas palestras anteriores, estávamos escrevendo o código na página HTML, mas desenvolveremos nosso trabalho separando o código HTML do código JavaScript, o que significa que alocaremos um arquivo JavaScript no qual colocaremos o código JavaScript e, em seguida, colocaremos a página HTML para ler esse Como é isso? É simples. Acompanhe-me. Ou seja, teremos dois arquivos, um arquivo com uma extensão HTML para o código HTML e outro arquivo com uma extensão JS para o código JavaScript. Para organizar o trabalho, criaremos uma pasta chamada querian feature layer usando SQL, na qual colocaremos os dois arquivos por uma questão de organização, porque do início até a palestra um arquivo com uma extensão HTML para o código HTML e outro arquivo com uma extensão JS para o código JavaScript. Para organizar o trabalho, criaremos uma pasta chamada querian feature layer usando SQL, na qual colocaremos os dois arquivos por uma questão de organização, porque do início até a palestra, nós levará isso em consideração em cada nova lição. Moveremos o arquivo chamado camada de feição de consulta usando ql dot HTML para essa pasta e, de dentro da pasta, criaremos um arquivo JavaScript chamado camada de feição de consulta usando SQL, dot JS e começaremos configurando o mapa e a visualização da chave da API Explicação. Vamos fazer com que ele leia o arquivo JavaScript também escrevendo um código simples na seção do corpo depois de escrever o código no final do corpo aqui. Chave de API, que autentica o acesso a serviços de discussão, como mapas base Substitua o espaço reservado pela sua chave real. mapa define o mapa e define seu mapa base para a topografia Argus visualização do mapa configura a exibição dos mapas, incluindo o centro do contêiner e o nível de zoom Etapa três, adicione uma camada de feição. Agora, adicione uma camada de feição que contém os dados GIS que queremos consultar Explicação. O URL da camada de feição aponta para um conjunto de dados de quebra-cabeças no Condado de Los Angeles Adicionar a camada integra os dados no mapa para consulta e visualização Etapa quatro, adicione a funcionalidade suspensa . Em seguida, conecte o menu suspenso para executar consultas SQL quando uma seleção Explicação. Menu suspenso. Ouvinte, o evento de alteração é acionado sempre que o usuário seleciona uma nova Consulta SQL, a cláusula ware filtra o conjunto de dados com base na condição selecionada Consulta feições, executa a consulta na camada de feição e busca os Etapa cinco, exibir os resultados da consulta. Por fim, visualize os dados da consulta no mapa. Explicação. O estilo do símbolo define a cor, transparência e a borda dos recursos visualizados Limpe os gráficos anteriores, remova todos os resultados antes de adicionar novos. Repita e exibe, percorre os resultados da consulta, aplica o símbolo e os exibe no mapa Terminamos de escrever o código necessário nesta palestra. Agora, queremos ver o resultado do nosso trabalho. O mapa aparecerá e a consulta estará correta na lista suspensa para ver isso? Então, vamos executar a página clicando com o botão direito do mouse e escolhendo abrir com o servidor Live. Oh, meu Deus. O mapa apareceu. Vamos agora fazer o processo de investigação. Oh, meu Deus. Nosso conhecimento é maravilhoso e o resultado está à sua frente. Conclusão. Nesta sessão, você aprende, criou um aplicativo de mapas usando o SDK do AGS Maps, consultou dinamicamente dados GIS usando SEQL e visualizou usando SEQL Um menu suspenso integrado para filtragem orientada pelo usuário. Próxima palestra. Na próxima sessão, exploraremos as consultas espaciais, que envolvem recursos de filtragem com base em relações geográficas Aprendemos como o usuário esboçou a área para análise de pacotes. Objetivo: identificar parcelas que se enquadram em uma área geográfica definida pelo usuário usando uma ferramenta de esboço no mapa Exemplo, caso de uso. Um planejador urbano deseja avaliar todas as parcelas dentro de um limite de desenvolvimento proposto Um cientista ambiental quer identificar áreas dentro de uma zona de amortecimento específica para avaliar os impactos ambientais Isso permitirá aplicativos GIS ainda mais poderosos. Fique ligado. Nos encontraremos com você na próxima palestra para desenvolver mais nossas habilidades. Adeus 18. Consultando camadas de recursos usando consultas espaciais no ArcGIS Maps SDK: Bem-vindos, meus queridos amigos, a esta lição importante e muito importante. Portanto, deve ser bem entendido. Vamos fazer isso com uma explicação detalhada e descomplicada para que possamos transmitir o conceito. Você está pronto? Então vamos começar. Imagine sua tarefa de projetar uma nova zona verde em Los Angeles. Para tomar decisões informadas, você precisa identificar parcelas de terra dentro de um limite específico e analisar seus atributos, como valor da terra e Consultas especiais em GIS permitem traçar limites de forma interativa e recuperar Nesta palestra, criaremos um aplicativo web que demonstra como configurar um mapa interativo Use o componente de esboço para desenhar geometrias. Consulte uma camada de feição com base em relacionamentos espaciais. Visualize os resultados consultados com estilos e pop-ups. Objetivos de aprendizagem. Ao final desta sessão, você entenderá o que são consultas espaciais e suas aplicações práticas Configure um aplicativo GIS utilizando ArcGIS Maps SDK no Use o componente de esboço para desenhar e interagir com geometrias em um mapa Consulta, uma camada de feição para recuperar feições de interseção. Visualize os resultados consultados usando gráficos e pop-ups. Planeje a palestra. Introdução, por que as consultas espaciais são importantes. Conceitos, camadas de feição. exemplo de relações espaciais cruza e contém um componente de esboço para Implementação. Configure o ambiente e os arquivos. Escreva e explique o código passo a passo. Teste, execute o aplicativo e observe os resultados. Avaliação, perguntas para avaliar a compreensão. Conclusão e próximos passos, resumo e Tisa para a próxima sessão Camada de feição de tópicos principais, uma coleção de feições geográficas com atributos. Consultas espaciais. Consultas baseadas em relações geométricas, por exemplo, intersexo por exemplo componente Sketch permite que os usuários desenhem e modifiquem geometrias Camada gráfica usada para exibir resultados no mob. Configurando o ambiente. Usaremos o código do Visual Studio com dois arquivos. Consultando a camada de feição. Usando consultas especiais, o HTML de pontos contém a estrutura da página da web camada QueringFeature, usando consultas especiais dot js contém a lógica Javascript para interações do Implementação passo a passo. Primeiro passo, criaremos o arquivo com a camada de feição de consulta de chamadas usando consultas especiais em HTML com pontos. Esse arquivo configura o contêiner para o mapa e inclui as bibliotecas RGS necessárias Explicação. DIV ID é DIV de visualização igual O mapa será renderizado dentro desse contêiner. API Args e as bibliotecas para acessar os recursos do SDK são carregadas por meio de uma tag de script O CSS garante que o mapa ocupe a tela inteira. Etapa dois, inicialize o mapa. Além disso, criaremos o arquivo chamado camada de feição de consulta usando consultas especiais dot gs para inicializar o mapa e configurar suas Explicação. O APIKey protege o acesso à plataforma Objeto do Mapa, configura o mapa base para visualização. MapView vincula o mapa ao contêiner e especifica seu centro inicial e o nível de zoom Etapa três, adicionando camadas. Adicione uma camada de feição e uma camada gráfica no mapa para representação de dados e visualização de resultados Explicação. A camada de feição representa parcelas de terra. Camada gráfica usada para renderizar visualmente os resultados da consulta. Ambas as camadas são adicionadas ao mapa, permitindo a interação e visualização de dados geográficos Etapa quatro, adicionando o componente de esboço. Esse código integra o widget de esboço ao mapa para permitir que os usuários desenhem e modifiquem geometrias e modifiquem Aqui está uma explicação detalhada. Ao importar e inicializar o widget de esboço. Objetivo: impor o módulo de widget de esboço da API args para Action disponibiliza a classe sketch para criar ferramentas de desenho interativas Segundo, configure o widget de esboço. Camada, atribui uma camada gráfica para armazenar e exibir as geometrias desenhadas Garante que as geometrias sejam representadas visualmente no mapa visualização vincula o widget de esboço à visualização do mapa, a representação visual do mapa, permite que os usuários interajam diretamente com o mapa Três, adicione o widget de esboço ao mapa. Purpose adiciona o widget de esboço à interface do usuário do mapa posição coloca o widget no canto superior direito da interface do mapa Resultado, o widget de esboço aparece como um conjunto de ferramentas para desenhar pontos, linhas, polígonos Resumo. Esse código importa e inicializa o widget de esboço, configura para usar uma camada gráfica para desenhos, o adiciona à visualização do mapa, permitindo que os usuários desenhem e editem geometrias de forma interativa Essa configuração é fundamental para permitir consultas espaciais ou outras análises baseadas em mapas Etapa cinco, executando consultas espaciais. Esse código manipula consultas espaciais usando o widget de esboço para desenhar geometrias e consultar Aqui está um resumo. Explicação. Ouvinte do evento On Sketch. Purpose escuta o evento de criação do widget de esboço. Ação. Quando uma geometria é desenhada com sucesso, o estado é igual a completo A geometria é passada para a função da camada de feição de consulta para processamento Dois, função da camada de feição de consulta, etapas na consulta. Criar objeto de consulta, inicializa um objeto de consulta para a camada de parcela geometria define a geometria da consulta para a forma do drone relacionamento espacial filtra recursos com base nas interseções, recursos de relacionamento espacial que se sobrepõem à geometria desenhada, outfiels especifica quais atributos o APN usa, outfiels especifica quais atributos o APN usa APN geometria escrita garante que as geometrias resultantes sejam incluídas nos resultados da consulta Executar consulta executa a consulta usando recursos de consulta e processa os resultados. Processamento de três resultados. Em caso de sucesso, passa os resultados para a função de exibição de resultados para visualização Nos registros de erros, quaisquer erros que ocorram durante a consulta. Resumo. Esse código usa o widget de esboço para permitir que os usuários desenhem geometrias no mapa A consulta é uma camada de feição para cruzar feições com base na geometria desenhada Recupera atributos específicos e exibe os resultados de forma interativa Etapa seis, exibindo os resultados. Renderize os resultados da consulta no mapa. Explicação da função de exibição dos resultados. A função de exibição de resultados visualiza os resultados da consulta no mapa executando as etapas a seguir Limpe os resultados anteriores. Camada gráfica, remova tudo para garantir que a camada gráfica seja limpa antes de adicionar novos resultados Defina um símbolo. Um símbolo de preenchimento simples é criado com uma cor azul semitransparente e um contorno branco para representar visualmente os recursos consultados Adicione feições à camada gráfica. Os resultados dessa matriz de feições são iterados e cada feição é estilizada com o símbolo definido e adicionada à camada gráfica Amplie os resultados. Se houver resultados, a visualização do mapa será ampliada na extensão da geometria das primeiras feições, com uma pequena expansão para melhor visibilidade No final da sessão, combinamos todos os componentes em um projeto completo. Aqui está o código HTML e JavaScript juntos. Resultado esperado. Desenho interativo. Use o componente de esboço para desenhar formas. Os resultados da consulta destacam parciais que se cruzam no mapa. Excelente. Terminamos de escrever o código. Agora vamos executar a página para ver o resultado do nosso trabalho acessando a página. Em seguida, clicamos e clicamos em Abrir com o Live Server. Excelente. Esse componente de esboço apareceu Agora vamos fazer o experimento de desenho. Vamos escolher e desenhar no mapa. Está tudo bem. Graças a Deus. Concluímos o trabalho com sucesso. Parabéns. Conclusão. Nesta sessão, você aprendeu sobre consultas espaciais e suas aplicações Configure o aplicativo GS utilizando o ArcGIS Maps SDK, consultou uma camada de feição e visualize os resultados e visualize Avaliação. Qual é a finalidade da camada gráfica? Como o componente de esboço aprimora a interatividade? Qual relação espacial foi usada na consulta? O que vem a seguir? Na próxima vez, combinaremos consultas espaciais com filtros de atributos para realizar análises avançadas Imagine encontrar parcelas dentro de um limite que tenham um valor de terra superior Te vejo na próxima vez. 19. Filtrando uma camada de recurso com SQL no ArcGIS usando o Map e o MapView: Bem-vindos, meus queridos amigos, a esta palestra intitulada Filtrando uma camada de feição com SQL no Argus usando Map Imagine seu teste com a criação de uma ferramenta de visualização para uma agência governamental local monitorar o uso e os valores da propriedade Por exemplo, talvez seja necessário exibir somente propriedades residenciais, mostrar propriedades com valores de terreno abaixo de $200.000 Concentre-se dinamicamente em áreas de zoneamento específicas. Para resolver isso, você pode usar filtragem baseada em SQL com expressão de definição no SDK do AGS Maps Essa abordagem garante eficiência, somente os dados necessários são obtidos servidor, reduzindo a largura de banda Segundo, flexibilidade, os filtros podem ser aplicados dinamicamente com base na entrada do usuário Três, interatividade. Os usuários podem explorar conjuntos de dados de forma interativa com menus suspensos Ao final desta sessão, você saberá como criar um aplicativo de mapa dinâmico interativo com filtragem baseada em SQL Objetivos de aprendizagem. Ao final desta palestra, você entenderá conceitos básicos do mapa e da visualização de mapas no SDK do Arches Para, aprenda a usar a expressão de definição para filtragem do lado do servidor Três, implemente um menu suspenso dinâmico para aplicar filtros de forma interativa Quatro, crie um aplicativo polido e funcional baseado na web Plano de aula O, configure o ambiente básico usando HTML. Segundo, adicione a chave da API RCChis para autenticação. Três, crie um mapa e uma visualização do mapa para exibir o mapa. Quatro, adicione uma camada de feição e conecte-a a uma fonte de dados. Cinco, crie um menu suspenso com opções avançadas de filtragem Seis, implemente a lógica de filtragem dinâmica usando um menu suspenso e uma expressão de definição Sete, teste e refine o aplicativo. Implementação passo a passo. Primeiro passo, configurando o ambiente básico. Primeiro, criaremos uma pasta chamada filtrando uma camada de feição com SCL E conterá dois arquivos. Um para escrever código HTML e o outro conterá um arquivo para escrever código JavaScript. O arquivo HTML lerá o código JavaScript. Isso é melhor para organizar o código para criar um arquivo chamado filtragem de uma camada de feição com SQL dot HTML Eles contêm um modelo HTML básico que servirá como base do seu aplicativo. Explicação. Em elementos HTML, div com ID VDV, o contêiner do mapa Div com filtro de ID mergulhe em um contêiner flutuante com um menu suspenso para filtragem. Dois estilos. O mapa ocupa toda a altura da janela de visualização 100% com 100% O menu suspenso é estilizado para visibilidade e usabilidade. Além disso, nessa pasta, criaremos um arquivo chamado filtrando uma camada de feição com ql dot JS Etapa 2: adicionar a chave da API Argus. A APIKey fornece autenticação para acessar os serviços RGI Por que isso é importante? A chave da API concede ao seu aplicativo acesso aos recursos do Rgs, como mapas base e Etapa três, criando o mapa e a visualização do mapa. Agora, use a classe map para definir o mapa base e a visualização do mapa para renderizá-la na visualização Explicação detalhada. Um mapa representa o mapa inteiro, incluindo mapas básicos e camadas operacionais. A propriedade basemap especifica o tipo de mapa base. Dois, visualização do mapa, renderiza o mapa dentro da visualização do contêiner especificada Div Define o centro inicial e o nível de zoom do mapa. Etapa quatro, adicionando uma camada de feição. Adicione uma camada de feição que busque dados de propriedades e configure seus atributos Explicação detalhada. Uma, camada de feição, se conecta a uma URL de serviço de feição para buscar dados de propriedades Ofels especifica quais atributos recuperar, por exemplo, função modelo pop-up define como os dados do recurso são exibidos quando clicados expressão de definição aplica um filtro SQL para filtragem do lado do servidor Etapa cinco, adicionando lógica de filtragem dinâmica. Adicione um menu suspenso para permitir que os usuários filtrem dinamicamente a filtrem dinamicamente explicação detalhada da camada de feição Um ouvinte de eventos escuta as alterações no evento de alteração do menu suspenso Dois, a filtragem dinâmica, atualiza a propriedade de expressão de definição da camada de feição para aplicar o filtro selecionado Somente os recursos que correspondem à condição SQL são exibidos. Etapa seis, testando o aplicativo. Agora queremos testar o resultado do nosso trabalho. Além disso, não se esqueça dessa etapa importante, que é fazer com que o código HTML leia o arquivo JavaScript acessando a página HTML. E aqui no final, na seção do corpo, nos referimos ao arquivo escrevendo esse código. Agora, salve o código completo em um arquivo HTML. Vá até a página, clique com o botão direito do mouse e escolha Abrir com o servidor Live para abrir o arquivo em um navegador. H. Três, teste o menu suspenso. Oh, meu Deus. É ótimo. O mapa apareceu e a ferramenta do menu suspenso também apareceu, contendo as opções com as quais queremos filtrar os locais no mapa Vamos testá-lo agora. Selecione um valor de terreno menor que $200.000 para exibir propriedades abaixo Selecione o uso residencial para mostrar propriedades residenciais. Conceitos-chave aplicados. Uma filtragem do lado do servidor com expressão de definição reduz a transferência de dados ao buscar somente recursos relevantes do Dois modelos pop-up fornecem uma maneira fácil exibir informações de atributos. Três, interatividade dinâmica. Os usuários podem aplicar filtros em tempo real usando o menu suspenso. Conclusão. Nesta palestra, exploramos. Um, configurar um mapa CGIS básico com mapa e visualização do mapa. Dois, adicionando uma camada de feição e aplicando filtros baseados em SQL. Três, criar um aplicativo interativo com filtragem dinâmica Essa abordagem é perfeita para aplicativos que exigem visualização e interatividade de dados em grande escala , como análise imobiliária ou monitoramento ambiental Perguntas de avaliação. Primeiro, qual é o propósito da expressão de definição no ArcGIS Segundo, como o modelo pop-up aprimora a experiência do usuário? Terceiro, por que a filtragem do lado do servidor é mais eficiente do que a filtragem do lado do cliente Teaser da próxima palestra. Na próxima sessão, exploraremos exemplos de manipulação de camadas, como adicionar rótulos, alterar a simbologia e ajustar dinamicamente a opacidade. Fique ligado. 20. Camadas de visibilidade no ArcGIS Maps SDK: Bem-vindos, meus queridos amigos. Nessas aulas, os mapas estão em toda parte, desde aplicativos de navegação até ferramentas de análise ambiental. Os mapas dependem de camadas para exibir dados significativos. Pense nas camadas como folhas de informações empilhadas umas sobre as outras para formar um mapa completo Nesta palestra, vamos nos aprofundar nas camadas, como elas funcionam, por que são importantes e como você pode usá-las em seus aplicativos Imagine que você esteja criando um aplicativo web em que os usuários possam alternar entre a visualização das redes de transporte e a densidade habitacional As camadas tornam essa funcionalidade possível. Ao final desta palestra, você estará confiante em criar, configurar e interagir com camadas do mapa, Ao final desta sessão, você entenderá o conceito de camadas e seu papel nos mapas. Segundo, crie e configure camadas usando o SDK do RGIS Maps. Três, adicione camadas em um mapa e gerencie sua visibilidade. Quatro, use técnicas avançadas, como visualização de camadas e quando interagir com camadas Cinco, crie um exemplo completo que combine todos esses conceitos. Conceitos relacionados para explorar. Antes de mergulhar no código, vamos discutir alguns conceitos-chave. Primeiro, o que são camadas? Uma camada é uma coleção de dados espaciais como dados vetoriais, pontos de amostra, linhas, polígonos ou pontos de amostra, linhas, polígonos Por exemplo, imagens, pixels e camadas representam fenômenos do mundo real, como estradas, clima ou densidade populacional. Dois, tipos de camadas. Camada de feição, exibe pontos de dados vetoriais, linhas, polígonos e suporta consulta camada de mosaico exibe dados rasterizados pré-renderizados, imagens otimizadas para desempenho A camada de imagens funciona com imagens aéreas ou de satélite. Camada vista usada em mapeamentos em três D para grandes conjuntos de dados, como edifícios ou terrenos Três, propriedades da camada, URL, o ponto final onde os dados das camadas estão hospedados Opacidade, ajuste a transparência da camada. A visibilidade determina se uma camada é exibida no mapa. intervalos de escala controlam a visibilidade de uma camada em determinados níveis de zoom. Visualização em camadas. A visualização da camada representa como uma camada é renderizada na visualização do mapa Ele fornece acesso aos gráficos renderizados e suas propriedades Cinco, interação com camadas. As camadas podem ser controladas programaticamente usando eventos e métodos , como o método when para esperar que uma camada seja carregada e o método on para ouvir Seis, mapa base e camadas operacionais. Mapeie base um plano de fundo de mapa estático. Exemplo, imagens de satélite ou mapas topográficos, camadas operacionais, camadas dinâmicas adicionadas ao mapa base, como pontos de interesse ou rotas de transporte Exemplo, combinando conceitos na prática. No cenário, você deseja criar um mapa mostrando dois tipos de dados. Um, redes de transporte usando uma camada de mosaico. Dois, densidade habitacional na cidade de Nova York. Usaremos os seguintes conceitos. Adicionando camadas em um mapa, controlando a visibilidade da camada. Interagindo com a visualização da camada. Usando o método when para garantir que a camada esteja totalmente carregada, tutorial passo a passo. Dividiremos a implementação em etapas claras, construindo nosso entendimento de forma incremental Primeiro passo, configuração do ambiente, ferramentas necessárias. Visual Studio code, um editor leve e poderoso. API RQS JavaScript para criar webmps. Agora, abra o Visual Studio criando a estrutura do arquivo. Crie um novo exemplo de pasta, Mostrar ocultar camadas. Dentro da pasta, crie dois arquivos. Mostre o HTML de ocultar ponto para a estrutura HTML e Mostrar ponto js para a lógica JavaScript, gravando o arquivo HTML Abra Mostrar HTML de ponto de acesso e adicione o código a seguir. Explicação. O DIF com ID é igual View DIF é o contêiner onde o mapa será exibido A caixa de seleção de entrada serve para alternar a visibilidade de uma camada Os scripts externos e as folhas de estilo são para o SDK do RDS Maps Etapa dois, adicionando Javascript básico. Abra show height dot JS e adicione o JavaScript inicial para exibir um mapa básico. Explicação. O mapa representa o mapa em si. visualização do mapa exibe o mapa em dois D. O mapa base define o estilo do mapa de fundo, exemplo de oceanos Etapa três, Adicionando camadas de mosaico. Modifique Mostrar ocultar pontos para incluir uma camada de mosaico para adicionar camadas de dados adicionais Explicação. A camada de mosaico adiciona dados baseados em raster de uma URL Opacidade, ajuste a transparência para uma melhor visualização. Etapa quatro, controlando a visibilidade da camada. Adicione interatividade alternando a visibilidade das camadas de transporte Explicação. Ouve o evento de alteração da caixa de seleção, alterna a visibilidade da camada de transporte Etapa cinco, trabalhando com visualizações de camadas. Ouça a visualização da camada, crie eventos para explorar as propriedades da camada. Explicação, registra informações sobre visualização da camada de cada camada quando ela é criada. Útil para depurar e entender o comportamento da camada. Etapa seis, animando com o método when. Concentre-se na camada da caixa após o carregamento, usando a explicação. Quando o método garante que uma camada esteja totalmente carregada antes de interagir com ela Vá para Método, anima a visualização em uma extensão específica. Etapa sete, teste final, abra o navegador acessando a página, clicando com o botão direito do mouse e clicando em abrir com o Live Server. Muito bom. O mapa apareceu bem e também o menu da caixa de seleção. Alterne a visibilidade das camadas de transporte usando a caixa Verifique o console para obter informações sobre a camada. Observe o mapa ampliando até a extensão da camada de habitação. Conclusão. Nesta palestra, aprendemos o papel fundamental das camadas em mapas, como criar, configurar e adicionar Gerenciando dinamicamente a visibilidade da camada. Usando técnicas avançadas, como visualização em camadas e quando, seguindo estas etapas, você construiu um aplicativo de mapa dinâmico que demonstra o poder das camadas Avaliação 1. O que é uma camada de mosaico e como ela difere das outras camadas? Segundo, por que o método when é importante para a interação de camadas? Três, como a visualização em camadas pode melhorar a depuração Na próxima aula, na próxima palestra, exploraremos as camadas de feição e aprenderemos como usar atributos e estilos para atributos e estilos para criar mapas interativos detalhados Fique ligado. Nos vemos na próxima palestra. 21. Aprimorando a visualização de GIS usando o ArcGIS Maps SDK: Olá, bem-vindo a uma sessão empolgante em que mergulhamos profundamente no mundo dos mapas interativos. Você já se perguntou como aplicativos como o Google Maps ou sistemas GIS avançados permitem que os usuários explorem camadas, alternem a visibilidade e naveguem pelos mapas sem problemas Hoje, você descobrirá como criar esses mapas interativos usando o SDK de mapas ARC GIS Nosso foco será no componente de lista de camadas, uma ferramenta incrivelmente útil para gerenciar camadas do mapa. Imagine dar aos usuários o poder alternar camadas de dados, como estradas, edifícios ou vegetação, diretamente no mapa Isso não é incrível? Vamos começar com essa aventura. Primeiro objetivo educacional, lembrando, identificar os componentes da lista de camadas e suas funções no SDK do RGS Maps Segundo, entendendo, explique como a lista de camadas interage com outras feições do mapa Três, aplicar, implementar e personalizar a lista de camadas em um mapa funcional. Quatro, analisando, detalha as interações entre as camadas e ferramentas do mapa. Cinco, avaliando, avalie a eficácia do uso da lista de camadas para a experiência do usuário Seis, criar construir um mapa interativo totalmente funcional com aparência profissional. Plano de aprendizagem um, introdução aos mapas interativos e a importância da lista de camadas. Segundo, configurar a estrutura HTML com explicações detalhadas Três, estilo com CSS para designs profissionais e limpos Quatro, integrando componentes de calcita com o ArcGIS SDK. Cinco, construindo o mapa com componentes interativos. Seis, testando e analisando a saída do mapa. Sete, encerrando com conclusão e avaliação. Tópicos relacionados a esta palestra. Um, camadas em GS. As camadas representam os dados geográficos exibidos em um mapa. Eles podem incluir camadas de feição, pontos, linhas ou polígonos representando dados como cidades, estradas ou Camadas rasterizadas, imagens como imagens de satélite ou mapas digitalizados, camadas lado a lado, camadas lado mosaicos pré-renderizados para renderização rápida Por que isso importa? Compreender as camadas é essencial, pois o componente da lista de camadas interage diretamente com elas. Ele permite que os usuários alterem a visibilidade, reordenem as camadas e visualizem os metadados Dois, um componente em Yerles. O componente sem camada fornece uma interface de usuário para gerenciar camadas do mapa. Seus recursos incluem a exibição todas as camadas atualmente no mapa, permitindo que os usuários mostrem ou ocultem camadas, permitindo que os usuários reordenem as camadas para uma melhor visualização Por que isso importa? Esse é o foco principal da palestra. Ao aprender a configurar e personalizar esse componente, aprimoramos a interação do usuário com o mapa. Três componentes do mapa. Além da lista de camadas, vários outros componentes do mapa melhoram a experiência do usuário. O Zoom Widget fornece controles para ampliar e reduzir o mapa alternância de navegação alterna entre diferentes modos de navegação, como dois D e três D. A alternância do mapa base permite que os usuários alterem o mapa base, como alternar de uma visualização de satélite para uma visão de ruas Por que isso importa? Esses componentes funcionam junto com a lista de pneus para criar uma experiência de mapa holística e interativa Sistema de design WatoKalcite. Calcite é o sistema de design da UE para criar belos aplicativos web acessíveis Ele inclui componentes de interface de usuário pré-construídos como botões, listas e alternadores Consistência estética com aplicações de Ag gis. Por que isso importa? calcita aprimora a aparência de nosso aplicativo, tornando-o mais profissional e fácil Explicação detalhada do código com comentários. Primeiro passo, configuração de HTML. Lang na tag HTML especifica o idioma como inglês para A metatag garante a codificação adequada para caracteres especiais. E aqui no meta com o nome Viewport, torna a página responsiva em todos os dispositivos tag de título define o título da página que aparece na guia do navegador. No estilo de preenchimento, remove o preenchimento padrão para maximizar o espaço no mapa Aqui, o estilo Magin remove a imagem padrão para um layout limpo Aqui, a altura garante que o mapa tenha a altura total da janela de visualização Aqui, a largura garante que o mapa ocupe toda a largura da janela de visualização E aqui o link carrega o tema leve para mapas Rs GIS, SDK. E aqui o Scriptag adiciona a biblioteca Argus Maps SDK. E no corpo, o conteúdo do mapa será adicionado aqui. Por que isso é importante? As metatags tornam sua página responsiva e compatível com todos os dispositivos essenciais no primeiro mundo móvel de hoje A seção de estilo garante que seu mapa aparência limpa e use todo o espaço disponível. Maximizar a área visual do mapa aumenta o engajamento do usuário Etapa 2, CSS para estilização, explicação detalhada. A lista Kelst e o botão Kelst são componentes do QST, uma biblioteca de interface de usuário projetada para aplicativos SR A personalização de cores garante que seus componentes correspondam ao tema do seu aplicativo, proporcionando uma aparência coesa e profissional Por que usar CSS aqui? Um mapa visualmente atraente garante que os usuários permaneçam engajados por mais tempo A atenção aos detalhes do design cria confiança e profissionalismo Etapa três, integrando o SDK GIS de calcita e arco. Por que integrar essas bibliotecas? O Rc GS SDK nos permite exibir e interagir com mapas Sem isso, não poderíamos criar a magia que almejamos A biblioteca Kast garante que os controles do mapa tenham uma aparência elegante e sejam fáceis de usar Etapa quatro, adicionando componentes de mapas interativos. Detalhamento de componentes no Arc GIS Scene, a base do seu mapa capaz de exibir três cenas d com várias camadas Os usuários verão toda a área do mapa aqui. Faça RJs Zoom. Simples, mas poderoso. Esses controles permitem que os usuários aumentem e diminuam o zoom sem esforço. Três, Arc GIS Navigation Toggle. Eu devo ter. Ele permite que os usuários alternem entre os modos de visualização como dois D e três D. Quatro, lista de camadas do ArcGIS, a estrela do show Esse componente dá aos usuários controle sobre quais camadas são visíveis, aprimorando a interatividade do seu mapa Saída esperada. Depois que o código é executado, um belo mapa em tela cheia aparece com controles intuitivos para ampliar, navegar e alternar camadas O design é moderno, profissional e responsivo em todos os dispositivos Agora, vamos testar o resultado do nosso trabalho e ver o resultado no mapa. Vamos até a página, clique com o botão direito do mouse nela e escolha abrir com fserer. Muito excelente. O mapa apareceu e, a partir daqui, podemos controlar a ocultação e a exibição da camada. Observe comigo o efeito no mapa e como a camada desaparece e aparece Muito excelente. Conclusão. Nesta sessão, aprendemos como configurar um mapa profissional e interativo usando o SDK de mapas GIS Nós nos concentramos no componente da lista de camadas, garantindo que os usuários possam explorar e controlar as camadas do mapa sem esforço Ao combinar o poder do CGIS e da calcita, criamos algo funcional e visualmente atraente Perguntas de avaliação. Primeiro, por que o componente da lista de camadas é crucial em aplicações GIS Segundo, como a integração da calcita melhora a experiência do usuário Quais recursos adicionais podemos adicionar para tornar o mapa ainda mais interativo? Na próxima palestra da nossa próxima sessão, vamos levá-la para o próximo nível Exploraremos o estilo avançado de camadas com renderizadores, onde você aprenderá a personalizar visuais do mapa com base nos atributos dos dados Pense em usar gradientes de cores para mostrar a densidade populacional ou símbolos diferentes para representar pontos de dados exclusivos Mas cuidado, à medida que nos aprofundamos, podemos descobrir camadas ocultas de complexidade que podem mudar tudo o que você pensava que sabia sobre GIS. Fique ligado. 22. Introdução à camada de cena usando o ArcGIS Maps SDK para JavaScript 1: Bem-vindos a todos. Hoje, embarcamos em uma empolgante jornada pelo mundo da visualização geográfica em três D usando camada de cena no SDK do Args Maps Imagine isso. Você é um planejador urbano, encarregado de projetar uma cidade futurista Você precisa visualizar arranha-céus, pontes e até túneis subterrâneos, tudo com impressionantes detalhes em três D. tudo com impressionantes detalhes em três D. Como você dá vida a essa visão? A resposta está na camada de cena, uma ferramenta poderosa que nos permite criar três mapas D interativos e imersivos Mas antes de mergulharmos no código, vamos dedicar um momento para entender por que isso é importante. Pense na quantidade de dados que geramos todos os dias. Coordenadas GPS, imagens de satélite, plantas de construção e Sem ferramentas como o SNayer, todos esses dados permaneceriam planos e estáticos Mas com a camada SN, podemos transformá-la em três modelos D dinâmicos e interativos que contam histórias, resolvem problemas e inspiram inovação. Ao final desta palestra, você não apenas entenderá como a camada de cena funciona, mas também poderá criar seu próprio mapa em três D do zero Então aperte o cinto. Será uma hora cheia de descobertas, criatividade e aprendizado prático. Objetivos de aprendizagem. Antes de prosseguirmos, vamos definir metas claras para a palestra de hoje Aqui está o que pretendemos alcançar. Ao lembrar, relembre os conceitos básicos do SNlayer e seu papel nas aplicações geográficas Segundo, entendendo, entenda como SNLyer se integra aos mapas Rc GIS, o SNLyer se integra aos mapas Rc GIS, SDK para criar três visualizações em D. Três, aplicar código de gravação para criar um mapa de três D e personalizar sua aparência. Quatro, analisando, detalhe o código para entender como cada componente contribui para a saída final. Cinco, avaliando, avaliam as aplicações práticas camada de cena em projetos do mundo real Seis, criando, construa seu próprio projeto ampliando os conceitos aprendidos hoje Esses objetivos nos guiarão enquanto exploramos o fascinante mundo do mapeamento em três D. Plano de aula Uma introdução, explique a importância da camada sN e suas aplicações no mundo real. Segundo, explicação do código, divida o código e explique cada parte em detalhes. Três, exemplos do mundo real. Forneça exemplos do uso da camada de cena em projetos do mundo real. Quatro, resumo e conclusão, recapitule os pontos-chave e avalie a palestra Quatro, introdução à próxima lição. Visualize a próxima lição, adicione bordas a uma camada SN, explicação de tópicos relacionados. Sobre o que é a camada SN. camada SNL é um tipo de camada usada para exibir três dados D, como edifícios e infraestrutura Ele é conhecido por sua capacidade de lidar com grandes quantidades de dados com eficiência. Segundo, o RCGIS mapeia o SDK para JavaScript. Esse SDK fornece ferramentas poderosas para criar aplicativos de mapas interativos Ele suporta muitos recursos, como dois mapas D e três mapas D, várias camadas e personalização completa Três, a importância da visão SN. O SNVew é responsável por renderizar os três mapas D. Ele permite que você controle a câmera, a localização e o ângulo. Vamos começar agora com a aplicação prática e explicar o código do exemplo. Agora, vamos mergulhar no cerne da palestra de hoje, o código Vamos detalhá-lo passo a passo, garantindo que cada linha seja explicada em detalhes. Ao longo do caminho, compartilharei exemplos e analogias do mundo real para manter as coisas envolventes e identificáveis No início, como estamos acostumados no ambiente do Visual Studio, criaremos uma pasta chamada Itracnayer e, em seguida, criaremos dois Um arquivo para instruções HTML, chame-o de camada de cena de introdução, ponto HTML E o outro arquivo para instruções de JavaScript, chame-o introsnayer Em seguida, leremos o arquivo JavaScript de dentro do arquivo HTML. Agora, vamos ao arquivo para escrever o código HTML e vamos seguir as etapas a seguir. Configurando a estrutura HTML escrevendo esse código. Ah, esse código de propósito, essa é a base do nosso aplicativo. Ele configura a estrutura HTML e vincula as bibliotecas necessárias. Explicação detalhada. Aqui, essa tag, Meta Chars igual a UTF oito, garante que caracteres especiais como acentos ou símbolos, sejam exibidos corretamente Imagine tentar exibir o nome de uma cidade como Munken sem a codificação adequada. Não funcionaria. E aqui a tag meta name equal viewport torna a página responsiva Isso garante que, esteja você visualizando o mapa em um desktop, tablet ou telefone, ele se adapte perfeitamente. E o tag dip configura o contêiner View Div para preencher a tela inteira Pense nisso como preparar uma tela para sua obra-prima. Link de etiqueta de cabelo e script de antag. Eles carregam as bibliotecas Rch CSS e JavaScript. Sem eles, não teríamos acesso às ferramentas necessárias para criar nossos três mapas D. Depois disso, escreveremos o código JavaScript no arquivo separado. Como dissemos no início, abriremos o ponto intrasnlayer JSFle. Vamos fazer Primeiro passo, escreva as configurações do mapa escrevendo o seguinte objeto. Ok. Este objeto tem um propósito. Isso cria o mapa base e adiciona dados de elevação para dar uma sensação de três D. Explicação detalhada. O mapa base da propriedade. Considere o valor do vetor cinza escuro. Isso define o plano de fundo do mapa. Por quê? Cinza escuro? Porque oferece uma aparência elegante e moderna que contrasta lindamente com três modelos D. Imagine caminhar por uma cidade à noite. O fundo escuro faz com que as luzes dos edifícios se destaquem. A elevação mundial da propriedade ground, take value adiciona dados de elevação ao mapa. Isso é crucial para criar um terreno realista. Por exemplo, se você estiver visualizando uma região montanhosa, dados de elevação garantem que os picos e vales Etapa dois, configurando a cena, visualização da cena. Esse código para Papos. Isso cria a cena em três D e posiciona a câmera. Explicação detalhada. O contêiner de propriedades se refere ao VDV, vincula as três cenas D ao elemento HTML que preparamos anteriormente Pense nisso como montar uma câmera em um tripé. A posição da câmera da propriedade define a localização da câmera. As coordenadas 74,03 3.840,69 13 nos colocam perto da cidade de Nova York, enquanto o sete sobre sete representa a altitude em metros representa Imagine estar em uma colina com vista para Manhattan. A propriedade tilt assume o valor 81 desse valor para ajustar o ângulo da câmera Uma inclinação de 81 graus nos dá uma visão panorâmica, perfeita para examinar a paisagem da cidade O título da propriedade, use valor 50 para girar a câmera horizontalmente Isso nos permite encarar direções diferentes, assim como virar a cabeça para olhar ao redor. Etapa três, adicionando camada de cena. Esse código para Papas. Isso adiciona uma camada de três D ao mapa, permitindo visualizar dados complexos Explicação detalhada. O ID de ponto do item do portal de propriedades se refere a um conjunto de dados pré-existente de três D publicado no RGS online Nesse caso, é um conjunto de dados de edifícios na cidade de Nova York Pense nisso como importar uma planta para a cidade. O pop-up da propriedade permite que o valor caia para desabilitar as janelas pop-up Embora os pop-ups sejam úteis para exibir informações, desativá-los mantém o foco na visualização em três D. Etapa quatro, personalizando o símbolo. Este código para Paps. Isso personaliza a aparência dos três modelos D. Explicação detalhada. O tipo de propriedade usa o valor mesh three D para especificar que estamos trabalhando com três modelos de malha D. Uma malha é como um esqueleto digital que define a forma de um objeto A propriedade material, cor muda a cor dos modelos. Os valores RGB de duas ondulações 424-07-1304 nos dão uma cor verde amarela brilhante, fazendo com que os edifícios se destaquem contra nos dão uma cor verde amarela brilhante o fundo escuro . A propriedade render aplica o símbolo à camada inteira. Pense nisso como pintar todos os edifícios da cidade com a mesma cor. Agora terminamos de escrever o código da mesma forma que escrevemos o código para o código HTML em seu próprio arquivo. E também escrevemos o arquivo JavaScript, e não se esqueça de chamar o arquivo JavaScript na seção do corpo aqui no arquivo HTML . Vamos agora testar nosso trabalho executando a página. Então, vamos para a página HTML na pasta. Em seguida, clique com o botão direito do mouse e escolha Abrir com servidor. E espere um pouco até o navegador iniciar. Uau. A página apareceu conforme o esperado e os edifícios apareceram em três dimensões. Muito excelente Agora podemos aumentar e diminuir o zoom. E também podemos controlar o mapa a partir dos ciclos de mudança de direção dessas ferramentas que aparecem à esquerda do mapa Muito excelente. Nosso trabalho está correto. Parabéns para nós. Aplicativos do mundo real. Para tornar isso mais compreensível, vamos explorar algumas aplicações reais de layout de cena Hs, planejamento urbano. Cidades como Cingapura usam três mapas D para simular o fluxo de tráfego, planejar a infraestrutura e testar estratégias de resposta a desastres Segundo, monitoramento ambiental. Os cientistas usam três mapas D para rastrear o desmatamento, monitorar o recuo glacial e estudar Três, desenvolvimento imobiliário. Os desenvolvedores usam três visualizações em D para mostrar propriedades e atrair investidores Imagine poder percorrer um modelo virtual da casa dos seus sonhos antes mesmo de ela ser construída. Esse é o poder das camadas SIN, resumo e conclusão. Hoje, mergulhamos profundamente na camada SIN e aprendemos como criar um impressionante mapa em três D usando SDK do RGS Maps para JavaScript Desde a configuração da estrutura HTML até a personalização da aparência de três modelos em D, abordamos cada etapa em detalhes Também abordamos as principais conclusões. A camada de cena é uma ferramenta poderosa para visualizar três dados geográficos Dois mapas RGIS, o SDK fornece tudo o que você precisa para criar três mapas D interativos Três, opções de personalização, como símbolos e cores, permitem que você adapte o mapa às suas Avaliação. Vamos tirar um momento para refletir. Você achou as explicações claras e envolventes? Há alguma área em que você gostaria de mais esclarecimentos? Seu feedback é inestimável à medida que continuamos refinando essas palestras Introdução à próxima lição. Em nossa próxima palestra, exploraremos como adicionar dados de bordas a uma camada de cena Isso nos permitirá integrar camadas adicionais de informações, como densidade populacional ou dados ambientais, em nossos três mapas D. Imagine sobrepor padrões de tráfego ao modelo da sua cidade. Quão legal é isso? Fique ligado e prepare-se para levar suas três habilidades de mapeamento D para o próximo nível Obrigado por se juntar a mim nessa jornada. Espero que você tenha achado isso informativo e inspirador até a próxima vez, Happy Mapping 23. Adicionando bordas a uma camada de cena usando o ArcGIS Maps SDK para JavaScript: Bem-vindos, meus queridos amigos, a esta lição na qual discutiremos como controlar bordas e mudar sua forma. No mundo moderno da tecnologia, três mapas D se tornaram uma ferramenta poderosa para entender e analisar melhor os dados espaciais. Imagine estar no meio de São Francisco olhando para arranha-céus imponentes e querendo entender como a distância do transporte público pode afetar os valores das transporte público pode afetar propriedades Usando tecnologias como RGIS Maps, SDK para JavaScript, podemos transformar essa visão em realidade criando três mapas D interativos Nesta palestra, aprenderemos como adicionar arestas a uma camada de três D. Camada de cena usando a API Rgs para Javascript. Começaremos com uma introdução envolvente sobre a importância da representação visual dos dados em três mapas D. Em seguida, passe para uma explicação detalhada do código que nos permitirá fazer isso. Usaremos exemplos do mundo real , como analisar o tempo necessário para chegar ao transporte público em São Francisco e como isso pode impactar o planejamento urbano. Objetivos de aprendizagem. Lembrando, defina a camada de cena e seu papel na representação de dados triplos Lembre-se dos conceitos básicos da API Argus para JavaScript. Compreendendo Explique como o renderizador funciona na API do Ag gi. Entenda a diferença entre bordas sólidas e bordas de esboço Aplicando. Aplique o código para criar três mapas em D com bordas personalizadas. Use variáveis visuais para colorir edifícios com base em dados. Analisando. Analise o impacto de diferentes bordas na representação visual dos dados. Compare bordas sólidas e bordas de esboço. Avaliando, avalie a eficácia da representação visual de dados usando bordas Discuta como melhorar o código para obter melhores resultados. Criação de novos mapas em três D usando técnicas similares. Desenvolva aplicativos interativos com base na camada de cena. Tópicos relacionados à palestra que devemos entender bem. O que é o SDK do RGIS Maps para JavaScript? Definição, o RGIS Maps SDK para JavaScript é uma poderosa interface de programação de aplicativos de API projetada para criar mapeamento interativos baseados na web Ele permite que os desenvolvedores trabalhem com dados geográficos e informações especiais em dois formatos D e três D. Características principais. A cena da Web representa três cenas que podem ser carregadas no navegador. SceneView lida com a renderização das três cenas D em uma página da Camada de cena, uma camada especializada para exibir dados TD, como edifícios ou terrenos Renderizadores usados para personalizar a forma como os dados são exibidos, cores, bordas e iluminação Por que usá-lo para criar aplicativos de mapas interativos e dinâmicos para analisar visualmente dados geográficos exibir três dados D de uma forma envolvente e fácil de usar. Cenas da web à vista, entendendo a diferença. A cena da Web representa uma cena em três D carregada do ArcGIS Consiste em várias camadas contendo dados geográficos. Definido usando um ID exclusivo hospedado no ARGs online. Visualização SN. Responsável por renderizar as três cenas D dentro uma página da web, vincula a cena da web a um elemento HTML Exemplo, div com ID view DIV. Fornece ferramentas interativas, como zoom, panorâmica e rotação Relação entre eles. O Webscen contém os dados e as camadas. O SN View exibe esses dados na interface do usuário. Camada vista, o que é e como funciona? Definição, uma camada SEN é uma camada especializada usada para exibir dados do tratado, como edifícios, terrenos ou redes Essas camadas são normalmente armazenadas no ArcGIS online e carregadas utilizando uma ID exclusiva Tipos de dados que podem ser exibidos. Edifícios, como estruturas em uma cidade específica, terrenos, como montanhas ou paisagens Redes, como estradas, oleodutos ou linhas de serviços públicos. Como isso funciona? Os dados são carregados do RGS online usando o ID de ponto do item do portal A aparência dos dados pode ser personalizada usando o renderizador. Renderizadores, controlando como os dados são exibidos. O que é um renderizador? Um renderizador é um objeto que define como os dados são representados visualmente no mapa Ele permite que você personalize cores, bordas e iluminação, tipos de renderizadores. O renderizador simples aplica o mesmo estilo a todos os recursos. O renderizador de valor exclusivo aplica estilos diferentes com base em valores de atributos específicos renderizador de tijolos de classe aplica estilos com base em faixas de valores São as principais propriedades dos renderizadores. O símbolo define a forma ou a cor base dos recursos. As bordas controlam a aparência das bordas, esboço sólido ou da ausência de bordas O material define a cor da superfície base. Bordas personalizadas, por que e como. Por que precisamos de bordas personalizadas para melhorar a clareza de três elementos D, tornar o mapa visualmente atraente ajudar a distinguir entre elementos diferentes Tipos de bordas, bordas sólidas, linhas simples e sólidas ao redor das feições. Esboce bordas, desenhadas à mão como bordas para uma aparência mais artística Sem bordas, sem contornos ao redor dos recursos. Como adicionar bordas personalizadas. Use a propriedade de bordas no código para definir o tipo, a cor e a espessura da borda. Botões de rádio, controle de borda interativo. O que são botões de rádio? Os botões de rádio são controles de seleção que permitem aos usuários alternar entre as disponíveis. Como usá-los. Cada botão corresponde a um estilo de borda específico. Exemplo, bordas sólidas, bordas de esboço, sem bordas. Quando um botão é selecionado, as bordas nas três cenas D são atualizadas dinamicamente Os benefícios aprimoram a experiência do usuário, fornecem controle dinâmico sobre a visualização de dados e a otimização do desempenho Nível de carga detalhada. carga D é uma técnica que reduz o nível de detalhe exibido com base na distância da câmera. Ajuda a melhorar o desempenho ao trabalhar com grandes conjuntos de dados. Pop-ups. pop-ups são pequenas janelas que exibem informações adicionais quando um recurso é clicado Pode ser usado para mostrar detalhes como nomes de edifícios ou tempos de caminhada até paradas de trânsito. Indicadores de carregamento. Os indicadores de carregamento informam aos usuários que o aplicativo está funcionando enquanto os dados estão sendo carregados. Melhora a experiência do usuário e reduz a frustração. Aplicativos do mundo real. Planejamento urbano. Use o aplicativo para exibir os layouts da cidade e analisar desenvolvimento urbano. Gestão de desastres. Analise as áreas afetadas após desastres naturais. Imóveis. Exibir propriedades disponíveis em uma área específica. Plano de aula, introdução à camada de cena e sua importância na representação visual de dados Explicação passo a passo do código. Carregando bibliotecas essenciais, criando uma cena na web e uma visualização de cena. Adicionando camada de cena com um renderizador personalizado. Usando variáveis visuais para colorir edifícios. Adicionar uma legenda para exibir informações. Controlar bordas usando botões de rádio, testando e experimentando a página Resumo e avaliação da palestra. Teaser para a próxima palestra, filtro de camada de cena e consulta Agora, chegamos à aplicação prática e, como estamos acostumados o ambiente de código do Visual Studio, criaremos uma pasta chamada adicionando bordas à camada de cena. Em seguida, criaremos dois arquivos, um para o código HTML, chamado de EgToSnLayer E outro arquivo no qual colocaremos o código JavaScript, chame-o de EggestOsnLayer, dot JS Em seguida, leremos o código JavaScript do arquivo HTML, ou seja, no arquivo HTML, nos referiremos ao arquivo JavaScript. Então, agora vamos abrir o HTMofle e começar com o seguinte Crie a estrutura básica da página HTML. Aqui estamos carregando bibliotecas essenciais. Tipo de documento, HTML declara o documento como HTML cinco. HTML N, o elemento raiz com o idioma definido como inglês. O Meta tem oito UTF e garante suporte para todos os caracteres, incluindo árabe e inglês O meta-nome e a janela de visualização tornam a página responsiva em todos os dispositivos Título define o título da guia do navegador. E nós fazemos esse estilo. Explicação. TML, body View Deep garante que o mapa ocupe a tela inteira, 100% de altura e largura Aqui, carregamos a biblioteca do ArcGIS API for JavaScript através de um link CDN Essa biblioteca fornece todas as ferramentas necessárias para criar mapas interativos. Essa linha carrega o SDK do ArcIsMPS para JavaScript versão 431 Sem essa biblioteca, nenhuma das funcionalidades de mapeamento funcionará Agora iremos para o arquivo JavaScript e seguiremos as instruções a seguir. Inicialize as três cenas D, cena Web e SceneView Exigir módulos de carga da Biblioteca AGS. A cena da Web representa uma cena pré-construída de três D hospedada no RGS online carregada por meio de seu ID exclusivo O SceneView manipula a renderização da cena dentro de um elemento HTML, Div com I view Div Crie a camada de cena da camada de edifícios. Explicação. Camada SN, uma camada especializada para exibir três edifícios de exemplo de dados em D. Portalm dot ID, o identificador exclusivo da camada no ACS online Variáveis visuais usadas para colorir edifícios com base em dados como o tempo de caminhada até o transporte público. Projete a renderização. Aqui, você deve fazer as configurações do renderizador antes de definir a função de camada sN, ou seja, antes de chamá-la a partir dessa função Explicação. As bordas sólidas definem propriedades, a cor, a espessura e o tipo da borda. O renderizador controla como os dados são exibidos, cores, bordas, iluminação O material define a cor da superfície básica dos edifícios. Adicione opções de controle de borda, botões de rádio. Agora vamos voltar para a página HTML e adicionar o código a seguir para adicionar o botão de rádio. tipo de entrada, como botões de rádio permite que os usuários alternem entre os estilos de borda A verificação torna as bordas sólidas a seleção padrão. Também faremos arranjos especiais para que os controles tenham uma aparência estética. Breve explicação do estilo CSS. Uma posição absoluta. Posiciona o elemento de controles we eyed em relação ao ancestral de posição mais próximo ou à janela de visualização, se não existir nenhuma Dois dos dez melhores px definem uma distância de dez pixels da borda superior da tela. Três dez picos corretos definem uma distância de dez pixels da borda direita da tela, movendo o elemento para o canto superior direito Quatro, preenchimento, 12 picos adicionam espaçamento interno ao redor do conteúdo dentro do elemento de controles de ID de largura Cinco, a cor de fundo branca define a cor de fundo do elemento de controle Width ED como branca para melhor visibilidade. Six box shadow, 02 px, quatro px, RGBSoc 00.2, adiciona um efeito de sombra sutil para destacar os elementos Sete, raio de borda de quatro px: arredonda os cantos do elemento de controle de largura e altura para uma aparência mais limpa Oito bordas, uma escolha um sólido com EDCC adiciona uma borda cinza clara ao redor do elemento para melhor definição Nove, índice Z dez, garante que o elemento Wi eyed controls apareça acima de outros elementos na página Agora, vamos voltar ao arquivo JavaScript e completar o código criando uma legenda. Adicionar uma legenda para exibir informações. A legenda ajuda os usuários a interpretar as cores usadas no mapa, controlando as bordas usando botões de rádio. Aqui, usamos botões de rádio para controlar o tipo de bordas exibidas, sólidas, esboçadas ou sem bordas Expanda a explicação, dicas para otimizar o código. Adicione um indicador de carregamento neste código aqui. Melhore o desempenho com o nível de código de cabelo detalhado do LOD. Em pop-ups de informações interativas. Aqui, código. Ok, agora, depois de escrever o arquivo JavaScript, não se esqueça de se referir ao arquivo JavaScript ao entrar na página de código HTML. Tenha cuidado. Isso é muito importante. Resultado esperado ao executar a página. Quando a página for executada, um mapa em três D de São Francisco aparecerá com edifícios coloridos com base no tempo necessário para chegar ao transporte público. O usuário pode controlar o tipo de bordas exibidas usando os botões no canto superior direito. Agora, vamos executar a página e ver o resultado do que fizemos. Vá para a página da camada Edge to Scene. Em seguida, clique com o botão direito do mouse e escolha Abrir com servidor. Esperamos um pouco até que o navegador abra. Nossa, muito bom. O mapa apareceu em três dimensões e testamos o botão de rádio para ver o efeito das bordas. Excelente, diz IRs. Conclusão. Nesta palestra, aprendemos como criar uma cena em três D usando a API Ages Personalize bordas para uma camada de edifícios. Adicione controles interativos para os usuários. Otimize o código para melhorar o desempenho. Avalie e estas , na próxima palestra, questões de avaliação Primeiro, qual é a diferença entre a cena da web e a visualização da cena? Segundo, como você carrega uma camada de cena, camada de edifícios. Três, quais tipos de bordas podem ser aplicadas aos edifícios? Quatro, como você pode melhorar o desempenho de uma cena em três D? Cinco, qual é o papel dos pop-ups no aplicativo? Próxima palestra. Na próxima palestra, exploraremos como filtrar dados em uma camada de cena para exibir edifícios que atendem a critérios específicos Exemplo, edifícios com mais de 50 anos. Também usaremos consultas para extrair informações específicas do conjunto de dados Prepare-se para desafios práticos. Espero que minha explicação seja clara e compreensível. Nos vemos na próxima palestra. Adeus 24. Filtro de camada de cena e consulta — parte 1: Bem-vindo a esta palestra aprofundada sobre filtro e consulta de camadas de cena Antes de nos aprofundarmos nos detalhes técnicos, vamos começar com algumas perguntas instigantes Nesta palestra, que será dividida em várias partes, discutiremos os detalhes Essa palestra é muito importante. Ele contém muitos conceitos básicos que podem ser usados para criar exemplos da vida real semelhantes à ideia. Imagine que você é arquiteto ou urbanista e precisa analisar a distribuição de escritórios em um edifício específico Como você pode filtrar uma cena em três D para exibir somente um tipo específico de escritório? Como podemos filtrar e visualizar partes específicas de um modelo de três D com base em critérios definidos Como extraímos informações estatísticas de três dados especiais em D? Hoje, exploraremos como controlar camadas de cena, aplicar filtros e consultar informações dinamicamente usando o SDK do rgySMPS Vamos nos aprofundar no código, mas não se preocupe. Vamos detalhar cada parte com exemplos claros do mundo real. Objetivos de aprendizagem. Nesta palestra, para garantir o aprendizado progressivo lembre-se de compreender termos-chave como camada de cena, expressão de definição, recursos de consulta e visualização de cena Segundo, entendendo, aprenda a usar a expressão de definição para filtrar as camadas da cena. Três, aplicando, implemente um exemplo de código para consultar e filtrar camadas de cena dinamicamente Quatro, analisando, examinando os resultados da aplicação de filtros e entendendo seu impacto no desempenho. Cinco, avaliar, avaliar diferentes técnicas de consulta e escolher a abordagem mais eficiente Seis, criar e desenvolver soluções personalizadas para filtrar e consultar três dados D dinamicamente Conceitos-chave abordados nesta palestra. Camada de cena, uma camada de três D representando edifícios e objetos em uma cena da web. Cena da Web, uma cena em três D contendo várias camadas de dados. Visualização de cena, o componente de visualização usado para exibir e interagir com a cena da web. Expressão de definição, uma habilidade como expressão de filtro aplicada às camadas. Recursos de consulta, uma função para recuperar dados específicos de camadas Lista de legendas e camadas, widgets de interface de usuário para aprimorar a experiência do usuário na filtragem e Plano de ensino estruturado. Detalhamento da duração da palestra. Introdução às três cenas D e sua importância. Explicação do código base para configurar a cena em três D. Usando a expressão de definição para filtrar dados dinamicamente. Consultando estatísticas com recursos de consulta e analisando resultados Exercícios práticos e perguntas de avaliação. Conclusão e um tsa para a próxima palestra. Explicação passo a passo do código. Aqui, como estamos acostumados, criaremos uma pasta chamada setting up scene exibindo-a. Na pasta, criaremos um arquivo chamado SnayaFlaQuery, pontos HTML para o código HTML E outro arquivo chamado SnlayerFilter query dot é para Chamaremos esse arquivo a partir do arquivo HTML. Agora, vamos abrir o arquivo HML e colocar o código a seguir. Cada página da web começa com um esqueleto HTML básico, que inclui a declaração do tipo de documento, o cabeçalho e o corpo Explicação. Tipo de documento HTML. Definir o HTML declara que este é um documento HTML cinco HTML. Longo e define o idioma dos documentos como inglês. Cabeça. Contém metadados, como codificação de caracteres e configurações da janela de visualização O corpo contém o conteúdo da nossa página da web. Etapa dois, incluindo Acis CSS. Para garantir que os componentes do AgiSui sejam exibidos corretamente, precisamos importar o CSS do Agis Nós escrevemos esse código. Explicação. Isso importa os estilos args Maps EDC, que são essenciais para widgets como legenda, lista de camadas Etapa três, estilizando a página. Agora, vamos definir alguns estilos CSS para estruturar nosso layout corretamente. Explicação. HTML, corpo. Defina a página para ocupar toda a altura e largura da tela. View DIV define o contêiner div para as três cenas D, garantindo que ele preencha a Options Div estiliza uma caixa de interface de usuário flutuante na qual os usuários podem filtrar pisos Etapa quatro, adicionando o contêiner para as três cenas D. Em seguida, criamos um contêiner div onde a visualização argocin será Explicação. Identificação de Dave, vista, Dave Este TD realizará nossa cena em três D. Etapa 5: adicionar uma seção de interface do usuário para filtrar fluxos. Para permitir a interação do usuário, adicionamos um menu suspenso para selecionar fluxos. Explicação. Dev ID é igual a opções Dev. Desenvolva um painel de interface de usuário flutuante que aparecerá sobre o mapa. Filtre o prédio por andar. Um rótulo para o menu suspenso. Selecionar ID é igual à seleção de piso. Um menu suspenso para selecionar andares. Cada valor de opção corresponde a uma condição de filtro semelhante a S quel que será aplicada posteriormente às três cenas D. Exemplo do mundo real. Imagine que você é um gerente de prédio querendo analisar a distribuição de espaços de escritório por andar. Essa lista suspensa permite que você se concentre em níveis específicos nos três modelos D. Etapa seis, importando a API JavaScript da Agus. Finalmente, precisamos carregar o GIS Maps SDK para JavaScript, o que nos permitirá adicionar e interagir com uma cena da web em três D. Então, vamos escrever esse código. Explicação. Carrega o Archs Maps SDK para JavaScript, o que nos permite criar três cenas web em D adicionar componentes de interface de usuário interativos Aplique consultas e filtros. Depois de criarmos o código HTML, começamos a escrever o código JavaScript. Portanto, abriremos o arquivo JavaScript e seguiremos as etapas a seguir para escrever o código nele. A primeira etapa é carregar uma cena em três D do ArcGIS online e exibi-la no navegador Observe que definimos a cena da web e a visualização da cena. Portanto, suas classes devem ser chamadas na parte superior da página em require e definidas dentro da função. Em ordem, significa que qualquer definição de um objeto deve ser chamada de dentro, necessária e definida na parte superior da página. Análise de código. Requer e função carrega os módulos SDK de mapas A gis necessários Faça uma nova cena na web. Carrega uma cena web de três D usando uma ID de ponto de item de portal exclusiva. Três, nova visualização de cena, cria uma visualização de cena para exibir as três cenas D dentro da visualização do contêiner div Div Garfo. A iluminação de sombras diretas ativada é igualmente verdadeira Permite sombras diretas para melhorar o realismo visual. Exemplo do mundo real. Imagine que você é um planejador urbano, analisando um distrito específico, você precisaria carregar um modelo em três D da área e exibi-lo de forma eficiente desta forma Como dissemos, devemos chamar o arquivo JavaScript a partir do arquivo HTML. Então, vamos voltar ao arquivo HTML e escrever esse código para chamar o arquivo JavaScript antes do final do log da tag body. Depois disso, se formos executar a página clicando em Abrir com o Live Server, você notará aqui que a página exibirá a cena e contém vários edifícios. Paramos aqui nesta parte da palestra e, na próxima palestra, discutiremos como consultar informações dessas camadas e como extrair dados delas por meio do navegador Espere por nós na próxima palestra. Tchau 25. Filtro de camada de cena e consulta — parte 2: Bem-vindos, meus queridos amigos, à segunda parte da palestra. Vamos continuar de onde paramos. Se agora fizermos uma consulta simples no próprio navegador para perguntar sobre as informações da cena da web, vamos pressionar F 12 para abrir o Dev Tools E escreva na guia do console, essa cena da web. Percebemos que ele não reconheceu o nome. Qual é o motivo? O motivo é que precisamos escrever o código Javascript para que ele reconheça as informações da cena da web no navegador. Então, voltaremos ao código JavaScript e escreveremos o código a seguir. Então economizamos agora. Vamos voltar ao navegador e escrever o nome da cena da web. Percebemos que ele é reconhecido. Vamos pressionar Enter no teclado e expandir essa seta. Percebemos que ele consiste em muitas informações. O que importa para nós são as camadas. Percebemos que a cena da web consiste em mais de uma camada. Podemos obter o número de camadas nessa cena escrevendo o código a seguir. Teias, camadas de pontos, comprimento do ponto. Além disso, a camada consiste em mais de um item. E cada item tem um nome que representa o nome da camada. Então, agora, se quisermos obter o nome de cada camada, faremos um loop em cada camada para extrair o nome de cada camada. Podemos fazer isso escrevendo o código a seguir para obter os nomes das camadas. Vamos obter os nomes das camadas, como você pode ver no navegador, e cada camada conterá mais de um campo. Para obter os nomes desses campos, faremos um loop em cada campo para obter os nomes dos campos. Então, se escrevermos esse código no navegador, obteremos o nome das camadas e, abaixo dele, os nomes dos campos. Depois disso, queremos nos aprofundar na exibição informações da camada aplicando um código de programação que exibe as camadas e as informações nelas, como os campos e os símbolos de construção em cada campo , em que todos os que contêm a construção são diferentes para cada camada, escrevendo o código a seguir no navegador Neste código. Exploraremos a relação entre os campos de camadas e o código de construção, como Q, em uma cena da web em três D criada usando o SDK do RGIS Maps para JavaScript Você aprenderá a analisar a estrutura de dados nos bastidores, inspecionar cada camada e extrair valores distintos dos campos Essa é uma etapa essencial antes de aplicar filtros ou criar recursos avançados como listas suspensas ou resumos Usaremos um trecho de código prático e fácil de seguir para deixar tudo mais claro Conceitos-chave simplificados. Primeiro, o que são camadas? As camadas são partes diferentes da cena em três D. Por exemplo, o espaço interior representa salas, paredes, paredes estruturais, características da porta. Estrutura de arame de construção, estrutura externa do edifício. Cada camada contém seu próprio conjunto de dados. Dois, o que são campos? Os campos são como colunas em uma tabela de banco de dados, e cada feição na camada tem atributos armazenados nesses campos. Exemplo, prédio Q, andar um, tipo de espaço, status executivo de escritório disponível três. Qual é o valor Q? Q é um identificador de construção armazenado em campos como prédio ou edifício Q. Ele nos permite filtrar e exibir recursos que pertencem somente ao edifício Q. Quando escrevemos, construir é igual a Q. Significa mostrar somente recursos do prédio Q. O que o código faz? Aqui está uma explicação passo a passo dessa função. A função assíncrona explora campos e valores. Define uma função assíncrona, para que possamos usar um peso para operações assíncronas, como carregar Para a camada Cons de itens pontilhados da camada Cons, percorre todas as camadas da cena da web e garante que elas estejam totalmente carregadas antes de trabalharmos grupo de console preenche o título do ponto da camada inicia um grupo de console nas ferramentas de desenvolvedor do navegador rotulado com o título das camadas Percorre cada atributo de campo na camada atual e armazena o nome Esse bloco triplo executa uma consulta para obter somente os valores distintos nesse campo específico Explicação, onde um é igual a um. Pegue tudo. Sem filtro. Retorne valores distintos, mas verdadeiros, mostre somente valores exclusivos. Geometria de retorno falsa. Ignore a geometria para obter desempenho. E esse código extrai os valores e remove duplicatas usando set Registra o nome do campo e visualiza os dez primeiros valores exclusivos Se o campo não puder ser consultado, por exemplo, privado ou campo do sistema, ele registrará um aviso Finaliza o grupo de console atual e passa para a próxima camada. Por que esse código é útil? Essa função ajuda você. Descubra todos os campos disponíveis em cada camada. Entenda os valores distintos como todos os nomes de edifícios, andares ou tipos de quartos. Prepare-se para filtrar listas suspensas e resumos. É como explorar o DNA da sua cena na web antes de criar qualquer funcionalidade avançada. Agora, quando você executar esse código, o resultado aparecerá no navegador. Vou explicar isso em detalhes. Campos na camada dos. Isso significa que a função começou a analisar os atributos dentro da camada de portas e imprimiu os valores distintos e exclusivos encontrados em cada uma. Vamos examinar cada campo. Campo objetado. Exemplo de 2000 valores exclusivos, um, dois, três a dez. Normalmente, esse é o ID exclusivo gerado pelo sistema para cada recurso. Campo, chão. Valores exclusivos RA 231 indicam que eles existem em três andares Tipo de linha de campo. porta de valor exclusiva confirma que todas as feições nessa camada são do tipo D. Base de campo. Valores únicos, 05,17, nulo nove pontos x cinco, 8,5, 4,25. Representa a elevação base da porta em metros. Nulo significa que o valor está ausente ou não foi registrado para alguns recursos campo alto, somente o valor nulo indica que dados altos não foram inseridos para nenhuma porta nesse conjunto Última atualização do campo e último editor. Usado para armazenar metadados sobre quem editou o recurso pela última vez e quando Exemplo, o último editor é igual, exceto três ou nulo, não disponível. Mosca de campo. Valores de exemplo, OA três S um, H dois, C um representam diferentes identificadores de piso Cada andar tem um código como um, OA dois, etc Chave de construção de campo. Valores de exemplo, O OA, Q. Isso é muito importante O campo da chave do prédio nos diz a qual prédio o cachorro pertence. O valor Q significa que esse recurso pertence à construção Q, que usamos em nosso filtro. Buildini é igual a Q. Os valores do campo Verto, três, um, dois, indicam a ordem vertical dos fluxos ou dos níveis das portas Notas adicionais, nulas, significam que os dados estão ausentes ou estão indefinidos Depois das portas, o roteiro também analisou paredes, espaço interior, estrutura de arame do edifício. Essa é apenas uma prévia da quantidade de dados armazenados em cada camada, útil para criar filtros, resumos e muito mais Paramos aqui e continuamos trabalhando na próxima palestra. Temos vários conceitos que devemos entender bem. encontraremos com você na próxima palestra. Adeus 26. Filtro de camada de cena e consulta — parte 3: Bem-vindos, meus queridos amigos , às três partes da palestra. Vamos continuar de onde paramos na filtragem de dados usando a expressão de definição Agora, vamos filtrar a cena para exibir somente um edifício específico. Na aula anterior, aprendemos sobre a relação entre camadas, campos e edifícios, e podemos concluir o seguinte O que é esse código e como ele está relacionado aos dados anteriores? A partir dos resultados anteriores da função explorar campos e valores, descobrimos que a camada de wireframe de construção usa o ID de construção de campo A camada de espaço de introdução usa a construção do campo. As camadas de paredes e portas usam a chave de construção do campo. Cada camada identifica edifícios com um nome de campo diferente Agora que implementamos algum código no navegador, aprendemos a analisar o código e a consultar o navegador, vamos passar para o aplicativo Visual Studio para adicionar código para consultar, filtrar e exibir dados detalhados para interagir com Vamos começar a escrever essa consulta. Por que esse objeto, ele é criado para armazenar uma expressão de filtro personalizada para cada camada, pois cada uma usa um campo diferente para referenciar o edifício. Dessa forma, podemos garantir que estamos filtrando, criando apenas Q corretamente para cada camada individual Quando esse objeto é usado? É aplicado durante essa lógica. Agora, vamos codificar para filtrar todas as camadas na cena da web para conter apenas a construção Q. Isso significa que, assim que a cena da web é carregada, percorremos todas as camadas Para cada camada, definimos uma expressão de definição que filtra os dados para mostrar somente as características da construção Q. A expressão é selecionada do objeto de consulta do edifício com base no título das camadas Agora vamos decodificar para pré-carregar os campos para filtragem. Webs dotlayersdt forge. Percorre todas as camadas da cena. Se o título do ponto da camada não for igual ao wireframe do edifício, ignora a camada do wireframe do edifício porque ela não Os campos externos de pontos da camada são iguais Define o piso do campo a ser pré-carregado para o resto das Exemplo do mundo real, a camada de espaço interior contém dados do escritório e usa o campo do piso, então precisamos que ela esteja disponível para filtragem A camada de estrutura de arame do edifício não usa piso, então a excluímos para evitar erros O objetivo final é preparar todas as camadas relevantes com o campo do piso com antecedência para que possamos filtrar os dados por andar. Consulte os resultados específicos do piso. Evite erros quando um campo não existe nas camadas específicas. Análise de código. ponto N da Websen garante que o código seja executado somente depois que a cena estiver totalmente carregada Const building query, armazena as condições de filtragem para cada camada Websenta pontos para cada camada. Itera por todas as camadas e aplica expressão de definição. Exemplo do mundo real. Como arquiteto, talvez você precise se concentrar em um edifício específico por vez. Usando a expressão de definição, você pode filtrar o conjunto de dados para exibir somente o que é relevante Três, consultando estatísticas, usando recursos de consulta, então vamos escrever esse código Depois de filtrar os dados, vamos recuperar o número de espaços de escritório por tipo Nós escrevemos esse código. Essa linha pesquisa todas as camadas na cena da web e encontra aquela intitulada espaço interior. Em seguida, o armazena em uma variável chamada camada Office. Essa camada será usada posteriormente para consultar ou filtrar somente espaços de escritório. Agora, o conjunto de dados exibe vários tipos de escritórios, mas abaixo estão os que queremos exibir Essa variável contém uma lista dos tipos de escritório com os quais queremos trabalhar especificamente ou exibir em nosso painel. Isso nos ajuda a filtrar, contar ou rotular apenas os tipos de escritório relevantes na cena. Resumo. A camada de escritório se refere às três camadas D que contêm recursos de espaço de escritório. Tipos de escritório é uma lista de categorias de escritórios nas quais estamos interessados para fins de filtragem, contagem e exibição. Agora, criamos outra função chamada tipos de escritório de exibição. Essa função calcula quantos tipos de escritórios são exibidos atualmente e os exibe na legenda Em outras palavras, a função de exibição de tipos de escritórios conta quantos tipos de escritórios estão atualmente visíveis no mapa e, em seguida, mostra essas contagens na legenda, como um resumo ao vivo. Agora, vamos criar a função para exibir os tipos de escritório. Isso cria uma consulta na camada do escritório para retornar apenas o exemplo de campo do tipo de espaço , sala de conferência executiva. Isso garante que obtenhamos apenas os dados de que precisamos. Vamos escrever o código para consultar a camada de escritório para calcular quantos escritórios existem de cada tipo. Isso executa a consulta e aguarda a resposta, que será uma lista de salas E esse contador de tipos de código contador de tipos contará cada tipo de escritório conhecido como sala de conferência executiva, etc Outros contadores contarão todos os tipos de escritórios desconhecidos ou inesperados. E para contar os tipos de todos os recursos retornados da consulta, escreveremos o código. Analisamos todos os resultados, quartos e obtemos seu tipo a partir do tipo de espaço. E esse limite de código com condição. Se o tipo já foi contado, nós o incrementamos. Se for a primeira vez que vemos esse tipo, começamos com um, então escreveremos esse código. Se o tipo de quarto não estiver na lista oficial de seus tipos, nós o contaremos como outro. Para definir os resultados na legenda, precisamos modificar os rótulos no renderizador, então escreveremos esse código Clone o renderizador existente para que possamos modificá-lo sem afetar diretamente o original Então, para definir os resultados na legenda, precisamos modificar os rótulos no renderizador com esse código Atualize os rótulos das legendas de cada tipo de quarto conhecido e mostre quantos deles existem com o comando Write this code. Além disso, atualize a etiqueta para outros tipos, qualquer coisa fora da matriz de tipos de escritório. Finalmente, aplique o novo renderizador na camada para atualizar a legenda do mapa Chame o método para exibir as contagens de cada tipo de escritório na legenda. Chame a função para aplicar tudo. Isso executa toda a lógica acima, conta as salas e atualiza a legenda Análise de código. Criar consulta, cria um objeto de consulta para recuperar atributos específicos consulta de que os campos externos são mesmo tipo de espaço especifica qual campo recuperar, 27. Filtro de camada de cena e consulta — parte 4: consulta apresenta a consulta e , em seguida, todos os resultados, executa a consulta e processa os dados de retorno Exemplo do mundo real. Esse método pode ser usado pelos gerentes de instalações para contar os tipos de escritórios e otimizar a utilização do espaço Para sistema interativo de filtragem de piso. Agora, vamos permitir que os usuários selecionem fluxos dinamicamente. Agora saberemos que a função show floor é acionada quando um usuário seleciona um andar no menu suspenso Seu trabalho é filtrar todas as camadas , exceto a estrutura de arame, para exibir somente os dados relacionados ao piso selecionado no edifício selecionado. Então, escreveremos a função chamada show floor. Essa linha captura o valor selecionado no exemplo de valor suspenso O piso é igual a. Isso será usado para filtrar somente os recursos que pertencem ao fluxo dois. Agora, para atualizar a expressão de definição de todas as camadas, exceto a camada de estrutura de arame, escreveremos esse código. Esse loop percorre todas as camadas na cena em três D. Se a camada não for uma estrutura de arame de construção, que é apenas a camada externa do edifício e não é específica do piso, aplicamos um filtro expressão de definição de Had é atualizada para combinar o filtro de construção. Por exemplo, construir q é igual a Q com o filtro de piso selecionado. Por exemplo, o fluxo é igual a. Isso restringe a visualização para que somente as feições no prédio Q e no segundo andar sejam exibidas para cada camada relevante Por exemplo, a expressão Palea Building key é igual a Q e o piso é igual a dois Isso significa mostrar apenas as características em que a chave do prédio é Q e o andar é dois. E depois que as camadas forem filtradas, recalcule as contagens para cada tipo de escritório Depois que as camadas forem filtradas, recalcule as contagens de cada tipo de escritório Depois de aplicar os novos filtros em todas as camadas, chamamos a função de tipos de escritório de exibição. Essa função recalcula quantas salas de cada tipo, executiva, conferência, etc., estão atualmente visíveis e atualiza a legenda para Sem essa linha, a legenda mostraria todos os dados que não correspondem à exibição recém-filtrada Agora, esse código Esta linha conecta o menu suspenso à função show flows. Toda vez que o usuário muda o andar selecionado, a função mostrar andares é chamada e o mapa é atualizado imediatamente. A análise de código permite a filtragem dinâmica do piso com base na seleção do usuário As chamadas exibem os tipos de escritório para atualizar as estatísticas. Exemplo do mundo real, se você estiver gerenciando um prédio de escritórios de vários andares, isso permite filtrar e analisar cada andar separadamente. Um, aprimorando a experiência do usuário com legenda e lista de camadas Agora, adicionamos widgets interativos como legenda e lista de camadas Para adicionar uma legenda para a camada de escritório com esse código. O que isso faz? Ele cria um widget de legenda, que explica os símbolos e as cores usados no mapa É especificamente vinculado à camada do escritório, a camada que mostra espaços internos, como salas e escritórios. O título significa que nenhum título é exibido acima da legenda. Você pode alterá-lo para tipos de quarto, se desejar. A legenda é adicionada ao canto inferior direito do mapa e adiciona uma lista de camadas para ativar e desativar a estrutura de arame do edifício com esse código. Ok. Adicione uma lista de camadas para ativar e desativar o wireframe do edifício. O que isso faz? Isso adiciona um widget de lista de camadas, que permite aos usuários marcar a visibilidade de diferentes camadas na cena Por exemplo, os usuários podem mostrar a altura. arame de edifícios, salas, espaço interior, portas, paredes . Agora esse código. Ele está posicionado no canto superior direito do mapa. Isso fornece controle interativo, permitindo que os usuários personalizem o que veem. E não vamos esquecer de ligar aqui no topo da biblioteca Legend and Liar List Devemos buscar a classe na função necessária e depois defini-la na função na parte superior da página Não é para que você possa aprender? A análise de código, Legend, exibe as categorias de tipo de escritório dinamicamente A lista de camadas permite que os usuários ativem e desativem as camadas da cena. Exemplo do mundo real. Usando legenda e lista de camadas, um usuário de GIS pode explorar dados interativamente e controlar a visibilidade da camada para se concentrar em detalhes relevantes Excelente. Terminamos de escrever o código e tudo o que resta é ver o resultado do nosso trabalho no navegador. Mas vamos até a página e clicaremos em abrir com o Live Server. E espere um pouco até que a página seja executada no navegador. Oh, meu Deus. Excelente. A página foi iniciada e o mapa do sucesso apareceu, e aqui apareceu a lista suspensa por meio da qual podemos fazer perguntas. Observe comigo quando perguntarmos os valores na lista suspensa E também observe comigo quando nos escondemos e mostramos as camadas daqui. Muito bom. Nosso trabalho está correto. Resumo e próximas etapas, exploramos como filtrar três camadas D usando a expressão de definição Aprendemos a consultar dados estatísticos das camadas da cena. Construímos um sistema interativo de filtragem de piso. Aprimoramos a interação do usuário usando widgets de interface do usuário. Próxima aula, Estatísticas de consulta de visualização da camada de cena por geometria Aprenderemos como consultar e analisar três estatísticas espaciais em D de forma eficiente. Obrigado por participar. Nos vemos na próxima sessão.