php - 生成带有两个标记的静态 map 图像，中间有一条弧线，服务器端

Question

我的问题类似于“Curved line between two near points in google maps”，但我想将 map 生成为静态图像服务器端(PHP 或 NodeJS)，以便可以在离线环境中使用。

简而言之，我有两组纬度和经度，我想在它们上面放置标记并在它们之间绘制一条非测地线弧，然后将 map 保存为图像。谷歌地图不是必需的。

这基本上是我想要实现的目标:

Answer 1

使用 PHP(需要 ImageMagick)和 Open Street Map(通过 curl)完成。
请注意:在实现此解决方案之前，您必须了解使用 Open Street Map 的许可和条款，以确保您可以接受它。
https://operations.osmfoundation.org/policies/tiles/
TODO:改善2点之间的贝塞尔曲线
TODO:检查来自切片服务器的响应以确保它是图像

<?php
/**
 * adapted from https://wiki.openstreetmap.org/wiki/ProxySimplePHP
 * get the map tile and save as png
 *
 * @param float   $lat1  Latitude in degrees
 * @param float   $lng1  Longitude in degrees
 * @param float   $lat2  Latitude in degrees
 * @param float   $lng2  Longitude in degrees
 * @param integer $zoom Zoom level 0-20
 *
 * @throws Exception
 */
function createMap($lat1, $lng1, $lat2, $lng2, $zoom)
{
  //from https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#X_and_Y
  //convert lat/lng to x/y tile coords
  $x1 = floor((($lng1 + 180) / 360) * pow(2, $zoom));
  $y1 = floor((1 - log(tan(deg2rad($lat1)) + 1 / cos(deg2rad($lat1))) / pi()) / 2 * pow(2, $zoom));

  $x2 = floor((($lng2 + 180) / 360) * pow(2, $zoom));
  $y2 = floor((1 - log(tan(deg2rad($lat2)) + 1 / cos(deg2rad($lat2))) / pi()) / 2 * pow(2, $zoom));

  $startX = min($x1,$x2)-1;
  $startY = min($y1,$y2)-1;

  if($startX<0)
  {
    $startX = 0;
  }
  if($startY<0)
  {
    $startY = 0;
  }

  $endX = max($x1,$x2)+1;
  $endY = max($y1,$y2)+1;

  if($endX>(pow(2,$zoom))-1)
  {
    $endX = (pow(2,$zoom))-1;
  }
  if($endY>(pow(2,$zoom))-1)
  {
    $endY = (pow(2,$zoom))-1;
  }

  if(($endX-$startX+1)*($endY-$startY+1)>=50)
  {
    //https://operations.osmfoundation.org/policies/tiles/#bulk-downloading
    //terms of use state: In particular, downloading an area of over 250 tiles at zoom level 13 or higher for offline or later usage is forbidden
    //we're going to be a lot more strict here
    throw new Exception('Zoom level is too high, please reduce');
  }

  if(!is_dir(__DIR__."/tiles"))
  {
    mkdir(__DIR__."/tiles",0755);
  }

  for($x=$startX;$x<=$endX;$x++)
  {
    for($y=$startY;$y<=$endY;$y++)
    {
      $file = "tiles/${zoom}_${x}_${y}.png";
      if(!is_file($file) || filemtime($file) < time() - (86400 * 30))
      {
        $server = array();
        $server[] = 'a.tile.openstreetmap.org';
        $server[] = 'b.tile.openstreetmap.org';
        $server[] = 'c.tile.openstreetmap.org';

        $url = 'http://'.$server[array_rand($server)];
        $url .= "/".$zoom."/".$x."/".$y.".png";

        $ch = curl_init($url);
        $fp = fopen($file, 'wb');
        curl_setopt($ch, CURLOPT_FILE, $fp);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        global $userAgent;
        if(empty($userAgent))
        {
          throw new Exception('User agent required');
        }
        curl_setopt($ch,CURLOPT_USERAGENT,$userAgent);
        curl_exec($ch);
        curl_close($ch);
        fflush($fp);    // need to insert this line for proper output when tile is first requested
        fclose($fp);
      }
    }
  }

  //now stitch all tiles into 1 image
  $tileWidth = 0;
  $tileHeight = 0;

  $map = new Imagick();
  $cols = array();
  for($x=$startX;$x<=$endX;$x++)
  {
    $col = new Imagick();
    for($y = $startY; $y <= $endY; $y ++)
    {
      $col->readImage("tiles/${zoom}_${x}_${y}.png");
      if($tileWidth===0)
      {
        $tileWidth = $col->getImageWidth();
        $tileHeight = $col->getImageHeight();
      }
    }
    $col->resetIterator();
    $cols[] = $col->appendImages(true);
  }
  foreach($cols as $col)
  {
    $map->addImage($col);
  }
  $map->resetIterator();
  $map = $map->appendImages(false);

  //calculate the pixel point of the lat lng
  $x1 = $tileWidth*(((($lng1 + 180) / 360) * pow(2, $zoom))-$startX);
  $y1 = $tileHeight*(((1 - log(tan(deg2rad($lat1)) + 1 / cos(deg2rad($lat1))) / pi()) / 2 * pow(2, $zoom))-$startY);
  $x2 = $tileWidth*(((($lng2 + 180) / 360) * pow(2, $zoom))-$startX);
  $y2 = $tileHeight*(((1 - log(tan(deg2rad($lat2)) + 1 / cos(deg2rad($lat2))) / pi()) / 2 * pow(2, $zoom))-$startY);

  $draw = new ImagickDraw();
  $draw->setFillAlpha(0);
  $draw->setStrokeColor(new ImagickPixel('black'));
  $draw->setStrokeWidth(2);
  $draw->bezier(array(array('x'=>$x1,'y'=>$y1),array('x'=>$x1+(($x2-$x1)/2)+50,'y'=>$y1+(($y2-$y1)/2)-50),array('x'=>$x2,'y'=>$y2)));
  $map->drawImage($draw);

  if(file_exists('map-marker.png'))
  {
    $icon = new Imagick('map-marker.png');
    $icon->scaleImage(30,30,true);
    $markerX = $x1-($icon->getImageWidth()/2);
    $markerY = $y1-$icon->getImageHeight();
    $map->compositeImage($icon->clone(),$icon::COMPOSITE_DEFAULT,$markerX,$markerY);

    $markerX = $x2-($icon->getImageWidth()/2);
    $markerY = $y2-$icon->getImageHeight();
    $map->compositeImage($icon->clone(),$icon::COMPOSITE_DEFAULT,$markerX,$markerY);
  }

  $map->setImageFormat('png');
  $map->writeImage('base_map.png');
}

//https://operations.osmfoundation.org/policies/tiles/#technical-usage-requirements
//You MUST provide a valid "user agent". For example the application name and a contact email address
//If you violate the terms of use the tiles will not be images but html
$userAgent = '';
createMap(23.634501, - 102.552783, 17.987557, - 92.929147, 5);