ArcGIS JavaScript met UK-gegevens - OS Basemapgallery

Egge-Jan_Pollé

<\/HEAD>

<\/A><\/P>

https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2020\/03\/24\/arcgis-javascript-with-uk-data-table-of-content<\/A><\/P>

<\/P>

Basemapgallery<\/H2><\/P>In de eerste oefening in deze serie<\/A> hadden we slechts één basemap in onze kaart. Hier gaan we een BasemapGallery<\/A> toevoegen waarmee gebruikers kunnen wisselen tussen basemaps.<\/P>

<\/P>

Let op: alle basemaps die aan de gallery worden toegevoegd moeten dezelfde ruimtelijke referentie hebben. En omdat onze eerste basemap geprojecteerd is in British National Grid, moeten alle andere dezelfde ruimtelijke referentie hebben.<\/P>

<\/P>

We hebben deze basemaps gevonden die aan deze eis voldoen:<\/P>

OS Open Background<\/A><\/LI>OS Open Grey<\/A><\/LI>OS Open Grey Labels<\/>\u00a0<\/>\/OS Open Carto<\/>\u00a0<\/>\/OS Open Rasters<\/>\u00a0<\/>\/GB Dark Grey<\/> \u00a0< \/LI> < \/UL> < P > < \/ P > < P > In de onderstaande code gebruiken we de < A class = "link-titled " href = " https : \/ \/ developers . arcgis . com \/ javascript \/ latest \/ api - reference \/ esri - Basemap . html " title = " https : \/ \/ developers . arcgis . com \/ javascript \/ latest \/ api - reference \/ esri - Basemap . html " rel = " nofollow noopener noreferrer " target = " _blank " > Basemap < \/ A > klasse om zes basemap-objecten te maken. Vervolgens combineren we deze objecten in een enkele < A class = " link-titled " href = " https : \/ \/ developers . arcgis . com \/ javascript \/ latest \/ api - reference \/ esri - widgets - BasemapGallery - support - LocalBasemapsSource . html " title = " https : \/ \/ developers . arcgis . com \/ javascript \/ latest \/ api - reference \/ esri - widgets - BasemapGallery - support - LocalBasemapsSource . html " rel = " nofollow noopener noreferrer " target = " _blank " > LocalBasemapsSource < \/ A > , die we op zijn beurt toevoegen aan de < A class = " link-titled " href = " https : \/ \/ developers . arcgis . com \/ javascript \/ latest \/ api - reference \/ esri - widgets - BasemapGallery . html " title = " https : \/ \/ developers . arcgis . com \/ javascript \/ latest \/ api - reference \/ esri - widgets - BasemapGallery . html " rel = " nofollow noopener noreferrer " target = " _blank " > BasemapGallery < \/ A > widget. < / P > < P > Volg deze link om het eindresultaat van deze oefening te zien: < / P > < P > < A class = " link-titled " href = " https : \ / \ / twiav.nl \ / en \ / arcgis \ / javascript \ / arcgis_javascript_with_uk_data_os_basemapgallery.htm " title = " https : \ / \ / twiav.nl \ / en \ / arcgis \ / javascript \ / arcgis_javascript_with_uk_data_os_basemapgallery.htm " rel = " nofollow noopener noreferrer " target = " _blank " > ArcGIS JavaScript with UK data - OS Basemapgallery < / A >  < / P > < P > < / P > < PRE class = " lia-code-sample line-numbers language-none " >< CODE >< SPAN class = " doctype token " >& lt ; ! DOCTYPE html & gt ; < / SPAN >
< SPAN class = " token tag " >< SPAN class = " token tag " >< SPAN class = " punctuation token " >& lt ; < / SPAN >html< / SPAN >< SPAN class = " punctuation token " >& gt ; < / SPAN >< / SPAN >
< SPAN class = " token tag " >< SPAN class = " token tag " >< SPAN class = " punctuation token " >& lt ; < / SPAN >head< / SPAN >< SPAN class = " punctuation token " >& gt ; < / SPAN >< / SPAN >
< SPAN class = " token tag " >< SPAN class = " token tag " >< SPAN class = " punctuation token " >& lt ; < / SPAN >meta< / SPAN > < SPAN class = " attr-name token " >charset< / SPAN >< SPAN class = " attr-value token " >< SPAN class = " punctuation token " >=< / SPAN >< SPAN class = " punctuation token " >& quot ;< / SPAN >utf-8< SPAN class = class="punctuation token">,
"esri\/widgets\/BasemapGallery\/support\/LocalBasemapsSource"
], function(Map, Point, MapView, Basemap, BasemapGallery, LocalBasemapsSource) {

// Basemaps Esri UK
let OS_Open_Background_Esri_UK = new Basemap({portalItem: {id: "a4ee9f2805754f4b9004103f67688bf1"}}); //OS Open Background
let OS_Open_Gray_Esri_UK = new Basemap({portalItem: {id: "93320e50f3f3419795946b1243aadb1e"}}); //OS Open Grey
let OS_Open_Gray_Labels_Esri_UK = new Basemap({portalItem: {id: "7be6d1f81ab047fda02107a97079ccd3"}}); //OS Open Grey Labels
let OS_Open_Carto_Esri_UK = new Basemap({portalItem: <\/html><\/SPAN><\/SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍