ImageOpenPolygon（）を使用してマップ領域をマークして地域の相互作用マップを達成します

M66 2025-06-01

Web開発では、特にマップディスプレイとインタラクション機能では、PHPおよびGDライブラリ（画像処理ライブラリ）が画像を生成および操作するためによく使用されます。 ImageOpenPolygon（）関数は、GDライブラリで非常に有用な関数です。画像にポリゴンを描くのに役立ち、マップ領域をマークする必要がある、またはインタラクティブなグラフが実装されているシナリオに適しています。この記事では、PHPでImageOpenPolygon（）関数を使用してマップ領域をマークし、領域インタラクティブグラフ関数を実装する方法を紹介します。

1。準備

まず、PHP環境にGDライブラリがインストールされ、有効になっていることを確認してください。通常、GDライブラリはデフォルトでPHP環境にインストールされます。そうでない場合は、次のコマンドを介してインストールできます。

 sudo apt-get install php-gd

インストール後、変更が有効になるためにApacheまたはPHP-FPMサービスを再起動することを忘れないでください。

2。ImageOpenPolygon（）関数を使用して、マップ領域をマークします

ImageOpenPolygon（）関数の関数は、提供された座標配列に基づいて画像にポリゴンを描画することです。この関数の基本的な構文は次のとおりです。

 imageopenpolygon($image, $points, $num_points, $color);

$画像：ターゲット画像リソース。
$ポイント：ポリゴン頂点座標の配列。
$ num_points ：ポリゴンの頂点の数。
$色：ポリゴンの色。

2.1画像リソースの作成

まず、画像リソースを作成する必要があります。通常、既存の画像ファイルから画像リソースを作成するか、空白の画像を直接作成します。

 <?php
// 空白の画像を作成します（マップ画像にすることができます）
$image = imagecreate(500, 500); // aを作成します500x500キャンバス
$backgroundColor = imagecolorallocate($image, 255, 255, 255); // 白い背景
?>

2.2ポリゴン座標の定義

ポリゴンの座標は配列で定義され、各頂点の座標は配列要素で表されます。たとえば、長方形の領域を例として定義できます。

 <?php
// 長方形の4つの頂点座標を定義します
$points = array(
    100, 100,  // 頂点1 (x, y)
    400, 100,  // 頂点2 (x, y)
    400, 400,  // 頂点3 (x, y)
    100, 400   // 頂点4 (x, y)
);
?>

2.3描画ポリゴン

次に、 ImageOpenPolygon（）関数を使用して、このポリゴンを描画します。

 <?php
// ポリゴンの色を定義します
$polygonColor = imagecolorallocate($image, 255, 0, 0); // 赤

// ポリゴンを描きます
imagefilledpolygon($image, $points, 4, $polygonColor); // 使用 imagefilledpolygon 色を埋めるために
?>

3。地域の相互作用関数を実装します

地域の相互作用関数、つまり、ユーザーがマップの領域をクリックすると、PHPはクリック場所に応じて異なる操作を実行します。簡素化するために、HTMLの<Map>タグとPHPを組み合わせて、地域の相互作用を実現できます。

3.1 HTMLの<Map>および<エリアンタグを使用します

HTMLでは、画像ホットスポット領域を<Map>および<エリアンタグを使用して実装できます。ユーザーがこれらの領域をクリックすると、JavaScriptまたはPHPのリクエストをトリガーできます。

 <?php
// 创建图像资源并ポリゴンを描きます，上記のように

// 出力画像
header('Content-Type: image/png');
imagepng($image);

// 無料のメモリ
imagedestroy($image);
?>

 <img src="your_image.png" usemap="#map" alt="地図">
<map name="map">
    <area shape="poly" coords="100,100,400,100,400,400,100,400" href="http://m66.net/region1" alt="エリア1">
    <!-- 可以为每个エリア定义不同的链接 -->
    <area shape="poly" coords="150,150,350,150,350,350,150,350" href="http://m66.net/region2" alt="エリア2">
</map>

ここで、座標はポリゴンの座標によって定義されます。 shape = "poly"はポリゴン領域を表し、 HREF属性は、この領域をクリックするときにユーザーがジャンプするリンクアドレスです。この例では、すべてのURLをM66.NETドメイン名に置き換えました。

3.2インタラクティブイベントの処理

このようにして、ユーザーがさまざまな領域をクリックすると、ニーズに応じて異なるページにジャンプできます。たとえば、ユーザーがクリックする領域に基づいて異なるロジックを実行するPHPページを作成できます。

 <?php
if ($_SERVER['REQUEST_URI'] == '/region1') {
    // 处理エリア1相互作用ロジック
    echo "您点击了エリア1！";
} elseif ($_SERVER['REQUEST_URI'] == '/region2') {
    // 处理エリア2相互作用ロジック
    echo "您点击了エリア2！";
}
?>

4。概要

この記事では、PHPでImageOpenPolygon（）関数を使用してマップ領域をマークし、HTML <Map>タグを組み合わせて領域インタラクショングラフ関数を実装する方法を紹介します。このようにして、ユーザーがマップ内のさまざまな領域と対話できるインタラクティブマップを作成できます。特定の領域をマークしているか、領域をクリックするかどうかにかかわらず、PHPおよびGDライブラリは強力な機能と柔軟な実装方法を提供します。

imageopenpolygon