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; } } }

Começando com ArcGIS JavaScript - Girar o mapa

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 de Bússola<\/H2><\/P>Sim, um bom mapa deve estar orientado para o norte... mas às vezes é divertido ou útil girar o mapa para vê-lo de outra perspectiva.<\/P>Com a ArcGIS API for JavaScript 4.x você cria um mapa web que pode ser girado pelo usuário (esta é uma funcionalidade padrão).<\/P><\/P>Como girar o mapa? Com o cursor sobre o mapa, mantenha pressionado o botão direito do mouse e então arraste.<\/STRONG> (Sim, talvez você precise explicar isso aos usuários finais. Afinal, não é muito intuitivo; também demorei um tempo para perceber isso...) <\/STRONG><\/P><\/P>Neste exercício adicionamos um widget Compass<\/A>, que permite ao usuário girar o mapa de volta para o norte depois de ter girado o mapa ("Redefinir orientação da bússola"). Atenção: <\/STRONG>com este botão não se pode rotacionar o mapa, isso deve ser feito com uma ação de arrastar com o botão direito do mouse<\/STRONG>. Só se deve clicar no botão da bússola se quiser girar o mapa de volta para o norte.<\/P><\/P>Abaixo está o código-fonte. Clique aqui para ver como funciona a rotação do mapa.<\/A><\/P>
<\/P>
<!DOCTYPE html><\/SPAN> <<\/SPAN>html><\/SPAN><\/SPAN> <<\/SPAN>head><\/SPAN><\/SPAN> <<\/SPAN>meta charset=<\"utf-8\"><\/>
class="punctuation token">:<\/SPAN> {<\/SPAN>
id:<\/SPAN> "brtachtergrondkaart"<\/SPAN>
}<\/SPAN>
}<\/SPAN>)<\/SPAN>
]<\/SPAN>,<\/SPAN>
title:<\/SPAN> "BRT Achtergrondkaart (PDOK)"<\/SPAN>,<\/SPAN>
id:<\/SPAN> "brtachtergrondkaart_pdok"<\/SPAN>,<\/SPAN>
thumbnailUrl:<\/SPAN> "images\/map.jpg"<\/SPAN>
}<\/SPAN>)<\/SPAN>;<\/SPAN>

\/\/ Basiskaarten Esr Nederland<\/SPAN>
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>
var<\/SPAN> darkGrayCanvas_RD_EsriNL =<\/SPAN> new<\/SPAN> Basemap<\/span>({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}}); "esri-icon-basemap", // veja 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 da Esri Nederland
singleLineFieldName: "SingleLine" , // Esta opção permite que você pesquise por combinação de código postal / número da casa, por exemplo: 4181 AE 38
placeholder: searchWidget. allPlaceholder // "Find address or place" para o locale English, "Adres of plaats zoeken" para o 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], "top-right");

}) ;

Encontre mais publicações marcadas com

Comentários

There are no comments yet

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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