Cliquez ici pour voir l'application en action.<\/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",
"esri/widgets/Expand" , </ SPAn >
" esri / widgets / LayerList " </ span > , </ span >
" esri / widgets / Swipe " </ span > , </ span >
" esri / layers / TileLayer " </ span > , </ span >
" dojo / domReady! " </ span >
] </ span > , </ span > function </ keyword >( </ span > Map , </ span > Zoom , </ span > Home , </ span > Compass , </ span > Point , </ span > MapView , </ span > WMTSLayer , </ span > Search , </ span > Locator , </ span > Basemap , </ span > BasemapGallery , </ span > LocalBasemapsSource , </ span > Expand , </ span > LayerList , </ span > Swipe , </ span > TileLayer
document . </ span >getElementById("aboutDiv" "block"
// Carte de fond BRT de PDOK comme carte de fond
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"
});
// Cartes de base 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">:<\/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({\n url:\"https:\/\/tiles.arcgis.com\/tiles\/nSZVuSZjHpEZZbRo\/arcgis\/rest\/services\/Historische_tijdreis_1980\/MapServer\"\n });\n\n map.addMany([nl_1980,nl_1925
=<\/SPAN> new<\/SPAN> Expand<\/SPAN>(<\/SPAN>{<\/SPAN>
expandIconClass:<\/SPAN> "esri-icon-basemap"<\/SPAN>,<\/SPAN> \/\/ voir 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;<\/span>
item.actionsSections = [
[{
title: item.layer.title,
className: "esri-icon-description",
id: "information"
}]
];
}
}) ;
layerList.on("trigger-action", function(event) {
if (event.action.id === "information") {
// Si l'action information est déclenchée, alors ouvrir la page des détails de l'élément du service couche.
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});
// créer un nouveau widget Swipe
const swipe = new Swipe({
leadingLayers: [nl_1925],
trailingLayers: [nl_1980],
position: 35, // définir la position du widget à 35%
view: view
});
// ajouter le widget à la vue
view.ui.add(swipe);
view.ui.add([aboutExpand, searchWidgetExpand, zoom, homeWidget, compass, basemapGalleryExpand, layerListExpand], "top-left");
});
class="stretch">Faites glisser dans le temps : 1925, 1980, maintenant...</div>
</div>
<div id="viewDiv"></div>
<div class="dialogDiv" id="aboutDiv">
<div class= class="punctuation token">"https://www.tensing.com/" target="blank">Tensing GIS Consultancy B.V.</a></p>
</td>
</tr>
</table>
</div>
</body>
</html><}</pan>}
