Use imageopenpolygon() to mark map areas to achieve regional interaction maps

M66 2025-06-01

In web development, especially in map display and interaction functions, PHP and GD libraries (an image processing library) are often used to generate and manipulate images. The imageopenpolygon() function is a very useful function in the GD library. It can help us draw polygons on images and is suitable for scenarios where map areas need to be marked or area interactive graphs are implemented. This article will introduce how to use the imageopenpolygon() function in PHP to mark map areas and implement the area interactive graph function.

1. Preparation

First, make sure that the GD library is installed and enabled in your PHP environment. Generally, the GD library is installed in the PHP environment by default. If not, you can install it through the following command:

 sudo apt-get install php-gd

After installation, remember to restart the Apache or PHP-FPM service for the changes to take effect.

2. Use the imageopenpolygon() function to mark the map area

The function of the imageopenpolygon() function is to draw a polygon on the image based on the provided coordinate array. The basic syntax of this function is as follows:

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

$image : Target image resource.
$points : an array of polygon vertex coordinates.
$num_points : The number of vertices of a polygon.
$color : The color of the polygon.

2.1 Creating Image Resources

First, we need to create an image resource. Usually, we create an image resource from an existing image file, or directly create a blank image.

 <?php
// Create a blank image（Can be a map image）
$image = imagecreate(500, 500); // Create a500x500Canvas
$backgroundColor = imagecolorallocate($image, 255, 255, 255); // White background
?>

2.2 Defining polygon coordinates

The coordinates of a polygon are defined by an array, and the coordinates of each vertex are represented by array elements. For example, we can define a rectangular area as an example:

 <?php
// Define the four vertex coordinates of a rectangle
$points = array(
    100, 100,  // vertex1 (x, y)
    400, 100,  // vertex2 (x, y)
    400, 400,  // vertex3 (x, y)
    100, 400   // vertex4 (x, y)
);
?>

2.3 Drawing polygons

Then, use the imageopenpolygon() function to draw this polygon:

 <?php
// Define polygon color
$polygonColor = imagecolorallocate($image, 255, 0, 0); // red

// Draw polygons
imagefilledpolygon($image, $points, 4, $polygonColor); // use imagefilledpolygon To fill the color
?>

3. Implement regional interaction functions

Implement the regional interaction function, that is, when the user clicks on an area of the map, PHP will perform different operations according to the click location. To simplify, we can combine HTML's <map> tag and PHP to achieve regional interaction.

3.1 Using HTML's <map> and <area> tags

In HTML, the image hotspot area can be implemented through the <map> and <area> tags. When a user clicks on these areas, a request for JavaScript or PHP can be triggered.

 <?php
// 创建图像资源并Draw polygons，As mentioned above

// Output image
header('Content-Type: image/png');
imagepng($image);

// Free memory
imagedestroy($image);
?>

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

Here coords are defined by the coordinates of polygons. shape="poly" represents a polygon area, and the href attribute is the link address that the user jumps when clicking on this area. In this example, we replaced all URLs with m66.net domain names.

3.2 Handling interactive events

In this way, when the user clicks on different areas, he can jump to different pages according to his needs. For example, you could create a PHP page that performs different logic based on the area the user clicks on.

 <?php
if ($_SERVER['REQUEST_URI'] == '/region1') {
    // 处理area1Interaction logic
    echo "您点击了area1！";
} elseif ($_SERVER['REQUEST_URI'] == '/region2') {
    // 处理area2Interaction logic
    echo "您点击了area2！";
}
?>

4. Summary

This article introduces how to use the imageopenpolygon() function in PHP to mark map areas and combine the HTML <map> tag to implement the area interaction graph function. In this way, you can create an interactive map that allows users to interact with different areas in the map. Whether it is marking specific regions or handling area click events, PHP and GD libraries provide you with powerful functions and flexible implementation methods.

imageopenpolygon