stack exchange + jsts

HTML

<script src="http://openlayers.org/en/v3.10.0/build/ol-debug.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.10.0/css/ol.css">
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/javascript.util.min.js"></script>
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/jsts.min.js"></script>
<div  id="map"></div>
<div>
 <button id="boxint" >draw rectangle</button> 
</div>

JavaScript

var raster =  new ol.layer.Tile({
      source: new ol.source.OSM()
    });
var lineFeature = new ol.Feature(
new ol.geom.LineString([[-5000000,-4000000], [-1000000,-1000000]])
);
var polygonFeature = new ol.Feature(
new ol.geom.Polygon([[[0,0], [5000000,5000000],[3000000,0],[0,0]]])
);

var vectorPolygon= new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [polygonFeature]
  }),
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'rgba(255, 0, 0, 0.2)',
      lineDash: [10, 10],
      width: 3
    }),
    fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.2)'
    })
  })
});

var vectorLine= new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [lineFeature]
  }),
  style: new ol.style.Style({  
    stroke: new ol.style.Stroke({
      width: 3,
      color: [0, 0, 0, 0.2]
    }),
    fill: new ol.style.Fill({
      color: [0, 0, 255, 0.2]
    })
  })
});
//an empty layer to place the intersections
var highlightLayr = new ol.layer.Vector({
  source: new ol.source.Vector({}),
  style: new ol.style.Style({  
    stroke: new ol.style.Stroke({
      width: 3,
      color: [0, 0, 0, 1]
    }),
    fill: new ol.style.Fill({
      color: [0, 0, 255, 1]
    })
  })
});

var map = new ol.Map({
 layers: [raster,highlightLayr,vectorPolygon,vectorLine],
  target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
 })
});

var selectOnBoxInt = new ol.interaction.DragBox({
  condition  : ol.events.condition.always,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: [0, 0, 255, 1]
    })
  })
});

map.addInteraction(selectOnBoxInt);
selectOnBoxInt.setActive(false);

document.getElementById('boxint').onclick = function (){
   selectOnBoxInt.setActive(true);
};

var selectedFeatures = new Array();
var intersectedFeatures  = new Array();
selectOnBoxInt.on('boxstart',function(e){
selectedFeatures = []; 
intersectedFeatures = [];
highlightLayr.getSource().clear(); ...