| <!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); | |
| }); |