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

Adicionando um serviço de mapa em mosaico do ArcGIS Online ao Leaflet

AdrianWelsh

Então, eu realmente não sei o que estou fazendo às vezes. Espero que esta seja uma pergunta simples. Eu tenho um serviço de mapa em mosaico que publiquei na nuvem em https://community.esri.com/community/gis/web-gis/arcgisonline?sr=search&searchId=8d391d6f-63e6-4084-9d28-153bf05f8834&searchIndex=0 de um jpg que está georreferenciado. Quero mostrar isso no Leaflet, mas não tenho certeza exatamente de como fazer isso (o objetivo é que eu queira adicionar alguns pontos depois que terão informações pop-up, etc - eu só quero a imagem como o "basemap").

Eu postei uma pergunta sobre leaflet há alguns meses que John Gravois me ajudou, aqui: Como fazer um basemap personalizado com localização arbitrária . Ele postou um ótimo exemplo que me mostrou como adicionar uma imagem solta a um mapa sem que ela esteja georreferenciada com este código: JS Bin - Depuração Colaborativa de JavaScript (que eu uso o tempo todo!).

De qualquer forma, qual é uma maneira simples de fazer um exemplo rápido no leaflet que mostre meu serviço em mosaico como o "basemap"? Ou isso não é possível?

Obrigado antecipadamente!

Encontre mais publicações marcadas com

Esri Leaflet

Accepted answers

JohnGravois

you just aren't zoomed in close enough.

<SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> L<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'map'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">40.374761</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">111.736418</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">18</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
L<SPAN class="punctuation token">.</SPAN>esri<SPAN class="punctuation token">.</SPAN><SPAN class="token function">tiledMapLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Ftiles.arcgis.com%2Ftiles%2FmvnrDxfOCq0CsVom%2Farcgis%2Frest%2Fservices%2F15094Background%2FMapServer" target="_blank">http://tiles.arcgis.com/tiles/mvnrDxfOCq0CsVom/arcgis/rest/services/15094Background/MapServer</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; minZoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; maxZoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">21</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addTo</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

i figured that out by snooping the web traffic in the JSAPI sample viewer that ships with the service.

All comments

JohnGravois

sample: http://esri.github.io/esri-leaflet/examples/tile-layer-2.html

API reference: http://esri.github.io/esri-leaflet/api-reference/layers/tiled-map-layer.html

AdrianWelsh

John,

Thanks for your help. I tried using the code in that sample but my image is not showing up. Here is my code sample:

<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>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">charset</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN>utf-8</SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Navigation Charts<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">'</SPAN>viewport<SPAN class="punctuation token">'</SPAN></SPAN> <SPAN class="attr-name token">content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">'</SPAN>initial-scale<SPAN class="punctuation token">=</SPAN>1,maximum-scale<SPAN class="punctuation token">=</SPAN>1,user-scalable<SPAN class="punctuation token">=</SPAN>no<SPAN class="punctuation token">'</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>

&nbsp; <SPAN class="comment token"><!-- Load Leaflet from CDN--></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Funpkg.com%2Fleaflet%401.0.1%2Fdist%2Fleaflet.css" target="_blank">https://unpkg.com/leaflet@1.0.1/dist/leaflet.css</A><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
&nbsp; <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Funpkg.com%2Fleaflet%401.0.1%2Fdist%2Fleaflet-src.js" target="_blank">https://unpkg.com/leaflet@1.0.1/dist/leaflet-src.js</A><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>

&nbsp; <SPAN class="comment token"><!-- Load Esri Leaflet from CDN --></SPAN>
&nbsp; <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Funpkg.com%2Fesri-leaflet%402.0.4" target="_blank">https://unpkg.com/esri-leaflet@2.0.4</A><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>

&nbsp; <SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="selector token">body</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="selector token">#map</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">bottom</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">right</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></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>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>map<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

<SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> L<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'map'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">40.374761</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">111.736418</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">5</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp; L<SPAN class="punctuation token">.</SPAN>esri<SPAN class="punctuation token">.</SPAN><SPAN class="token function">tiledMapLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Ftiles.arcgis.com%2Ftiles%2FmvnrDxfOCq0CsVom%2Farcgis%2Frest%2Fservices%2F15094Background%2FMapServer" target="_blank">http://tiles.arcgis.com/tiles/mvnrDxfOCq0CsVom/arcgis/rest/services/15094Background/MapServer</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; detectRetina<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; minZoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; maxZoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addTo</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><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><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><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

JohnGravois

you just aren't zoomed in close enough.

<SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> L<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'map'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">40.374761</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">111.736418</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">18</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
L<SPAN class="punctuation token">.</SPAN>esri<SPAN class="punctuation token">.</SPAN><SPAN class="token function">tiledMapLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Ftiles.arcgis.com%2Ftiles%2FmvnrDxfOCq0CsVom%2Farcgis%2Frest%2Fservices%2F15094Background%2FMapServer" target="_blank">http://tiles.arcgis.com/tiles/mvnrDxfOCq0CsVom/arcgis/rest/services/15094Background/MapServer</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; minZoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; maxZoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">21</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addTo</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

i figured that out by snooping the web traffic in the JSAPI sample viewer that ships with the service.

AdrianWelsh

John,

I appreciate the help. I am not sure how to snoop the web traffic, but I am glad you figured that out.

From the new code, my map showed up (changing the zoom numbers). Though, when it gets zoomed in closer, the image gets real grainy and does not behave as I would expect. Plus, sometimes the tiles disappear. Is this an issue with the service or with something else?

this picture

Should look more like this picture

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.