ghettovoice / vuelayers

Web map Vue components with the power of OpenLayers
https://vuelayers.github.io/
MIT License
682 stars 230 forks source link

Capture a created feature from <vl-interaction-draw> and push it into the layer's <vl-source-vector> #491

Closed iboates closed 1 year ago

iboates commented 2 years ago

I have several <vl-layer-vector> components which are defined by GeoJSONs. These GeoJSONs are part of my form, so I want the user to be able to add new features to the GeoJSON when they add new features to the map.

I have a <vl-interaction-draw> component and I can link it to the appropriate <vl-layer-source>, or even to a temporary one when can just hold new features temporarily.

What I want to do now however is push the created feature into the actual features array in the source GeoJSON. To do that I will have to capture the drawn geometry and launch a dialog in which the user fills out the properties of the feature, then push it into the features array, and delete the feature from the temporary layer if necessary.

How can I do this? I cannot find a way to capture the drawn feature's geometry once it has been created.

The closest I can get is to set :finish-condition="handleDrawFeature", where handleDrawFeature is my method in which I should capture the finished geometry, but the event that gets passes is just the last click.

I also tried :geometry-function="handleDrawFeature", but when I do that, as soon as I click on the map to draw, it floods the console with man Uncaught TypeError: feature.getGeometry() is undefined errors.

ghettovoice commented 2 years ago

Hello @iboates ,

How can I do this? I cannot find a way to capture the drawn feature's geometry once it has been created.

You should listen for drawend event on the vl-interaction-draw component.

<vl-interaction-draw @drawstart="drawStarted" @drawend="drawEnded">...</vl-interaction-draw>

drawStarted (evt) {
    // evt.feature - an instance of ol/Feature
    // evt.json - GeoJSON feature
    console.log(evt)
}

drawEnded (evt) {
    // evt.feature - an instance of ol/Feature
    // evt.json - GeoJSON feature
    console.log(evt)
}
iboates commented 2 years ago

Thanks @ghettovoice

Just curious, do you have a planned time at which the documentation for the interaction components (among some others) will be completed?

ghettovoice commented 2 years ago

Yes, I have plans to finally finish the docs ASAP 👌