Skip to content

Commit b9d385d

Browse files
d-koppenhagend-koppenhagen
committed
refactor(ol-source-vector): migrate to script setup
1 parent 8769018 commit b9d385d

File tree

9 files changed

+227
-348
lines changed

9 files changed

+227
-348
lines changed

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

Lines changed: 69 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ Static features with the help of ol-feature, should be used only for tiny static
2323
<ol-map
2424
:loadTilesWhileAnimating="true"
2525
:loadTilesWhileInteracting="true"
26-
style="height:400px"
26+
style="height: 400px"
2727
>
2828
<ol-view
2929
ref="view"
@@ -56,33 +56,18 @@ Static features with the help of ol-feature, should be used only for tiny static
5656
</ol-map>
5757
</template>
5858
59-
<script>
59+
<script setup>
6060
import { ref } from "vue";
61-
export default {
62-
setup() {
63-
const center = ref([40, 40]);
64-
const projection = ref("EPSG:4326");
65-
const zoom = ref(8);
66-
const rotation = ref(0);
67-
const radius = ref(40);
68-
const strokeWidth = ref(10);
69-
const strokeColor = ref("red");
70-
const fillColor = ref("white");
71-
const coordinate = ref([40, 40]);
72-
73-
return {
74-
center,
75-
projection,
76-
zoom,
77-
rotation,
78-
radius,
79-
strokeWidth,
80-
strokeColor,
81-
fillColor,
82-
coordinate,
83-
};
84-
},
85-
};
61+
62+
const center = ref([40, 40]);
63+
const projection = ref("EPSG:4326");
64+
const zoom = ref(8);
65+
const rotation = ref(0);
66+
const radius = ref(40);
67+
const strokeWidth = ref(10);
68+
const strokeColor = ref("red");
69+
const fillColor = ref("white");
70+
const coordinate = ref([40, 40]);
8671
</script>
8772
```
8873

@@ -97,7 +82,7 @@ Load features simply by providing url value and format GeoJSON
9782
<ol-map
9883
:loadTilesWhileAnimating="true"
9984
:loadTilesWhileInteracting="true"
100-
style="height:400px"
85+
style="height: 400px"
10186
>
10287
<ol-view
10388
ref="view"
@@ -117,32 +102,20 @@ Load features simply by providing url value and format GeoJSON
117102
</ol-map>
118103
</template>
119104
120-
<script>
105+
<script setup>
121106
import { ref, inject } from "vue";
122-
export default {
123-
setup() {
124-
const center = ref([0, 0]);
125-
const projection = ref("EPSG:4326");
126-
const zoom = ref(3);
127-
const rotation = ref(0);
128-
129-
const url = ref(
130-
"https://openlayers.org/en/latest/examples/data/geojson/countries.geojson"
131-
);
132-
133-
const format = inject("ol-format");
134-
const geoJson = new format.GeoJSON();
135-
136-
return {
137-
center,
138-
projection,
139-
zoom,
140-
rotation,
141-
url,
142-
geoJson,
143-
};
144-
},
145-
};
107+
108+
const center = ref([0, 0]);
109+
const projection = ref("EPSG:4326");
110+
const zoom = ref(3);
111+
const rotation = ref(0);
112+
113+
const url = ref(
114+
"https://openlayers.org/en/latest/examples/data/geojson/countries.geojson"
115+
);
116+
const format = inject("ol-format");
117+
console.log(format);
118+
const geoJson = new format.GeoJSON();
146119
</script>
147120
```
148121

@@ -159,7 +132,7 @@ Next example loads features from remote WFS service by viewport BBOX. With forma
159132
<ol-map
160133
:loadTilesWhileAnimating="true"
161134
:loadTilesWhileInteracting="true"
162-
style="height:400px"
135+
style="height: 400px"
163136
>
164137
<ol-view
165138
ref="view"
@@ -188,47 +161,34 @@ Next example loads features from remote WFS service by viewport BBOX. With forma
188161
</ol-map>
189162
</template>
190163
191-
<script>
164+
<script setup>
192165
import { ref, inject } from "vue";
193-
export default {
194-
setup() {
195-
const center = ref([-8908887.277395891, 5381918.072437216]);
196-
const projection = ref("EPSG:3857");
197-
const zoom = ref(14);
198-
const rotation = ref(0);
199-
200-
const urlFunction = (extent, resolution, projection) => {
201-
var proj = projection.getCode();
202-
let url =
203-
"https://ahocevar.com/geoserver/wfs?service=WFS&" +
204-
"version=1.1.0&request=GetFeature&typename=osm:water_areas&" +
205-
"outputFormat=application/json&srsname=" +
206-
proj +
207-
"&" +
208-
"bbox=" +
209-
extent.join(",") +
210-
"," +
211-
proj;
212-
return url;
213-
};
214-
215-
const strategy = inject("ol-loadingstrategy");
216-
const bbox = strategy.bbox;
217-
console.log(bbox);
218-
const format = inject("ol-format");
219-
const GeoJSON = new format.GeoJSON();
220-
221-
return {
222-
center,
223-
projection,
224-
zoom,
225-
rotation,
226-
urlFunction,
227-
bbox,
228-
GeoJSON,
229-
};
230-
},
166+
167+
const center = ref([-8908887.277395891, 5381918.072437216]);
168+
const projection = ref("EPSG:3857");
169+
const zoom = ref(14);
170+
const rotation = ref(0);
171+
172+
const urlFunction = (extent, resolution, projection) => {
173+
const proj = projection.getCode();
174+
const url =
175+
"https://ahocevar.com/geoserver/wfs?service=WFS&" +
176+
"version=1.1.0&request=GetFeature&typename=osm:water_areas&" +
177+
"outputFormat=application/json&srsname=" +
178+
proj +
179+
"&" +
180+
"bbox=" +
181+
extent.join(",") +
182+
"," +
183+
proj;
184+
return url;
231185
};
186+
187+
const strategy = inject("ol-loadingstrategy");
188+
const bbox = strategy.bbox;
189+
console.log(bbox);
190+
const format = inject("ol-format");
191+
const GeoJSON = new format.GeoJSON();
232192
</script>
233193
```
234194

@@ -269,36 +229,23 @@ You can also use other Vector formats like TopoJSON.
269229
</ol-map>
270230
</template>
271231
272-
<script>
273-
import { TopoJSON } from "ol/format";
232+
<script setup>
274233
import { ref, inject } from "vue";
275-
export default {
276-
setup() {
277-
const center = ref([4.4764595, 50.5010789]);
278-
const projection = ref("EPSG:4326");
279-
const zoom = ref(7.5);
280-
const rotation = ref(0);
281-
282-
const url =
283-
"https://raw.githubusercontent.com/bmesuere/belgium-topojson/master/belgium.json";
284-
285-
const format = inject("ol-format");
286-
const TopoJSON = new format.TopoJSON({
287-
// don't want to render the full world polygon (stored as 'land' layer),
288-
// which repeats all countries
289-
layers: ["arrondissements", "provinces"],
290-
});
291-
292-
return {
293-
center,
294-
projection,
295-
zoom,
296-
rotation,
297-
url,
298-
TopoJSON,
299-
};
300-
},
301-
};
234+
235+
const center = ref([4.4764595, 50.5010789]);
236+
const projection = ref("EPSG:4326");
237+
const zoom = ref(7.5);
238+
const rotation = ref(0);
239+
240+
const url =
241+
"https://raw.githubusercontent.com/bmesuere/belgium-topojson/master/belgium.json";
242+
243+
const format = inject("ol-format");
244+
const TopoJSON = new format.TopoJSON({
245+
// don't want to render the full world polygon (stored as 'land' layer),
246+
// which repeats all countries
247+
layers: ["arrondissements", "provinces"],
248+
});
302249
</script>
303250
```
304251

‎src/components/sources/OlSourceVector.vue‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template>
2+
<div>
3+
<slot></slot>
4+
</div>
5+
</template>
6+
7+
<script setup>
8+
import VectorSource from "ol/source/Vector";
9+
10+
import { inject, watch, onMounted, onUnmounted, provide, computed } from "vue";
11+
12+
import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
13+
14+
const props = defineProps({
15+
attributions: {
16+
type: [String, Array],
17+
},
18+
features: {
19+
type: Array,
20+
default: () => [],
21+
},
22+
format: {
23+
type: Object,
24+
},
25+
loader: {
26+
type: Function,
27+
},
28+
overlaps: {
29+
type: Boolean,
30+
default: true,
31+
},
32+
projection: {
33+
type: String,
34+
default: "EPSG:3857",
35+
},
36+
strategy: {
37+
type: Function,
38+
},
39+
url: {
40+
type: [String, Function],
41+
},
42+
useSpatialIndex: {
43+
type: Boolean,
44+
default: true,
45+
},
46+
wrapX: {
47+
type: Boolean,
48+
default: true,
49+
},
50+
});
51+
52+
const layer =
53+
inject("vectorLayer", undefined) || inject("heatmapLayer", undefined);
54+
55+
const { properties } = usePropsAsObjectProperties(props);
56+
57+
const source = computed(() => new VectorSource(properties));
58+
59+
const applySource = () => {
60+
layer.value.setSource(null);
61+
layer.value.setSource(source.value);
62+
layer.value.changed();
63+
};
64+
watch(properties, () => {
65+
applySource();
66+
});
67+
68+
watch(layer, () => {
69+
applySource();
70+
});
71+
72+
onMounted(() => {
73+
layer.value.setSource(source.value);
74+
});
75+
76+
onUnmounted(() => {
77+
layer.value.setSource(null);
78+
});
79+
80+
provide("vectorSource", source);
81+
82+
defineExpose({
83+
layer,
84+
source,
85+
});
86+
</script>
87+
88+
<style lang=""></style>

0 commit comments

Comments
 (0)