Skip to content

Commit d6340da

Browse files
d-koppenhagend-koppenhagen
committed
docs(ol-feature): add separate documentation for ol-feature
closes #145
1 parent 74fc91f commit d6340da

File tree

2 files changed

+231
-118
lines changed

2 files changed

+231
-118
lines changed

‎docs/.vitepress/config.ts‎

Lines changed: 135 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export default defineConfig({
5858
},
5959
{
6060
text: "Layers",
61+
collapsed: true,
6162
items: [
6263
{
6364
text: "ol-animated-clusterlayer",
@@ -91,6 +92,7 @@ export default defineConfig({
9192
},
9293
{
9394
text: "Sources",
95+
collapsed: true,
9496
items: [
9597
{
9698
text: "ol-source-bingmaps",
@@ -135,131 +137,146 @@ export default defineConfig({
135137
],
136138
},
137139
{
138-
text: "Geometries",
140+
text: "Vector Data",
141+
collapsed: true,
139142
items: [
140143
{
141-
text: "ol-geom-line-string",
142-
link: "/componentsguide/geometries/geomlinestring/",
143-
},
144-
{
145-
text: "ol-geom-point",
146-
link: "/componentsguide/geometries/geompoint/",
147-
},
148-
{
149-
text: "ol-geom-polygon",
150-
link: "/componentsguide/geometries/geompolygon/",
151-
},
152-
{
153-
text: "ol-geom-multi-line-string",
154-
link: "/componentsguide/geometries/geommultilinestring/",
155-
},
156-
{
157-
text: "ol-geom-multi-point",
158-
link: "/componentsguide/geometries/geommultipoint/",
159-
},
160-
{
161-
text: "ol-geom-multi-polygon",
162-
link: "/componentsguide/geometries/geommultipolygon/",
163-
},
164-
],
165-
},
166-
{
167-
text: "Styles",
168-
items: [
169-
{
170-
text: "ol-style",
171-
link: "/componentsguide/styles/style/",
172-
},
173-
{
174-
text: "ol-style-circle",
175-
link: "/componentsguide/styles/circle/",
176-
},
177-
{
178-
text: "ol-style-fill",
179-
link: "/componentsguide/styles/fill/",
180-
},
181-
{
182-
text: "ol-style-icon",
183-
link: "/componentsguide/styles/icon/",
184-
},
185-
{
186-
text: "ol-style-stroke",
187-
link: "/componentsguide/styles/stroke/",
188-
},
189-
{
190-
text: "ol-style-text",
191-
link: "/componentsguide/styles/text/",
192-
},
193-
],
194-
},
195-
{
196-
text: "Interactions",
197-
items: [
198-
{
199-
text: "ol-interaction-clusterselect",
200-
link: "/componentsguide/interactions/clusterselect/",
201-
},
202-
{
203-
text: "ol-interaction-draw",
204-
link: "/componentsguide/interactions/draw/",
205-
},
206-
{
207-
text: "ol-interaction-dragrotate",
208-
link: "/componentsguide/interactions/dragrotate/",
209-
},
210-
{
211-
text: "ol-interaction-dragrotatezoom",
212-
link: "/componentsguide/interactions/dragrotatezoom/",
213-
},
214-
{
215-
text: "ol-interaction-modify",
216-
link: "/componentsguide/interactions/modify/",
217-
},
218-
{
219-
text: "ol-interaction-select",
220-
link: "/componentsguide/interactions/select/",
221-
},
222-
{
223-
text: "ol-interaction-snap",
224-
link: "/componentsguide/interactions/snap/",
225-
},
226-
{
227-
text: "ol-interaction-transform",
228-
link: "/componentsguide/interactions/transform/",
229-
},
230-
],
231-
},
232-
{
233-
text: "Animations",
234-
items: [
235-
{
236-
text: "ol-animation-drop",
237-
link: "/componentsguide/animations/drop/",
238-
},
239-
{
240-
text: "ol-animation-fade",
241-
link: "/componentsguide/animations/fade/",
242-
},
243-
{
244-
text: "ol-animation-shake",
245-
link: "/componentsguide/animations/shake/",
246-
},
247-
{
248-
text: "ol-animation-slide",
249-
link: "/componentsguide/animations/slide/",
250-
},
251-
{
252-
text: "ol-animation-teleport",
253-
link: "/componentsguide/animations/teleport/",
254-
},
255-
{
256-
text: "ol-animation-zoom",
257-
link: "/componentsguide/animations/zoom/",
144+
text: "ol-feature",
145+
link: "/componentsguide/feature/",
146+
},
147+
{
148+
text: "Geometries",
149+
collapsed: true,
150+
items: [
151+
{
152+
text: "ol-geom-line-string",
153+
link: "/componentsguide/geometries/geomlinestring/",
154+
},
155+
{
156+
text: "ol-geom-point",
157+
link: "/componentsguide/geometries/geompoint/",
158+
},
159+
{
160+
text: "ol-geom-polygon",
161+
link: "/componentsguide/geometries/geompolygon/",
162+
},
163+
{
164+
text: "ol-geom-multi-line-string",
165+
link: "/componentsguide/geometries/geommultilinestring/",
166+
},
167+
{
168+
text: "ol-geom-multi-point",
169+
link: "/componentsguide/geometries/geommultipoint/",
170+
},
171+
{
172+
text: "ol-geom-multi-polygon",
173+
link: "/componentsguide/geometries/geommultipolygon/",
174+
},
175+
],
176+
},
177+
{
178+
text: "Styles",
179+
collapsed: true,
180+
items: [
181+
{
182+
text: "ol-style",
183+
link: "/componentsguide/styles/style/",
184+
},
185+
{
186+
text: "ol-style-circle",
187+
link: "/componentsguide/styles/circle/",
188+
},
189+
{
190+
text: "ol-style-fill",
191+
link: "/componentsguide/styles/fill/",
192+
},
193+
{
194+
text: "ol-style-icon",
195+
link: "/componentsguide/styles/icon/",
196+
},
197+
{
198+
text: "ol-style-stroke",
199+
link: "/componentsguide/styles/stroke/",
200+
},
201+
{
202+
text: "ol-style-text",
203+
link: "/componentsguide/styles/text/",
204+
},
205+
],
206+
},
207+
{
208+
text: "Interactions",
209+
collapsed: true,
210+
items: [
211+
{
212+
text: "ol-interaction-clusterselect",
213+
link: "/componentsguide/interactions/clusterselect/",
214+
},
215+
{
216+
text: "ol-interaction-draw",
217+
link: "/componentsguide/interactions/draw/",
218+
},
219+
{
220+
text: "ol-interaction-dragrotate",
221+
link: "/componentsguide/interactions/dragrotate/",
222+
},
223+
{
224+
text: "ol-interaction-dragrotatezoom",
225+
link: "/componentsguide/interactions/dragrotatezoom/",
226+
},
227+
{
228+
text: "ol-interaction-modify",
229+
link: "/componentsguide/interactions/modify/",
230+
},
231+
{
232+
text: "ol-interaction-select",
233+
link: "/componentsguide/interactions/select/",
234+
},
235+
{
236+
text: "ol-interaction-snap",
237+
link: "/componentsguide/interactions/snap/",
238+
},
239+
{
240+
text: "ol-interaction-transform",
241+
link: "/componentsguide/interactions/transform/",
242+
},
243+
],
244+
},
245+
{
246+
text: "Animations",
247+
collapsed: true,
248+
items: [
249+
{
250+
text: "ol-animation-drop",
251+
link: "/componentsguide/animations/drop/",
252+
},
253+
{
254+
text: "ol-animation-fade",
255+
link: "/componentsguide/animations/fade/",
256+
},
257+
{
258+
text: "ol-animation-shake",
259+
link: "/componentsguide/animations/shake/",
260+
},
261+
{
262+
text: "ol-animation-slide",
263+
link: "/componentsguide/animations/slide/",
264+
},
265+
{
266+
text: "ol-animation-teleport",
267+
link: "/componentsguide/animations/teleport/",
268+
},
269+
{
270+
text: "ol-animation-zoom",
271+
link: "/componentsguide/animations/zoom/",
272+
},
273+
],
258274
},
259275
],
260276
},
261277
{
262278
text: "Map Controls",
279+
collapsed: true,
263280
items: [
264281
{
265282
text: "Demo",

‎docs/componentsguide/feature/index.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# ol-feature
2+
3+
> A container for geometry
4+
5+
`ol-feature` can be used together with `ol-vector-layer` and `ol-source-vector` to add GeoJSON features to the map.
6+
The `ol-feature` must contain a single child element (Geometry), e. .g `ol-geom-point` and a `ol-style` which defined the style for the Geometry.
7+
If you want to display multiple Geometries, you need to add multiple `ol-feature`'s.
8+
9+
<script setup>
10+
import GeomPoint from "@demos/GeomPoint.vue"
11+
</script>
12+
13+
## Usage
14+
15+
```vue
16+
<template>
17+
<button @click="() => (coordinate = coordinate.map((a) => a + 0.01))">
18+
changecoor
19+
</button>
20+
<ol-map
21+
:loadTilesWhileAnimating="true"
22+
:loadTilesWhileInteracting="true"
23+
style="height:400px"
24+
>
25+
<ol-view
26+
ref="view"
27+
:center="center"
28+
:rotation="rotation"
29+
:zoom="zoom"
30+
:projection="projection"
31+
/>
32+
33+
<ol-tile-layer>
34+
<ol-source-osm />
35+
</ol-tile-layer>
36+
37+
<ol-vector-layer>
38+
<ol-source-vector>
39+
<ol-feature>
40+
<ol-geom-point :coordinates="coordinate"></ol-geom-point>
41+
<ol-style>
42+
<ol-style-circle :radius="radius">
43+
<ol-style-fill :color="fillColor"></ol-style-fill>
44+
<ol-style-stroke
45+
:color="strokeColor"
46+
:width="strokeWidth"
47+
></ol-style-stroke>
48+
</ol-style-circle>
49+
</ol-style>
50+
</ol-feature>
51+
</ol-source-vector>
52+
</ol-vector-layer>
53+
</ol-map>
54+
</template>
55+
56+
<script>
57+
import { ref } from "vue";
58+
export default {
59+
setup() {
60+
const center = ref([40, 40]);
61+
const projection = ref("EPSG:4326");
62+
const zoom = ref(8);
63+
const rotation = ref(0);
64+
const radius = ref(40);
65+
const strokeWidth = ref(10);
66+
const strokeColor = ref("red");
67+
const fillColor = ref("white");
68+
const coordinate = ref([40, 40]);
69+
70+
return {
71+
center,
72+
projection,
73+
zoom,
74+
rotation,
75+
radius,
76+
strokeWidth,
77+
strokeColor,
78+
fillColor,
79+
coordinate,
80+
};
81+
},
82+
};
83+
</script>
84+
```
85+
86+
<ClientOnly>
87+
<GeomPoint />
88+
</ClientOnly>
89+
90+
## Properties
91+
92+
### properties
93+
94+
Properties to connect with the feature.
95+
96+
- **Type**: ` [Geometry, Object, Array]`

0 commit comments

Comments
 (0)