Klicke hier, um die Anwendung in Aktion zu sehen.<\/A><\/P><\/P>
<!DOCTYPE html><\/SPAN>\n<<\/SPAN>html<\/SPAN>><\/SPAN><\/SPAN>\n<<\/SPAN>head<\/SPAN>><\/SPAN><\/SPAN>\n <<\/SPAN>meta<\/SPAN> charset<\/SPAN>=<\/SPAN>"<\/SPAN>utf-8"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>\n <<\/Span>meta name = {
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 >
" esri / widgets / Expand " </ Span > < SPanclass= " punctuationtoken "> , </ SPAN >
" esri / widgets / LayerList " </ Span > < SPanclass= " punctuationtoken "> , </ SPAN >
" esri / widgets / Swipe " </ Span > < SPanclass= " punctuationtoken "> , </ SPAN >
" esri / layers / TileLayer " </ Span > < SPanclass= " punctuationtoken "> ) </ SPAN >
function </ Span > ( Map , Zoom , Home , Compass , Point , MapView , WMTSLayer , Search , Locator , Basemap , BasemapGallery , LocalBasemapsSource , Expand , LayerList , Swipe , TileLayer ) {
document . getElementById ( "aboutDiv" ) . style . display = "block" ;
// BRT Hintergrundkarte von PDOK als Hintergrundkarte
let brtHintergrundkarte = 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 Hintergrundkarte</a> von <a target='_top' href='https://www.pdok.nl/'>PDOK</a>" ,
activeLayer : {
id : "brtHintergrundkarte"
}
} )
] ,
title : "BRT Hintergrundkarte (PDOK)" ,
id : "brtHintergrundkarte_pdok" ,
thumbnailUrl : "images/map.jpg"
} ) ;
// Basis-Karten Esr Niederlande
let lightGrayCanvas_RD_EsriNL = new Basemap ( { portalItem : { id : "9ff6521e85d24df1aa9cd4aebfef748b" } } ) ; // Hellgraues Canvas RD
let darkGrayCanvas_RD_EsriNL = new Basemap ( { portalItem : { id : "62a3befb579e4d9f9c5c51576c8a7c25" } } ) ; // Dunkelgraues 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" } } ) ; // Straßenkarte RD
let luftfoto_RD_EsriNL = new Basemap ( { portalItem : { id : token">:<\/SPAN> "38e1a1c6ee2c421290622400d22ecf57"<\/SPAN>}<\/SPAN>}<\/SPAN>)<\/SPAN>;<\/SPAN> \/\/Luftbild 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({\n url \"https:\/\/tiles.arcgis.com\/tiles\/nSZVuSZjHpEZZbRo\/arcgis\/rest\/services\/Historische_tijdreis_1980\/MapServer\"\n });\n\n map.addMany([nl_1980,nl_1925) \n \t let view = new MapView({ \n \t spatialReference 289922C \n \t container2C =<\/SPAN> new<\/SPAN> Expand<\/SPAN>(<\/SPAN>{<\/SPAN>
expandIconClass:<\/SPAN> "esri-icon-basemap"<\/SPAN>,<\/SPAN> \/\/ siehe 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 <=</Span> [
[
{
title: item.layer.title,
className: "esri-icon-description",
id: "information"
}
]
];
}
}) ;
layerList.on("trigger-action", function(event) {
if (event.action.id === "information") {
// Wenn die Informationsaktion ausgelöst wird, öffne die Detailseite des Service-Layers.
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});
// Erstelle ein neues Swipe-Widget
const swipe = new Swipe({
leadingLayers: [nl_1925],
trailingLayers: [nl_1980],
position: 35, // Position des Widgets auf 35% setzen
view: view
});
// Füge das Widget zur Ansicht hinzu
view.ui.add(swipe);
view.ui.add([aboutExpand, searchWidgetExpand, zoom, homeWidget, compass, basemapGalleryExpand, layerListExpand], "top-left");
});
class="stretch">Ziehen Sie durch die Zeit: 1925, 1980, jetzt...</div>
</div>
<div id="viewDiv"></div>
<div class="dialogDiv" id="aboutDiv">
Swipe widget
