Skip to content

Commit 9096dc5

Browse files
okameokame
committed
add "ol-vector-tile-layer" and "ol-source-vector"
1 parent 3f8b772 commit 9096dc5

File tree

10 files changed

+323
-0
lines changed

10 files changed

+323
-0
lines changed

‎docs/.vitepress/config.ts

+8
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,10 @@ export default defineConfig({
9595
text: "ol-vector-layer",
9696
link: "/componentsguide/layers/vectorlayer/",
9797
},
98+
{
99+
text: "ol-vector-tile-layer",
100+
link: "/componentsguide/layers/vectortilelayer/",
101+
},
98102
{
99103
text: "ol-webgl-points-layer",
100104
link: "/componentsguide/layers/webglpointslayer/",
@@ -153,6 +157,10 @@ export default defineConfig({
153157
text: "ol-source-vector",
154158
link: "/componentsguide/sources/vector/",
155159
},
160+
{
161+
text: "ol-source-vector-tile",
162+
link: "/componentsguide/sources/vectortile/",
163+
},
156164
{
157165
text: "ol-source-webglpoints",
158166
link: "/componentsguide/sources/webglpoints/",

‎docs/componentsguide/layers/vectortilelayer/index.md

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
# ol-vector-tile-layer
2+
3+
ol-vector-tile-layer can render vector tile from various backend services. It should be used with together with ol-source-vector-tile component.
4+
5+
<script setup>
6+
import VectorTileLayerDemo from "@demos/VectorTileLayerDemo.vue"
7+
</script>
8+
<ClientOnly>
9+
<VectorTileLayerDemo />
10+
</ClientOnly>
11+
12+
## Usage
13+
14+
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.
15+
16+
Load features simply by providing url value and format MVT
17+
18+
::: code-group
19+
20+
<<< ../../../../src/demos/VectorTileLayerDemo.vue
21+
22+
:::
23+
24+
## Properties
25+
26+
### className
27+
28+
- **Type**: `string`
29+
- **Default**: `ol-layer`
30+
31+
A CSS class name to set to the layer element.
32+
33+
### opacity
34+
35+
- **Type**: `number `
36+
- **Default**: `1`
37+
38+
Opacity (0, 1).
39+
40+
### visible
41+
42+
- **Type**: `boolean`
43+
- **Default**: `true`
44+
45+
Visibility.
46+
47+
### extent
48+
49+
- **Type**: `Array`
50+
51+
The bounding extent for layer rendering. The layer will not be rendered outside of this extent.
52+
53+
### zIndex
54+
55+
- **Type**: `number`
56+
57+
The z-index for layer rendering. At rendering time, the layers will be ordered, first by Z-index and then by position.
58+
59+
### minResolution
60+
61+
- **Type**: `number`
62+
63+
The minimum resolution (inclusive) at which this layer will be visible.
64+
65+
### maxResolution
66+
67+
- **Type**: `number`
68+
69+
The maximum resolution (exclusive) below which this layer will be visible.
70+
71+
### minZoom
72+
73+
- **Type**: `number`
74+
75+
The minimum view zoom level (exclusive) above which this layer will be visible.
76+
77+
### maxZoom
78+
79+
- **Type**: `number`
80+
81+
The maximum view zoom level (inclusive) at which this layer will be visible.
82+
83+
### preload
84+
85+
- **Type**: `number`
86+
- **Default**: `0`
87+
Low-resolution tiles up to preload level will be load.

‎docs/componentsguide/sources/vectortile/index.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# ol-source-vector-tile
2+
3+
ol-source-vector-tile can be used together with ol-vector-tile-layer to draw any vector tile data on the map.
4+
5+
<script setup>
6+
import VectorTileLayerDemo from "@demos/VectorTileLayerDemo.vue"
7+
</script>
8+
<ClientOnly>
9+
<VectorTileLayerDemo />
10+
</ClientOnly>
11+
12+
## Usage
13+
14+
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.
15+
16+
::: code-group
17+
18+
<<< ../../../../src/demos/VectorTileLayerDemo.vue
19+
20+
:::
21+
22+
## Properties
23+
24+
### Props from OpenLayers
25+
26+
Properties are passed-trough from OpenLayers directly.
27+
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).
28+
Only some properties deviate caused by reserved keywords from Vue / HTML.
29+
This deviating props are described in the section below.
30+
31+
### Deviating Properties
32+
33+
None.
34+
35+
## Events
36+
37+
You have access to all Events from the underlying source.
38+
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.
39+
40+
```html
41+
<ol-source-vector-tile :url="url" @error="handleEvent" />
42+
```
43+
44+
## Methods
45+
46+
You have access to all Methods from the underlying source.
47+
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

+10
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,11 @@
7777
<lastmod>2021-08-15T21:05:05+00:00</lastmod>
7878
<priority>0.80</priority>
7979
</url>
80+
<url>
81+
<loc>https://vue3openlayers.netlify.app/componentsguide/layers/vectortilelayer/</loc>
82+
<lastmod>2023-07-26T13:37:05+00:00</lastmod>
83+
<priority>0.80</priority>
84+
</url>
8085
<url>
8186
<loc>https://vue3openlayers.netlify.app/componentsguide/sources/imagestatic/</loc>
8287
<lastmod>2021-08-15T21:05:05+00:00</lastmod>
@@ -137,6 +142,11 @@
137142
<lastmod>2021-08-15T21:05:05+00:00</lastmod>
138143
<priority>0.80</priority>
139144
</url>
145+
<url>
146+
<loc>https://vue3openlayers.netlify.app/componentsguide/sources/vectortile/</loc>
147+
<lastmod>2023-07-26T13:37:05+00:00</lastmod>
148+
<priority>0.80</priority>
149+
</url>
140150
<url>
141151
<loc>https://vue3openlayers.netlify.app/componentsguide/sources/cluster/</loc>
142152
<lastmod>2021-08-15T21:05:05+00:00</lastmod>

‎src/components/layers/OlVectorTileLayer.vue

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div>
3+
<slot></slot>
4+
</div>
5+
</template>
6+
7+
<script setup lang="ts">
8+
import { inject, provide, onUnmounted, onMounted, watch, computed } from "vue";
9+
import VectorTileLayer from "ol/layer/VectorTile";
10+
import type Map from "ol/Map";
11+
import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
12+
import {
13+
layersCommonDefaultProps,
14+
type LayersCommonProps,
15+
} from "@/components/layers/LayersCommonProps";
16+
import type { StyleLike } from "ol/style/Style";
17+
import type { FlatStyleLike } from "ol/style/flat";
18+
import type LayerGroup from "ol/layer/Group";
19+
20+
const props = withDefaults(
21+
defineProps<
22+
LayersCommonProps & {
23+
renderBuffer?: number;
24+
updateWhileAnimating?: boolean;
25+
styles?: StyleLike | FlatStyleLike | null;
26+
updateWhileInteracting?: boolean;
27+
}
28+
>(),
29+
{
30+
...layersCommonDefaultProps,
31+
renderBuffer: 100,
32+
updateWhileAnimating: false,
33+
updateWhileInteracting: false,
34+
}
35+
);
36+
37+
const map = inject<Map>("map");
38+
const layerGroup = inject<LayerGroup | null>("layerGroup", null);
39+
40+
const { properties } = usePropsAsObjectProperties(props);
41+
42+
const vectorTileLayer = computed(() => new VectorTileLayer(properties));
43+
44+
watch(properties, () => {
45+
vectorTileLayer.value.setProperties(properties);
46+
});
47+
48+
onMounted(() => {
49+
map?.addLayer(vectorTileLayer.value);
50+
if (layerGroup) {
51+
const layerCollection = layerGroup.getLayers();
52+
layerCollection.push(vectorTileLayer.value);
53+
layerGroup.setLayers(layerCollection);
54+
}
55+
});
56+
57+
onUnmounted(() => {
58+
map?.removeLayer(vectorTileLayer.value);
59+
});
60+
61+
provide("vectorTileLayer", vectorTileLayer);
62+
provide("stylable", vectorTileLayer);
63+
64+
defineExpose({
65+
vectorTileLayer,
66+
});
67+
</script>

‎src/components/layers/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import OlImageLayer from "./OlImageLayer.vue";
55
import OlLayerGroup from "./OlLayerGroup.vue";
66
import OlTileLayer from "./OlTileLayer.vue";
77
import OlVectorLayer from "./OlVectorLayer.vue";
8+
import OlVectorTileLayer from "./OlVectorTileLayer.vue";
89
import OlVectorImageLayer from "./OlVectorImageLayer.vue";
910
import OlWebglPointsLayer from "./OlWebglPointsLayer.vue";
1011
import OlWebglTileLayer from "./OlWebglTileLayer.vue";
@@ -22,6 +23,7 @@ function install(app: App) {
2223
app.component("ol-tile-layer", OlTileLayer);
2324
app.component("ol-vector-image-layer", OlVectorImageLayer);
2425
app.component("ol-vector-layer", OlVectorLayer);
26+
app.component("ol-vector-tile-layer", OlVectorTileLayer);
2527
app.component("ol-webgl-points-layer", OlWebglPointsLayer);
2628
app.component("ol-webgl-tile-layer", OlWebglTileLayer);
2729
}

‎src/components/sources/OlSourceVectorTile.vue

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<div>
3+
<slot></slot>
4+
</div>
5+
</template>
6+
7+
<script setup lang="ts">
8+
import VectorTileSource, { type Options } from "ol/source/VectorTile";
9+
import type VectorTileLayer from "ol/layer/VectorTile";
10+
import type { Ref } from "vue";
11+
import { inject, watch, onMounted, onUnmounted, provide, computed } from "vue";
12+
import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
13+
import {
14+
useOpenLayersEvents,
15+
FEATURE_EVENTS,
16+
} from "@/composables/useOpenLayersEvents";
17+
18+
// prevent warnings caused by event pass-through via useOpenLayersEvents composable
19+
defineOptions({
20+
inheritAttrs: false,
21+
});
22+
23+
const props = withDefaults(defineProps<Options>(), {
24+
overlaps: true,
25+
projection: "EPSG:3857",
26+
wrapX: true,
27+
});
28+
29+
const vectorTileLayer = inject<Ref<VectorTileLayer> | null>(
30+
"vectorTileLayer",
31+
null
32+
);
33+
34+
const { properties } = usePropsAsObjectProperties(props);
35+
36+
const source = computed(() => new VectorTileSource(properties));
37+
38+
useOpenLayersEvents(source, FEATURE_EVENTS);
39+
40+
const applySource = () => {
41+
vectorTileLayer?.value?.setSource(null);
42+
vectorTileLayer?.value?.setSource(source.value);
43+
vectorTileLayer?.value?.changed();
44+
};
45+
watch(properties, () => {
46+
applySource();
47+
});
48+
49+
watch(
50+
() => vectorTileLayer?.value,
51+
() => {
52+
applySource();
53+
}
54+
);
55+
56+
onMounted(() => {
57+
vectorTileLayer?.value?.setSource(source.value);
58+
});
59+
60+
onUnmounted(() => {
61+
vectorTileLayer?.value?.setSource(null);
62+
});
63+
64+
provide("vectorSource", source);
65+
66+
defineExpose({
67+
vectorTileLayer,
68+
source,
69+
});
70+
</script>

‎src/components/sources/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import OlSourceTileArcGISRest from "@/components/sources/OlSourceTileArcGISRest.
1010
import OlSourceTileJSON from "./OlSourceTileJSON.vue";
1111
import OlSourceTileWMS from "./OlSourceTileWMS.vue";
1212
import OlSourceVector from "./OlSourceVector.vue";
13+
import OlSourceVectorTile from "./OlSourceVectorTile.vue";
1314
import OlSourceWebglPoints from "./OlSourceWebglPoints.vue";
1415
import OlSourceXYZ from "./OlSourceXYZ.vue";
1516
import OlSourceWMTS from "./OlSourceWMTS.vue";
@@ -31,6 +32,7 @@ function install(app: App) {
3132
app.component("ol-source-tile-json", OlSourceTileJSON);
3233
app.component("ol-source-tile-wms", OlSourceTileWMS);
3334
app.component("ol-source-vector", OlSourceVector);
35+
app.component("ol-source-vector-tile", OlSourceVectorTile);
3436
app.component("ol-source-webglpoints", OlSourceWebglPoints);
3537
app.component("ol-source-xyz", OlSourceXYZ);
3638
app.component("ol-source-wmts", OlSourceWMTS);

‎src/demos/VectorTileLayerDemo.vue

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<ol-map
3+
:loadTilesWhileAnimating="true"
4+
:loadTilesWhileInteracting="true"
5+
style="height: 400px"
6+
>
7+
<ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" />
8+
9+
<ol-vector-tile-layer>
10+
<ol-source-vector-tile :url="url" :format="mvtFormat">
11+
</ol-source-vector-tile>
12+
</ol-vector-tile-layer>
13+
</ol-map>
14+
</template>
15+
16+
<script setup>
17+
import { ref, inject } from "vue";
18+
19+
const center = ref([0, 0]);
20+
const zoom = ref(3);
21+
const rotation = ref(0);
22+
23+
const url = ref(
24+
"https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf"
25+
);
26+
const format = inject("ol-format");
27+
const mvtFormat = new format.MVT();
28+
</script>

‎vite.config.ts

+2
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export default defineConfig({
7474
"ol/layer/Group": "LayerGroup",
7575
"ol/layer/Tile": "TileLayer",
7676
"ol/layer/Vector": "VectorLayer",
77+
"ol/layer/VectorTile": "VectorLayerTile",
7778
"ol/layer/VectorImage": "VectorImageLayer",
7879
"ol/layer/WebGLPoints": "WebGLPointsLayer",
7980
"ol/layer/WebGLTile": "TileLayer$1",
@@ -91,6 +92,7 @@ export default defineConfig({
9192
"ol/source/TileJSON": "TileJSON",
9293
"ol/source/TileWMS": "TileWMS",
9394
"ol/source/Vector": "VectorSource",
95+
"ol/source/VectorTile": "VectorSourceTile",
9496
"ol/source/XYZ": "XYZ",
9597
"ol/control": "control",
9698
"ol-ext/control/Button": "Button",

0 commit comments

Comments
 (0)