Benutzerdefinierte Kacheln in der ArcGIS JavaScript API

RiccardoKlinger2

<\/HEAD>

Ich erkunde gerne die Stadt mit öffentlichen Verkehrsmitteln und da ich ein großer Kartenfan bin, habe ich mich in die Karte unseres in Berlin ansässigen öffentlichen Verkehrsunternehmens BVG<\/A> verliebt. Die Karte ist ein großartiges Produkt und bietet so viele Informationsebenen. Sie hat einen in Berlin etablierten bekannten Stil, daher wollte ich sie in meiner eigenen Web-Mapping-Anwendung verwenden.<\/P>

Als ich die Website der BVG durchsuchte, fiel mir die Faltblattkarte auf ihrer Seite auf:<\/P>

<\/P>

Also stellte ich die Frage: "Woher kommen die Kacheln?" Ein kurzer Blick in den Netzwerk-Entwicklerbereich in Firefox zeigte die Adresse

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

<\/P>

Die Kacheln können einfach in eine auf der ArcGIS Javascript API basierende Webkarte eingefügt werden:<\/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>"Kartendaten von <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>"Bildmaterial von <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 class='token punctuation'>;<span class='token emoji'><<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>

Aber sobald Sie dies einbetten, werden Sie feststellen: Es werden nur 404er vom BVG-Server zurückgesendet. Also untersuchte ich das URL-Schema und stellte fest, dass die Y-ID etwas anders ist im Vergleich zu mapbox oder OSM Y-IDs für dieselbe Kachel:<\/P>

y-Kachel: BVG<\TD>	y-Kachel: Mapbox<\TD>	Zoomstufe<\TD>
22020<\TD>	10747<\TD>	15<\TD>
22015<\TD>	10752<\TD>	15<\TD>
22013<\TD>	10754<\TD>		)<\/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>Erkunden Sie die Webkarte auf CodePen<\/A>, oder laden Sie sie unten herunter.<\/P>

Und zu guter Letzt: Sie können sie sogar drehen:<\/P>

<\/P>

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