Mosaicos personalizados en ArcGIS JavaScript API

RiccardoKlinger2

<\/HEAD>

Me gusta explorar la ciudad a través del transporte público y como soy un gran fan de los mapas, me enamoré del mapa de nuestro proveedor de servicios de transporte público con sede en Berlín BVG<\/A>. El mapa es un gran producto y tiene muchos niveles de información. Tiene un estilo bien conocido establecido en Berlín, así que quise usarlo en mi propia aplicación web de mapeo.<\/P>

Mientras exploraba el sitio web de BVG noté el mapa tipo folleto en su página:<\/P>

<\/P>

Entonces me hice la pregunta: "¿De dónde vienen las teselas?". Una breve mirada en el panel de desarrollador de red en Firefox reveló la dirección

https:\/\/fahrinfo.bvg.de\/tiles\/base\/15\/17605\/22019.png<\/A>  (ejemplo)<\/P>

<\/P>

Las teselas pueden ser fácilmente añadidas dentro de un mapa web basado en ArcGIS Javascript API:<\/P>

<SPAN class="keyword token">var<\/SPAN> tiledLayer <SPAN class="operator token">=<\/SPAN> <SPAN class="keyword token">new<\/SPAN> <SPAN class="token class-name">WebTileLayer<\/SPAN><SPAN class="punctuation token">(<\/SPAN><SPAN class="punctuation token">{<\/SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; urlTemplate<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%2Ffahrinfo.bvg.de%2Ftiles%2Fbase%2F" target="_blank">https:\/\/fahrinfo.bvg.de\/tiles\/base\/<\/A><SPAN>{level}\/{col}\/{row}.png"<\/SPAN><\/SPAN><SPAN class="punctuation token">,<\/SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; title<SPAN class="punctuation token">:<\/SPAN> <SPAN class="string token">"BVG Basemap"<\/SPAN><SPAN class="punctuation token">,<\/SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; copyright<SPAN class="punctuation token">:<\/SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token"><SPAN>"Datos del Mapa por <a href='<\/SPAN><A class="jive-link-external-small" href="https:\/\/community.esri.com\/external-link.jspa?url=https%3A%2F%2FBvg.de" target="_blank">https:\/\Bvg.de<\/A><SPAN>'>BVG<\/a>, "<\/SPAN><\/SPAN> <SPAN class="operator token">+<\/SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token"><SPAN>"Imágenes por <a href='<\/SPAN><A class="jive-link-external-small" href="https:\/\/community.esri.com\/external-link.jspa?url=https%3A%2F%2FBvg.de%2F" target="_blank">https:\/\Bvg.de\/<\/A><SPAN>'>BVG<\/a>"<\/SPAN><\/SPAN>
<SPAN class="punctuation token">}<span class='token punctuation'>)</span>;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<span class='line-numbers-rows'><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span></span>

Pero tan pronto como insertes esto, notarás: Solo se envían 404s desde el servidor BVG. Así que examiné el esquema URL y descubrí que el id Y es algo diferente comparado con los ids Y de mapbox u OSM para la misma tesela:<\/P>

y-tile: BVG<\/TD>	y-tile: Mapbox<\/TD>	zoomLevel<\/TD><\TR>
22020<\TD>	10747<\TD>	15<\TD>
22015<\TD>	10752<\TD>	15<\TD>
22013<\TD>	10754<\TD>	15<\TD>
11007<\TD>	nivel)<\/SPAN>.<\/SPAN>replace<\/SPAN>(<\/SPAN>"{col}"<\/SPAN>,<\/SPAN> col)<\/SPAN>.<\/SPAN>replace<\/SPAN>(<\/SPAN>"{row}"<\/SPAN>,<\/SPAN> rownew)<\/SPAN>;<\/SPAN>\n     }<\/SPAN>,<\/SPAN>\n     copyright:<\/SPAN>             \n          "Map Data by <a href='<\/SPAN>

https:\/\/Bvg.de<\/A>'>BVG<\/a>, "<\/SPAN><\/SPAN> +<\/SPAN>\n          "Imagery by <a href='<\/SPAN>https:\/\/Bvg.de\/<\/A>'>BVG<\/a>"<\/SPAN><\/SPAN>\n}<\/SPAN>)<\/SPAN>;<\/SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN><\/SPAN><\/CODE><\/PRE><\/P>Explora el webmap en CodePen<\/A>, o descárgalo abajo.<\/P>

Y por último pero no menos importante: Incluso puedes rotarlo:<\/P>

<\/P>

https:\/\/players.brightcove.net\/6161463677001\/default_default\/index.html?videoId=6162685798001