Klikněte zde pro zobrazení aplikace v akci.<\/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<\/SPAN> name<\/SPAN>=<\/SPAN>"<\/Span>viewport"/span> content/span> =/span>\"initial-scale=1, maximum-scale=1, user-scalable=no\"/span>\n </meta>/span>\n <title>/span>Aan de slag met ArcGIS JavaScript - Swipe/title>/span>\n <link rel=stylesheet href=https://js.arcgis.com/4.13/esri/css/main.css>/span>\n <script src=https://js.arcgis.com/4.13/>/span> </script>/span> /span> \n <style>/span> \n html, body {/span> \n padding: 0; \n margin: 0; \n height: 100%; \n width: 100%; \n font-family: sans-serif; \n } \n #header { \t \n width: 100%; \n height: 70px; \n background-color: #113395; \n color:#FFFFFF; \n margin: 0; \n } \n #headertext { \n float: left; \n font-size: 35px; \n color: white; \n line-height: 70px; \n padding-left: 15px; \n } \n #viewDiv { \n position: absolute; \n top: 70px; \n bottom: 0; \n right: 0; \n left: 0; \n padding: 0; \n margin: 0; \n } \n td { \n padding: 15px; \n } \n .dialogDiv { \n background-color: white; \n width: 480px; \n } \n .dialogHeader { \n color: white; \n font-weight: bolder; \n width: auto; \n background-color: #113395; \n padding: 5px; \n } \n .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":<\/SPAN> "38e1a1c6ee2c421290622400d22ecf57"<\/SPAN>}<\/SPAN>}<\/SPAN>)<\/SPAN>;<\/SPAN> \/\/Letecký snímek RD<\/SPAN>\n \n nechť<\/SPAN> dutchBasemaps =<\/SPAN> nový<\/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 nechť<\/SPAN> mapa =<\/SPAN> nový<\/SPAN> Map<\/SPAN>(<\/SPAN>{<\/SPAN>\n basemap:<\/SPAN> open_Topo_RD_EsriNL\n }<\/SPAN>)<\/SPAN>;<\/SPAN>\n\n konstanta<\/SPAN> nl_1925 =<\/SPAN> nový<\/SPAN> TileLayer<\/span>({
url:"https:\/\/tiles.arcgis.com\/tiles\/nSZVuSZjHpEZZbRo\/arcgis\/rest\/services\/Historische_tijdreis_1925\/MapServer"
});
konstanta nl_1980 = nový TileLayer({
url:"https:\/\/tiles.arcgis.com\/tiles\/nSZVuSZjHpEZZbRo\/arcgis\/rest\/services\/Historische_tijdreis_1980\/MapServer"
});
mapa.addMany([nl_1980,nl_1925)
nechť pohled = nový MapView({
spatialReference:28992,
container: basemapGalleryExpand =<\/SPAN> nový<\/SPAN> Expand<\/SPAN>(<\/SPAN>{<\/SPAN>
expandIconClass:<\/SPAN> "esri-icon-basemap"<\/SPAN>,<\/SPAN> \/\/ viz 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>
nechť<\/SPAN> layerList =<\/SPAN> nový<\/SPAN> LayerList<\/SPAN>(<\/SPAN>{<\/SPAN>
view:<\/SPAN> view,<\/SPAN>
listItemCreatedFunction:<\/SPAN> funkce<\/SPAN>(<\/SPAN>event)<\/SPAN>{<\/SPAN>
konstanta<\/SPAN> item =<\/SPAN> event.<\/SPAN>item;<\/SPAN>
item.<\/span>actionsSections =[
[
{
title: item.layer.title,
className: "esri-icon-description",
id: "information"
}
]
];}
});
layerList.on("trigger-action", funkce(event) {
pokud (event.action.id === "information") {
// Pokud je spuštěna akce informace, otevřete stránku s podrobnostmi položky služby vrstvy.
window.open(event.item.layer.url);
}
});
layerListExpand = nový Expand({
expandIconClass: "esri-icon-layers",
expandTooltip: layerList.label,
view: view,
content: layerList,
group: "top-left"
});
nechť zoom = nový Zoom({view: view});
nechť homeWidget = nový Home({view: view});
nechť compass = nový Compass({view: view});
// vytvořit nový widget Swipe
konstanta swipe = nový Swipe({
leadingLayers: [nl_1925],
trailingLayers: [nl_1980],
position: 35, // nastavit pozici widgetu na 35%
view: view
});
// přidat widget do zobrazení
view.ui.add(swipe);
view.ui.add([aboutExpand, searchWidgetExpand, zoom, homeWidget, compass, basemapGalleryExpand, layerListExpand], "top-left");
});
class="stretch">Posouvejte časem: 1925, 1980, nyní...</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>
</EMOJ...
