feat(ol-vector-tile-layers): add support for renderMode property

closes #263

Author: d-koppenhagen

docs/componentsguide/layers/vectortilelayer/index.md

@@ -85,3 +85,13 @@ The maximum view zoom level (inclusive) at which this layer will be visible.
 - **Type**: `number`
 - **Default**: `0`
   Low-resolution tiles up to preload level will be load.
+
+### renderMode
+
+- **Type**: `'hybrid' | 'vector'`
+- **Default**: `hybrid`
+
+Render mode for vector tiles.
+
+- `hybrid`: Polygon and line elements are rendered as images, so pixels are scaled during zoom animations. Point symbols and texts are accurately rendered as vectors and can stay upright on rotated views.
+- `vector`: Everything is rendered as vectors. Use this mode for improved performance on vector tile layers with only a few rendered features (e.g. for highlighting a subset of features of another layer with the same source).

src/components/layers/OlVectorTileLayer.vue

@@ -6,7 +6,9 @@
 
 <script setup lang="ts">
 import { inject, provide, onUnmounted, onMounted, watch, computed } from "vue";
-import VectorTileLayer from "ol/layer/VectorTile";
+import VectorTileLayer, {
+  type VectorTileRenderType,
+} from "ol/layer/VectorTile";
 import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import {
@@ -24,13 +26,15 @@ const props = withDefaults(
       updateWhileAnimating?: boolean;
       styles?: StyleLike | FlatStyleLike | null;
       updateWhileInteracting?: boolean;
+      renderMode?: VectorTileRenderType;
     }
   >(),
   {
     ...layersCommonDefaultProps,
     renderBuffer: 100,
     updateWhileAnimating: false,
     updateWhileInteracting: false,
+    renderMode: "hybrid",
   },
 );