ArcGIS JavaScript API のカスタムタイル

RiccardoKlinger2

<\/HEAD>

私は公共交通機関を使って街を探索するのが好きで、大の地図ファンでもあるため、ベルリンを拠点とする公共交通サービスプロバイダーであるBVG<\/A>の地図に恋をしました。この地図は素晴らしい製品で、多くの情報レベルを持っています。ベルリンで確立されたよく知られたスタイルがあり、自分のウェブマッピングアプリケーションで使いたいと思いました。<\/P>

BVGのウェブサイトを調べていると、彼らのページにリーフレットマップがあることに気づきました:<\/P>

<\/P>

そこで疑問に思いました：「タイルはどこから来ているのか？」。Firefoxのネットワーク開発者パネルを少し見てみると、アドレスが判明しました

https:\/\/fahrinfo.bvg.de\/tiles\/base\/15\/17605\/22019.png<\/A> （例）<\/P>

<\/P>

このタイルは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>
&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>"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>
&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>
<SPAN class="punctuation token">}<span></span>)<span></span>;<span></span>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<span></span><span class="line-numbers-rows"><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span></span>

しかしこれを埋め込むとすぐに気づくでしょう：BVGサーバーからは404エラーしか返されません。そこでURLスキーマを調べたところ、同じタイルに対してmapboxやOSMのY IDとは少し異なることがわかりました:<\/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<\/>	y-tile: Mapbox<\/>	zoomLevel<\/>
22020<\/>	10747<\/>	15<\/>
22015<\/>	10752<\/>	15<\/>
22013<\/>

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>

ウェブマップをCodePenで探索するか、下からダウンロードしてください。<\/P>

そして最後に：回転させることもできます：<\/P>

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

結局のところ：数学を知っていれば、世界を変えることができます 😉