imageOpenPolygon ()을 사용하여 지역 상호 작용 맵을 달성하기 위해 맵 영역을 표시합니다.

M66 2025-06-01

웹 개발에서 특히지도 디스플레이 및 상호 작용 기능에서 PHP 및 GD 라이브러리 (이미지 처리 라이브러리)는 종종 이미지를 생성하고 조작하는 데 사용됩니다. ImageOpenPolygon () 함수는 GD 라이브러리에서 매우 유용한 기능입니다. 이미지에 다각형을 그리는 데 도움이 될 수 있으며 맵 영역을 표시하거나 면적 대화 형 그래프를 구현 해야하는 시나리오에 적합합니다. 이 기사에서는 PHP에서 ImageOpenPolygon () 함수를 사용하여 맵 영역을 표시하고 면적 대화 형 그래프 기능을 구현하는 방법을 소개합니다.

1. 준비

먼저 GD 라이브러리가 PHP 환경에 설치되어 활성화되어 있는지 확인하십시오. 일반적으로 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); // a500x500캔버스
$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