nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Começando com ArcGIS JavaScript - Agrupar Camadas

Egge-Jan_Pollé

<\/HEAD>

<\/A>https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/06\/02\/aan-de-slag-met-arcgis-javascript-inleiding<\/A> <\/P>

<\/P>

Widget GroupLayer<\/H1><\/P>Com o widget GroupLayer<\/A> você pode agrupar várias subcamadas em uma camada comum.<\/P>

<\/P>

Neste exemplo, usamos um belo conjunto de fotos aéreas históricas e mapas que encontramos no

ArcGIS Server da Prefeitura de Tilburg<\/A>. Essas fotos e mapas estão divididos no aplicativo web em dois grupos, para que você não tenha uma lista muito longa de camadas, mas sim uma lista organizada com duas camadas de grupo.<\/P>

<\/P>

Usando a opção visibilityMode: "exclusive" <\/SPAN>, aparecem botões de rádio para as subcamadas. Isso permite que você alterne facilmente entre as fotos aéreas - de 1934 até 2018 - e os mapas - de 1760 até 1976.<\/P><\/P>Aqui você pode ver o aplicativo em ação:<\/P>

História de Tilburg | Mapas Históricos e Fotos Aéreas<\/A> <\/P>

<\/P>

O código-fonte está abaixo.<\/P>

<\/P>

<!DOCTYPE html><\/SPAN>
<<\/SPAN>html><\/SPAN><\/SPAN>
<<\/SPAN>head><\/SPAN><\/SPAN>
<<\/SPAN>meta charset="utf-8" >
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="Exemplo ArcGIS JS v4, Calcite Maps e Bootstrap">
<title>História de Tilburg | Mapas Históricos e Fotos Aéreas</title>
<!-- Calcite Maps Bootstrap -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.10.css">
<!-- Calcite Maps -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.10.css">
<!-- ArcGIS JS 4 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }
    panel {
      width: 500px;
    }
    table, th, tr, td {
      border: 1px solid #D3D3D3;
      padding: 5px;
    }
    td {
      width: 250px;
      vertical-align: bottom;
    }

<\head>

">

<div class="dropdown calcite-dropdown calcite-text-dark calcite-bg-light" role="presentation">
<a class="dropdown-toggle" role="menubutton" aria-haspopup="true" aria-expanded="false" tabindex="0">
<div class="calcite-dropdown-toggle">
Alternar menu suspenso
&Lt; / Span
&Lt; / Span
&Lt; / Span
&Lt; / Span
&Lt; / Div 
&Lt; / A 
&Lt; Ul Class = " Dropdown-Menu " Role = " Menu " &Gt; 
&Lt; Li &Gt; < A Role = "Menuitem" Tabindex = "0" Data-Target="#panelInfo" Aria-Haspopup= True > Sobre este mapa< / a >< / li >
 Manual de instruções< / a >< / li >
< / ul >
< / div >

< div classe=calcite-title calcite-overflow-hidden >
<<\/SPAN>span<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>calcite-title-main"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>História de Tilburg<\/<\/SPAN>span<\/SPAN>><\/SPAN><\/SPAN>
<\/<\/SPAN>span<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>calcite-title-divider hidden-xs"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN><\/<\/PAN>span<\/SPAN>><\/SPAN><\/SPAN>
<\/<\/PAN>span<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/Span>calcite-title-sub hidden-xs"<\/Span>><\/Span>Kijk terug in de tijd op oude luchtfoto's en kaarten<\/span>
<\/div>

<ul class="nav navbar-nav calcite-nav">
<li>
<div class="calcite-navbar-search calcite-search-expander">
<div id = "searchWidgetDiv" > 


































< span id = "headingInfo" role = "tab" 9 um painel de cabealho 9 um painel de cabealho e9 um painel de cabealho e9 um painel de cabealho e9 um painel de cabealho e9 um painel de cabealho e9 um painel de cabealho e9 um painel de cabealho e9 um painel de cabealho e9 um painel de cabealho e9 um painel de cabealho e9 um painel de cabealho
token">><\/SPAN><\/SPAN><<\/SPAN>b<\/SPAN>><\/SPAN><\/SPAN>Sobre este mapa<\/<\/SPAN>b<\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>span<\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>a<\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>a<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>panel-close"<\/SPAN><\/SPAN> role<\/SPAN>=<\/SPAN>"<\/Span>button" data-toggle= href="https://www.tensing.com/">Tensing GIS Consultancy B.V.</a>
</div>
</div>
</div>

<div id="panelGuide" class="panel collapse in">
<div :<\/SPAN> 500px;<\/SPAN><\/SPAN>"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>table<\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>thead<\/SPAN>><\/SPAN><\/SPAN><<\/SPAN>tr<\/SPAN>><\/SPAN><\/SPAN><<\/SPAN>th<\/SPAN> colspan<\/SPAN>=<\/SPAN>"<\/SPAN>2"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>Botões no lado direito da tela<\/<\/span>th<\/span>><\/<\/span><\/<\/span>tr<\/span>><\/<\/span><\/<\/span>thead<\/span>><\/<\/span>
<tbody>
<tr>
<td> Procurar endereço</td>
<td> Ativar ou desativar camadas do mapa</td>
</tr>
<tr>
<td> Escolher mapa base& lt ;/ td & gt ;
& lt ;td & gt ;
< div clas s= "es ri -w id ge t-- bu tto n "></ div > Voltar para a posição inicial& lt ;/ td & gt ;
& lt ;/ tr & gt ;
& lt ;tr & gt ;
& lt ;td & gt ;< div clas s= "es ri -w id ge t-- bu tto n "></ div > token">><\/SPAN><\/SPAN><\/<\/SPAN>span<\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN><<\/SPAN>div<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>esri-widget--button"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN><<\/SPAN>span<\/SPAN> title<\/SPAN>=<\/SPAN>"<\/SPAN>Dar zoom out"<\/SPAN><\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>esri-icon-minus"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN><\/<\/span<\/span>span<\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>Dar zoom in e zoom out no mapa<\/<\/span>td<\/span>><\/span><\/span>
<\/<\/span>td<\/span>><\/span><\/span><div<\/span> class<\/span>=<\/span>"<\/span>esri-widget--button< spanclass= \ " punctuationtoken \ "> " < \/ span > < \/ span > < spanclass = \ " punctuationtoken \ "> & gt ; < \/ span > < \/ span > < spanclass = \ " tokentag \ "> < spanclass = \ " tokentag \ "> < spanclass = \ " punctuationtoken \ "> & lt ; \/ span < spanclass = \ " attr-nametoken \ "> title < spanclass = \ " attr-valuetoken \ "> < spanclass = \ " punctuationtoken \ "> = < spanclass = \ " punctuationtoken \ "> " Expandir < spanclass = \ " attr-nametoken \ "> classe < spanclass = \ " attr-valuetoken \ "> < spanclass = \ " punctuationtoken \ "> = < spanclass = \ " punctuationtoken \ "> " esri-icon-right-triangle-arrow < spanclass = \ " punctuationtoken \ "> & gt ; < / div > Expandir ou recolher camada de grupo< \/ td >< \/ sp an >< sp an cl ass =

=<\/SPAN>"<\/SPAN>2"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN><<\/SPAN>div<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>esri-widget--button"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN><<\/SPAN>span<\/SPAN> title<\/SPAN>=<\/SPAN>"<\/SPAN>Redefinir orientação da bússola"<\/SPAN><\/SPAN>

Encontre mais publicações marcadas com

Comentários

There are no comments yet

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.