Add VectorImageLayer demo

Author: pjreed

docs/.vitepress/config.ts

@@ -76,6 +76,10 @@ export default defineConfig({
             text: "ol-tile-layer",
             link: "/componentsguide/layers/tilelayer/",
           },
+          {
+            text: "ol-vector-image-layer",
+            link: "/componentsguide/layers/vectorimagelayer/",
+          },
           {
             text: "ol-vector-layer",
             link: "/componentsguide/layers/vectorlayer/",

docs/componentsguide/layers/vectorimagelayer/index.md

@@ -2,12 +2,14 @@
 
 ol-vector-image-layer can render vector from various backend services. It should be used with together with ol-source-vector component.
 
+Vector data is rendered client-side, to an image, which yields much better performance than ol-vector-layer during panning and zooming operations, but point symbols and texts are always rotated with the view and pixels are scaled during zoom animations.
+
 <script setup>
-import VectorSourceDemo1 from "@demos/VectorSourceDemo1.vue"
+import VectorSourceDemo4 from "@demos/VectorSourceDemo4.vue"
 </script>
 
 <ClientOnly>
-<VectorSourceDemo1 />
+<VectorSourceDemo4 />
 </ClientOnly>
 
 ## Usage

src/demos/VectorSourceDemo4.vue

@@ -0,0 +1,51 @@
+<template>
+  <ol-map
+    :loadTilesWhileAnimating="true"
+    :loadTilesWhileInteracting="true"
+    style="height: 400px"
+  >
+    <ol-view
+      ref="view"
+      :center="center"
+      :rotation="rotation"
+      :zoom="zoom"
+      :projection="projection"
+    />
+
+    <ol-tile-layer>
+      <ol-source-osm />
+    </ol-tile-layer>
+
+    <ol-vector-image-layer>
+      <ol-source-vector :url="url" :format="geoJson"> </ol-source-vector>
+    </ol-vector-image-layer>
+  </ol-map>
+</template>
+
+<script>
+import { ref, inject } from "vue";
+export default {
+  setup() {
+    const center = ref([0, 0]);
+    const projection = ref("EPSG:4326");
+    const zoom = ref(3);
+    const rotation = ref(0);
+
+    const url = ref(
+      "https://openlayers.org/en/latest/examples/data/geojson/countries.geojson"
+    );
+    const format = inject("ol-format");
+    console.log(format);
+    const geoJson = new format.GeoJSON();
+
+    return {
+      center,
+      projection,
+      zoom,
+      rotation,
+      url,
+      geoJson,
+    };
+  },
+};
+</script>