Performance issues with vl-source-cluster about vuelayers HOT 20 CLOSED

Hi guys!

@naveenraina I just made the new example https://jsfiddle.net/ghettovoice/baojhrL6/. It is basic example extracted from the demo app. For any vector layer with more than 1 feature I suggest you add features through features property as array of GeoJSON objects.

In the latest project where I use vuelayers, I need to show a lot of tracker markers and all of them should smoothly moving between last -> new coordinate arriving from api. And I also faced performance issues with this layer, because storing huge array as any Vue reactive property blows up CPU and freezes UI.

So I ended up with slightly complex setup: I use VueLayers components only to build object hierarchy, i.e. build map and layers from config, but load features with custom loader function, and then add features through native OpenLayers API. And do not store loaded features in Vue reactive fields. In this setup Vue and its reactivity only used to configure map with layers, but all other work related to loading, animating features made through OpenLayers API without additional overhead.

Note that in any case OpenLayers API will be a bit complex than Leaflet, but in my opinion it gives more opportunities for complex use cases. For the similar effect with clusters (like in marker-cluster plugin for Leaflet) you can try to use this http://viglino.github.io/ol-ext/examples/animation/map.animatedcluster.html

from vuelayers.

@ghettovoice I figured out the error. It was because I had to set properties of feature through openlayers. I was using these properties in style function and as they were not there, style function was throwing assertion errors. Now I have set the properties with feature.set(key, value) and style is working. Thanks again for your help.

from vuelayers.

Hi!
Rendering features as components is a very expensive, because Vue creates real DOM element for each feature, this method is suitable only for small static layers (features num <=100 ) or simple markers like Geo location, click & etc.
This is not so clear from the demo, and documentation is poor: vl-source-vector has property features that accepts array of GeoJSON encoded features. Providing features as an array to this property is a recommended way for big layers, layers that loads data from backend and changes frequently.
features property is reactive and will synchronizable. With this approach features can be styled through vl-style-func (if you need dynamic styles depending on feature props, see OpenLayers docs) or vl-style-*(for all features) on the layer level.

Example here. Note that features are passed through features property directly to vl-source-vector component. vl-source-cluster just an decorator.

from vuelayers.

Thank you very much! Now this works much faster. It is still not as smooth and feature-rich as the Leaflet MarkerCluster plugin but I'll see if I can mimic that in OpenLayers...
Do you know how I can use inkscape generated svg files for representing icons in openlayers? I tried simply using Icon from ol/style/icon but I only ever get a black quarter circle.

Thank you again for your help!
Omri

from vuelayers.

With plain OpenLayers, there is ol/style/icon, it has src property, and scale, size for defining target size of icon. https://openlayers.org/en/latest/apidoc/ol.style.Icon.html
If you make an fiddle to show the issue with icon, so I will help you more

from vuelayers.

Hi, thanks again!
I tried to create a fiddle, but my code seems to work just fine with an svg image hosted on the internet. Perhaps I'm having a webpack issue or some other thing in the compilation process.
I will look into it... Thank you for this great library!

from vuelayers.

If you are using vl-style-icon, you should add transformToRequire like in vuelayers demo app https://github.com/ghettovoice/vuelayers-demo/blob/master/build/vue-loader.conf.js.
It allows using relative paths to assets inside Vue tenplate on custom tags

from vuelayers.

@ghettovoice, thanks for sharing this information. I am also trying to show couple hundered markers through vue feature components and it is very slow. The example link you mentioned is no more working. Can you share some working example of how you achieved showing more than 500 markers in vue layers.

from vuelayers.

@omrihar, I noticed you were able to get it to work. can you please share your piece of code where you are showing couple hundered markers in vuelayers with good performance.

from vuelayers.

@naveenraina Frankly I don't know anymore where my code is, and I ended up using Leaflet and its marker-cluster... Sorry

from vuelayers.

ok @omrihar. any specific reason you switched to leaflet? is it better than vuelayers?

from vuelayers.

from vuelayers.

yeah that makes sense @omrihar. may be @ghettovoice can help here.

from vuelayers.

@ghettovoice, thanks for the code snippet. I am trying to load the features from an api. So I am setting features to blank array initially and then calling an api in created event and then populating features with the new collection. This does not seem to work. A small test I tried with your jsfiddle is here - https://jsfiddle.net/j4z9u1od/. This does not load the features if I try to load them on a button click. I check the source code of vl-source-vector and they do seem to watch features property for any changes.

from vuelayers.

@ghettovoice after reading your full response, it looks like you also faced same issues as I am facing now and hence you used openlayers api directly. I think I also need the same kind of setup. any help in this direction will be great.

from vuelayers.

@ghettovoice I tried following - in html add ref to vl-source-vector tag. then in api callback, I used addFeatures of ol-ext -
this.$refs.vectorSource.addFeatures(features)

This gives no js error but does not display markers on map though.

from vuelayers.

Take a look at the updated example https://jsfiddle.net/ghettovoice/zqpot5dm/
to get some view. Take a note that vuelayers works with openlayers in the map view projection (EPSG:3857 by default), so you should correctly transform you data projection to the map view projection.

Instead of loading all features at once you can set custom loader (https://github.com/ghettovoice/vuelayers/blob/master/src/component/vector-source/source.vue#L26) and loading strategy (https://github.com/ghettovoice/vuelayers/blob/master/src/component/vector-source/source.vue#L48) to load only what matches the current bbox.
There you can find example of feature loader function https://openlayers.org/en/latest/apidoc/module-ol_source_Vector-VectorSource.html.

from vuelayers.

@naveenraina also in the last example 'Cluster 2' I use vuelayers@next (v0.11.5-beta.3) where was resolved several well-known issues with vl-source-vector. Try to install it please.

from vuelayers.

@ghettovoice thanks for the code examples. I was able to load features through openlayers api. Appreciate your help.

from vuelayers.

@ghettovoice after using your code, the vl-style-func stopped working. I think we need to apply style through openlayer api as well. I am looking into it now. If you have some code example to share where you are applying style to features, please do share.

from vuelayers.