fix incorrect lat Graticule label placement (#104)

ghettovoice · Nov 18, 2018 · 745b483 · 745b483
1 parent d505882
commit 745b483
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 100 deletions.
diff --git a/docs/_coverpage.md b/docs/_coverpage.md
@@ -2,7 +2,7 @@
 
 <img class="logo" src="/_media/logo.svg" data-origin="_media/logo.svg" alt="VueLayers Logo" />
 
-# VueLayers <small>v0.10.22</small>
+# VueLayers <small>v0.10.23</small>
 
 > Web map [Vue](https://vuejs.org/ "Vue Homepage") components with the power of [OpenLayers](https://openlayers.org/ "OpenLayers Homepage")
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuelayers",
   "fullname": "VueLayers",
-  "version": "0.10.22",
+  "version": "0.10.23",
   "description": "Web map Vue components with the power of OpenLayers",
   "author": "Vladimir Vershinin <ghettovoice@gmail.com>",
   "main": "lib/index.js",

diff --git a/src/component/graticule/graticule.vue b/src/component/graticule/graticule.vue
@@ -8,10 +8,10 @@
 
 <script>
   import Graticule from 'ol/graticule'
-  import Vue from 'vue'
   import { throttleTime } from 'rxjs/operator'
-  import { observableFromOlEvent } from '../../rx-ext'
+  import Vue from 'vue'
   import { olCmp, projTransforms, useMapCmp } from '../../mixin'
+  import { observableFromOlEvent } from '../../rx-ext'
   import { hasGraticule, hasMap } from '../../util/assert'
   import { firstEl, map } from '../../util/minilo'
   import mergeDescriptors from '../../util/multi-merge-descriptors'
@@ -49,16 +49,14 @@
   const computed = {
     meridians () {
       if (this.$graticule && this.rev) {
-        // return map(this.getMeridians(), meridian => this.lineToDataProj(meridian.getCoordinates()))
-        return map(this.getMeridians(), meridian => meridian.getCoordinates())
+        return map(this.getMeridians(), meridian => this.lineToDataProj(meridian.getCoordinates()))
       }
 
       return []
     },
     parallels () {
       if (this.$graticule && this.rev) {
-        // return map(this.getParallels(), parallel => this.lineToDataProj(parallel.getCoordinates()))
-        return map(this.getParallels(), parallel => parallel.getCoordinates())
+        return map(this.getParallels(), parallel => this.lineToDataProj(parallel.getCoordinates()))
       }
 
       return []
@@ -102,7 +100,6 @@
     mount () {
       this.$map && this.$graticule.setMap(this.$map)
       this.subscribeAll()
-      console.log('mount', this.$graticule)
     },
     /**
      * @return {Promise}
@@ -111,7 +108,6 @@
     unmount () {
       this.unsubscribeAll()
       this.$graticule.setMap(undefined)
-      console.log('unmount', this.$graticule)
     },
     getMeridians () {
       hasGraticule(this)
@@ -125,15 +121,15 @@
     },
     setStroke (stroke) {
       stroke = stroke instanceof Vue ? stroke.$style : stroke
-      console.log('setStroke', stroke)
+
       if (stroke !== this._strokeStyle) {
         this._strokeStyle = stroke
         this.scheduleRefresh()
       }
     },
     setText (text) {
       text = text instanceof Vue ? text.$style : text
-      console.log('setText', text)
+
       let vm
       if (text) {
         vm = firstEl(text[this.$options.VM_PROP])

diff --git a/src/component/text-style/style.vue b/src/component/text-style/style.vue
@@ -10,6 +10,7 @@
       type: String,
       default: '10px sans-serif', // css font format https://developer.mozilla.org/en-US/docs/Web/CSS/font?v=control
     },
+    placement: String,
     offsetX: {
       type: Number,
       default: 0,
@@ -31,14 +32,8 @@
       default: 1,
     },
     text: String,
-    textAlign: {
-      type: String,
-      default: 'start', // left, right, center, end, start
-    },
-    textBaseline: {
-      type: String,
-      default: 'alphabetic', // bottom, top, middle, alphabetic, hanging, ideographic
-    },
+    textAlign: String, // left, right, center, end, start
+    textBaseline: String, // bottom, top, middle, alphabetic, hanging, ideographic
   }
 
   const methods = {
@@ -49,6 +44,7 @@
     createStyle () {
       return new Text({
         font: this.font,
+        placement: this.placement,
         offsetX: this.offsetX,
         offsetY: this.offsetY,
         rotateWithView: this.rotateWithView,

diff --git a/src/mixin/ol-cmp.js b/src/mixin/ol-cmp.js
@@ -146,9 +146,6 @@ const methods = {
       .then(() => this.init())
       .then(() => this.mount())
   },
-  scheduleRecreate: debounce(function () {
-    return this.recreate()
-  }, 10),
 }
 
 /**

diff --git a/test/app.vue b/test/app.vue
@@ -1,92 +1,27 @@
 <template>
   <div id="app">
     <div style="height: 100%">
-      <button @click="graticule = !graticule">Graticule</button>
+      <div style="position: absolute; text-align: center; top: 0; left: 0; right: 0; z-index: 100">
+        <button @click="graticule = !graticule">Graticule</button>
+      </div>
 
-      <vl-map v-if="showMap" ref="map" @created="log('created', $event)" @mounted="log('mounted', $event)"
-              @destroyed="log('destroyed', $event)" @singleclick="clickCoord = $event.coordinate" @click="onMapClick"
-              data-projection="EPSG:4326">
+      <vl-map v-if="showMap" ref="map" data-projection="EPSG:4326">
         <vl-view ref="view" ident="view" :center.sync="center" :zoom.sync="zoom" :rotation.sync="rotation">
-          <vl-overlay slot-scope="view" v-if="view.center" :position="view.center">
-            <div style="background: #eee; padding: 1rem">
-              Center: {{ view.center }}<br>
-              Zoom: {{ view.zoom }}<br>
-              Resolution: {{ view.resolution }}<br>
-              Rotation: {{ view.rotation }}<br>
-            </div>
-          </vl-overlay>
         </vl-view>
 
         <vl-graticule :show-labels="true" v-if="graticule">
-          <!--<vl-style-stroke slot="stroke" color="green" :line-dash="[5, 10]"></vl-style-stroke>-->
-          <!--<vl-style-text slot="lon">-->
-            <!--<vl-style-stroke color="blue"></vl-style-stroke>-->
-          <!--</vl-style-text>-->
-          <!--<vl-style-text slot="lat" text-align="end">-->
-            <!--<vl-style-stroke color="black"></vl-style-stroke>-->
-          <!--</vl-style-text>-->
+          <vl-style-stroke slot="stroke" color="green" :line-dash="[5, 10]"></vl-style-stroke>
+          <vl-style-text slot="lon" text-baseline="bottom">
+            <vl-style-stroke color="blue"></vl-style-stroke>
+          </vl-style-text>
+          <vl-style-text slot="lat" text-align="end">
+            <vl-style-stroke color="black"></vl-style-stroke>
+          </vl-style-text>
         </vl-graticule>
 
-        <vl-geoloc @update:position="log($event)">
-          <template slot-scope="ctx">
-            <vl-feature v-if="ctx.position" id="my-geoloc">
-              <vl-geom-point :coordinates="ctx.position" />
-              <vl-style-box>
-                <vl-style-circle :radius="7">
-                  <vl-style-fill color="#abcabc" />
-                  <vl-style-stroke color="#ff22ff" :width="5" />
-                </vl-style-circle>
-              </vl-style-box>
-            </vl-feature>
-          </template>
-        </vl-geoloc>
-
         <vl-layer-tile id="sputnik">
           <vl-source-stamen layer="toner-lite"/>
         </vl-layer-tile>
-
-        <vl-layer-vector>
-          <vl-source-vector url="./test.gml" :features.sync="gmlFeatures" :format-factory="formatFactory" projection="EPSG:4326"></vl-source-vector>
-        </vl-layer-vector>
-
-        <!--<vl-layer-group>-->
-          <!--<vl-layer-tile id="wms">-->
-            <!--<vl-source-wms ref="wmsSource" url="https://ahocevar.com/geoserver/wms" layers="topp:states" :ext-params="{ TILED: true }" server-type="geoserver"/>-->
-          <!--</vl-layer-tile>-->
-          <!--<vl-layer-image id="wms-image">-->
-            <!--<vl-source-image-wms url="https://ahocevar.com/geoserver/wms" layers="topp:states" server-type="geoserver"/>-->
-          <!--</vl-layer-image>-->
-
-          <!--<vl-layer-vector id="points" v-if="pointsLayer">-->
-            <!--<vl-source-cluster>-->
-              <!--<vl-source-vector :features="points"/>-->
-            <!--</vl-source-cluster>-->
-            <!--<vl-style-func :factory="clusterStyleFunc"></vl-style-func>-->
-          <!--</vl-layer-vector>-->
-        <!--</vl-layer-group>-->
-
-        <!--<vl-layer-tile>-->
-          <!--<vl-source-arcgis-rest url="https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer"></vl-source-arcgis-rest>-->
-        <!--</vl-layer-tile>-->
-
-        <!--<vl-layer-tile>-->
-          <!--<vl-source-bing-maps api-key="qwerty" imagery-set="RoadOnDemand"></vl-source-bing-maps>-->
-        <!--</vl-layer-tile>-->
-        <!--<vl-layer-tile>-->
-          <!--<vl-source-bingmaps api-key="qwerty" imagery-set="RoadOnDemand"></vl-source-bingmaps>-->
-        <!--</vl-layer-tile>-->
-
-        <vl-interaction-select ident="select" @select="log('select', $event)" @unselect="log('unselect', $event)" :features.sync="selectedFeatures"/>
-
-        <vl-overlay v-if="selectedFeatures.length && selectedFeatures[0].properties && selectedFeatures[0].properties.features"
-                    :position="pointOnSurface(selectedFeatures[0].geometry)" :auto-pan="true" :auto-pan-animation="{ duration: 250 }">
-          <div style="background: #eee; padding: 10px 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); width: 200px">
-            Popup cluster feature {{ selectedFeatures[0].id }}<br />
-            <span v-for="feature in selectedFeatures[0].properties.features">
-              feature {{ feature.id }}
-            </span>
-          </div>
-        </vl-overlay>
       </vl-map>
     </div>
   </div>