nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Commencer avec ArcGIS JavaScript - Faire pivoter la carte

Egge-Jan_Pollé

<\/HEAD>

<\/A>https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/06\/02\/aan-de-slag-met-arcgis-javascript-inleiding<\/A><\/P>

<\/P>

Widget Compass<\/H2><\/P>Oui, une bonne carte doit être orientée vers le nord... mais parfois il est aussi amusant ou utile de faire pivoter le plan pour le voir sous un autre angle.<\/P>Avec l'ArcGIS API for JavaScript 4.x, vous créez une carte web que l'utilisateur peut faire pivoter (c'est une fonctionnalité standard).<\/P><\/P>Comment faire pivoter la carte ? Avec le curseur sur la carte, maintenez le bouton droit de la souris enfoncé puis faites glisser.<\/STRONG> (Oui, vous devrez peut-être expliquer cela aux utilisateurs finaux. Ce n'est pas très intuitif ; il m'a aussi fallu un certain temps pour m'en rendre compte...) <\/STRONG><\/P><\/P>Dans cet exercice, nous ajoutons un widget Compass<\/A>, qui permet à l'utilisateur de remettre la carte vers le nord après l'avoir fait pivoter ("Réinitialiser l'orientation du compas"). Attention : <\/STRONG>avec ce bouton, on ne peut pas faire pivoter la carte, cela doit se faire avec une action de glisser avec le bouton droit de la souris<\/STRONG>. On clique sur le bouton du compas uniquement si on veut remettre la carte vers le nord.<\/P><\/P>Voici le code source. Cliquez ici pour voir comment fonctionne la rotation de la carte.<\/A><\/P>
<\/P>
<!DOCTYPE html><\/SPAN>
<<\/SPAN>html><\/SPAN><\/SPAN>
<<\/SPAN>head><\/SPAN><\/SPAN>
<<\/SPAN>meta charset=<\"utf-8\">
<<\meta name=viewport content=initial-scale=1, maximum-scale=1, user-scalable=no\">
<Aan de slag met ArcGIS JavaScript - Kaart draaien<\title></span>

html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

<\script>

require([
"esri/Map",
"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",
"esri/widgets/Compass"
], function(Map, Point, MapView, WMTSLayer, Search, Locator, Basemap, BasemapGallery, LocalBasemapsSource, Expand, Compass) {

// Carte de fond BRT de PDOK comme fond de carte
var brtachtergrondkaart = new Basemap({
baseLayers: [
new WMTSLayer({
url: "https://geodata.nationaalgeoregister.nl/tiles/service/wmts?request=GetCapabilities&service=WMTS",
copyright:
"
BRT Achtergrondkaart van PDOK",
activeLayer class="punctuation token">:<\/SPAN> {<\/SPAN>\n id:<\/SPAN> "brtachtergrondkaart"<\/SPAN>\n }<\/SPAN>\n }<\/SPAN>)<\/SPAN>\n ]<\/SPAN>,<\/SPAN>\n title:<\/SPAN> "BRT Achtergrondkaart (PDOK)"<\/SPAN>,<\/SPAN>\n id:<\/SPAN> "brtachtergrondkaart_pdok"<\/SPAN>,<\/SPAN>\n thumbnailUrl:<\/SPAN> "images\/map.jpg"<\/SPAN>\n }<\/SPAN>)<\/SPAN>;<\/SPAN>\n\n \/\/ Basiskaarten Esr Nederland<\/SPAN>\n var<\/SPAN> lightGrayCanvas_RD_EsriNL =<\/SPAN> new<\/SPAN> Basemap<\/SPAN>(<\/SPAN>{<\/SPAN>portalItem:<\/SPAN> {<\/SPAN>id:<\/SPAN> "9ff6521e85d24df1aa9cd4aebfef748b"<\/SPAN>}<\/SPAN>}<\/SPAN>)<\/SPAN>;<\/SPAN> \/\/Lichtgrijze Canvas RD<\/SPAN>\n var<\/SPAN> darkGrayCanvas_RD_EsriNL =<\/SPAN> new<\/Span> Basemap<\/span>({portalItem:{id: "esri-icon-basemap", // voir https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: basemapGallery.label,
view: view,
content: basemapGallery.domNode,
group: "top-right"
});

var searchWidget = new Search({
container: document.createElement("div"),
view: view,
includeDefaultSources: false
});

searchWidget.sources = [{
locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"}, // GeocodeServer de Esri Nederland
singleLineFieldName: "SingleLine", // Cette option permet de rechercher par combinaison code postal/numéro de maison, par exemple : 4181 AE 38
placeholder: searchWidget.allPlaceholder // "Find address or place" pour la locale English, "Adres of plaats zoeken" pour la locale Nederlandse
}]

searchWidgetExpand = new Expand({
expandIconClass: "esri-icon-search",
expandTooltip: searchWidget.label,
view: view,
content: searchWidget.domNode,
expanded: true,
group: "top-right"
});

view.ui.add([searchWidgetExpand, basemapGalleryExpand],

Trouver plus de publications taguées avec

Réponses

There are no comments yet

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.