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; } } }

Comece com ArcGIS JavaScript - Swipe

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 Swipe<\/H1><\/P>Com o widget Swipe<\/A>, você pode, com a ajuda de uma barra deslizante, deslizar duas imagens de mapa uma sobre a outra para compará-las visualmente.<\/P>

<\/P>

Este widget está disponível na ArcGIS API for Javascript 4, a partir da versão 4.13.<\/P>

<\/P>

Neste exemplo, usamos duas camadas - 1925 e 1980 - do

Topotijdreis<\/A> do Kadaster e da Esri Nederland.<\/P>

<\/P>

O código-fonte está abaixo.

Clique aqui para ver o aplicativo em ação.<\/A><\/P>

<\/P>

<!DOCTYPE html>
<html>
<head>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\">
  <title>Começando com ArcGIS JavaScript - Swipe</title>
  <link rel=\"stylesheet\" href=\"https://js.arcgis.com/4.13/esri/css/main.css\">
  <script src=\"https://js.arcgis.com/4.13/\"></script>
  <style>
    html, body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      font-family: sans-serif;
    }
    #header {	
    	width: 100%;
        height: 70px;
        background-color: #113395;
        color:#FFFFFF;
        margin: 0;
    }
    #headertext {
        float: left;
        font-size: 35px;
        color: white;
        line-height: 70px;
        padding-left: 15px;
    }
    #viewDiv {
        position: absolute;
        top: 70px;
        bottom: 0;
        right: 0;
        left: 0;
        padding: 0;
        margin: 0;
    }
    td {
      padding: 15px;
    }
    .dialogDiv {
      background-color: white;
      width: 480px;
    }
    .dialogHeader {
      color: white;
      font-weight: bolder;
      width: auto;
      background-color: #113395;
      padding: 5px;
    }
    .esri-basemap-gallery__item-thumbnail

{
width: auto;
}
</style>
<script>
require([
"esri/Map",
"esri/widgets/Zoom",
"esri/widgets/Home",
"esri/widgets/Compass",
"esri/geometry/Point",
"esri/views/MapView",
"esri/layers/WMTSLayer",
"esri/widgets/Search",
"esri/tasks/Locator",
"esri/Basemap",
"esri/widgets/BasemapGallery",
"esri/widgets/BasemapGallery/support/LocalBasemapsSource",
"esr i /widgets /Expand " , 
"esr i /widgets /LayerList " , 
"esr i /widgets /Swipe " , 
"esr i /layers /TileLayer " 
"dojo/domReady!" 
] , function ( Map , Zoom , Home , Compass , Point , MapView , WMTSLayer , Search , Locator , Basemap , BasemapGallery , LocalBasemapsSource , Expand , LayerList , Swipe , TileLayer ) {

document . getElementById ( "aboutDiv" ) . style . display = "block" ;

// BRT Achtergrondkaart van PDOK als achtergrondkaart
let brtachtergrondkaart = new Basemap ( {
baseLayers : [
new WMTSLayer ( {
url : "https://geodata.nationaalgeoregister.nl/tiles/service/wmts?request=GetCapabilities&service=WMTS" ,
copyright :
"<a target='_top' href='https://www.pdok.nl/introductie/-/article/basisregistratie-topografie-achtergrondkaarten-brt-a-'>BRT Achtergrondkaart</a> van <a target='_top' href='https://www.pdok.nl/'>PDOK</a>" ,
activeLayer : {
id : "brtachtergrondkaart"
}
} )
] ,
title : "BRT Achtergrondkaart (PDOK)" ,
id : "brtachtergrondkaart_pdok" ,
thumbnailUrl : "images/map.jpg"
} ) ;

// Basiskaarten Esr Nederland
let lightGrayCanvas_RD_EsriNL = new Basemap ( { portalItem : { id : "9ff6521e85d24df1aa9cd4aebfef748b" } } ) ; //Lichtgrijze Canvas RD
let darkGrayCanvas_RD_EsriNL = new Basemap ( { portalItem : { id : "62a3befb579e4d9f9c5c51576c8a7c25" } } ) ; //Donkergrijze Canvas RD
let topo_RD_EsriNL = new Basemap ( { portalItem : { id : "7aea6fa913a94176a1074edb40690318" } } ) ; //Topo RD
let open_Topo_RD_EsriNL = new Basemap ( { portalItem : { id : "0698b71eb7cf47898086d072e574ac32" } } ) ; //Open Topo RD
let stratenkaart_RD_EsriNL = new Basemap ( { portalItem : { id : "9fe1a753955f418fa1cbaf1c47610a47" } } ) ; //Stratenkaart RD
let luchtfoto_RD_EsriNL = new Basemap ( { portalItem : { id : " token": "38e1a1c6ee2c421290622400d22ecf57 " } } ) ; // Luchtfoto RD \ n \ n let dutchBasemaps = novo LocalBasemapsSource ( { \ n basemaps : [ brtachtergrondkaart , topo_RD_EsriNL , open_Topo_RD_EsriNL , stratenkaart_RD_EsriNL , luchtfoto_RD_EsriNL , lightGrayCanvas_RD_EsriNL , darkGrayCanvas_RD_EsriNL ] \ n } ) ; \ n \ n let mapa = novo Mapa ( { \ n basemap : open_Topo_RD_EsriNL \ n } ) ; \ n \ n const nl_1925 = novo TileLayer ( { \ n url : "https://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1925/MapServer" \ n } ) ; \ n \ n const nl_1980 = novo ... basemapGalleryExpand =<\/SPAN> new<\/SPAN> Expand<\/SPAN>(<\/SPAN>{<\/SPAN>
expandIconClass:<\/SPAN> "esri-icon-basemap"<\/SPAN>,<\/SPAN> \/\/ veja https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/esri-icon-font\/<\/SPAN>
expandTooltip:<\/SPAN> basemapGallery.<\/SPAN>label,<\/SPAN>
view:<\/SPAN> view,<\/SPAN>
content:<\/SPAN> basemapGallery,<\/SPAN>
group:<\/SPAN> "top-left"<\/SPAN>
}<\/SPAN>)<\/SPAN>;<\/SPAN>

let<\/SPAN> layerList =<\/SPAN> new<\/SPAN> LayerList<\/SPAN>(<\/SPAN>{<\/SPAN>
view:<\/SPAN> view,<\/SPAN>
listItemCreatedFunction:<\/SPAN> function<\/SPAN>(<\/SPAN>event)<\/SPAN>{<\/SPAN>
const<\/SPAN> item =<\/SPAN> event.<\/span>item<\/><\/>;
item<\/>actionsSections <= <[
<[
<{
title<: item</>layer</>title<,
className<: "esri-icon-description"<,
id<: "information"
<}
<]
<]<;
<}
<}<)<;

layerList</>on<("trigger-action"<, function<(event<) <{
if (event.action.id === "information") {
// Se a ação de informação for acionada, então abra a página de detalhes do item da camada de serviço.
window.open(event.item.layer.url);
}
});

layerListExpand = new Expand({
expandIconClass: "esri-icon-layers",
expandTooltip: layerList.label,
view: view,
content: layerList,
group: "top-left"
});

let zoom = new Zoom({view: view});
let homeWidget = new Home({view: view});
let compass = new Compass({view: view});

// criar um novo widget Swipe
const swipe = new Swipe({
leadingLayers: [nl_1925],
trailingLayers: [nl_1980],
position: 35, // definir posição do widget para 35%
view: view
});

// adicionar o widget à visualização
view.ui.add(swipe);

view.ui.add([aboutExpand, searchWidgetExpand, zoom, homeWidget, compass, basemapGalleryExpand, layerListExpand], "top-left");

});

class="stretch">Deslize pelo tempo: 1925, 1980, agora...</div>
</div>
<div id="viewDiv"></div>

<div class="dialogDiv" id="aboutDiv""https://www.tensing.com/" target="blank">Tensing GIS Consultancy B.V.</a>
</td>
</tr>
</table>
</div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<<<|vq_15449|>}

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.