rlayers/docs/8563.bundle.js

React Components for OpenLayers

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[8563],{8563(e,n,t){t.d(n,{default:()=>o});const o="import React, {JSX} from 'react';\nimport {fromLonLat} from 'ol/proj';\nimport {\n    altShiftKeysOnly,\n    platformModifierKeyOnly,\n    shiftKeyOnly,\n    altKeyOnly,\n    never,\n    doubleClick\n} from 'ol/events/condition';\nimport {Geometry, Point} from 'ol/geom';\nimport 'ol/ol.css';\n\nimport monument from './svg/eiffel.svg';\nimport {RMap, ROSM, RInteraction, RLayerVector, RStyle, RFeature} from 'rlayers';\nimport VectorSource from 'ol/source/Vector';\nimport {Feature} from 'ol';\n\nconst TourEiffel = fromLonLat([2.294, 48.858]);\nconst TourEiffelPoint = new Point(TourEiffel);\n\nexport default function Interactions(): JSX.Element {\n    const [selected, setSelected] = React.useState(false);\n    return (\n        <React.Fragment>\n            <RMap className='example-map' initial={{center: fromLonLat([2.364, 48.82]), zoom: 11}}>\n                <ROSM />\n\n                <RLayerVector>\n                    <RStyle.RStyle>\n                        <RStyle.RIcon src={monument} />\n                    </RStyle.RStyle>\n                    <RFeature geometry={TourEiffelPoint} />\n                </RLayerVector>\n\n                <RLayerVector\n                    onChange={React.useCallback((e) => {\n                        // On every change, check if there is a feature covering the Eiffel Tower\n                        const source = e.target as VectorSource<Feature>;\n                        if (source?.forEachFeatureAtCoordinateDirect)\n                            setSelected(\n                                source.forEachFeatureAtCoordinateDirect(TourEiffel, () => true)\n                            );\n                    }, [])}\n                >\n                    {/* This is the style used for the drawn polygons */}\n                    <RStyle.RStyle>\n                        <RStyle.RStroke color='#0000ff' width={3} />\n                        <RStyle.RFill color='rgba(0, 0, 0, 0.75)' />\n                    </RStyle.RStyle>\n\n                    <RInteraction.RDraw\n                        type={'Polygon'}\n                        condition={shiftKeyOnly}\n                        freehandCondition={altShiftKeysOnly}\n                    />\n\n                    <RInteraction.RDraw\n                        type={'Circle'}\n                        condition={altKeyOnly}\n                        freehandCondition={never}\n                    />\n\n                    <RInteraction.RModify\n                        condition={platformModifierKeyOnly}\n                        deleteCondition={React.useCallback(\n                            (e) => platformModifierKeyOnly(e) && doubleClick(e),\n                            []\n                        )}\n                    />\n                </RLayerVector>\n            </RMap>\n            <div>\n                <p className='p-0 m-0'>\n                    Hold <em>Shift</em> and click without dragging for a regular polygon\n                </p>\n                <p className='p-0 m-0'>\n                    Hold <em>Shift</em> and <em>Alt</em> and drag for a freehand polygon\n                </p>\n                <p className='p-0 m-0'>\n                    Hold <em>Alt</em> and click without dragging for a circle\n                </p>\n                <p className='p-0 m-0'>\n                    Hold <em>Ctrl / &#x2318;</em> and drag to move/add a vertex\n                </p>\n                <p className='p-0 m-0'>\n                    Hold <em>Ctrl / &#x2318;</em> and double click to remove a vertex\n                </p>\n            </div>\n            <div className='mx-0 mt-1 mb-3 p-1 w-100 jumbotron shadow shadow'>\n                <p>Currently the Eiffel Tower is{selected ? '' : ' not'} covered</p>\n            </div>\n        </React.Fragment>\n    );\n}\n"}}]);