Vlastní dlaždice v ArcGIS JavaScript API

RiccardoKlinger2

<\/HEAD>

Rád prozkoumávám město pomocí veřejné dopravy a protože jsem velký fanoušek map, zamiloval jsem se do mapy našeho berlínského poskytovatele veřejné dopravy BVG<\/A>. Mapa je skvělý produkt a obsahuje tolik úrovní informací. Má dobře známý styl zavedený v Berlíně, takže jsem ji chtěl použít ve své vlastní webové mapové aplikaci.<\/P>

Při prohlížení webu BVG jsem si všiml leaflet mapy na jejich stránce:<\/P>

<\/P>

Tak jsem položil otázku: "Odkud pocházejí dlaždice". Krátký pohled do panelu vývojáře sítě ve Firefoxu odhalil adresu

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

<\/P>

Dlaždice lze snadno přidat do webové mapy založené 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='punctuation'>)<span>;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<span class='line-numbers-rows'><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span></span>

Ale jakmile to vložíte, všimnete si: ze serveru BVG jsou vraceny pouze chyby 404. Tak jsem prozkoumal schéma URL a zjistil, že Y identifikátor je poněkud odlišný ve srovnání s mapbox nebo OSM Y identifikátory pro stejnou dlaždici:<\/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-dlaždice: BVG<\/TD>	y-dlaždice: Mapbox<\/TD>	úroveň přiblížení<\/TD><\/TR>
22020<\/TD>	10747<\/TD>	15<\/TD><\/TR>
22015<\/TD>	10752<\/TD>	15<\/TD><\/TR>
22013<\/TD>	10754<\/TD>	15<\/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>} <\span>} <\span>} <\span>} <\span>} <\span>} <\span>} <\span>} <\span>} <\span>} Prozkoumejte webovou mapu na CodePen, nebo si ji stáhněte níže.

A nakonec, ale rozhodně ne méně důležité: Můžete ji dokonce otáčet:

Při závěru: Pokud znáte matematiku, můžete změnit svět 😉