Tiles Personalizados na ArcGIS JavaScript API

RiccardoKlinger2

<\/HEAD>

Eu gosto de explorar a cidade via transporte público e, como sou um grande fã de mapas, me apaixonei pelo mapa do nosso provedor de serviço de transporte público baseado em Berlim BVG<\/A>. O mapa é um ótimo produto e possui muitos níveis de informação. Ele tem um estilo bem conhecido estabelecido em Berlim, então eu quis usá-lo na minha própria aplicação web de mapeamento.<\/P>

Enquanto eu navegava no site da BVG, notei o mapa leaflet na página deles:<\/P>

<\/P>

Então eu fiz a pergunta: "De onde vêm os tiles". Uma rápida olhada no painel de desenvolvedor de rede no firefox revelou o endereço

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

<\/P>

Os Tiles podem ser facilmente adicionados dentro de um webmap baseado na 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>\n&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>\n&nbsp;&nbsp;&nbsp;&nbsp; title<SPAN class="punctuation token">:<\/SPAN> <SPAN class="string token">"BVG Basemap"<\/SPAN><SPAN class="punctuation token">,<\/SPAN>\n&nbsp;&nbsp;&nbsp;&nbsp; copyright<SPAN class="punctuation token">:<\/SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token"><SPAN>"Map Data by <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>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token"><SPAN>"Imagery by <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>\n<SPAN class="punctuation token">}<span class='token punctuation'>)<span class='token punctuation'>;<span><<EMOJI_0>><span class='line-numbers-rows'><span><<EMOJI_1>><span><<EMOJI_2>><span><<EMOJI_3>><span><<EMOJI_4>><span><<EMOJI_5>><span><<EMOJI_6>><span><<EMOJI_7>><span>

Mas assim que você incorporar isso, vai notar: Só são retornados 404s do servidor BVG. Então examinei o esquema da URL e descobri que o id Y é um pouco diferente comparado aos ids Y do mapbox ou OSM para o mesmo tile:<\/P>

)<\/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>

y-tile: BVG<\/TD>	y-tile: Mapbox<\/TD>	zoomLevel<\/TD><\/TR>
22020<\/TD>	10747<\/TD>	15<\/TD><\/TR>
22015<\/TD>	10752<\/TD>	15<\/TD><\/TR>
22013<\/TD>	10754<\/TD>	15<\/TD><\/TR>
11007<\/TD>	5376<\/TD>	14<\/TD><\\TR>

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>Explore o webmap no CodePen<\/A>, ou faça o download abaixo.<\/P>

E por último, mas não menos importante: Você pode até girá-lo:<\/P>

<\/P>

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