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

ArcGIS API pro JavaScript 4.11 - cvičení

Egge-Jan_Pollé

<\/HEAD>

Ahoj,<\/P>

<\/P>

Momentálně se připravuji na novou Technical Certification ArcGIS API for JavaScript 19-001<\/A>, procházím dokumentaci: ArcGIS API for JavaScript | ArcGIS for Developers (Latest)<\/A> (v tomto případě: 4.11).<\/P>

<\/P>

A zde sdílím svůj první výsledek. Možná to není žádná raketová věda, ale alespoň funkční webová mapa. Můžete ji vidět v akci zde:

ArcGIS API for JavaScript 4.11 Tutorial - Welcome to the Netherlands<\/A> (zdrojový kód níže - vše html, css a javascript v jednom souboru)<\/P>

<\/P>

Podařilo se mi přidat několik widgetů: tlačítko Home, vyhledávací lištu a Basemap Gallery<\/LI>
Widget Search má vlastní Locator, který omezuje výsledky hledání pouze na Nizozemsko<\/LI>
Jak widget Search, tak Basemap Gallery jsou sbalitelné (pomocí widgetu Expand)<\/LI>
Vlastní základní mapy jsou v RD_New (EPSG: 28992) a jsou hostovány společností

Esri Nederland<\/A> <\/LI><\/UL>

<\/P>

Nejsem s touto první mapou příliš nespokojený. Co si myslíte? Návrhy na zlepšení jsou vždy vítány.<\/P>

<\/P>

Egge-Jan<\/P>

<\/P>

<SPAN class="doctype token"><!DOCTYPE html><\/SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>html<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>head<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>meta<\/SPAN> <SPAN class="attr-name token">charset<SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<SPANC>utf-8<SPANC>"<SPANC></SPAN></SPAN></SPAN></SPAN></span>

class="keyword token">var<\/SPAN> darkGrayCanvas_RD_EsriNL =<\/SPAN> new<\/SPAN> Basemap<\/SPAN>(<\/SPAN>{<\/SPAN>
portalItem:<\/SPAN> {<\/SPAN>id:<\/SPAN> "62a3befb579e4d9f9c5c51576c8a7c25"<\/SPAN>}<\/SPAN> \/\/Donkergrijze Canvas RD hosted by Esri Nederland<\/SPAN>
}<\/SPAN>)<\/SPAN>;<\/SPAN>

var<\/SPAN> topo_RD_EsriNL =<\/SPAN> new<\/SPAN> Basemap<\/SPAN>(<\/SPAN>{<\/SPAN>
portalItem:<\/SPAN> {<\/SPAN>id:<\/SPAN> "7aea6fa913a94176a1074edb40690318"<\/SPAN>}<\/SPAN> \/\/Topo RD hosted by Esri Nederland<\/SPAN>
}<\/SPAN>)<\/SPAN>;<\/SPAN>

var<\/SPAN> open_Topo_RD_EsriNL =<\/SPAN> new<\/SPAN> Basemap<\/SPAN>(<\/SPAN>{<\/SPAN>
portalItem:<\/SPAN> {<\/SPAN>id:<\/SPAN> "0698b71eb7cf47898086d072e574ac32"<\/SPAN>}<\/SPAN> \/\/Open Topo RD hosted by Esri Nederland<\/PAN>
\/

vAr mAp nEw ( { basemap: topo_RD_EsriNL } ); rDoRiGin nEw ( { x: 155000, y: 463000, spatialReference: 28992 } ); vAr vIeW nEw ( { spatialReference: 28992, map: map, container: "viewDiv", center: rdOrigin, zoom: 3 } ); vIeW.ui.empty("top-left"); //odstranit výchozí tlačítka přiblížení, aby bylo možné nejprve přidat název mapy vIeW.ui.add(titleDiv, "top-left"); vAr zOomBtns = nEw Zoom({ view: view }); vIeW.ui.add(zoomBtns, "top-left"); //znovu přidat tlačítka přiblížení pod název mapy vAr hOmeBtn = nEw Home({ view: view }); // Přidat tlačítko domů do levého horního rohu zobrazení vIeW.ui.add(homeBtn, "top-left"); vAr sEarchWidget = nEw Search({ container: document.createElement("div"), sources: [{ locator: new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }), singleLineFieldName: "SingleLine", // Toto umožňuje vyhledávat kombinaci PSČ a čísla domu, např. 4181 AE 38
countryCode: "NL", //použijte výchozí GeocodeServer, ale omezte výsledky na Nizozemsko pouze<\/SPAN>
placeholder:<\/SPAN> "Hledat adresu nebo místo"<\/SPAN>
}<\/SPAN>]<\/SPAN>,<\/SPAN>
view:<\/SPAN> view,<\/SPAN>
includeDefaultSources:<\/SPAN> false<\/SPAN>
}<\/SPAN>)<\/SPAN>;<\/SPAN>

searchWidgetExpand =<\/SPAN> new<\/SPAN> Expand<\/SPAN>(<\/SPAN>{<\/SPAN>
expandIconClass:<\/SPAN> "esri-icon-search"<\/SPAN>,<\/SPAN> \/\/ viz https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/esri-icon-font\/<\/SPAN>
expandTooltip:<\/SPAN> "Hledat"<\/SPAN>,<\/SPAN> \/\/ volitelné, výchozí hodnota je "Expand" pro anglickou lokalizaci<\/SPAN>
view:<\/SPAN> view,<\/SPAN>
content:<\/SPAN> searchWidget.<\/SPAN>domNode,<\/SPAN>
group:<\/SPAN> "top-right"<\/SPAN>
}<\/SPAN>)<\/SPAN>;<\/SPAN>

var<\/SPAN> basemapGallery =<\/SPAN> new<\/SPAN> BasemapGallery<\/SPAN>(<\/SPAN>{<\/SPAN>
container:<\/SPAN> document.<\/PAN><PAN function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-token function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-function-functionalfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionfuntionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunctionunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncunchuncun

Najděte více příspěvků označených jako

Komentáře

mchristmas5mchristmas5

Your map is fine, but I would already start the habit of setting up your web-map as with different folders for the css, js, widgets, templates..etc. I would add other layers, perhaps allow the user to click on the map and view information on a pop-up, or include other frameworks or you can do it in dojo to include some sort of menu bar where you can have home, about this map information. I guess you can make this web map as complicated as you want...

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Nový zde? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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