iamgeoknight

/*
Create a Draw interaction for LineString and Polygon
*/
class Draw {  
  //Constructor accepts geometry type, map object and vector layer
  constructor(type, map, vector_layer) {
    this.map = map;
    this.vector_layer = vector_layer;
    this.draw = new ol.interaction.Draw({
        type: type,

iamgeoknight

/*
Create Vector Layer
*/
class VectorLayer{
  //Constructor accepts title of vector layer and map object
  constructor(title, map) {
    this.layer = new ol.layer.Vector({
      title: title,      
      source: new ol.source.Vector({
        projection:map.getView().projection

iamgeoknight

/*
Create a Draw interaction for LineString and Polygon
*/
class Draw {  
  //Constructor accepts geometry type, map object and vector layer
  constructor(type, map, vector_layer) {
    this.map = map;
    this.vector_layer = vector_layer;
    this.draw = new ol.interaction.Draw({
        type: type,

iamgeoknight

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsts/2.6.1/jsts.js"></script>

iamgeoknight

onGeomChange = (e) => {
      /*
          This function will dynamically split the polygon into two parts by a line and will follow geometry change event.
      */

      //Create jsts parser to read openlayers geometry
      let parser = new jsts.io.OL3Parser();

      //Creating line geometry from draw intraction
      let linestring = new ol.Feature({    

iamgeoknight

let mergePolygon = (e) => {
    /*
        This function is applicable to merge only two polygons
        This function will merge or perform union on two adjacent polygons. For the merge function to work, the polygons should atleast intersect each other.
    */
    
    //Create jsts parser to read openlayers geometry
    let parser = new jsts.io.OL3Parser();       
    
    //Parse Polygons geometry to jsts type

iamgeoknight

//Create a wms layer 
let wmsLayer = new ol.layer.Tile({
  source: new ol.source.TileWMS({
    url: 'https://ahocevar.com/geoserver/wms',
    params: {'LAYERS': 'ne:ne', 'TILED': true}    
  })
});

/*
Create and Render map on div with zoom and center

iamgeoknight

//Create map and vector layer
let map = new OLMap('map', 1, [-96.6345990807462, 32.81890764151014]).map;


//Feature Information on Map Click
map.on('singleclick', function (e) {  
  let url = wmsLayer.getSource().getFeatureInfoUrl(
    e.coordinate,
    map.getView().getResolution(),

iamgeoknight

let map = new ol.Map({
  target: map_div,
  layers: [       
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    wmsLayer
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat(center),

iamgeoknight

let draw = new ol.interaction.Draw({
  type: "LineString"  
});

//Create interaction listener for draw
draw.on('drawstart', function (e) {
  //Perform Task on when interaction starts
});

draw.on('drawend', function (e) {