Haz clic aquí para ver la aplicación en acción.<\/A><\/P><\/P>
<!DOCTYPE html><\/SPAN>
<<\/SPAN>html<\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>head<\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>meta<\/SPAN> charset<\/SPAN>=<\/SPAN>"<\/ <SPAN class="punctuation token">{
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":<\/SPAN> "38e1a1c6ee2c421290622400d22ecf57"<\/SPAN>}<\/SPAN>}<\/SPAN>)<\/SPAN>;<\/SPAN> \/\/Luchtfoto RD<\/SPAN>\n \n let<\/SPAN> dutchBasemaps =<\/SPAN> new<\/SPAN> LocalBasemapsSource<\/SPAN>(<\/SPAN>{<\/SPAN>\n basemaps :<\/SPAN> [<\/SPAN>brtachtergrondkaart,<\/SPAN> topo_RD_EsriNL,<\/SPAN> open_Topo_RD_EsriNL,<\/SPAN> stratenkaart_RD_EsriNL,<\/SPAN> luchtfoto_RD_EsriNL,<\/SPAN> lightGrayCanvas_RD_EsriNL,<\/SPAN> darkGrayCanvas_RD_EsriNL]<\/SPAN>\n }<\/SPAN>)<\/SPAN>;<\/SPAN>\n\n let<\/SPAN> map =<\/SPAN> new<\/SPAN> Map<\/SPAN>(<\/SPAN>{<\/SPAN>\n basemap:<\/SPAN> open_Topo_RD_EsriNL\n }<\/SPAN>)<\/SPAN>;<\/SPAN>\n\n const<\/SPAN> nl_1925 =<\/SPAN> new<\/SPAN> TileLayer<\/span>({\n url:\"https:\/\/tiles.arcgis.com\/tiles\/nSZVuSZjHpEZZbRo\/arcgis\/rest\/services\/Historische_tijdreis_1925\/MapServer\"\n });\n\n const nl_1980 = new TileLayer<(</spantokenclass=>{url\ basemapGalleryExpand =<\/SPAN> nuevo<\/SPAN> Expand<\/SPAN>(<\/SPAN>{<\/SPAN>
expandIconClass:<\/SPAN> "esri-icon-basemap"<\/SPAN>,<\/SPAN> \/\/ ver 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>
dejar<\/SPAN> layerList =<\/SPAN> nuevo<\/SPAN> LayerList<\/SPAN>(<\/SPAN>{<\/SPAN>
view:<\/SPAN> view,<\/SPAN>
listItemCreatedFunction:<\/SPAN> funcif3n<\/SPAN>(<\/SPAN>event)<\/SPAN>{<\/SPAN>
constante<\/SPAN> item =<\/SPAN> event.<\/SPAN>item;<\/SPAN>
item.<\/span>actionsSections =[
[
{
title: item.layer.title,
className: "esri-icon-description",
id: "information"
}
]
];}
});
layerList.on("trigger-action", function(event) {
if (event.action.id === "information") {
// Si se activa la acción de información, entonces abre la página de detalles del elemento de la capa de servicio.
window.open(event.item.layer.url);
}
});
layerListExpand = nuevo Expand({
expandIconClass: "esri-icon-layers",
expandTooltip: layerList.label,
view: view,
content: layerList,
group: "top-left"
});
dejar zoom = nuevo Zoom({view: view});
dejar homeWidget = nuevo Home({view: view});
dejar compass = nuevo Compass({view: view});
// crear un nuevo widget Swipe
const swipe = nuevo Swipe({
leadingLayers: [nl_1925],
trailingLayers: [nl_1980],
position: 35, // establecer la posición del widget al 35%
view: view
});
// agregar el widget a la vista
view.ui.add(swipe);
view.ui.add([aboutExpand, searchWidgetExpand, zoom, homeWidget, compass, basemapGalleryExpand, layerListExpand], "top-left");
});
class="stretch">Desliza a través del tiempo: 1925, 1980, ahora...</div>
</div>
<div id="viewDiv"></div>
<div class="dialogDiv" id="aboutDiv""https://www.tensing.com/" target="blank">Tensing GIS Consultancy B.V.</a></p>
</td>
</tr>
</table>
</div>
</body>
</html><<EMOJI_0>><<EMOJI_1>><<EMOJI_2>><<EMOJI_3>><<EMOJI_4>><<EMOJI_5>><<EMOJI_6>><<EMOJI_7>><<EMOJI_8>><<EMOJI_9>><<EMOJI_10>><<EMOJI_11>><<EMOJI_12>><<EMOJI_13>><<EMOJI_14>><<EMOJI_15>><<EMOJI_16>><<EMOJI_17>><<EMOJI_18>><<EMOJI_19>><<EMOJI_20>><<EMOJI_21>><<EMOJI_22>><<EMOJI_23>><<EMOJI_24>><<EMOJI_25>><<EMOJI_26>><<EMOJI_27>><<EMOJI_28>><<EMOJI_29>><<EMOJI_30>><<EMOJI_31>><<EMOJI_32>><<EMOJI_33>><<EMOJI_34>><<EMOJI_35>><<EMOJI_36>><<EMOJI_37>><<EMOJI_38>><<EMOJI_39>><<EMOJI_40>><&lc... (truncated) ...
