Add "ol-vector-tile-layer" and "ol-source-vector"

docs/.vitepress/config.ts

@@ -95,6 +95,10 @@ export default defineConfig({
             text: "ol-vector-layer",
             link: "/componentsguide/layers/vectorlayer/",
           },
+          {
+            text: "ol-vector-tile-layer",
+            link: "/componentsguide/layers/vectortilelayer/",
+          },
           {
             text: "ol-webgl-points-layer",
             link: "/componentsguide/layers/webglpointslayer/",
@@ -153,6 +157,10 @@ export default defineConfig({
             text: "ol-source-vector",
             link: "/componentsguide/sources/vector/",
           },
+          {
+            text: "ol-source-vector-tile",
+            link: "/componentsguide/sources/vectortile/",
+          },
           {
             text: "ol-source-webglpoints",
             link: "/componentsguide/sources/webglpoints/",

docs/componentsguide/layers/vectortilelayer/index.md

@@ -0,0 +1,87 @@
+# ol-vector-tile-layer
+
+ol-vector-tile-layer can render vector tile from various backend services. It should be used with together with ol-source-vector-tile component.
+
+<script setup>
+import VectorTileLayerDemo from "@demos/VectorTileLayerDemo.vue"
+</script>
+<ClientOnly>
+<VectorTileLayerDemo />
+</ClientOnly>
+
+## Usage
+
+Example below shows how you can use ol-vector-tile-layer and ol-source-vector-tile to render some vector-tile features from remote backend.
+
+Load features simply by providing url value and format MVT
+
+::: code-group
+
+<<< ../../../../src/demos/VectorTileLayerDemo.vue
+
+:::
+
+## Properties
+
+### className
+
+- **Type**: `string`
+- **Default**: `ol-layer`
+
+A CSS class name to set to the layer element.
+
+### opacity
+
+- **Type**: `number `
+- **Default**: `1`
+
+Opacity (0, 1).
+
+### visible
+
+- **Type**: `boolean`
+- **Default**: `true`
+
+Visibility.
+
+### extent
+
+- **Type**: `Array`
+
+The bounding extent for layer rendering. The layer will not be rendered outside of this extent.
+
+### zIndex
+
+- **Type**: `number`
+
+The z-index for layer rendering. At rendering time, the layers will be ordered, first by Z-index and then by position.
+
+### minResolution
+
+- **Type**: `number`
+
+The minimum resolution (inclusive) at which this layer will be visible.
+
+### maxResolution
+
+- **Type**: `number`
+
+The maximum resolution (exclusive) below which this layer will be visible.
+
+### minZoom
+
+- **Type**: `number`
+
+The minimum view zoom level (exclusive) above which this layer will be visible.
+
+### maxZoom
+
+- **Type**: `number`
+
+The maximum view zoom level (inclusive) at which this layer will be visible.
+
+### preload
+
+- **Type**: `number`
+- **Default**: `0`
+  Low-resolution tiles up to preload level will be load.

docs/componentsguide/sources/vectortile/index.md

@@ -0,0 +1,47 @@
+# ol-source-vector-tile
+
+ol-source-vector-tile can be used together with ol-vector-tile-layer to draw any vector tile data on the map.
+
+<script setup>
+import VectorTileLayerDemo from "@demos/VectorTileLayerDemo.vue"
+</script>
+<ClientOnly>
+<VectorTileLayerDemo />
+</ClientOnly>
+
+## Usage
+
+Example below shows how you can use ol-vector-tile-layer and ol-source-vector-tile to render some vector-tile features from remote backend.
+
+::: code-group
+
+<<< ../../../../src/demos/VectorTileLayerDemo.vue
+
+:::
+
+## Properties
+
+### Props from OpenLayers
+
+Properties are passed-trough from OpenLayers directly.
+Their types and default values can be checked-out [in the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_VectorTile-VectorTile.html).
+Only some properties deviate caused by reserved keywords from Vue / HTML.
+This deviating props are described in the section below.
+
+### Deviating Properties
+
+None.
+
+## Events
+
+You have access to all Events from the underlying source.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_VectorTile-VectorTile.html) to see the available events tht will be fired.
+
+```html
+<ol-source-vector-tile :url="url" @error="handleEvent" />
+```
+
+## Methods
+
+You have access to all Methods from the underlying source.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_VectorTile-VectorTile.html) to see the available methods.

docs/public/sitemap.xml

@@ -77,6 +77,11 @@
   <lastmod>2021-08-15T21:05:05+00:00</lastmod>
   <priority>0.80</priority>
 </url>
+<url>
+  <loc>https://vue3openlayers.netlify.app/componentsguide/layers/vectortilelayer/</loc>
+  <lastmod>2023-07-26T13:37:05+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
 <url>
   <loc>https://vue3openlayers.netlify.app/componentsguide/sources/imagestatic/</loc>
   <lastmod>2021-08-15T21:05:05+00:00</lastmod>
@@ -137,6 +142,11 @@
   <lastmod>2021-08-15T21:05:05+00:00</lastmod>
   <priority>0.80</priority>
 </url>
+<url>
+  <loc>https://vue3openlayers.netlify.app/componentsguide/sources/vectortile/</loc>
+  <lastmod>2023-07-26T13:37:05+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
 <url>
   <loc>https://vue3openlayers.netlify.app/componentsguide/sources/cluster/</loc>
   <lastmod>2021-08-15T21:05:05+00:00</lastmod>

src/components/layers/OlVectorTileLayer.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, provide, onUnmounted, onMounted, watch, computed } from "vue";
+import VectorTileLayer from "ol/layer/VectorTile";
+import type Map from "ol/Map";
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import {
+  layersCommonDefaultProps,
+  type LayersCommonProps,
+} from "@/components/layers/LayersCommonProps";
+import type { StyleLike } from "ol/style/Style";
+import type { FlatStyleLike } from "ol/style/flat";
+import type LayerGroup from "ol/layer/Group";
+
+const props = withDefaults(
+  defineProps<
+    LayersCommonProps & {
+      renderBuffer?: number;
+      updateWhileAnimating?: boolean;
+      styles?: StyleLike | FlatStyleLike | null;
+      updateWhileInteracting?: boolean;
+    }
+  >(),
+  {
+    ...layersCommonDefaultProps,
+    renderBuffer: 100,
+    updateWhileAnimating: false,
+    updateWhileInteracting: false,
+  }
+);
+
+const map = inject<Map>("map");
+const layerGroup = inject<LayerGroup | null>("layerGroup", null);
+
+const { properties } = usePropsAsObjectProperties(props);
+
+const vectorTileLayer = computed(() => new VectorTileLayer(properties));
+
+watch(properties, () => {
+  vectorTileLayer.value.setProperties(properties);
+});
+
+onMounted(() => {
+  map?.addLayer(vectorTileLayer.value);
+  if (layerGroup) {
+    const layerCollection = layerGroup.getLayers();
+    layerCollection.push(vectorTileLayer.value);
+    layerGroup.setLayers(layerCollection);
+  }
+});
+
+onUnmounted(() => {
+  map?.removeLayer(vectorTileLayer.value);
+});
+
+provide("vectorTileLayer", vectorTileLayer);
+provide("stylable", vectorTileLayer);
+
+defineExpose({
+  vectorTileLayer,
+});
+</script>

src/components/layers/index.ts

@@ -5,6 +5,7 @@ import OlImageLayer from "./OlImageLayer.vue";
 import OlLayerGroup from "./OlLayerGroup.vue";
 import OlTileLayer from "./OlTileLayer.vue";
 import OlVectorLayer from "./OlVectorLayer.vue";
+import OlVectorTileLayer from "./OlVectorTileLayer.vue";
 import OlVectorImageLayer from "./OlVectorImageLayer.vue";
 import OlWebglPointsLayer from "./OlWebglPointsLayer.vue";
 import OlWebglTileLayer from "./OlWebglTileLayer.vue";
@@ -22,6 +23,7 @@ function install(app: App) {
   app.component("ol-tile-layer", OlTileLayer);
   app.component("ol-vector-image-layer", OlVectorImageLayer);
   app.component("ol-vector-layer", OlVectorLayer);
+  app.component("ol-vector-tile-layer", OlVectorTileLayer);
   app.component("ol-webgl-points-layer", OlWebglPointsLayer);
   app.component("ol-webgl-tile-layer", OlWebglTileLayer);
 }

src/components/sources/OlSourceVectorTile.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VectorTileSource, { type Options } from "ol/source/VectorTile";
+import type VectorTileLayer from "ol/layer/VectorTile";
+import type { Ref } from "vue";
+import { inject, watch, onMounted, onUnmounted, provide, computed } from "vue";
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import {
+  useOpenLayersEvents,
+  FEATURE_EVENTS,
+} from "@/composables/useOpenLayersEvents";
+
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<Options>(), {
+  overlaps: true,
+  projection: "EPSG:3857",
+  wrapX: true,
+});
+
+const vectorTileLayer = inject<Ref<VectorTileLayer> | null>(
+  "vectorTileLayer",
+  null
+);
+
+const { properties } = usePropsAsObjectProperties(props);
+
+const source = computed(() => new VectorTileSource(properties));
+
+useOpenLayersEvents(source, FEATURE_EVENTS);
+
+const applySource = () => {
+  vectorTileLayer?.value?.setSource(null);
+  vectorTileLayer?.value?.setSource(source.value);
+  vectorTileLayer?.value?.changed();
+};
+watch(properties, () => {
+  applySource();
+});
+
+watch(
+  () => vectorTileLayer?.value,
+  () => {
+    applySource();
+  }
+);
+
+onMounted(() => {
+  vectorTileLayer?.value?.setSource(source.value);
+});
+
+onUnmounted(() => {
+  vectorTileLayer?.value?.setSource(null);
+});
+
+provide("vectorSource", source);
+
+defineExpose({
+  vectorTileLayer,
+  source,
+});
+</script>

src/components/sources/index.ts

@@ -10,6 +10,7 @@ import OlSourceTileArcGISRest from "@/components/sources/OlSourceTileArcGISRest.
 import OlSourceTileJSON from "./OlSourceTileJSON.vue";
 import OlSourceTileWMS from "./OlSourceTileWMS.vue";
 import OlSourceVector from "./OlSourceVector.vue";
+import OlSourceVectorTile from "./OlSourceVectorTile.vue";
 import OlSourceWebglPoints from "./OlSourceWebglPoints.vue";
 import OlSourceXYZ from "./OlSourceXYZ.vue";
 import OlSourceWMTS from "./OlSourceWMTS.vue";
@@ -31,6 +32,7 @@ function install(app: App) {
   app.component("ol-source-tile-json", OlSourceTileJSON);
   app.component("ol-source-tile-wms", OlSourceTileWMS);
   app.component("ol-source-vector", OlSourceVector);
+  app.component("ol-source-vector-tile", OlSourceVectorTile);
   app.component("ol-source-webglpoints", OlSourceWebglPoints);
   app.component("ol-source-xyz", OlSourceXYZ);
   app.component("ol-source-wmts", OlSourceWMTS);

src/demos/VectorTileLayerDemo.vue

@@ -0,0 +1,28 @@
+<template>
+  <ol-map
+    :loadTilesWhileAnimating="true"
+    :loadTilesWhileInteracting="true"
+    style="height: 400px"
+  >
+    <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" />
+
+    <ol-vector-tile-layer>
+      <ol-source-vector-tile :url="url" :format="mvtFormat">
+      </ol-source-vector-tile>
+    </ol-vector-tile-layer>
+  </ol-map>
+</template>
+
+<script setup>
+import { ref, inject } from "vue";
+
+const center = ref([0, 0]);
+const zoom = ref(3);
+const rotation = ref(0);
+
+const url = ref(
+  "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf"
+);
+const format = inject("ol-format");
+const mvtFormat = new format.MVT();
+</script>

vite.config.ts

@@ -74,6 +74,7 @@ export default defineConfig({
           "ol/layer/Group": "LayerGroup",
           "ol/layer/Tile": "TileLayer",
           "ol/layer/Vector": "VectorLayer",
+          "ol/layer/VectorTile": "VectorLayerTile",
           "ol/layer/VectorImage": "VectorImageLayer",
           "ol/layer/WebGLPoints": "WebGLPointsLayer",
           "ol/layer/WebGLTile": "TileLayer$1",
@@ -91,6 +92,7 @@ export default defineConfig({
           "ol/source/TileJSON": "TileJSON",
           "ol/source/TileWMS": "TileWMS",
           "ol/source/Vector": "VectorSource",
+          "ol/source/VectorTile": "VectorSourceTile",
           "ol/source/XYZ": "XYZ",
           "ol/control": "control",
           "ol-ext/control/Button": "Button",