ここをクリックしてアプリケーションの動作を確認してください。<\/A><\/P><\/P>
<!DOCTYPE html><\/SPAN>
<<\/SPAN>html<\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>head<\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>meta<\/SPAN> charset=\"utf-8\"
<meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\">
<title>Aan de slag met 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":<\/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])}\n
view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: new Point({x: 92556, y: 437534, spatialReference: 28992}),
zoom: 8
});
view.ui.components = [ "attribution" ];
let aboutDlg = document.getElementById("aboutDiv");
let aboutExpand = new Expand({
expandIconClass: "esri-icon-lightbulb",
expandTooltip: "このアプリケーションについて",
view: view,
expanded: true,
content: aboutDlg,
group: "top-left"
});
let searchWidget = new Search({
view: view,
includeDefaultSources: false
});
searchWidget.sources = [{
locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer" }), // Esri NederlandのBAG GeocodeServer
singleLineFieldName: "SingleLine", // このオプションにより、郵便番号と家番号の組み合わせで検索できます。例：4181 AE 38
name: "オランダの住所",
placeholder: "住所を検索"
}];
let searchWidgetExpand = new Expand({
expandIconClass: "esri-icon-search",
expandTooltip: searchWidget.label,
view: view,
content: searchWidget,
group: "top-left"
});
let basemapGallery = new BasemapGallery({view: view, source: dutchBasemaps});
basemapGalleryExpand =<\/SPAN> new<\/SPAN> Expand<\/SPAN>(<\/SPAN>{<\/SPAN>
expandIconClass:<\/SPAN> "esri-icon-basemap"<\/SPAN>,<\/SPAN> \/\/ see 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<\/>;\n itemactionsSections = [\n\t\t[\n\t\t\t{\n\t\t\ttitle: item.layer.title,\n\t\t\tclassName: \"esri-icon-description\",\n\t\t\tid: \"information\"\n\t\t}\n\t\t]\n\t];
}
}) ;
layerList.on("trigger-action", function(event) {
if (event.action.id === "information") {
// If the information action is triggered, then open the item details page of the service layer.
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});
// 新しいSwipeウィジェットを作成する
const swipe = new Swipe({
leadingLayers: [nl_1925],
trailingLayers: [nl_1980],
position: 35, // ウィジェットの位置を35%に設定
view: view
});
// ウィジェットをビューに追加する
view.ui.add(swipe);
view.ui.add([aboutExpand, searchWidgetExpand, zoom, homeWidget, compass, basemapGalleryExpand, layerListExpand], "top-left");
});
class="stretch">時間をスライド：1925年、1980年、現在...</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><<<|vq_14062|>}
