Performance issues with vl-source-cluster

Hi, first of all, I’d like to say that I’m new to OpenLayers and VueLayers and it therefore might be a problem in my understanding of how to use the framework. I’m testing whether to change from Leaflet.js to OpenLayers (with vuelayers) for an already existing application. I used Leaflet with Vue2leaflet and the marker-cluster plugin for Vue2leaflet in my application and I’m now trying to replace this with OpenLayers.

I’m trying to simply add a list of points to the map, where each point is designated by marker. I also then would like to be able to interact with the markers (clicking and hovering). As a first step I simply implemented putting the list of points on the map and adding a vl-source-cluster following the example on the demo site, with some modifications.

The code I have so far is roughly:

<template>
  <vl-map :load-tiles-while-animating="true" 
    :load-tiles-while-interacting="true"
    :controls="false">
    <vl-view :center.sync="center" :zoom.sync="zoom" :rotation.sync="rotation"></vl-view>
    <vl-layer-tile>
        <!--<vl-source-osm></vl-source-osm>-->
        <vl-source-xyz :url="mapUrl"></vl-source-xyz>
    </vl-layer-tile>
    <vl-layer-vector>
      <vl-source-cluster :distance="200">
        <vl-source-vector>
          <vl-feature v-for="client in clientList" 
                      :key="client.customer_id">
              <vl-geom-point :coordinates="invert(client.position)"></vl-geom-point>
              <vl-style-box>
                <vl-style-icon src='../statics/icons/ort.png' :scale="0.5" />
              </vl-style-box>
          </vl-feature>
        </vl-source-vector>
        <vl-style-func :factory="clusterStyleFunc" />
      </vl-source-cluster>
    </vl-layer-vector>
  </vl-map>
</template>

here clientList is an array of about 700 objects. The problem is that it takes the map a really long time to generate the clusters (in comparison with leaflet) and it becomes very slow to interact with, even after it is generated.

Is this a good approach for what I’m trying to do? Or is it better to create the features array programatically and then pass it to the cluster? And if so, can I still make use of the reactivity of vue.js?

I’ve read here about the super cluster library which might be relevant. Is this something already in VueLayers? Do you think it will be difficult to combine with Vuelayers?

I would really appreciate any help you can give! Thanks, Omri

[naveenraina]

@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.

[ghettovoice]

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