How to remove a linestring which is added part by part to GE in one go?

Question

I am trying to draw a road incrementally as an animation over GE plugin. I have a set of coordinates (lat,long) in an array and I am using the following function in a loop at small time intervals to draw the entire road in small parts animatedly.

var intFeatureCounter4Trace=0  
  function createPath(lat1,lng1,lat2,lng2,strToolType){
        lineStringPlacemark = ge.createPlacemark('');
        var lineString = ge.createLineString('');
        lineStringPlacemark.setGeometry(lineString);
        lineString.setTessellate(true);
        lineString.getCoordinates().pushLatLngAlt(lat1,lng1,0);
        lineString.getCoordinates().pushLatLngAlt(lat2,lng2,0);
        lineStringPlacemark.setStyleSelector(ge.createStyle(''));
        var lineStyle=lineStringPlacemark.getStyleSelector().getLineStyle();
        lineStyle.setWidth(5);
        lineStyle.getColor().set("9900FFFF"); //'aabbggrr' format
        intFeatureCounter4Trace+=1;
        ge.getFeatures().appendChild(lineStringPlacemark);
    }

While drawing the road in small parts I am keeping track of the number of small line segments that are added to the GE plugin and use this feature count to remove all the added line segements in a loop using the following function :-

function clearPath(){
    for(var i=0;i<intFeatureCounter4Trace;i++){
       ge.getFeatures().removeChild(ge.getFeatures().getLastChild());
    }
}

The problem is for a large number of (lat,longs) say 20,000 or so, the clearPath() function hangs the browser and sometimes some features that are not to be removed are also removed. Is there a way to remove all the smaller segments in one go? i.e, Is there a way to append all smaller segments part by part (as animation) to a single feature and then remove it in one go from the GE plugin DOM instead of removing it part by part?

Regards, Shiva

Answer 1

There are a few ways to solve this.

Firstly, using the existing code you have simply wrap any call to your clearPath method using the google.earth.executeBatch function. This should stop the hanging and execute the api calls much faster.

google.earth.executeBatch(ge, clearPath);

Secondly, you could simply write a cleaner clearPath function to remove all the features without the need for a global index.

function clearPath() {
  var features = ge.getFeatures();
  while (features.getFirstChild()) {
    features.removeChild(features.getFirstChild());
  }
}

Thirdly, the way I would approach it, is to alter your createPath to simply create a single linestring placemark. Then I would create a amendPath method that will update the coordinate data for that placemark. Finally I would alter the clearPath method to simply call clear on the linestring coordinate array. You could also add a removePath method too if desired...

Although it is written here and untested something along the following lines should work.

var path = null; // global reference to the placemark we will create

// set up the path placemark
function createPath() {
  path = ge.createPlacemark('');
  path.setStyleSelector(ge.createStyle(''));

  var line = ge.createLineString('');
  line.setTessellate(true);

  var style = path.getStyleSelector().getLineStyle();
  style.setWidth(5);
  style.getColor().set("9900FFFF");

  path.setGeometry(line);
  ge.getFeatures().appendChild(path);
}

// update the path placemark's coordinate geometry
function ammendPath(lat1,lng1,lat2,lng2) {
  var line = path.getGeometry();
  line.getCoordinates().pushLatLngAlt(lat1,lng1,0);
  line.getCoordinates().pushLatLngAlt(lat2,lng2,0);
  path.setGeometry(line);
}

// clear the path placemark's coordinate geometry 
function clearPath() {
  path.getGeometry().getCoordinates().clear();
}

// remove the path placemark entirely (if required...)
function removePath() {
  ge.getFeatures().removeChild(path);
}