Camadas Kitten e Custom Tile no AGOL e ArcGIS Pro

RiccardoKlinger2

<\/HEAD>

Às vezes você vê essa ótima camada de tiles em um mapa web e quer usá-la no seu projeto ArcGIS online ou ArcGIS Pro. Essa foi a sensação que tive ao ver esse simpático BVG basemap<\/A>. O uso desse tipo de basemap meio torto foi um pouco complicado, pois a lógica para converter latitude-longitude em números de tile era um pouco confusa. Em produtos como ArcGIS Online\/ ArcGIS Enterprise não há como alterar essa lógica. Então, se você quiser usar uma camada de tile assim no AGOL, precisa intervir em outro lugar.<\/P>

Interrompa a Aquisição de Tiles<\/H3>Os tiles são buscados de um servidor toda vez que você move ou dá zoom no mapa. A abordagem que usei para obter os tiles utiliza um simples proxy php.<\/P>Então, ao invés de coletar os tiles diretamente do servidor web via uma requisição direta, usamos o script php que recebe nosso pedido, calcula o número do tile meio torto para a linha e solicita o tile correto, encaminhando-o para seu projeto AGOL.<\/P>Mas vamos começar com um truque simples que serve como base: marcas d'água de gatinhos<\/STRONG>.<\/P>PlaceKitten<\/A> fornece imagens placeholder em um formato muito comum: http:\/\/placekitten.com\/256\/256?image=5<\/A> onde o primeiro "256" é a largura, o segundo é a altura e o último é a imagem que você gostaria de ver (imagem número 5). As imagens são servidas como PNGs.<\/P>

Como dito, usaremos um script php para buscar os dados e enviar cada imagem de volta para o AGOL assim que a recebermos. Isso não faz sentido algum do ponto de vista geográfico. Portanto, você precisará de um servidor com suporte a php. Eu estava usando uma máquina virtual Windows com IIS e instalei

PHP usando o Web Platform Installer<\/A>.<\/P>

Então precisamos de uma forma de buscar imagens da web usando php. Eu encontrei o método

cURL <\/A>que você talvez já conheça do mundo da linha de comando em sistemas baseados em Linux.<\/P>

Tudo que precisamos fazer é imitar nosso script para parecer um computador real tentando obter uma imagem deste servidor:<\/P>

<SPAN class="php token"><SPAN class="delimiter token"><?php<\/SPAN>\nheader <SPAN class="punctuation token">(<\/SPAN><SPAN class="string token">'Content-Type: image\/png'<\/SPAN><SPAN class="punctuation token">)<\/SPAN><SPAN class="punctuation token">;<\/SPAN> <SPAN class="shell-comment comment token">#conteúdo retornado como imagem<\/SPAN>\n<SPAN class="variable token">$url<\/SPAN> <SPAN class="operator token">=<\/SPAN> 'https<SPAN class="punctuation token">:<\/SPAN><SPAN class="comment token">\\/\\/placekitten.com\\/256\\/256?image='; #esta é a url base<\/SPAN>\n<SPAN class="variable token">$ynew<\/SPAN> <SPAN class="operator token">=<\/SPAN> <SPAN class="token function">rand<SPAN class="punctuation token">(<\/SPAN><SPAN class="number token">1<SPAN class="punctuation token">,<SPAnclass=\"number token\">16<SPAnclass=\"punctuation token\">)<SPAnclass=\"punctuation token\">;<SPAnclass=\"shell-comment comment token\">#podemos coletar uma dentre 16 imagens<SPAnclass=\"punctuation token\"></SPAnclass=\"></SPAnclass=\"></SPAnclass=\"></SPAnclass=\"></SPAnclass=\"></SPAnclass=\"></SPAnclass=\"></SPAnclass=\"></SPAnclass=\"></SPAnclass=\"></SPAnclass=\"></SPAnclass=\"></SPAnclass=\"></SPAnclass=\"></SPAnclass=\"></SPAnclass=\">

Agora você já pode usar a URL real do seu servidor (nem tente localhost meu amigo 😉<\/span>) e incorporar os gatinhos placeholder no seu projeto AGOL.<\/P>Abra um novo mapa web e adicione uma nova camada baseada na web:<\/P>Aqui estou usando a conotação proposta "{level}\/{col}\/{row}.png", pois gostaríamos de criar novas chamadas para cada imagem para obter um padrão verdadeiramente aleatório:<\/P>Olhe só, todos esses gatinhos fofos...<\/P>

Executando Cartografia real<\/H3>No momento temos uma ideia de como encaminhar imagens da web para o AGOL como uma camada web. Agora vamos avançar e preencher esses placeholders com "cartografia real".<\/P>Como vimos neste último post, o esquema de nomeação do mapa BVG é um pouco torto. Mas primeiro, nosso script precisa saber quais imagens deve buscar. Então precisamos enviar alguns parâmetros para o script. Faremos isso de forma semelhante aos servidores TMS reais: enviando os parâmetros ZXY via URL, lendo-os no nosso script e anexando-os à URL:<\/P><?php<\/SPAN>
cabeçalho (<\/SPAN>'Content-Type: image\/png'<\/SPAN>)<\/SPAN>;<\/SPAN>
$y<\/SPAN> =<\/SPAN> $_GET<\/SPAN>[<\/SPAN>'y'<\/SPAN>]<\/SPAN>;<\/SPAN> #o parâmetro y é armazenado como uma string na variável y<\/SPAN>
$x<\/SPAN> =<\/SPAN> $_GET<\/SPAN>[<\/SPAN>'x'<\/SPAN>]<\/SPAN>;<\/SPAN> #o parâmetro x é armazenado...<\/SPAN>
$z<\/SPAN> =<\/SPAN> $_GET<\/SPAN>[<\/SPAN>'z'<\/Span>]<\/span>;<\/span> #você entendeu, certo?<\/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> #recalcular a coordenada y usando a fórmula encontrada.<\/span>
$url<\/span> =<\/span> 'https:<\/span>//fahrinfo.bvg.de/tiles/base/'.$z.'/'.$x.'/'.$ynew.'.png'; #criando a url<\/span>
$ch<\/span> =<\/span> curl_init<\/span>(<\/span>)<\/span>;<\/span>
curl_setopt<\/span>(<\/span>$ch<\/span>, CURLOPT_SSL_VERIFYPEER<\/span>, false<\/span>)< spanclass= " punctuationtoken "> ; < \/ span >
curl_setopt < \/ span > ( < spanclass= " variabletoken " > $ ch < \/ span > , < spanclass= "tokenconstant" > CURLOPT_FRESH_CONNECT < \/ span > , < spanclass= "tokenconstant" > TRUE < \/ span > ) ;
curl_setopt < \/ span > ( < spanclass= " variabletoken " > $ ch < \/ span > , < spanclass= "tokenconstant" > CURLOPT_URL < \/ span > , < spanclass= " variabletoken " > $ url < \/ span > ) ;
curl_setopt < \/ span > ( < spanclass= " variabletoken " > $ ch < \/ span > , < spanclass= "tokenconstant" > CURLOPT_RETURNTRANSFER < \/ span > , 1 ) ;
curl_setopt < \/ span > ( < spanclass= " variabletoken " > $ ch < \/ span > , < spanclass= "tokenconstant" > CURLOPT_USERAGENT </ span>, class="punctuation token">)<\/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>(-1*intval($y)+
  < span clas s = " variable t oken " >$url</ span > < span clas s = " operator t oken " >=</ span > 'https:< span clas s = " comment t oken " > //fahrinfo.bvg.de/tiles/base/'.$z.'/'.$x.'/'.$ynew.'.png';</ span >
  < span clas s = " keyword t oken " >break</ span &gt ;< span clas s = " punctuation t oken " >;</ span >
< span clas s = " punctuation t oken " >}</ span &gt ;< span clas s = " punctuation t oken " >;</ span >
< span clas s = " variable t oken " >$ch</ span > < span clas s = " operator t oken " >=</ span > < span clas s = " tok en function " >curl_init</ span &gt ;< span clas s = " punctuation t oken " >( )</ span &gt ;< span clas s = " punctuation t oken " >;</ span >
< span clas s = " tok en function " >curl_setopt</ span &gt ;< span clas s = " punctuation t oken " >( $ch , CURLOPT_SSL_VERIFYPEER , false )</ span &gt ;< span clas s = " punctuation t oken " >;</ span >
< span clas s = " tok en function " >curl_setopt</ span &gt ;< span clas s = " punctuation t oken " >( $ch , CURLOPT_FRESH_CONNECT , TRUE )</ span &gt ;< span clas s = " punctuation t oken " >;</ span >
< span clas s = " tok en function " >curl_setopt</ span & gt ;< span clas s = " punctuation t oken " & gt;( $ch , CURLOPT_URL , $url )</ sp an&gt ;&lt ; sp an cl as s = class="punctuation token">['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 = (-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($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> -<\/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>();
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, 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>
// definir bordas e obter tamanhos<\/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>
// copiar a marca d'água com transparência de 50 para a imagem original<\/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);\nheader(\'Content-Type: image/png\'<\/)\;<\/>\nimagepng(\$im)<\/>\nimagedestroy(\$im)<\/>\n?><\\/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<<EMOJI_43 > << \/ SPAN > << EM O J I _ 44 >> << \/ SPAN > << EM O J I _ 45 >> << \/ SPAN > << EM O J I _ 46 >> << \/ SPAN > << EM O J I _ 47 >> << \/ SPAN > << EM O J I _ 48 >> << \/ SPAN > << EM O J I _ 49 >> << \/ SPAN > << EM O J I _ 50 >> << \/ SPAN > << EM O J I _ 51 >> << \/ SPAN > << EM O J I _ 52 >> << \/ SPAN > << EM O J I _ 53 >> << \/ SPAN > << EM O J I _ 54 >> << \/ SPAN > << EM O J I _ 55 >> << \/ SPAN > << EM O J I _ 56 >> << \/ SPAN > << EM O J I _ 57 >> << \/ SPAN > << EM O J I _ 58 >> << \/ SPAN > << EM O J I _ 59 >> << \/ SPAN > << EM O J I _ 60 >> << \/ SPAN > << EM O J I _ 61 >> << \/ SPAN > << EM O J I _ 62 >> << \/ SPAN > << EM O J I _ 63 >> << \/ SPAN > << EM O J I _ 64 >> << \/ SPAN > << EM O J I _ 65 >> << \/ SPAN > << EM O J I _ 66 >> << \/ SPAN > << EM O J I _ 67 >> << \/ SPAN > << EM O J I _ 68 >> << \/ SPAN > << EM O J I _ 69 >> < \ / S P A N >< \ / C O D E >< \ / P R E >< P > Mas isso vai criar alguma carga no servidor... então você pode querer repensar isso < span classe = "lia-unicode-emoji" título =":winking_face:"><< EM O J I _70>> </ span >< / P >< P >< IMG __jive_id = "419060" alt = "" classe = "imagem-7 jive-image j-img-original" src = "https://us.v-cdn.net /6038851/uploads /legacyfs /online /419060_2018-08-20 00_28_09-ArcGIS Pro - bvg_map - VBB map.png" />< / P >< H3 id = "toc-hId--1734004742" id = "toc-hId--1734004742" > Considerações finais </ H3 >< P > Executar PHP com um script "ruim" pode produzir uma resposta muito lenta do seu servidor de tiles proxy. Então você deve tentar armazenar em cache os tiles no seu servidor. Mas essa é uma história totalmente diferente. </ P >< / BODY >< / HTML >