nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Kitten en Aangepaste Tegellaag in AGOL en ArcGIS Pro

RiccardoKlinger2

<\/HEAD>

Soms zie je deze geweldige tegel-laag in een webkaart en wil je die gebruiken in je ArcGIS online project of ArcGIS Pro. Dat was het gevoel dat ik had, toen ik deze mooie kleine BVG basemap<\/A> zag. Het gebruik van dit soort gedraaide basemap was een beetje lastig omdat de logica voor latitude-longitude naar tegelnummers wat verwrongen was. In producten zoals ArcGIS Online\/ ArcGIS Enterprise is er geen manier om de logica hiervan aan te passen. Dus als je zo'n tegel-laag wilt gebruiken in AGOL, moet je ergens anders ingrijpen.<\/P>

Onderbreek de Tegel Verkrijging<\/H3>De tegels worden opgehaald van een server elke keer dat je de kaart verschuift of inzoomt. De aanpak die ik gebruikte om de tegels te krijgen maakt gebruik van een eenvoudige php proxy.<\/P>Dus in plaats van de tegels direct van de webserver te halen via een directe pull, gebruiken we het php-script dat ons verzoek ontvangt, het enigszins verwrongen tegelnummer voor de rij berekent en de juiste tegel opvraagt en doorstuurt naar je AGOL-project.<\/P>Laten we beginnen met een simpele truc die als basis dient: kitten watermerken<\/STRONG>.<\/P>PlaceKitten<\/A> levert placeholder afbeeldingen in een heel gangbaar formaat: http:\/\/placekitten.com\/256\/256?image=5<\/A> waarbij de eerste "256" de breedte is, de tweede de hoogte en de laatste het nummer van de afbeelding die je wilt zien (afbeelding nummer 5). De afbeeldingen worden geleverd als PNG's.<\/P>
Zoals gezegd, we zullen een php-script gebruiken om de data op te halen en elke afbeelding terug te sturen naar AGOL zoals we die ontvangen. Dit heeft vanuit geo-perspectief helemaal geen zin. Je hebt dus een php-enabled server nodig. Ik gebruikte een Windows virtuele machine met IIS en installeerde
PHP via de Web Platform Installer<\/A>.<\/P>
We hebben dus een manier nodig om afbeeldingen van het web op te halen met php. Ik kwam de
cURL <\/A>methode tegen die je misschien al kent uit de command line wereld van Linux-gebaseerde systemen.<\/P>
Alles wat we hoeven te doen is ons script zo na te bootsen dat het lijkt alsof een echte computer probeert een afbeelding van deze server te krijgen:<\/P>
<?php<\/SPAN>\nheader (<\/SPAN>'Content-Type: image\/png'<\/SPAN>)<\/SPAN>;<\/SPAN> #content wordt teruggegeven als afbeelding<\/SPAN>\n$url<\/SPAN> =<\/SPAN> 'https:<\/SPAN>\\/\\/placekitten.com\\/256\\/256?image='; #dit is de basis url<\/SPAN>\n$ynew<\/SPAN> =<\/SPAN> rand<\/SPAN>(<\/SPAN>1<\/SPAN>,<\/SPAN>16<\/SPAN>)<\/SPAN>;<\/SPAN> #we kunnen er één uit 16 afbeeldingen kiezen<\/SPAN>\n$url<\/SPAN> .<\/SPAN>=<\/SPAN> $ynew<\/SPAN>;<\/SPAN>\n$ch<\/SPAN> =<\/SPAN> curl_init<\/Span>();#Initialiseer een cURL sessie
Nu kun je al de echte URL van je server gebruiken (probeer zelfs niet localhost mijn vriend 😉) en embed de placeholder katten in je AGOL-project.<\/P>
Open een nieuwe webkaart en voeg een nieuwe webgebaseerde laag toe:<\/P>
Ik gebruik hier de voorgestelde "{level}\/{col}\/{row}.png" notatie omdat we voor elke afbeelding nieuwe oproepen willen maken om een echt willekeurig patroon te krijgen:<\/P>
Kijk, al die schattige kittens...<\/P>

Echte Cartografie Uitvoeren<\/H3>Op dit moment hebben we een idee hoe we afbeeldingen van het web kunnen doorsturen naar AGOL als weblaag. Laten we nu verder gaan en deze placeholders vullen met "echte cartografie".
Zoals we in dit laatste bericht hebben gezien, is het naamgevingsschema voor de BVG-kaart wat krom. Maar eerst moet ons script weten welke afbeeldingen het moet ophalen. Dus moeten we het script wat parameters sturen. We doen dit op een vergelijkbare manier als bij echte TMS-servers: stuur de ZXY parameters via de URL, lees ze in ons script en voeg ze toe aan de URL:
token"><?php<\/SPAN>
header (<\/SPAN>'Content-Type: image\/png'<\/SPAN>)<\/SPAN>;<\/SPAN>
$y<\/SPAN> =<\/SPAN> $_GET<\/SPAN>[<\/SPAN>'y'<\/SPAN>]<\/SPAN>;<\/SPAN> #de parameter y wordt als een string opgeslagen in de variabele y<\/SPAN>
$x<\/SPAN> =<\/SPAN> $_GET<\/SPAN>[<\/SPAN>'x'<\/SPAN>]<\/SPAN>;<\/SPAN> #de parameter x wordt opgeslagen...<\/SPAN>
$z<\/SPAN> =<\/SPAN> $_GET<\/SPAN>[<\/SPAN>'z'<\/Span>]<\/span>;<\/span> #je snapt het, toch?<\/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> #herbereken de y-coördinaat met behulp van de gevonden formule.<\/span>
$url<\/span> =<\/span> 'https:<\/span>//fahrinfo.bvg.de/tiles/base/'.$z.'/'.$x.'/'.$ynew.'.png'; #maak de url aan<\/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>(< spanclass= "variabletoken" > $ch , < spanclass= "tokenconstant" > CURLOPT_FRESH_CONNECT , < spanclass= "tokenconstant" > TRUE ) ;
curl_setopt ( < spanclass= "variabletoken" > $ch , < spanclass= "tokenconstant" > CURLOPT_URL , < spanclass= "variabletoken" > $url ) ;
curl_setopt ( < spanclass= "variabletoken" > $ch , < spanclass= "tokenconstant" > CURLOPT_RETURNTRANSFER , 1 ) ;
curl_setopt ( < spanclass= "variabletoken" > $ch , < spanclass= "tokenconstant" > 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 ;
>?>< & lt; EMOJI_0 & gt; & lt; SPANclass = "line-numbers-rows" & gt; & lt; SPAN & gt; & lt; EMOJI_1 & gt; & lt; / SPAN & gt; & lt; SPAN & gt; & lt; EMOJI_2 & gt; & lt; / SPAN & gt; & lt; SPAN & gt; & lt; EMOJI_3 & gt; & lt; / SPAN & gt; & lt; SPAN & gt; & lt; EMOJI_4 & gt; & lt; / SPAN & gt; & lt; SPAN & gt; & lt; EMOJI_5 & gt; & lt; / SPAN & gt; & lt; SPAN & gt; & lt; EMOJI_6 & gt; & lt;/ SPAN><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
De parameters worden naar de PHP-ingeschakelde server gestuurd met het volgende schema:<\p>

http:\/\your-server-URL.com/name-of-your-script.php?z={level}&x={col}&y={row}

Met dit script krijg je een mooie BVG basemap in je ArcGIS Online editor Map Viewer:<\p>

Zodra je de webkaart hebt opgeslagen, kun je deze zelfs openen in ArcGIS Pro en gebruiken voor je doeleinden door de kaart toe te voegen vanuit Portal:<\p>

Meerdere Servers

Als je meerdere servers met hetzelfde script wilt afhandelen, kun je een vierde parameter toevoegen die de tileserver beheert en enkele switches toevoegen:<\p>


<?php
header ('Content-Type: image/png');
$tileservice = null; #
if (isset($_GET['t'])) {
    $tileservice = $_GET['t'];
}
if (!$tileservice) {
    $tileservice = 'bvg'; #als er geen tileserver parameter is meegegeven
}
$y = $_GET['y'];
$x = $_GET['x'];
$z = $_GET['z'];
$server = array(
  class="punctuation token">)<\/SPAN>;<\/SPAN>
switchen<\/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>['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$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;
><<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>&LT;> De kaart toont nu beide tegels:
 
Als je wat "irritante annotatie" wilt toevoegen, kun je ook een mooi watermerk op die slippy tiles zetten:
 ?php</delimiter toKen>
header 'Content-Type: image/png';
error_reporting'(E_ALL')
ini_set'(, )
$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>\n          $url<\/SPAN> =<\/SPAN> 'https:<\/SPAN>\/\/fahrinfo.bvg.de\/tiles\/base\/' . $z . '\/' . $x . '\/' . $ynew . '.png';<\/SPAN>\n          break<\/SPAN>;<\/SPAN>\n}<\/SPAN>;<\/SPAN>     \n$ch<\/SPAN> =<\/SPAN> curl_init<\/Span>();\ncurl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);\ncurl_setopt($ch, CURLOPT_FRESH_CONNECT, TRUE);\ncurl_setopt($ch, CURLOPT_URL, $url);\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);\ncurl_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>
// stel randen in en verkrijg afmetingen<\/span>
$marge_right<\/Span> =<\//span> 100<\//span>;<\//span>
$marge_bottom<\//span> =<\//span> 100<\//span>;<\//span>
$sx<\//span> =<\//span> imagesx<\//span>($stamp<\//span>)<\//span>;<\//span>
$sy<\//span> =<\//span> imagesy<\//span>($stamp<\//span>)<\//span>;<\//span>
// kopieer het watermark met 50% transparantie in de originele afbeelding<\/span>
imagecopymerge<\//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(<spanclass=

Vind meer berichten getagd met

Knowhow

Technologie

Reacties

There are no comments yet

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.