Skip to content

Commit 2609a07

Browse files
d-koppenhagend-koppenhagen
committed
feat(ol-source-tile-wms): add source for tiled WMS layer
closes #168
1 parent 14c8426 commit 2609a07

File tree

7 files changed

+348
-0
lines changed

7 files changed

+348
-0
lines changed

‎docs/.vitepress/config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,10 @@ export default defineConfig({
114114
text: "ol-source-tianditu",
115115
link: "/componentsguide/sources/tianditu/",
116116
},
117+
{
118+
text: "ol-source-tile-wms",
119+
link: "/componentsguide/sources/tilewms/",
120+
},
117121
{
118122
text: "ol-source-vector",
119123
link: "/componentsguide/sources/vector/",

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

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
# ol-source-tile-wms
2+
3+
Source for WMS servers providing tiled images.
4+
5+
<script setup>
6+
import TileWMSDemo from "@demos/TileWMSDemo.vue"
7+
</script>
8+
9+
<ClientOnly>
10+
<TileWMSDemo />
11+
</ClientOnly>
12+
13+
## Usage
14+
15+
```vue
16+
<template>
17+
<ol-map
18+
:loadTilesWhileAnimating="true"
19+
:loadTilesWhileInteracting="true"
20+
style="height: 400px"
21+
>
22+
<ol-view
23+
ref="view"
24+
:center="center"
25+
:rotation="rotation"
26+
:zoom="zoom"
27+
:projection="projection"
28+
/>
29+
<ol-zoom-control />
30+
31+
<ol-tile-layer :zIndex="1000">
32+
<ol-source-osm />
33+
</ol-tile-layer>
34+
35+
<ol-tile-layer :zIndex="1001">
36+
<ol-source-tile-wms
37+
url="https://ahocevar.com/geoserver/wms"
38+
:extent="[-13884991, 2870341, -7455066, 6338219]"
39+
layers="topp:states"
40+
serverType="geoserver"
41+
:transition="0"
42+
/>
43+
</ol-tile-layer>
44+
</ol-map>
45+
</template>
46+
47+
<script>
48+
import { ref } from "vue";
49+
50+
export default {
51+
setup() {
52+
const zoom = ref(4);
53+
const rotation = ref(0);
54+
const center = ref([-10997148, 4569099]);
55+
56+
return {
57+
center,
58+
zoom,
59+
rotation,
60+
};
61+
},
62+
};
63+
</script>
64+
```
65+
66+
## Properties
67+
68+
# attributions
69+
70+
- **Type**: `string`
71+
72+
Attributions
73+
74+
# cacheSize
75+
76+
- **Type**: `Number`
77+
78+
# crossOrigin
79+
80+
- **Type**: `string`
81+
- **Default**: `ol-layer`
82+
83+
The crossOrigin attribute for loaded images. Note that you must provide a crossOrigin value if you want to access pixel data with the Canvas renderer.
84+
85+
# interpolate
86+
87+
- **Type**: `Boolean`
88+
- **Default**: `true`
89+
90+
# styles
91+
92+
- **Type**: `[String,Array]`
93+
94+
# layers
95+
96+
- **Type**: `[String,Array]`
97+
98+
# hidpi
99+
100+
- **Type**: `Boolean`
101+
- **Default**: `true`
102+
103+
# projection
104+
105+
- **Type**: `string`
106+
- **Default**: `EPSG:3857`
107+
108+
# reprojectionErrorThreshold
109+
110+
- **Type**: `number `
111+
- **Default**: 0.5
112+
113+
Maximum allowed reprojection error (in pixels). Higher values can increase reprojection performance, but decrease precision.
114+
115+
# tileGrid
116+
117+
- **Type**: `TileGrid|undefined`
118+
- **Default**: 0.5
119+
120+
Tile grid. Base this on the resolutions, tilesize and extent supported by the server. If this is not defined, a default grid will be used: if there is a projection extent, the grid will be based on that; if not, a grid based on a global extent with origin at 0,0 will be used.
121+
122+
# serverType
123+
124+
- **Type**: `string`
125+
126+
The type of the remote WMS server: mapserver, geoserver or qgis. Only needed if hidpi is true.
127+
128+
# tileLoadFunction
129+
130+
- **Type**: `Function`
131+
132+
# url
133+
134+
- **Type**: `string`
135+
136+
WMS service URL.
137+
138+
# urls
139+
140+
- **Type**: `Array.<string>`
141+
142+
An array of URLs. Requests will be distributed among the URLs in this array.
143+
144+
# params
145+
146+
- **Type**: `Object.<string, *>`
147+
148+
WMS request parameters.
149+
150+
# wrapX
151+
152+
- **Type**: `Boolean`
153+
- **Default**: `false`
154+
155+
# transition
156+
157+
- **Type**: `number`
158+
- **Default**: 250
159+
Duration of the opacity transition for rendering. To disable the opacity transition, pass transition: 0.

‎docs/public/sitemap.xml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,16 @@
6767
<lastmod>2021-08-15T21:05:05+00:00</lastmod>
6868
<priority>0.80</priority>
6969
</url>
70+
<url>
71+
<loc>https://vue3openlayers.netlify.app/componentsguide/sources/tilewms/</loc>
72+
<lastmod>2023-03-30T21:05:05+00:00</lastmod>
73+
<priority>0.80</priority>
74+
</url>
75+
<url>
76+
<loc>https://vue3openlayers.netlify.app/componentsguide/sources/imagewms/</loc>
77+
<lastmod>2023-03-30T21:05:05+00:00</lastmod>
78+
<priority>0.80</priority>
79+
</url>
7080
<url>
7181
<loc>https://vue3openlayers.netlify.app/componentsguide/sources/osm/</loc>
7282
<lastmod>2021-08-15T21:05:05+00:00</lastmod>

‎src/components/sources/SourceImageWMS.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default {
1919
return new ImageWMS({
2020
...properties,
2121
params: {
22+
...props.params,
2223
LAYERS: props.layers,
2324
STYLES: props.styles,
2425
TIME: props.time,
@@ -112,6 +113,7 @@ export default {
112113
},
113114
params: {
114115
type: Object,
116+
default: () => ({}),
115117
},
116118
imageLoadFunction: {
117119
type: Function,

‎src/components/sources/SourceTileWMS.vue‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<template>
2+
<div v-if="false"></div>
3+
</template>
4+
5+
<script>
6+
import TileWMS from "ol/source/TileWMS";
7+
import Projection from "ol/proj/Projection";
8+
9+
import { inject, onMounted, onUnmounted, watch } from "vue";
10+
import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
11+
12+
export default {
13+
name: "ol-source-tile-wms",
14+
setup(props) {
15+
const layer = inject("tileLayer");
16+
const { properties } = usePropsAsObjectProperties(props);
17+
18+
const createSource = () => {
19+
return new TileWMS({
20+
...properties,
21+
params: {
22+
...props.params,
23+
LAYERS: props.layers,
24+
STYLES: props.styles,
25+
TILED: true,
26+
},
27+
projection:
28+
typeof properties.projection == "string"
29+
? properties.projection
30+
: new Projection({
31+
...properties.projection,
32+
}),
33+
});
34+
};
35+
36+
let source = createSource();
37+
38+
watch(properties, () => {
39+
layer.value.setSource(null);
40+
source = createSource();
41+
layer.value.setSource(source);
42+
});
43+
onMounted(() => {
44+
layer.value.setSource(source);
45+
});
46+
47+
onUnmounted(() => {
48+
layer.value.setSource(null);
49+
});
50+
51+
return {
52+
layer,
53+
source,
54+
};
55+
},
56+
props: {
57+
attributions: {
58+
type: String,
59+
},
60+
cacheSize: {
61+
type: Number,
62+
},
63+
crossOrigin: {
64+
type: String,
65+
},
66+
interpolate: {
67+
type: Boolean,
68+
default: true,
69+
},
70+
layers: {
71+
type: [String, Array],
72+
required: true,
73+
},
74+
styles: {
75+
type: [String, Array],
76+
default: "",
77+
},
78+
hidpi: {
79+
type: Boolean,
80+
default: false,
81+
},
82+
projection: {
83+
type: [String, Object],
84+
default: "EPSG:3857",
85+
},
86+
reprojectionErrorThreshold: {
87+
type: Number,
88+
default: 0.5,
89+
},
90+
tileGrid: {
91+
type: Object,
92+
},
93+
serverType: {
94+
type: String,
95+
default: "mapserver",
96+
},
97+
tileLoadFunction: {
98+
type: Function,
99+
default: (imageTile, src) => (imageTile.getImage().src = src),
100+
},
101+
url: {
102+
type: String,
103+
},
104+
urls: {
105+
type: Array,
106+
},
107+
params: {
108+
type: Object,
109+
default: () => ({}),
110+
},
111+
wrapX: {
112+
type: Boolean,
113+
default: true,
114+
},
115+
transition: {
116+
type: Number,
117+
},
118+
},
119+
};
120+
</script>
121+
122+
<style lang=""></style>

‎src/components/sources/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import SourceCluster from "./SourceCluster.vue";
77
import SourceBingMaps from "./SourceBingMaps.vue";
88
import SourceTianDiTu from "./SourceTianDiTu.vue";
99
import SourceImageWMS from "./SourceImageWMS.vue";
10+
import SourceTileWMS from "./SourceTileWMS.vue";
1011
import SourceWebglPoints from "./SourceWebglPoints.vue";
1112

1213
function install(app) {
@@ -25,6 +26,7 @@ function install(app) {
2526
app.component(SourceBingMaps.name, SourceBingMaps);
2627
app.component(SourceTianDiTu.name, SourceTianDiTu);
2728
app.component(SourceImageWMS.name, SourceImageWMS);
29+
app.component(SourceTileWMS.name, SourceTileWMS);
2830
app.component(SourceWebglPoints.name, SourceWebglPoints);
2931
}
3032

@@ -40,6 +42,7 @@ export {
4042
SourceCluster,
4143
SourceTianDiTu,
4244
SourceImageWMS,
45+
SourceTileWMS,
4346
SourceWebglPoints,
4447
SourceBingMaps,
4548
};

‎src/demos/TileWMSDemo.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<ol-map
3+
:loadTilesWhileAnimating="true"
4+
:loadTilesWhileInteracting="true"
5+
style="height: 400px"
6+
>
7+
<ol-view
8+
ref="view"
9+
:center="center"
10+
:rotation="rotation"
11+
:zoom="zoom"
12+
:projection="projection"
13+
/>
14+
<ol-zoom-control />
15+
16+
<ol-tile-layer :zIndex="1000">
17+
<ol-source-osm />
18+
</ol-tile-layer>
19+
20+
<ol-tile-layer :zIndex="1001">
21+
<ol-source-tile-wms
22+
url="https://ahocevar.com/geoserver/wms"
23+
:extent="[-13884991, 2870341, -7455066, 6338219]"
24+
layers="topp:states"
25+
serverType="geoserver"
26+
:transition="0"
27+
/>
28+
</ol-tile-layer>
29+
</ol-map>
30+
</template>
31+
32+
<script>
33+
import { ref } from "vue";
34+
35+
export default {
36+
setup() {
37+
const zoom = ref(4);
38+
const rotation = ref(0);
39+
const center = ref([-10997148, 4569099]);
40+
41+
return {
42+
center,
43+
zoom,
44+
rotation,
45+
};
46+
},
47+
};
48+
</script>

0 commit comments

Comments
 (0)