Problema con el mapa base de Leaflet

AllenScully

Estoy ayudando a un colega con una pequeña aplicación de leaflet.  Estamos teniendo problemas al intentar agregar nuestro propio servicio de mapa base usando el método 'L.tiledMapLayer'.  Sospecho que el problema está en nuestro servicio de mapas, pero usamos este servicio con éxito en varias aplicaciones personalizadas de javascript, así como en otras aplicaciones ESRI y GeoCortex.  <\/P>

Cuando se usa una URL de mapa base ESRI, parece funcionar bien:<\/P>

 <\/P>

L.esri.tiledMapLayer({
 url: "<\/SPAN>http:\/\/services.arcgisonline.com\/arcgis\/rest\/services\/World_Topo_Map\/MapServer<\/A>"<\/SPAN>
}).addTo(map);<\/P>
 <\/P>
Sin embargo, al cambiar la URL ESRI por nuestro propio servicio en mosaico (no seguro y accesible públicamente), el mapa base no se renderiza, y las herramientas de desarrollo muestran muchos errores 404 No encontrado para las teselas.<\/P>
 <\/P>
L.esri.tiledMapLayer({
url: "<\/SPAN>https:\/\/maps2.tucsonaz.gov\/arcgis\/rest\/services\/BaseMaps\/gisBaseMap_Topo\/MapServer<\/A>"<\/SPAN>
}).addTo(map);<\/P>
 <\/P>
Me pregunto si esto es una configuración dentro de nuestro servicio, de modo que tal como está configurado actualmente no funcione con Leaflet?<\/P>
 <\/P>
Gracias - <\/P>
Allen<\/P>

JohnGravois

there were a few different things going on causing problems.

1. your own service doesn't support making CORS requests. thats okay, but its necessary for you to pass through `useCors: false` in your own constructor

2. even though your service advertises itself as wkid: 3857, its actually using a custom XY for its origin, which is problematic when the internal API attempts to translate the global LODs the service is missing.

3. there was a bug in esri-leaflet that led to us attempting to override custom LODs provided in code when we recognized the coordinate system as web mercator. (i fixed that here and published v2.1.2).

all that said, in our latest release, we display the service correctly, but its still up to you to describe the custom projection in your own code.

<SPAN class="keyword token">var</SPAN> crs <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">L<SPAN class="punctuation token">.</SPAN>Proj<SPAN class="punctuation token">.</SPAN>CRS</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"EPSG:3857"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
 origin<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">20037700</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">30241100</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// your origin is custom</SPAN>
 resolutions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
 <SPAN class="number token">611.4962262813797</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// you are missing some smaller scale LODS as well</SPAN>
 <SPAN class="number token">305.74811314055756</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="number token">152.87405657041106</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// ...</SPAN>
 <SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<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>
 crs<SPAN class="punctuation token">:</SPAN> crs
<SPAN class="punctuation token">}</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">32.2217</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">110.926</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</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>
 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=https%3A%2F%2Fmaps2.tucsonaz.gov%2Farcgis%2Frest%2Fservices%2FBaseMaps%2FgisBaseMap_Topo%2FMapServer" target="_blank">https://maps2.tucsonaz.gov/arcgis/rest/services/BaseMaps/gisBaseMap_Topo/MapServer</A><SPAN>'</SPAN></SPAN><SPAN class="punctuation token">,</SPAN>
 useCors<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

live sample: http://jsbin.com/yovezox/edit?html,output 

(based on the sample in our documentation here)