Best practise/performace for displaying 1000 features

[DaanOolbekkink]

Hi,
I want to draw between 200 and 5000 points on the map. I used two ways.
With the first one google chrome stops working

<vl-layer-vector id="sias" v-if="showSias" :z-index="1">
          <vl-source-vector :features.sync="sias"></vl-source-vector>
        </vl-layer-vector>

The second one seems to work but not quite fast.

<vl-layer-vector id="sias" v-if="showSias" :z-index="1">
          <vl-source-vector>
            <vl-feature v-for="feature in sias" :key="feature.id">
              <vl-geom-point :coordinates="feature.geometry.coordinates"></vl-geom-point>
            </vl-feature>
          </vl-source-vector>
        </vl-layer-vector>

Thanks!

[carlosjpr-collab]

This first way is work but the problem is when you change 'sias' and load another data, The vector layer will not show all new features and will cache some of the old features.

I try to use like this this.$refs.vector[0].refresh() or this.$refs.vector[0].getFeatures().clear()
but it is really complcated to sychronise with vue js.

we don't have any example that shows data change.

[DaanOolbekkink]

Thanks for the response and I tried what u said but it is not really what I am looking for.

I have a vector with, in this example, 900 points. And I would like to find a way to display those without the map slowing down image. Refreshing the vector did not really work. It might be an idea to cluster the points when zooing out. So less points are visible, and when zooming in more points are visible again?

[sjmallon]

To overcome a similar issue I have used Object.freeze on the feature array to remove the Vue reactivity overhead, allowing successful operation with at least 10,000 features. This will however not work in combination with the .sync modifier.

[DaanOolbekkink]

Thanks, it is a great solution however I do need the feature list to be able to add and remove data. In openlayers there is something like clusters shown here https://openlayers.org/en/latest/examples/cluster.html can this be done in Vuelayers?

[sjmallon]

Even though it's not documented, clustering is implemented, as can be seen in the demo app. Here's a snippet from one of my apps:

  <vl-layer-vector>
    <vl-source-cluster :distance="clusterDistance" :key="key">
      <vl-source-vector :features="features" ref="gjsource"/>
      <vl-style-func :factory="clusterStyleFunc"/>
    </vl-source-cluster>
  </vl-layer-vector>

My experience has been that clustering brought limited performance benefits, so I still use Object.freeze. To trigger re-rendering on feature changes at the Vue level, I use a watcher and increment the key variable above.

    watch: {
        features() {
            this.key++
        }
    },

[carlosjpr-collab]

@sjmallon
@DaanO123
geojson-vt this https://blog.mapbox.com/rendering-big-geodata-on-the-fly-with-geojson-vt-4e4d2a5dd1f2 may be also a solution in the future but I don't have any idea of how can we use it in vue layer

[ghettovoice]

Hi for all!
From my experience showing of >5k features as vector layer can't be efficient. And with the plain openlayers too.
Usually, if this is just a view layer, I use some map server and show them as tiled WMS layer. Less memory usage, relatively fast loading. But with the WMS layer you need additionally parse response to the GetFeatureInfo request and you haven't features on the client as objects.
A more modern approach would be to use vector tiles. With this you will have features on the client and load them relatively fast, but all of them eats a lot of memory.

@DaanO123 What is your use case? What you plan to do with 5k features showing at the same moment on the map?

[DaanOolbekkink]

Thanks for all the responses I'll keep them in mind! For now I found a way I don't need to use so many features. Thanks guys!

[zestlee1106]

@DaanO123 Hello, I'm facing the same issue. Could you tell me how you did it?

[DaanOolbekkink]

Hi @a971106a, like I said in a comment before: Instead of rendering so many features I created district areas that had a count with the actual amount. However I did try to use the Object.freeze like @sjmallon explained, it worked if the list is fixed which in my case wasn't an option.

It is over a year ago so maybe this doesn't make any sense or new features arived. Let me know!