Merge pull request #188 from categulario/categulario/docs-all-geoms

Document all of the geometries
ghettovoice · Jul 2, 2019 · d3085e4 · d3085e4
2 parents c1b28cd + 33e6407
commit d3085e4
Show file tree

Hide file tree

Showing 6 changed files with 288 additions and 0 deletions.
diff --git a/docs/component/line-string-geom.md b/docs/component/line-string-geom.md
@@ -1,9 +1,51 @@
 # vl-geom-line-string
 
+> The single line geometry.
+
+`vl-geom-line-string` can be used inside a [`vl-feature`](/docs/component/feature.md) to draw lines on the map.
+
 ## ES6 Module
 
 ```javascript
 import { LineStringGeom } from 'vuelayers'
 
 Vue.use(LineStringGeom)
 ```
+
+<vuep template="#line-string-geom-example"></vuep>
+
+<script v-pre type="text/x-template" id="line-string-geom-example">
+<template>
+  <vl-map data-projection="EPSG:4326" style="height: 400px">
+    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+    <vl-layer-tile>
+      <vl-source-osm></vl-source-osm>
+    </vl-layer-tile>
+
+    <vl-feature>
+      <vl-geom-line-string :coordinates="[[116.544921,40.451633],[116.545264,40.451649],[116.545865,40.451698],[116.546144,40.451551],[116.546337,40.451274],[116.546788,40.451143],[116.547324,40.451078],[116.547539,40.450996],[116.547839,40.450719],[116.548440,40.450506],[116.548933,40.450604],[116.549448,40.450604],[116.550242,40.450376],[116.550865,40.450163],[116.551702,40.449935],[116.552581,40.449576]]"></vl-geom-line-string>
+    </vl-feature>
+  </vl-map>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 17,
+        center: [116.54875,40.45064],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### coordinates
+
+- **Type**: `number[][]`
+
+An array of pairs of coordinates as specified by the [geojson spec](https://tools.ietf.org/html/rfc7946#section-3.1.4) in units of the map's [`projection`](/docs/quickstart.md#global-data-projection).
diff --git a/docs/component/multi-line-string-geom.md b/docs/component/multi-line-string-geom.md
@@ -1,9 +1,51 @@
 # vl-geom-multi-line-string
 
+> The multiple line geometry.
+
+`vl-geom-multi-line-string` can be used inside a [`vl-feature`](/docs/component/feature.md) to draw multiple lines on the map.
+
 ## ES6 Module
 
 ```javascript
 import { MultiLineStringGeom } from 'vuelayers'
 
 Vue.use(MultiLineStringGeom)
 ```
+
+<vuep template="#multi-line-string-geom-example"></vuep>
+
+<script v-pre type="text/x-template" id="multi-line-string-geom-example">
+<template>
+  <vl-map data-projection="EPSG:4326" style="height: 400px">
+    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+    <vl-layer-tile>
+      <vl-source-osm></vl-source-osm>
+    </vl-layer-tile>
+
+    <vl-feature>
+      <vl-geom-multi-line-string :coordinates="[[[116.544921,40.451633],[116.545264,40.451649],[116.545865,40.451698],[116.546144,40.451551],[116.546337,40.451274],[116.546788,40.451143],[116.547324,40.451078]],[[116.547839,40.450719],[116.548440,40.450506],[116.548933,40.450604],[116.549448,40.450604],[116.550242,40.450376],[116.550865,40.450163],[116.551702,40.449935],[116.552581,40.449576]]]"></vl-geom-circle>
+    </vl-feature>
+  </vl-map>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 17,
+        center: [116.54875,40.45064],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### coordinates
+
+- **Type**: `number[][][]`
+
+An array of lines, each of which is a [line string](https://tools.ietf.org/html/rfc7946#section-3.1.4) in units of the map's [`projection`](/docs/quickstart.md#global-data-projection).
diff --git a/docs/component/multi-point-geom.md b/docs/component/multi-point-geom.md
@@ -1,9 +1,51 @@
 # vl-geom-multi-point
 
+> A multiple point feature.
+
+`vl-geom-multi-point` can be used inside a [`vl-feature`](/docs/component/feature.md) to draw multiple points at once.
+
 ## ES6 Module
 
 ```javascript
 import { MultiPointGeom } from 'vuelayers'
 
 Vue.use(MultiPointGeom)
 ```
+
+<vuep template="#multi-poing-geom-example"></vuep>
+
+<script v-pre type="text/x-template" id="multi-poing-geom-example">
+<template>
+  <vl-map data-projection="EPSG:4326" style="height: 400px">
+    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+    <vl-layer-tile>
+      <vl-source-osm></vl-source-osm>
+    </vl-layer-tile>
+
+    <vl-feature>
+      <vl-geom-multi-point :coordinates="[[116.544921,40.451633],[116.545264,40.451649],[116.545865,40.451698],[116.546144,40.451551],[116.546337,40.451274],[116.546788,40.451143],[116.547324,40.451078],[116.547539,40.450996],[116.547839,40.450719],[116.548440,40.450506],[116.548933,40.450604],[116.549448,40.450604],[116.550242,40.450376],[116.550865,40.450163],[116.551702,40.449935],[116.552581,40.449576]]"></vl-geom-multi-point>
+    </vl-feature>
+  </vl-map>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 17,
+        center: [116.54875,40.45064],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### coordinates
+
+- **Type**: `number[][]`
+
+An array of [points](https://tools.ietf.org/html/rfc7946#section-3.1.2) in units of the map's [`projection`](/docs/quickstart.md#global-data-projection).
diff --git a/docs/component/multi-polygon-geom.md b/docs/component/multi-polygon-geom.md
@@ -1,9 +1,51 @@
 # vl-geom-multi-polygon
 
+> The multiple polygon geometry.
+
+`vl-geom-multi-polygon` can be used inside a [`vl-feature`](/docs/component/feature.md) to draw multiple polygons at once on the map.
+
 ## ES6 Module
 
 ```javascript
 import { MultiPolygonGeom } from 'vuelayers'
 
 Vue.use(MultiPolygonGeom)
 ```
+
+<vuep template="#multi-polygon-geom-example"></vuep>
+
+<script v-pre type="text/x-template" id="multi-polygon-geom-example">
+<template>
+  <vl-map data-projection="EPSG:4326" style="height: 400px">
+    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+    <vl-layer-tile>
+      <vl-source-osm></vl-source-osm>
+    </vl-layer-tile>
+
+    <vl-feature>
+      <vl-geom-multi-polygon :coordinates="[[[[-98.844959,19.691586],[-98.842749,19.690980],[-98.842170,19.693122],[-98.844358,19.693667],[-98.844959,19.691586]]],[[[-98.847770,19.684212],[-98.849079,19.680596],[-98.845453,19.679585],[-98.844466,19.683384],[-98.847770,19.684212]]]]"></vl-geom-multi-polygon>
+    </vl-feature>
+  </vl-map>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 15,
+        center: [-98.8449,19.6869],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### coordinates
+
+- **Type**: `number[][][][]`
+
+An array of [polygons](https://geojson.org/geojson-spec.html#polygon) with coordinates in the map's [`projection`](/docs/quickstart.md#global-data-projection).
diff --git a/docs/component/point-geom.md b/docs/component/point-geom.md
@@ -1,9 +1,51 @@
 # vl-geom-point
 
+> A single point.
+
+`vl-geom-point` can be used inside a [`vl-feature`](/docs/component/feature.md) to draw a single points.
+
 ## ES6 Module
 
 ```javascript
 import { PointGeom } from 'vuelayers'
 
 Vue.use(PointGeom)
 ```
+
+<vuep template="#point-geom-example"></vuep>
+
+<script v-pre type="text/x-template" id="point-geom-example">
+<template>
+  <vl-map data-projection="EPSG:4326" style="height: 400px">
+    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+    <vl-layer-tile>
+      <vl-source-osm></vl-source-osm>
+    </vl-layer-tile>
+
+    <vl-feature>
+      <vl-geom-point :coordinates="[38.726634,9.003391]"></vl-geom-point>
+    </vl-feature>
+  </vl-map>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 15,
+        center: [38.7241,9.0048],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### coordinates
+
+- **Type**: `number[]`
+
+This point's coordinates in units of the map's [`projection`](/docs/quickstart.md#global-data-projection).
diff --git a/docs/component/polygon-geom.md b/docs/component/polygon-geom.md
@@ -1,9 +1,87 @@
 # vl-geom-polygon
 
+> A single polygon geometry.
+
+`vl-geom-polygon` can be used inside a [`vl-feature`](/docs/component/feature.md) to draw a single polygon on the map. The polygon may contain holes in it, check the usage section for more info on this.
+
 ## ES6 Module
 
 ```javascript
 import { PolygonGeom } from 'vuelayers'
 
 Vue.use(PolygonGeom)
 ```
+
+## Usage
+
+A simple polygon.
+
+<vuep template="#polygon-geom-example"></vuep>
+
+<script v-pre type="text/x-template" id="polygon-geom-example">
+<template>
+  <vl-map data-projection="EPSG:4326" style="height: 400px">
+    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+    <vl-layer-tile>
+      <vl-source-osm></vl-source-osm>
+    </vl-layer-tile>
+
+    <vl-feature>
+      <vl-geom-polygon :coordinates="[[[-98.844959,19.691586],[-98.842749,19.690980],[-98.842170,19.693122],[-98.844358,19.693667],[-98.844959,19.691586]]]"></vl-geom-polygon>
+    </vl-feature>
+  </vl-map>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 15,
+        center: [-98.8449,19.6869],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+In the following example there is a polygon with a hole in it.
+
+<vuep template="#polygon-with-hole-example"></vuep>
+
+<script v-pre type="text/x-template" id="polygon-with-hole-example">
+<template>
+  <vl-map data-projection="EPSG:4326" style="height: 400px">
+    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+    <vl-layer-tile>
+      <vl-source-osm></vl-source-osm>
+    </vl-layer-tile>
+
+    <vl-feature>
+      <vl-geom-polygon :coordinates="[[[-67.489700,-18.379940],[-67.467727,-18.463978],[-67.406616,-18.518678],[-67.318038,-18.568154],[-67.234954,-18.521283],[-67.233581,-18.425547],[-67.313919,-18.366907],[-67.422409,-18.344097],[-67.489700,-18.379940]],[[-67.405242,-18.403397],[-67.341384,-18.406654],[-67.294006,-18.445741],[-67.329025,-18.496540],[-67.379150,-18.470491],[-67.405242,-18.403397]]]"></vl-geom-polygon>
+    </vl-feature>
+  </vl-map>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 11,
+        center: [-67.3675,-18.4601],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### coordinates
+
+- **Type**: `number[][][]`
+
+A [polygon](https://tools.ietf.org/html/rfc7946#section-3.1.6) with coordinates in the map's [`projection`](/docs/quickstart.md#global-data-projection).