diff --git a/interactions.js b/interactions.js new file mode 100644 index 0000000..6b0586b --- /dev/null +++ b/interactions.js @@ -0,0 +1,32 @@ +import { Select, Translate, Modify } from 'ol/interaction'; + +// Simple function to log out the area of a feature +const logFeatureArea = (feature) => { + const selectedGeom = feature.getGeometry(); + const area = selectedGeom.getArea().toFixed(2); + console.log(`Area: ${area}m²`); +} + +// Create a new "Select" interaction +// https://openlayers.org/en/latest/apidoc/module-ol_interaction_Select-Select.html +const select = new Select(); + +// Attach the logFeatureArea to an event on the select interaction +select.on("select", evt => logFeatureArea(evt.selected[0])) + +// Create a new "Translate" interaction +// https://openlayers.org/en/latest/apidoc/module-ol_interaction_Translate-Translate.html +const translate = new Translate({ + features: select.getFeatures(), +}); + +// Create a new "Modify" interaction +// https://openlayers.org/en/latest/apidoc/module-ol_interaction_Modify-Modify.html +const modify = new Modify({ + features: select.getFeatures(), +}); + +// Iterate over the interactions created above, and add them to the map +const initInteractions = (map) => [select, translate, modify].forEach(interaction => map.addInteraction(interaction)) + +export default initInteractions; \ No newline at end of file diff --git a/main.js b/main.js index a18f0fa..fdcc024 100644 --- a/main.js +++ b/main.js @@ -7,6 +7,7 @@ import getWMTSLayer from "./wmts"; import getWMSLayer from "./wms"; import initPopover from "./popover"; import getWFSLayer from "./wfs"; +import initInteractions from "./interactions"; // Create layer from imported functions const mastermapWMTS = await getWMTSLayer("os_licensed_background_colour"); @@ -39,4 +40,5 @@ const map = new Map({ }), }); -// initPopover(map, woodlandWMS); \ No newline at end of file +// initPopover(map, woodlandWMS); +initInteractions(map); \ No newline at end of file