AGOLおよびArcGIS ProにおけるKittenとCustom Tile Layers

RiccardoKlinger2

<\/HEAD>

時々、ウェブマップで素晴らしいタイルレイヤーを見かけて、それをArcGIS onlineプロジェクトやArcGIS Proで使いたくなることがあります。私が感じたのは、この素敵なBVG basemap<\/A>を見たときのことでした。この少しひねりのあるbasemapの使用は少し厄介でした。なぜなら、緯度経度からタイル番号へのロジックが少し複雑だったからです。ArcGIS OnlineやArcGIS Enterpriseのような製品では、このロジックを変更する方法がありません。したがって、AGOLでこのようなタイルレイヤーを使いたい場合は、どこか別の場所で介入する必要があります。<\/P>

タイル取得の中断<\/H3>マップをパンまたはズームするたびに、タイルはサーバーから取得されます。私が使った方法は、シンプルなphpプロキシを利用しています。<\/P>つまり、ウェブサーバーから直接タイルを取得する代わりに、phpスクリプトを使ってリクエストを受け取り、少し複雑な行番号のタイル番号を計算し、正しいタイルを要求して、それをあなたのAGOLプロジェクトに転送します。<\/P>しかし、まずは基本となる簡単なトリックから始めましょう：kitten watermarks<\/STRONG>です。<\/P>PlaceKitten<\/A>は非常に一般的な形式でプレースホルダー画像を提供しています：http:\/\/placekitten.com\/256\/256?image=5<\/A> ここで最初の「256」は幅、2番目は高さ、最後は表示したい画像（画像番号5）です。画像はPNG形式で提供されます。<\/P>

前述の通り、データを取得して受け取った画像をそのままAGOLに返すためにphpスクリプトを使用します。これは地理的観点からは全く意味がありません。そのためphp対応サーバーが必要です。私はWindows仮想マシン上でIISを使い、

Web Platform InstallerでPHPをインストールしました<\/A>。<\/P>

それではphpでウェブから画像を取得する方法が必要です。Linux系システムのコマンドライン世界で既にご存知かもしれない

cURL <\/A>メソッドに出会いました。<\/P>

必要なのは、このスクリプトが本物のコンピューターのようにこのサーバーから画像を取得しようとしているように見せかけることだけです：<\/P>

<?php<\/SPAN>
header (<\/SPAN>'Content-Type: image\/png'<\/SPAN>)<\/SPAN>;<\/SPAN> #content returns as an image<\/SPAN>
$url<\/SPAN> =<\/SPAN> 'https:<\/SPAN>\\/\\/placekitten.com\\/256\\/256?image='; #this is the base url<\/SPAN>
$ynew<\/SPAN> =<\/SPAN> rand(<\/SPAN>1,<?php<\/SPAN>
header (<\/SPAN>'Content-Type: image\/png'<\/SPAN>)<\/SPAN>;<\/SPAN>
$y<\/SPAN> =<\/SPAN> $_GET<\/SPAN>[<\/SPAN>'y'<\/SPAN>]<\/SPAN>;<\/SPAN> #パラメータ y は文字列として変数 y に格納されます<\/SPAN>
$x<\/SPAN> =<\/SPAN> $_GET<\/SPAN>[<\/SPAN>'x'<\/SPAN>]<\/SPAN>;<\/SPAN> #パラメータ x は格納されます...<\/SPAN>
$z<\/SPAN> =<\/SPAN> $_GET<\/SPAN>[<\/SPAN>'z'<\/SPAN>]<\/SPAN>;<\/SPAN> #わかりますよね？<\/SPAN>
$ynew<\/SPAN> =<\/SPAN>(<\/SPAN> -<\/SPAN>1<\/SPAN>*<\/SPAN>intval<\/SPAN>(<\/Span>)<\/SPAN>;<\/SPAN>
switch<\/SPAN> (<\/SPAN>$tileservice<\/SPAN>)<\/SPAN>{<\/SPAN>
     case<\/SPAN> 'cat'<\/SPAN>:<\/SPAN>
          $url<\/SPAN> =<\/SPAN> 'https:<\/SPAN>\/\/placekitten.com\/256\/256?image=';<\/SPAN>
          $ynew<\/SPAN> =<\/SPAN> rand<\/SPAN>(<\/SPAN>1<\/SPAN>,<\/SPAN>16<\/SPAN>)<\/SPAN>;<\/SPAN>
          $url<\/SPAN> .<\/SPAN>=<\/SPAN> $ynew<\/SPAN>;<\/SPAN>
          #echo $url;<\/SPAN>
          break<\/SPAN>;<\/SPAN>
     case<\/SPAN> 'bvg'<\/Span>:<\/span>
     default<\/span>:<\/span>
          $ynew<\/span> =<\/span>(<\/span> -<\/span>1<\/span>*<\/span>intval<\/span>(<\/span>$y<\/span>)<\/span>)<\/span>+<\/span>pow<\/span>(<\/span>2<\/span>,<\/span>intval<\/span>(<\/span>$z<\/span>)<\/span>)<\/span>-<\/span>1<\/span>;<\/span>
          $url<\/span> =<\/span> 'https//fahrinfo.bvg.de/tiles/base/'.$z.'/'.$x.'/'.$ynew.'.png';
                                          break;
;&NBSP; 
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_FRESH_CONNECT, TRUE);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.A.B.C Safari/525.13");
$data = curl_exec($ch);
curl_close($ch);
echo $data;
?><</Span>> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍> ‍><< EMOJ I _33 > >><< EMOJ I _34 > >><< EMOJ I _35 > >><< EMOJ I _36 > >

これで、cat タイルを取得するためのプロキシ URL は次のようになります:< /P >

http://your-server-URL.com/name-of-your-script.php??t=cat&z=15&x=16371&y=10936&NBSP;< /P >時々、タイルが取得できなかった場合のフォールバックサーバーも必要です。そこで、cURL コールのレスポンスをチェックし、フォールバックレイヤーとして白黒レイヤーを使用します:< /P >&lt ;?php
header ('Content-Type: image/png');
error_reporting(E_ALL);
ini_set('display_errors', '1');
$tileservice=null;
if (isset($_GET['t'])) {
$tileservice = $_GET['t'];
}
if (!$tileservice) {
$tileservice = 'bvg';
}
$y = $_GET class="punctuation token">[<\/SPAN>'y'<\/SPAN>]<\/SPAN>;<\/SPAN>
$x<\/SPAN> =<\/SPAN> $_GET<\/SPAN>[<\/SPAN>'x'<\/SPAN>]<\/SPAN>;<\/SPAN>
$z<\/SPAN> =<\/SPAN> $_GET<\/SPAN>[<\/SPAN>'z'<\/SPAN>]<\/SPAN>;<\/SPAN>
$server<\/SPAN> =<\/SPAN> array<\/SPAN>(<\/SPAN>)<\/SPAN>;<\/SPAN>
switch<\/SPAN> (<\/SPAN>$tileservice<\/SPAN>)<\/SPAN>{<\/SPAN>
    case<\/SPAN> 'cat'<\/SPAN>:<\/SPAN>
        #$server[] = 'https:<\/SPAN>\/\/placekitten.com\/256\/256';<\/SPAN>
        $url<\/SPAN> =<\/SPAN> 'https:<\/SPAn>\/\/placekitten.com\/256\/256?image=';<\/span>
        $ynew<\/span> =<\/span> rand<\/span>(1,16);
        $url.=$ynew;
        #echo $url;
        break;
    case 'bvg':
    default:
        $ynew=(-1*intval($y))+pow(2,intval($z))-1;
        $url= 'https://fahrinfo.bvg.de/tiles/base/'.$z.'/'.$x.'/'.$ynew.'.png';
        break;
};
    
$ch=curl_init();
curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,false);
curl_setopt($ch,CURLOPT_FRESH_CONNECT,TRUE);
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_USERAGENT,"Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.A.B.C Safari/525.13");
$data=curl_exec($ch);
if(curl_getinfo($ch,CURLINFO_HTTP_CODE)!=200){
    curl_close($ch);
    $server=array();
    $server[]= 'http://a.tiles.wmflabs.org/bw-mapnik/';
    $server[]= 'http://b.tiles.wmflabs.org/bw-mapnik/';
    $server[]= 'http://c.tiles.wmflabs.org/bw-mapnik/';
    $url=$server[array_rand($server)];
    $url.=$z."/".$x."/".$y.".png";
    #echo $url;
     $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_FRESH_CONNECT, TRUE);
    curl_setopt($ch,CURLOPT_URL, $url);
    curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
     Curl_setopt </ Span >< Span Class= "Punctuation Token" >( </ Span >< Span Class= "Variable Token" > $ Ch </ Span >< Span Class= "Punctuation Token" > , </ Span >< Span Class= "Token Constant" > CURLOPT_USERAGENT </ Span >< Span Class= "Punctuation Token" > , </ Span >< Span Class= "String Token" > "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.A.B.C Safari/525.13" </ Span >< Span Class= "Punctuation Token" > ) </ Span >< Span Class= "Punctuation Token" > ; </ Span >
     $ Data </ Span > < Span Class= "Operator Token" > = </ Span >< Span Class= "Token Function" > Curl_exec </ Span >< Span Class= "Punctuation Token" >( </ Span >< Span Class= "Variable Token" > $ Ch </ Span >< Span Class= "Punctuation Token" > ) </ Span >< Span Class= "Punctuation Token" > ; </ Span >
} </ Span >
Curl_close </ Span >< Span Class= "Punctuation Token" >( </ Span >< Span Class= "Variable Token" > $ Ch </ Span >< Span Class= "Punctuation Token" > ) </ Span >< Span Class= "Punctuation Token" > ; </ Span >
Echo </ Span > $ Data </ 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><<EMOJI_8>></Span><Span><<EMOJI_9>></Span><Span><<EMOJI_10>></Span><Span><<EMOJI_11>></Span><Span><<EMOJI_12>></Span><Span><<EMOJI_13>></Span><Span><<EMOJI_14>></Span><Span><<EMOJI_15>></Span><Span><
地図は現在両方のタイルを表示しています:



もし「迷惑な注釈」を追加したい場合は、これらのslippyタイルに素敵な透かしを追加することもできます:

<?php
header('Content-Type: image/png');
error_reporting(E_ALL);
ini_set('display_errors', '1');
$tileservice = null;
if (isset($_GET['t'])) {
    $tileservice = $_GET['t'];
}
if (!$tileservice) {
    $tileservice = 'bvg';
}
$y = $_GET['y'];
$x = $_GET['x'];
$z = $_GET['z'];
$server = array();
switch ($tileservice) {
    case 'cat':
        #$server[] = 'https://placekitten.com/256/256';
        $url = 'https://placekitten.com/256/256?image=';
        $ynew = rand(1,16);
        $url .= $ynew;
        #echo $url;
        break;
    case 'bvg':
    default:
        $ynew = class="punctuation token">(<\/SPAN> -<\/SPAN>1<\/SPAN>*<\/SPAN>intval<\/SPAN>(<\/SPAN>$y<\/SPAN>)<\/SPAN>)<\/SPAN>+<\/SPAN>pow<\/SPAN>(<\/SPAN>2<\/SPAN>,<\/SPAN>intval<\/SPAN>(<\/SPAN>$z<\/SPAN>)<\/SPAN>)<\/SPAN>-<\/SPAN>1<\/SPAN>;<\/SPAN>
          $url<\/SPAN> =<\/SPAN> 'https:<\/SPAN>\/\/fahrinfo.bvg.de\/tiles\/base\/' . $z . '\/' . $x . '\/' . $ynew . '.png';<\/SPAN>
          break<\/SPAN>;<\/SPAN>
}<\/SPAN>;<\/SPAN>    
$ch<\/SPAN> =<\/SPAN> curl_init<\/Span>(<\/span>)<\/span>;<\/span>
curl_setopt<\/span>(<\/span>$ch<\/span>, CURLOPT_SSL_VERIFYPEER<\/span>, false<\/span>);<\/span>
curl_setopt<\/span>(<\/span>$ch<\/span>, CURLOPT_FRESH_CONNECT<\/span>, TRUE<\/span>);<\/span>
curl_setopt<\/span>(<\/span>$ch<\/span>, CURLOPT_URL<\/span>, $url<\/span>);<\/span>
curl_setopt<\/span>(<\/span>$ch<\/span>, CURLOPT_RETURNTRANSFER<\/span>, 1<\/span>);<\/span>
curl_setopt<\/span>(<\/span>$ch<\/span>, CURLOPT_USERAGENT<\/span>, token">)<\/SPAN>;<\/SPAN>
}<\/SPAN>
curl_close<\/SPAN>(<\/SPAN>$ch<\/SPAN>)<\/SPAN>;<\/SPAN>
$im<\/SPAN> =<\/SPAN> imagecreatefromstring<\/SPAN>(<\/SPAN>$data<\/SPAN>)<\/SPAN>;<\/SPAN>
$stamp<\/SPAN> =<\/SPAN> imagecreatetruecolor<\/SPAN>(<\/SPAN>100<\/SPAN>,<\/SPAN> 30<\/SPAN>)<\/SPAN>;<\/SPAN>
imagestring<\/SPAN>(<\/SPAN>$stamp<\/SPAN>,<\/SPAN> 10<\/SPAN>,<\/SPAN> 10<\/SPAN>,<\/SPAN> 5<\/SPAN>,<\/SPAN> 'watermark'<\/SPAN>,<\/SPAN> 0xff0000<\/SPAN>)<\/SPAN>;<\/SPAN>
// 境界線を設定し、サイズを取得する<\/span>
$marge_right<\/span> =<\/span> 100<\/span>;<\/span>
$marge_bottom<\/span> =<\/span> 100<\/span>;<\/span>
$sx<\/span> =<\/span> imagesx<\/span>(<\/span>$stamp<\/span>)<\/span>;<\/span>
$sy<\/span> =<\/span> imagesy<\/span>(<\/span>$stamp<\/span>)<\/span>;<\/span>
// 透過度50でウォーターマークを元の画像にコピーする<\/span>
imagecopymerge<\/span>(<\/span>$im<\/span>, $stamp<\/span>, imagesx<\/span>($im<\/span>) - $sx<\/span> - $marge_right<\/span>, imagesy<\/span>($im<\/span>) - $sy<\/span> - $marge_bottom<\/span>, 0, 0, imagesx<\/span>($stamp<\/span>), imagesy<\/span>($stamp<\/span>), 50);<\/span>
header<\/sp an>(<'Content-Type: image/png'>);
imagepng</ span > (< span cl ass= " variable toke n" > $im </ span > ) ;
imagedestroy</ span > (< span cl ass= " variable toke n" > $im </ span > ) ;
?></ span ><</ span > >< span cl ass= "line-numbers-rows" >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ span >< span > </ sp an > < sp an > << EM OJ I _3 2 >> < / sp an > < sp an > << EM OJ I _3 3 >> < / sp an > < sp an > << EM OJ I _3 4 >> < / sp an > < sp an > << EM OJ I _3 5 >> < / sp an > < sp an > << EM OJ I _3 6 >> < / sp an > < sp an > << EM OJ I _3 7 >> < / sp an > < sp an > << EM OJ I _3 8 >> < / sp an > < sp an > << EM OJ I _3 9 >> < / sp an > < sp an > << EM OJ I _4 0 >> < / sp an > < sp an > << EM OJ I _4 1 >> < / sp an > < sp an > << EM OJ I _4 2 >> < / sp an > < sp an > << EM OJ I _4 3 >> < / sp an > < sp an > << EM OJ I _4 4 >> < / sp an > < sp an > << EM OJ I _4 5 >> < / sp an > < sp an > << EM OJ I _4 6 >> < / sp an > < sp an > << EM OJ I _4 7 >> < / sp an > < sp an > << EM OJ I _4 8 >> < / sp an > < sp an > << EM OJ I _4 9 >> < / sp an > < sp an > << EM OJ I _5 0 >> < / sp an > < sp an > << EM OJ I _5 1 >> < / sp an > < sp an > << EM OJ I _5 2 >> < / sp an > < sp an > << EM OJ I _5 3 >> < / sp an > < sp an > << EM OJ I _5 4 >> ...
しかし、これはサーバーに負荷をかける可能性があります...なので、これについては再考したほうが良いかもしれません😉


最終的な注意事項

悪いスクリプトでPHPを実行すると、プロキシされたタイルサーバーの応答が非常に遅くなる可能性があります。したがって、サーバー上でタイルをキャッシュすることを試みるべきです。しかし、これは全く別の話です。