Skip to content

Commit 6fb7dc3

Browse files
d-koppenhagend-koppenhagen
committed
feat(ol-source-tile-debug): provide new component for TileDebug
closes #250
1 parent d26ea52 commit 6fb7dc3

File tree

8 files changed

+168
-0
lines changed

8 files changed

+168
-0
lines changed

‎docs/.vitepress/config.ts

+4
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,10 @@ export default defineConfig({
145145
text: "ol-source-tile-arcgis-rest",
146146
link: "/componentsguide/sources/arcgisrest/",
147147
},
148+
{
149+
text: "ol-source-tile-debug",
150+
link: "/componentsguide/sources/tiledebug/",
151+
},
148152
{
149153
text: "ol-source-tile-json",
150154
link: "/componentsguide/sources/tilejson/",

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

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# ol-source-tile-debug
2+
3+
A pseudo tile source, which does not fetch tiles from a server, but renders a grid outline for the tile grid/projection along with the coordinates for each tile.
4+
See examples/canvas-tiles for an example.
5+
6+
<script setup>
7+
import TileDebugDemo from "@demos/TileDebugDemo.vue"
8+
import ProjectionRegisterDemo from "@demos/ProjectionRegisterDemo.vue"
9+
</script>
10+
11+
<ClientOnly>
12+
<ProjectionRegisterDemo />
13+
<hr />
14+
<TileDebugDemo />
15+
</ClientOnly>
16+
17+
## Usage
18+
19+
::: code-group
20+
21+
<<< ../../../../src/demos/TileDebugDemo.vue
22+
23+
:::
24+
25+
## Properties
26+
27+
### Props from OpenLayers
28+
29+
Properties are passed-trough from OpenLayers directly.
30+
Their types and default values can be checked-out [in the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_TileDebug-TileDebug.html).
31+
Only some properties deviate caused by reserved keywords from Vue / HTML.
32+
This deviating props are described in the section below.
33+
34+
### Deviating Properties
35+
36+
None.
37+
38+
## Events
39+
40+
You have access to all Events from the underlying source.
41+
Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_TileDebug-TileDebug.html) to see the available events tht will be fired.
42+
43+
```html
44+
<ol-source-tile-debug @error="handleEvent" />
45+
```
46+
47+
## Methods
48+
49+
You have access to all Methods from the underlying source.
50+
Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_TileDebug-TileDebug.html) to see the available methods.
51+
52+
To access the source, you can use a `ref()` as shown below:
53+
54+
```vue
55+
<template>
56+
<!-- ... -->
57+
<ol-source-tile-debug ref="sourceRef" />
58+
<!-- ... -->
59+
</template>
60+
61+
<script setup lang="ts">
62+
import { ref, onMounted } from "vue";
63+
import type TileDebug from "ol/source/TileDebug";
64+
65+
const sourceRef = ref<{ source: TileDebug }>(null);
66+
67+
onMounted(() => {
68+
const source: TileDebug = sourceRef.value?.source;
69+
// call your method on `source`
70+
});
71+
</script>
72+
```

‎docs/public/sitemap.xml

+5
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,11 @@
9797
<lastmod>2023-06-22T22:30:00+00:00</lastmod>
9898
<priority>0.80</priority>
9999
</url>
100+
<url>
101+
<loc>https://vue3openlayers.netlify.app/componentsguide/sources/tiledebug/</loc>
102+
<lastmod>2023-04-07T20:30:00+00:00</lastmod>
103+
<priority>0.80</priority>
104+
</url>
100105
<url>
101106
<loc>https://vue3openlayers.netlify.app/componentsguide/sources/tilejson/</loc>
102107
<lastmod>2023-03-23T09:30:00+00:00</lastmod>

‎src/components/sources/OlSourceTileDebug.vue

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<div v-if="false"></div>
3+
</template>
4+
5+
<script setup lang="ts">
6+
import TileDebug, { type Options } from "ol/source/TileDebug";
7+
import { inject, onMounted, onUnmounted, watch, type Ref, computed } from "vue";
8+
import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
9+
import type TileLayer from "ol/layer/Tile";
10+
import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
11+
12+
// prevent warnings caused by event pass-through via useOpenLayersEvents composable
13+
defineOptions({
14+
inheritAttrs: false,
15+
});
16+
17+
const props = withDefaults(defineProps<Options>(), {});
18+
19+
const layer = inject<Ref<TileLayer<TileDebug>> | null>("tileLayer");
20+
const { properties } = usePropsAsObjectProperties(props);
21+
22+
const source = computed(() => new TileDebug(properties));
23+
24+
useOpenLayersEvents(source, [
25+
"change",
26+
"error",
27+
"propertychange",
28+
"tileloadend",
29+
"tileloadstart",
30+
"tileloaderror",
31+
]);
32+
33+
const applySource = () => {
34+
layer?.value?.setSource(null);
35+
layer?.value?.setSource(source.value);
36+
layer?.value?.changed();
37+
};
38+
watch(properties, () => {
39+
applySource();
40+
});
41+
42+
watch(
43+
() => layer?.value,
44+
() => {
45+
applySource();
46+
}
47+
);
48+
49+
onMounted(() => {
50+
layer?.value?.setSource(source.value);
51+
layer?.value?.changed();
52+
});
53+
54+
onUnmounted(() => {
55+
layer?.value?.setSource(null);
56+
});
57+
58+
defineExpose({
59+
layer,
60+
source,
61+
});
62+
</script>

‎src/components/sources/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import OlSourceOSM from "./OlSourceOSM.vue";
77
import OlSourceStamen from "./OlSourceStamen.vue";
88
import OlSourceTianDiTu from "./OlSourceTianDiTu.vue";
99
import OlSourceTileArcGISRest from "@/components/sources/OlSourceTileArcGISRest.vue";
10+
import OlSourceTileDebug from "./OlSourceTileDebug.vue";
1011
import OlSourceTileJSON from "./OlSourceTileJSON.vue";
1112
import OlSourceTileWMS from "./OlSourceTileWMS.vue";
1213
import OlSourceVector from "./OlSourceVector.vue";
@@ -24,6 +25,7 @@ function install(app: App) {
2425
app.component("ol-source-stamen", OlSourceStamen);
2526
app.component("ol-source-tianditu", OlSourceTianDiTu);
2627
app.component("ol-source-tile-arcgis-rest", OlSourceTileArcGISRest);
28+
app.component("ol-source-tile-debug", OlSourceTileDebug);
2729
app.component("ol-source-tile-json", OlSourceTileJSON);
2830
app.component("ol-source-tile-wms", OlSourceTileWMS);
2931
app.component("ol-source-vector", OlSourceVector);
@@ -45,6 +47,7 @@ export {
4547
OlSourceStamen,
4648
OlSourceTianDiTu,
4749
OlSourceTileArcGISRest,
50+
OlSourceTileDebug,
4851
OlSourceTileJSON,
4952
OlSourceTileWMS,
5053
OlSourceVector,

‎src/demos/ProjectionRegisterDemo.vue

+3
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@
2020
<ol-tile-layer>
2121
<ol-source-osm />
2222
</ol-tile-layer>
23+
<ol-tile-layer>
24+
<ol-source-tile-debug />
25+
</ol-tile-layer>
2326
</ol-map>
2427
</template>
2528

‎src/demos/TileDebugDemo.vue

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<ol-map style="height: 400px">
3+
<ol-view ref="view" :center="center" :zoom="zoom" />
4+
<ol-tile-layer :opacity="0.3">
5+
<ol-source-osm />
6+
</ol-tile-layer>
7+
<ol-tile-layer>
8+
<ol-source-tile-debug />
9+
</ol-tile-layer>
10+
</ol-map>
11+
</template>
12+
13+
<script setup>
14+
import { ref } from "vue";
15+
16+
const center = ref([37.4057, 8.81566]);
17+
const zoom = ref(4);
18+
</script>

‎vite.config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ export default defineConfig({
8585
"ol/source/ImageWMS": "ImageWMS",
8686
"ol/source/OSM": "OSM",
8787
"ol/source/Stamen": "Stamen",
88+
"ol/source/TileDebug": "TileDebug",
8889
"ol/source/WMTS": "WMTSSource",
8990
"ol/tilegrid/WMTS": "TileGridWMTS",
9091
"ol/source/TileArcGISRest": "TileArcGISRest",

0 commit comments

Comments
 (0)