Closed signmeuptwice closed 3 years ago
Hello @signmeuptwice ,
bind a ref to the vl-view and then you can get extent with this.$refs.view.$view.getExtent
. But take a note that extent will be in view projection (usually EPSG:3857).
If you need view extent to load vector data only inside visible map area, there is more easy way to achieve this.
<template>
<vl-source-vector : strategy-factory="loadingStrategy" />
</template>
<script>
import { bbox } from 'ol/loadingstrategy'
export default {
methods: {
loadingStrategy () {
return bbox // loads current view extent
}
}
}
</script>
Hi @ghettovoice, thank you for the quick reply
I tried this.$refs.myRef.$view.getExtent
but I get undefined
I also tried this.$refs.myRef.$view.getExtent()
but it returns not a function
then I tried this.$refs.myRef.$view.projection_.extent_
but the values are never updated so Im thinking there is an update issue.. ?
I also tried {.bbox}
but had to change it to {bbox}
then changed your code to <vl-source-vector :strategy-factory="loadingStrategy" />
for it to compile then console logging bbox
does not give me anything
I don't think the bbox thing is the right solution. What I am looking to get is just the coordinates of the four corners of the current view and it to be updated after zoom, move, etc... So I need to get the extent and convert it to coordinates ?
Take look here https://jsfiddle.net/ghettovoice/nLmq5vux/
Thank you so much !!
No time right now but I’ll take a look at it in the next days and let you know.
Would be great to see this as a native feature in a future update :)
Best regards, Edouard
On 29 Jul 2020, at 11:37, Vladimir Vershinin notifications@github.com wrote:
Take look here https://jsfiddle.net/ghettovoice/nLmq5vux/ https://jsfiddle.net/ghettovoice/nLmq5vux/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-665556082, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX3RNMWBFNTQTJ5NPJTR57UVLANCNFSM4ORRYBNQ.
Hi,
Thanks for the help.
In order to make it work I had to copy locally and import the entire ol.js file which is 650kb ! So pretty big for a single function on the homepage :(( weback is also complaining about size.
Ideally I would need to just import the function and looking at the ol code in node modules it looks like the functions are exported however trying to import the function (import transformExtent from '../../../js/ol/ol.js’) gives VL-VIEW errors:
[Error] [Vue warn]: Error in v-on handler: "TypeError: _js_ol_ol_jsWEBPACK_IMPORTED_MODULE4default() is not a function. (In '_js_ol_ol_jsWEBPACK_IMPORTED_MODULE4default()(olView.calculateExtent(), 'EPSG:3857', 'EPSG:4326')', '_js_ol_ol_jsWEBPACK_IMPORTED_MODULE4default()' is an instance of Object)"
found in
--->
You should be able to import it like this:
import { transformExtent } from 'ol/proj'
Yes that works; damn I was so close… just the {} missing. Thanks for that.
Sorry to be a pain, hopefully you could help me on this too,
On the same map I am using this view extend; I am using this extent to display events in the area.
However the location of the event moves as I zoom; It is never on the right position unless zoomed maximum. Can you have a look ?
Here is my code:
https://gist.github.com/signmeuptwice/5480c8a6d298c33a502cd531b09bfb23
On 2 Sep 2020, at 16:41, Vladimir Vershinin notifications@github.com wrote:
import { transformExtent } from 'ol/proj'
Hmm, I don't see any errors in your code. I see that you use vl-overlay, if d.longitude, d.latitude
are correct coordinates, then it's top left corner(default positioning) should point exactly to this coordinate, regardless of view zoom, center, any other things.
Can you catch screen video with this issue?
Can’t take videos but here are some screenshots:
On 2 Sep 2020, at 17:25, Vladimir Vershinin notifications@github.com wrote:
Hmm, I don't see any errors in your code. I see that you use vl-overlay, if d.longitude, d.latitude are correct coordinates, then it's top left corner(default positioning) should point exactly to this coordinate, regardless of view zoom, center, any other things.
Can you catch screen video with this issue?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685810331, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX7ORAJZTOLGQ5EP4T3SDZPVJANCNFSM4ORRYBNQ.
If I move the map the points are fixed
They move when I zoom more closer to their real location
On 2 Sep 2020, at 17:25, Vladimir Vershinin notifications@github.com wrote:
Hmm, I don't see any errors in your code. I see that you use vl-overlay, if d.longitude, d.latitude are correct coordinates, then it's top left corner(default positioning) should point exactly to this coordinate, regardless of view zoom, center, any other things.
Can you catch screen video with this issue?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685810331, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX7ORAJZTOLGQ5EP4T3SDZPVJANCNFSM4ORRYBNQ.
Can’t take videos but here are some screenshots:
Don't see any screenshots...
Really ??
And now ?
On 2 Sep 2020, at 17:38, Vladimir Vershinin notifications@github.com wrote:
Can’t take videos but here are some screenshots:
Don't see any screenshots...
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685819532, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX7QVMKNJJPT3SR7SFDSDZRIRANCNFSM4ORRYBNQ.
You can send them to the ghettovoice@gmail.com
Sent to your email
On 2 Sep 2020, at 17:44, Vladimir Vershinin notifications@github.com wrote:
You can send them to the ghettovoice@gmail.com mailto:ghettovoice@gmail.com — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685823145, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGXZCTKXBZCIXGDCOBPTSDZR55ANCNFSM4ORRYBNQ.
If I'm correctly understand, you reload data on each zoom. Do you confirm that this 2 features from screenshots have same coordinates on each reload?
Yes, as the gist shows every time something changes, I have a timeout that triggers a data reload.
I double checked and yes same coordinates
On 2 Sep 2020, at 17:51, Vladimir Vershinin notifications@github.com wrote:
If I'm correctly understand, you reload data on each zoom. Do you confirm that this 2 features from screenshots have same coordinates on each reload?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685827516, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX7JBH2YHGLLPPL2NM3SDZSZPANCNFSM4ORRYBNQ.
Frankly speaking I'm not fully understand from screenshots where is vl-overlay on them. Also screenshots showing two points, but I see in the gist that vl-geom-line-string used with vl-feature. So what is actually green circles on the map?
Green circles are events locations on the map
The overlay has this position where d is an event :position="[d.longitude, d.latitude]"
On 2 Sep 2020, at 17:44, Vladimir Vershinin notifications@github.com wrote:
You can send them to the ghettovoice@gmail.com mailto:ghettovoice@gmail.com — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685823145, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGXZCTKXBZCIXGDCOBPTSDZR55ANCNFSM4ORRYBNQ.
If I'm correctly understand your use case: you need to show some additional data by clicking on the event feature. So I propose more easier way to achieve this https://jsfiddle.net/ghettovoice/mu59o2yj/
No
my problem is that the dots are not displayed at the correct coordinates.
You see they move to different location when I zoom
On 2 Sep 2020, at 18:16, Vladimir Vershinin notifications@github.com wrote:
If I'm correctly understand your use case: you need to show some additional data by clicking on the event feature. So propose more easier way to achieve this https://jsfiddle.net/ghettovoice/mu59o2yj/ https://jsfiddle.net/ghettovoice/mu59o2yj/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685842915, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX4KYXMALCJXRSDLKQTSDZVXHANCNFSM4ORRYBNQ.
I guess that green dots are spans inside vl-overlay. I'm not see any vector feature styles in your example. And how this span positioned inside vl-overlay out of the scope of the VueLayers.
Anyway using vl-overlay in this way looks for me a bit unusual use of vl-overlay. So I show you in the demo how to achieve same functionality. To show event dots you only need vector layer and source, to which you pass an array of loaded event features (encoded in GeoJSON format). To catch the event select and react on this you can use vl-interaction-select that can sync selected features to some data property. Then just use Vue wather, prepare data, show vl-overlay as event popup, or show additional layer with event lines (vl-feature vl-geom-line-string in your gist). Take a look at this demo https://jsfiddle.net/ghettovoice/mu59o2yj/ (updated with additional event lines layer)
my problem is that the dots are not displayed at the correct coordinates.
Because they are not features (see above). As you can see in the demo two points are alway at the same location at any zoom. And even their coordinates will be removed with the same coordinates, they still will be at the same position.
Thanks, ill have a look,
It is not possible to send you video, your server refuses files too big
My video is 5.9M; that is not big...
On 2 Sep 2020, at 18:33, Vladimir Vershinin notifications@github.com wrote:
my problem is that the dots are not displayed at the correct coordinates.
Because they are not features (see above). As you can see in the demo two points are alway at the same location at any zoom. And even their coordinates will be removed with the same coordinates, they still will be at the same position.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685853500, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGXYMBK4IX6KCXYUJPU3SDZXUBANCNFSM4ORRYBNQ.
It is not possible to send you video, your server refuses files too big
This is gmail. Maybe it have some restrictions on this. Do you have google drive? Can you share though it?
That’s ok it went through now
On 2 Sep 2020, at 18:38, Vladimir Vershinin notifications@github.com wrote:
It is not possible to send you video, your server refuses files too big
This is gmail. Maybe it have some restrictions on this. Do you have google drive? Can you share though it?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685856893, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGXYBPYHDRMO4N4PL67DSDZYJ3ANCNFSM4ORRYBNQ.
Try to temporary replace <vl-overlay>...</vl-overlay>
in your code with this.
<vl-feature
v-if="uid"
v-for="(d, index) in data"
:id="'data-'+uid+index"
:key="'data-'+uid+index"
>
<vl-geom-point :coordinates="[d.longitude, d.latitude]" />
</vl-feature>
You should see this two points in the correct place on any zoom
Sorry but replace … ?
On 2 Sep 2020, at 18:58, Vladimir Vershinin notifications@github.com wrote:
Try to temporary replace ... in your code with this.
<vl-feature v-if="uid" v-for="(d, index) in data" :id="'data-'+uid+index" :key="'data-'+uid+index"
You should see this two points in the correct place on any zoom
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685867773, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX6PIWPDKDUQZU36DILSDZ2T5ANCNFSM4ORRYBNQ.
Sorry I got it
Thanks a million; it seems to work !!! :))))
On 2 Sep 2020, at 18:58, Vladimir Vershinin notifications@github.com wrote:
Try to temporary replace ... in your code with this.
<vl-feature v-if="uid" v-for="(d, index) in data" :id="'data-'+uid+index" :key="'data-'+uid+index"
You should see this two points in the correct place on any zoom
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685867773, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX6PIWPDKDUQZU36DILSDZ2T5ANCNFSM4ORRYBNQ.
Anyway I strongly recommend to not use vl-feature for multiple features, because due to how Vue works with components (they always have some element in the real DOM) they have a performance issues. Also vl-feature not inside vl-source-vector are appended to the internal default map overlay (that is always shown on top of any other normal layers), so they can't be selectable with vl-interaction-select for example. The basic use case for vl-feature not in the vl-source-vector is show some single marker, for example user location, search result pin and so on. To show some set of features, it is recommended to use separate vl-layer-vector/vl-source-vector like in the demo.
Thank you
I will look at implementing your example.
On 2 Sep 2020, at 19:06, Vladimir Vershinin notifications@github.com wrote:
Anyway I strongly recommend to not use vl-feature for multiple features, because due to how Vue works with components (they always have some element in the real DOM) they have a performance issues. Also vl-feature not inside vl-source-vector are appended to the internal default map overlay (that is always shown on top of any other normal layers), so they can't be selectable with vl-interaction-select for example. The basic use case for vl-feature not in the vl-source-vector is show some single marker, for example user location, search result pin and so on. To show some set of features, it is recommended to use separate vl-layer-vector/vl-source-vector like in the demo.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.
I implemented vectors as you said. It works great.
Thanks for all your help :)
When the site is up I let you know
On 2 Sep 2020, at 18:31, Vladimir Vershinin notifications@github.com wrote:
I guess that green dots are spans inside vl-overlay. I'm not see any vector feature styles in your example. And how this span positioned inside vl-overlay out of the scope of the VueLayers.
Anyway using vl-overlay in this way looks for me a bit unusual use of vl-overlay. So I show you in the demo how to achieve same functionality. To show event dots you only need vector layer and source, to which you pass an array of loaded event features (encoded in GeoJSON format). To catch the event select and react on this you can use vl-interaction-select that can sync selected features to some data property. Then just use Vue wather, prepare data, show vl-overlay as event popup, or show additional layer with event lines (vl-feature vl-geom-line-string in your gist). Take a look at this demo https://jsfiddle.net/ghettovoice/mu59o2yj/ https://jsfiddle.net/ghettovoice/mu59o2yj/ (updated with additional event lines layer)
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685852179, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX4AI23DVXM36JGOGRTSDZXMRANCNFSM4ORRYBNQ.
I would like to get the current
vl-view
extent but not sure how to do it or if it is possible; can't find anything in the docs.That would be great so I can create boundaries for my SQL request.