Best practise/performace for displaying 1000 features

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!

[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++
        }
    },

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