Contour Detection With OpenCV and Openlayers

Article Number : 2

The contour feature in OpenCV serves the purpose of object detection, delineating object boundaries, object analysis, and similar tasks in the realm of image processing and computer vision.

A contour can be thought of as a curve representing the outer boundaries of an object. It is used to determine the boundaries and shapes of objects in an image. The contour feature can be employed for various applications such as analyzing the shapes and sizes of objects, detecting or distinguishing objects, delineating object boundaries, and object tracking, among others.

For instance, when you aim to perform object detection, it can be useful to identify the contours that enclose the boundaries of objects in an image and leverage the information from these contours. Similarly, you can utilize the contour feature to compute the area, perimeter, or centroid of an object. Contours also prove handy for recognizing and understanding irregular shapes in images.

In OpenCV, the contour feature serves as a versatile tool in image processing operations and can aid in numerous applications including object analysis, object tracking, edge detection, and more.

How You can Use on GIS Projects

You can utilize OpenCV’s contour feature in various ways within GIS (Geographic Information System) projects:

1. Map Object Detection: In GIS projects, you might want to detect specific objects by analyzing map data. For instance, identifying forest areas, bodies of water like lakes or rivers, agricultural plots, or structures. By employing image processing techniques, you can perform object detection. OpenCV’s contour feature can be useful in obtaining contour information that surrounds the boundaries of objects.
2. Area Calculations: Calculating the area of geographic regions can be crucial in GIS projects. For example, when you need to determine the area of a particular land parcel, you can use contour extraction methods to define its boundaries.
3. Boundary Analysis: When you aim to analyze and manipulate map data based on its boundaries, contours can be valuable. For instance, when analyzing the intersection of two geographic regions or determining the boundaries of adjacent areas and extracting their characteristics, contour analysis can assist.
4. Path Tracking and Route Planning: OpenCV’s contour feature can also serve route planning and path tracking purposes. By detecting enclosing objects (such as roads or areas deviating from a road) within road networks, you can perform route calculations or path tracking in GIS projects.
5. Topological Analysis: GIS projects often require examining the topological relationships of geographic data. Contour features can aid in identifying boundaries, intersections, and junctions, facilitating such analyses.

Similar to the examples mentioned above, you can use OpenCV’s contour feature in GIS projects for object detection, boundary delineation, area calculations, and overall geographic data analysis. This can enhance the functionality and detail of mapping and geographic information systems.

Test at GISLayer

I have added this feature as a tool to the GISLayer software for illustrating it with examples. If you’d like to use it, please follow the steps below:

1. Go tohttps://editor.gislayer.com/and log in or create an account
2. Navigate to the ‘Image Processing’ tab in the top menu
3. You can either add the desired layers to the system or work on a single layer
4. Click on the ‘Contour Detection’ button to open the panel
5. Activate the analysis and adjust the input ranges in the panel according to your preferences.
6. You can insert detected points, lines, and polygons to layer.
7. Even, You can download this layer

It’s not just about a single image process; you can apply multiple processing steps consecutively.

How you can use with Openlayers

I’ve added this feature within GISLayer for your convenience and explained how to use it in the text above. Additionally, I’ve shared a repository on GitHub to demonstrate how you can use it in your own coding environment. The details on how to use it are provided below.

Keep in mind that this relationship could vary based on your own map’s characteristics.

Now, how can we implement this on our own codebase? To help you with this, I’ve prepared a JavaScript class. To use this class, you need to have OpenCV and OpenLayers integrated. The process is quite straightforward. The system will automatically reduce the width of the map by half and create a canvas on the right side.

To examine the GitHub code, click here.

Core Class File

Important Function IsrunContour you can find in OCV.js File

  runContour(s){
    let src = cv.matFromImageData(this.imageData);
    let dst = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3);
    cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
    cv.threshold(src, src, s.min, s.max, cv.THRESH_BINARY);
    let contours = new cv.MatVector();
    let hierarchy = new cv.Mat();
    cv.findContours(src, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE);
    var geoms = [];
    for (let i = 0; i < contours.size(); ++i) {
        var geom = [];
        var contour = contours.get(i);
        for (let j = 0; j < contour.data32S.length; j += 2) {
          const x = contour.data32S[j];
          const y = contour.data32S[j + 1];
          geom.push({ x: x, y: y });
        }
        geoms.push(geom);
        let color = new cv.Scalar(Math.round(Math.random() * 255), Math.round(Math.random() * 255),
                                  Math.round(Math.random() * 255));
        cv.drawContours(dst, contours, i, color, 1, cv.LINE_8, hierarchy, 0);
    }
    this.geoms = geoms;
    cv.imshow(this.id, dst);
    src.delete(); dst.delete(); contours.delete(); hierarchy.delete();
    
  }

How You can use With OCV.js File

var globalOCV;

function runContour(){
  var settings = {
    type:'simple',
    min:245,
    max:255
  };
  globalOCV = new OCV('map','contour',map,'openlayers');
  globalOCV.start();
  globalOCV.setContour(true,settings);
}

function stopContour(){
  globalOCV.setContour(false);
  globalOCV.close();
}

Click GitHub Project or Sample Demo Page