pgiraud · November 24, 2016 06:31
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <title>Select features example</title>
 <meta http-equiv="X-UA-Compatible" content="chrome=1">
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.css" type="text/css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.js"></script>
 <script src="http://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script>
 <style>
  html, body {
    padding: 0;
    margin: 0;
  }
  html, body, .map {
    height: 100%;
    width: 100%;
  }
 </style>
 </head>
 <body>
  <div id="map" class="map"></div>
 </div>
 </div>
 <script src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
 var swissProjection = new ol.proj.Projection({
  code: 'EPSG:21781',
  extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
  units: 'm'
 });
 ol.proj.addProjection(swissProjection);
 var geojsonFormat = new ol.format.GeoJSON();

 var style = new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.3)'
  }),
  stroke: new ol.style.Stroke({
    color: 'rgba(255, 120, 0, 0.6)',
    width: 1
  })
 });
 var styles = [style];

 var highlightStyle = [
  new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 120, 0, 0.3)'
    }),
    stroke: new ol.style.Stroke({
      color: 'rgba(255, 120, 0, 0.6)',
      width: 1
    })
  })
 ];

 var vector2 = new ol.layer.Vector({
  maxResolution: 0.8,
  source: new ol.source.Vector({
    url: 'intersect_BBK_Sicherheit_253_Dissolved.geojson',
    format: new ol.format.GeoJSON({
      defaultDataProjection: swissProjection
    })
  }),
  style: styles,
  updateWhileInteracting: true
 });


 var intersectionLayer = new ol.layer.Vector({
  source: new ol.source.Vector()
 });

 var map = new ol.Map({
  layers: [vector2, intersectionLayer],
  target: 'map',
  view: new ol.View({
    projection: swissProjection,
    center: [642239, 264010],
    zoom: 12
  })
 });

 var draw = new ol.interaction.Draw({
  type: 'Polygon'
 });
 map.addInteraction(draw);

 draw.on('drawstart', function(evt) {
  intersectionLayer.getSource().clear();
 });

 draw.on('drawend', function(evt) {
  var poly1 = geojsonFormat.writeFeatureObject(evt.feature);
  var extent1 = evt.feature.getGeometry().getExtent();
  var source = vector2.getSource();
  var features = source.getFeatures();
  var start = Date.now();
  features.forEach(function(feature) {
    if (!ol.extent.intersects(extent1, feature.getGeometry().getExtent())) {
      return;
    }
    var poly2 = geojsonFormat.writeFeatureObject(feature);
    var intersection = turf.intersect(poly1, poly2);
    if (intersection) {
      intersectionLayer.getSource().addFeature(geojsonFormat.readFeature(intersection));
    }
  });
  var end = Date.now();
  console.log (end - start);
 });
diff --git a/intersect_BBK_Sicherheit_253_Dissolved.geojson b/intersect_BBK_Sicherheit_253_Dissolved.geojson
	<!DOCTYPE html>
	<html>
	<head>
	<title>Select features example</title>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.css" type="text/css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.js"></script>
	<script src="http://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script>
	<style>
	html, body {
	padding: 0;
	margin: 0;
	}
	html, body, .map {
	height: 100%;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<div id="map" class="map"></div>
	</div>
	</div>
	<script src="index.js"></script>
	</body>
	</html>
	var swissProjection = new ol.proj.Projection({
	code: 'EPSG:21781',
	extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
	units: 'm'
	});
	ol.proj.addProjection(swissProjection);
	var geojsonFormat = new ol.format.GeoJSON();

	var style = new ol.style.Style({
	fill: new ol.style.Fill({
	color: 'rgba(255, 255, 255, 0.3)'
	}),
	stroke: new ol.style.Stroke({
	color: 'rgba(255, 120, 0, 0.6)',
	width: 1
	})
	});
	var styles = [style];

	var highlightStyle = [
	new ol.style.Style({
	fill: new ol.style.Fill({
	color: 'rgba(255, 120, 0, 0.3)'
	}),
	stroke: new ol.style.Stroke({
	color: 'rgba(255, 120, 0, 0.6)',
	width: 1
	})
	})
	];

	var vector2 = new ol.layer.Vector({
	maxResolution: 0.8,
	source: new ol.source.Vector({
	url: 'intersect_BBK_Sicherheit_253_Dissolved.geojson',
	format: new ol.format.GeoJSON({
	defaultDataProjection: swissProjection
	})
	}),
	style: styles,
	updateWhileInteracting: true
	});


	var intersectionLayer = new ol.layer.Vector({
	source: new ol.source.Vector()
	});

	var map = new ol.Map({
	layers: [vector2, intersectionLayer],
	target: 'map',
	view: new ol.View({
	projection: swissProjection,
	center: [642239, 264010],
	zoom: 12
	})
	});

	var draw = new ol.interaction.Draw({
	type: 'Polygon'
	});
	map.addInteraction(draw);

	draw.on('drawstart', function(evt) {
	intersectionLayer.getSource().clear();
	});

	draw.on('drawend', function(evt) {
	var poly1 = geojsonFormat.writeFeatureObject(evt.feature);
	var extent1 = evt.feature.getGeometry().getExtent();
	var source = vector2.getSource();
	var features = source.getFeatures();
	var start = Date.now();
	features.forEach(function(feature) {
	if (!ol.extent.intersects(extent1, feature.getGeometry().getExtent())) {
	return;
	}
	var poly2 = geojsonFormat.writeFeatureObject(feature);
	var intersection = turf.intersect(poly1, poly2);
	if (intersection) {
	intersectionLayer.getSource().addFeature(geojsonFormat.readFeature(intersection));
	}
	});
	var end = Date.now();
	console.log (end - start);
	});