Get intersecting features

Author: stfnkth

marimo/box-selection.py

@@ -15,17 +15,27 @@ def _():
 
 @app.cell
 def _(ol):
+    data = "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"
+    # data = "https://github.com/visgl/deck.gl-data/raw/master/examples/line/airports.json"
     layer = ol.VectorLayer(
+        id="xyz",
         source=ol.sources.VectorSource(
-            url="https://openlayers.org/data/vector/ecoregions.json"
-        )
+            url=data,
+            # url="https://openlayers.org/data/vector/ecoregions.json"
+            crossOrigin="anonymous"
+
+        ),
+        style=ol.FlatStyle(
+            circle_radius=5,
+            circle_fill_color="red", circle_stroke_color="green")
     )
     return (layer,)
 
 
 @app.cell
 def _(layer, ol):
     m = ol.MapWidget(layers=[layer])
+    # m.add_layer(layer)
     return (m,)
 
 
@@ -42,8 +52,8 @@ def _(w):
 
 
 @app.cell
-def _(w):
-    w.value["view_state"]
+def _():
+    # w.value["view_state"]
     return
 
 
@@ -53,6 +63,18 @@ def _(m):
     return
 
 
+@app.cell
+def _(m):
+    m.add_select_interaction()
+    return
+
+
+@app.cell
+def _(w):
+    w.value["features"]
+    return
+
+
 @app.cell
 def _():
     return

src/openlayers/js/openlayers.anywidget.js

@@ -9,9 +9,12 @@ import VectorLayer from "ol/layer/Vector";
 
 // Box selection
 import { platformModifierKeyOnly } from 'ol/events/condition.js';
+import { getWidth } from 'ol/extent.js';
+import DragBox from 'ol/interaction/DragBox.js';
+import { getTransformFromProjections, transform } from 'ol/proj';
 
 import { featureToGeoJSON } from "./utils";
-import DragBox from 'ol/interaction/DragBox.js';
+import VectorSource from "ol/source/Vector";
 
 // TODO: Should be a parameter
 const highlightStyle = new Style({
@@ -63,19 +66,36 @@ function addSelectFeaturesToMap(map: Map, model?: AnyModel): void {
 }
 
 function addBoxSelectionToMap(map: Map, model?: AnyModel): void {
-    console.warn("Box selection not implemented yet");
+    console.warn("Box selection is still experimental.");
+
+    let selected = [] as Feature[];
 
     const dragBox = new DragBox({
         condition: platformModifierKeyOnly,
     });
     map.addInteraction(dragBox);
     dragBox.on('boxend', function () {
-        const extent = dragBox.getGeometry().getExtent();
+        const extent = dragBox.getGeometry().transform('EPSG:3857', 'EPSG:4326').getExtent();
         console.log("box extent", extent);
+        //
+        for (let layer of map.getLayers().getArray()) {
+            if (layer instanceof VectorLayer) {
+                const source: VectorSource = layer.getSource();
+                console.log("source extend", source.getExtent());
+                // const features = source.getFeaturesInExtent(extent).filter((feature: Feature) => feature?.getGeometry()?.intersectsExtent(extent));
+                source.forEachFeatureIntersectingExtent(extent, (feature: Feature) => {
+                    feature.set("layer", layer.get("id"));
+                    selected.push(featureToGeoJSON(feature));
+                });
+                console.log("selected features", selected);
+            }
+        }
     });
 
+
     dragBox.on('boxstart', function () {
         // select.clearSelection();
+        selected = [];
     });
 }