ArcGIS JavaScript avec données UK - 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>Dans le premier exercice de cette série<\/A>, nous avions juste une seule basemap dans notre carte. Ici, nous allons ajouter une BasemapGallery<\/A> permettant aux utilisateurs de changer de basemaps.<\/P>

<\/P>

Veuillez noter : toutes les basemaps ajoutées à la galerie doivent avoir la même référence spatiale. Et parce que notre première basemap est projetée dans British National Grid, toutes les autres doivent avoir cette même référence spatiale.<\/P>

<\/P>

Nous avons trouvé ces basemaps qui répondent à cette exigence :<\/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 > Dans le code ci-dessous, nous utilisons la classe < 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 > pour créer six objets basemap. Ensuite, nous combinons ces objets dans une seule < 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 >, que nous ajoutons ensuite au widget < 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 >. < \ / P > < P > Suivez ce lien pour voir le résultat final de cet exercice : < \ / P > < P > < A class = \ class="punctuation token">,
"esri\/widgets\/BasemapGallery\/support\/LocalBasemapsSource"
], function(Map, Point, MapView, Basemap, BasemapGallery, LocalBasemapsSource) {

// Fonds de carte 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: {id: "0bd3a4a6fd674a90a7d0a9e5f36fb59b"}})<\/SPAN>; \<\/\/OSOpenCarto<\/SPAN>
OS_Open_Raster_Esri_UK<=\<\/SPAN>> new(<{<\/SPAN>>portalItem<:<<\/SPAN>> { id : "5b5ff94ca7414a26b75e0d337a023d38" } }) ; // OS Open Rasters
let GB_Dark_Grey_Esri_UK = new Basemap({portalItem:{id:"a118075240bc4e4f8062265ecdad0e7e"}}); //GB Dark Grey

let UKBasemaps = new LocalBasemapsSource({
basemaps : [OS_Open_Background_Esri_UK, OS_Open_Carto_Esri_UK, OS_Open_Gray_Esri_UK, OS_Open_Gray_Labels_Esri_UK, OS_Open_Raster_Esri_UK, GB_Dark_Grey_Esri_UK]
});

let map = new Map({
basemap: OS_Open_Carto_Esri_UK
});

let view = new MapView({
spatialReference: 27700,
container: "viewDiv",
map: map,
center: new Point({x: 500000, y: 500000, spatialReference: 27700}),
zoom: 7
});

let basemapGallery = new BasemapGallery({
view: view,
source: UKBasemaps
});

view.ui.add([basemapGallery], "top-right");

}) ;

class="punctuation token"><\/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>‍<\/SPAN>‍
<<EMOJI_30>><\/<span><<EMOJI_31>><\/<span><<EMOJI_32>><\/<span><<EMOJI_33>><\/<span><<EMOJI_34>><\/<span><<EMOJI_35>><\/<span><<EMOJI_36>><\/<span><<EMOJI_37>><\/<span><<EMOJI_38>><\/<span><<EMOJI_39>><\/<span><<EMOJI_40>><\/<span><<EMOJI_41>><\/<span><<EMOJI_42>><\/<span><<EMOJI_43>><\/<span><<EMOJI_44>><\/<span><<EMOJI_45>><\/<span><<EMOJI_46>><\/<span><<EMOJI_47>><\/<span><<EMOJI_48>><\/<span><<EMOJI_49>><\/<span><<EMOJI_50>><\/<span><<EMOJI_51>><\/<span><<EMOJI_52>><\/<span><<EMOJI_53>><\/<span><<EMOJI_54>><\/<span><<EMOJI_55>><\/<span><<EMOJI_56>><\/<span><<EMOJI_57>><\/<span><<EMOJI_58>><\/<span><<EMOJI_59>><\/<span><<EMOJI_60>><\/<span><<EMOJI_61>><\/<span><<EMOJI_62>><\/<span><<EMOJI_63>><\/<span><<EMOJI_64>><\/<span><<EMOJI_65>><\/<span><<EMOJI_66>><\/<span><<EMOJI_67>