Aangepaste tegels in ArcGIS JavaScript API

RiccardoKlinger2

<\/HEAD>

Ik verken graag de stad via het openbaar vervoer en omdat ik een grote fan ben van kaarten, werd ik verliefd op de kaart van onze in Berlijn gevestigde openbaarvervoerprovider BVG<\/A>. De kaart is een geweldig product en bevat zoveel informatieniveaus. Het heeft een bekende stijl die in Berlijn is gevestigd, dus wilde ik het gebruiken in mijn eigen webmapping-applicatie.<\/P>

Toen ik de website van de BVG bekeek, viel me de leaflet-kaart op hun pagina op:<\/P>

<\/P>

Dus stelde ik de vraag: "Waar komen de tegels vandaan". Een korte blik in het netwerkontwikkelaarspaneel in Firefox onthulde het adres

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

<\/P>

De tegels kunnen eenvoudig worden toegevoegd aan een webmap gebaseerd op de 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 class="punctuation token">{<SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; urlTemplate<SPAN class="punctuation token">:<SPAN> <SPAN class="string token"><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\/<SPAN>{level}\/<{col}\/<{row}.png"<SPAN><SPAN class="punctuation token">,<SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; title<SPAN class="punctuation token">:<SPAN> "BVG Basemap"<SPAN>,<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>"Kaartgegevens door <a href='<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<SPAN>'>BVG<\/<a>, "<SPAN> <SPAN class="operator token">+<SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token"><SPAN>"Beelden door <a href='<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\/<SPAn>'>BVG<\/<a>"<SPAn>
<SPAn class=punctuation token}>}<SPAn>)<SPAn>;<EMOJI_0><SPAn class=line-numbers-rows><SPAn><EMOJI_1></SPAn><SPAn><EMOJI_2></SPAn><SPAn><EMOJI_3></SPAn><SPAn><EMOJI_4></SPAn><SPAn><EMOJI_5></SPAn><SPAn><EMOJI_6></SPAn><SPAn><EMOJI_7></SPAn></SPAn>

Maar zodra je dit insluit, merk je dat er alleen 404-fouten worden teruggestuurd door de BVG-server. Dus onderzocht ik het URL-schema en ontdekte dat de Y-id enigszins anders is vergeleken met mapbox of OSM Y-id's voor dezelfde tegel:<\/P>

y-tegel: BVG
22020	10747	15
22015	10752	15
22013	10754	15
11007	5376	14
44025	21510	16
44026	21509	16

Dus zijn de tegelindices op de een of andere manier verschoven ten opzichte van het normale schema... Laten we dus de conversie reverse-engineeren. Eerste benadering: plot de ID's op een grafiek en probeer wat regressie:<\P>

<\P >

Maar zoals je kunt zien : de lijn lijkt recht maar de vergelijking is gewoon slecht . Laten we wat inzoomen : <\P >

<\P >

Dit is natuurlijk iets anders : de regressielijn is omgedraaid en we hebben geen residuen . De term lijkt heel gewoon omdat het dicht bij een macht van 2 ligt . Om precies te zijn : 2^15-1 <\P >

Er is dus een directe vergelijking om de originele tegelrij om te zetten naar een BVG-tegelrij : <\PRE >var rownew = -1 * row + Math.pow(2, level) -1 ;

Dus nu moeten we deze logica importeren in de

methode die ArcGIS gebruikt om de tegels te krijgen . En BAMM : hier zijn de tegels : <\PRE >var tiledLayer = new WebTileLayer({
urlTemplate : "https://fahrinfo.bvg.de/tiles/base/{level}/{col}/{row}.png",
title : "BVG Basemap",
getTileUrl : function(level, row, col) {
var rownew = -1 * row + Math.pow(2, level) -1 ;
return this.urlTemplate.replace("{level}", 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          "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>Verken de webmap op CodePen<\/A>, of download het hieronder.<\/P>

En last but not least: Je kunt het zelfs roteren:<\/P>

<\/P>

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