J'aime explorer la ville via les transports publics et comme je suis un grand fan de cartes, je suis tombé amoureux de la carte de notre fournisseur de services de transport public basé à Berlin BVG<\/A>. La carte est un excellent produit et contient de nombreux niveaux d'information. Elle possède un style bien connu établi à Berlin, donc je voulais l'utiliser dans ma propre application web de cartographie.<\/P>En parcourant le site web de la BVG, j'ai remarqué la carte leaflet sur leur page :<\/P><\/P>Alors je me suis posé la question : "D'où viennent les tuiles ?". Un rapide coup d'œil dans le panneau développeur réseau de Firefox a révélé l'adresse https:\/\/fahrinfo.bvg.de\/tiles\/base\/15\/17605\/22019.png<\/A> (exemple)<\/P><\/P>Les tuiles peuvent être facilement ajoutées dans une carte web basée sur 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> 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> title<SPAN class="punctuation token">:<\/SPAN> <SPAN class="string token">"BVG Basemap"<\/SPAN><SPAN class="punctuation token">,<\/SPAN> copyright<SPAN class="punctuation token">:<\/SPAN> <SPAN class="string token"><SPAN>"Données cartographiques par <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> <SPAN class="string token"><SPAN>"Images par <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='punctuation'>)<span>;<span class='line-numbers-rows'><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span>Mais dès que vous intégrez cela, vous remarquerez : seuls des 404 sont renvoyés par le serveur BVG. J'ai donc examiné le schéma URL et découvert que l'identifiant Y est quelque peu différent comparé aux identifiants Y de mapbox ou OSM pour la même tuile :<\/P>
En parcourant le site web de la BVG, j'ai remarqué la carte leaflet sur leur page :<\/P>
<\/P>
Alors je me suis posé la question : "D'où viennent les tuiles ?". Un rapide coup d'œil dans le panneau développeur réseau de Firefox a révélé l'adresse
Les tuiles peuvent être facilement ajoutées dans une carte web basée sur 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> 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> title<SPAN class="punctuation token">:<\/SPAN> <SPAN class="string token">"BVG Basemap"<\/SPAN><SPAN class="punctuation token">,<\/SPAN> copyright<SPAN class="punctuation token">:<\/SPAN> <SPAN class="string token"><SPAN>"Données cartographiques par <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> <SPAN class="string token"><SPAN>"Images par <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='punctuation'>)<span>;<span class='line-numbers-rows'><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span>
Mais dès que vous intégrez cela, vous remarquerez : seuls des 404 sont renvoyés par le serveur BVG. J'ai donc examiné le schéma URL et découvert que l'identifiant Y est quelque peu différent comparé aux identifiants Y de mapbox ou OSM pour la même tuile :<\/P>
Donc les indices des tuiles sont d'une certaine manière décalés par rapport au schéma normal... Essayons donc d'inverser cette conversion. Première approche : tracer les identifiants sur un graphique et essayer une régression :<\\P >
< / P >< P > Mais comme vous pouvez le voir : la ligne semble droite mais l'équation est juste nulle. Zoomons un peu : < / P >< P >< IMG __jive_id = "418006 "class = "j-img-centered jive-image image-4 "src = "https://us.v-cdn.net/6038851/uploads/legacyfs/online/418006_pastedImage_5.png "style = "display:block;margin-left:auto;margin-right:auto ; "/ >< / P >< P > C'est bien sûr un peu différent : la ligne de régression est inversée et nous n'avons pas de résidus. Le terme ajouté semble très commun car il est proche d'une puissance de deux. Pour être exact : 2^15-1 < / P >< P > Il existe donc une équation directe pour transformer la ligne originale en ligne BVG : < / P >< PRE class = "lia-code-sample line-numbers language-none " >< CODE >< SPAN class = "keyword token " > var < / SPAN > rownew < SPAN class = "operator token " > = < / SPAN > < SPAN class = "operator token " > - < / SPAN > < SPAN class = "number token " >1 </ SPAN > < SPAN class = "operator token " > * </ SPAN > row < SPAN class = "operator token " > + </ SPAN > Math < SPAN class = "punctuation token " > . </ SPAN > < SPAN class = "token function " > pow </ SPAN > < SPAN class = "punctuation token " >(</ SPAN > < SPAN class = "number token " >2 </ SPAN > < SPAN class = "punctuation token " > , </ SPAN > level < SPAN class = "punctuation token " ) </ SPAN > < SPAN class = "operator token " > - </ SPAN > < SPAN class = "number token " >1 </ SPAN > < SPAN class = "punctuation token "; </ SPAN >< EMOJI_8 >< SPAN class = "line-numbers-rows">< EMOJI_9 ></ span ></ span ></ CODE ></ PRE >< P > Nous devons maintenant importer cette logique dans la < A href = niveau)<\/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 "Données cartographiques par <a href='<\/SPAN>
Et enfin : Vous pouvez même la faire pivoter :<\/P>
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
