Skip to content

Instantly share code, notes, and snippets.

@iamgeoknight

iamgeoknight/polygon_holes.js

Last active January 22, 2022 13:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iamgeoknight/1833d4f933c11207bd48165b26bb9b95 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iamgeoknight/1833d4f933c11207bd48165b26bb9b95 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. iamgeoknight revised this gist Jan 22, 2022. 1 changed file with 5 additions and 2 deletions.
    7 changes: 5 additions & 2 deletions polygon_holes.js
    View file
    Original file line number Diff line number Diff line change
    @@ -25,10 +25,13 @@ class Draw {
    /*
    This function will be called when you start drawing holes
    */
    onDrawStart = (e) => {
    onDrawStart = (e) => {
    //Get Polygon geometry on drawstart that intersects with currently drawing holes.
    vector_layer.getSource().forEachFeatureIntersectingExtent(e.feature.getGeometry().getExtent(), (f) => {
    this.intersected = f;
    });
    });

    //Abort Polygon hole drawing when there is no feature underneath it.
    if (!this.intersected) {
    alert('No Feature Found to draw holes')
    e.target.abortDrawing();
  2. iamgeoknight revised this gist Jan 22, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion polygon_holes.js
    View file
    Original file line number Diff line number Diff line change
    @@ -41,7 +41,7 @@ class Draw {
    }

    /*
    This function will be called only when you are drawing holes and it will continously invoke geometry change.
    This function will be called only when you are drawing holes and it will continously invoked on geometry change.
    */
    onGeomChange = (e) => {

  3. iamgeoknight revised this gist Jan 22, 2022. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions polygon_holes.js
    View file
    Original file line number Diff line number Diff line change
    @@ -23,7 +23,7 @@ class Draw {
    }

    /*
    This function will be called when you start drawing
    This function will be called when you start drawing holes
    */
    onDrawStart = (e) => {
    vector_layer.getSource().forEachFeatureIntersectingExtent(e.feature.getGeometry().getExtent(), (f) => {
    @@ -36,12 +36,12 @@ class Draw {
    }
    this.coords_lenth = this.intersected.getGeometry().getCoordinates().length;

    //Binding onGeomChange function with drawing feature
    //Binding onGeomChange function with drawing feature f. This function will be called only when you are drawing holes over a polygon.
    e.feature.getGeometry().on('change', this.onGeomChange);
    }

    /*
    This function will called when ever there will be a change in geometry like increase in length, area, position,
    This function will be called only when you are drawing holes and it will continously invoke geometry change.
    */
    onGeomChange = (e) => {

    @@ -57,7 +57,7 @@ class Draw {
    }

    /*
    This function will be called when you start drawing
    This function will be called when your hole drawing is finished.
    */
    onDrawEnd =(e) => {
    setTimeout(() => {
  4. iamgeoknight revised this gist Jan 22, 2022. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions polygon_holes.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,9 +13,7 @@ class Draw {
    type: type,
    stopClick: true,
    source: vector_layer.getSource()
    });


    });

    if (hole == "hole") {
    this.draw.on('drawstart', this.onDrawStart);
  5. iamgeoknight created this gist Jan 22, 2022.
    70 changes: 70 additions & 0 deletions polygon_holes.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    /*
    Create a Draw interaction for LineString and Polygon
    */
    class Draw {
    //Constructor accepts geometry type, map object and vector layer
    constructor(type, map, vector_layer, hole) {
    this.map = map;
    this.vector_layer = vector_layer;
    this.features = [];

    //Draw feature
    this.draw = new ol.interaction.Draw({
    type: type,
    stopClick: true,
    source: vector_layer.getSource()
    });



    if (hole == "hole") {
    this.draw.on('drawstart', this.onDrawStart);
    this.draw.on('drawend', this.onDrawEnd);
    }
    this.map.addInteraction(this.draw);
    }

    /*
    This function will be called when you start drawing
    */
    onDrawStart = (e) => {
    vector_layer.getSource().forEachFeatureIntersectingExtent(e.feature.getGeometry().getExtent(), (f) => {
    this.intersected = f;
    });
    if (!this.intersected) {
    alert('No Feature Found to draw holes')
    e.target.abortDrawing();
    return;
    }
    this.coords_lenth = this.intersected.getGeometry().getCoordinates().length;

    //Binding onGeomChange function with drawing feature
    e.feature.getGeometry().on('change', this.onGeomChange);
    }

    /*
    This function will called when ever there will be a change in geometry like increase in length, area, position,
    */
    onGeomChange = (e) => {

    //Get hole coordinates for polygon
    let linear_ring = new ol.geom.LinearRing(e.target.getCoordinates()[0]);

    let coordinates = this.intersected.getGeometry().getCoordinates();
    let geom = new ol.geom.Polygon(coordinates.slice(0, this.coords_lenth));

    //Add hole coordinates to polygon and reset the polygon geometry
    geom.appendLinearRing(linear_ring);
    this.intersected.setGeometry(geom);
    }

    /*
    This function will be called when you start drawing
    */
    onDrawEnd =(e) => {
    setTimeout(() => {
    vector_layer.getSource().removeFeature(e.feature);
    }, 5);
    this.intersected = undefined;
    }
    }