vl-view: work with coordinates in provided projection

ghettovoice · Jan 5, 2018 · 1e3ac15 · 1e3ac15
1 parent ccfd394
commit 1e3ac15
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 26 deletions.
diff --git a/docs/api/map/view.js b/docs/api/map/view.js
@@ -2,7 +2,7 @@ export default {
   props: [
     {
       name: 'center',
-      description: `<p>The center coordinate of the map view in <strong>EPSG:4326</strong> projection.</p>`,
+      description: `<p>The center coordinate of the view in the view projection.</p>`,
       type: 'number[]',
       required: false,
       sync: true,
@@ -29,7 +29,7 @@ export default {
     },
     {
       name: 'extent',
-      description: `<p>The extent that constrains the center defined in in <b>EPSG:4326</b> projection,
+      description: `<p>The extent that constrains the center defined in the view projection,
                     in other words, center cannot be set outside this extent.</p>`,
       type: 'array',
       required: false,
@@ -149,7 +149,7 @@ export default {
     {
       name: 'animate',
       description: `<p>
-                      Animates the view. The view's <b>center</b> (coordinates in <b>EPSG:4326</b> projection), 
+                      Animates the view. The view's <b>center</b> (coordinates in the view projection), 
                       <b>zoom</b> (or <b>resolution</b>), and <b>rotation</b> can be animated for smooth transitions between view states.
                     </p>
                     <p>
@@ -192,7 +192,7 @@ export default {
       arguments: [
         {
           name: 'geometryOrExtent',
-          description: `<p>The geometry or extent to fit the view to. Coordinates should be in <b>EPSG:4326</b> projection.</p>`,
+          description: `<p>The geometry or extent to fit the view to. Coordinates should be in the view projection.</p>`,
           optional: false,
           type: 'GeoJSONFeature, ol.Extent',
         },

diff --git a/src/components/map/view.vue b/src/components/map/view.vue
@@ -10,7 +10,7 @@
    */
   import Vue from 'vue'
   import View from 'ol/view'
-  import { isEqual, isPlainObject, noop, get } from 'lodash/fp'
+  import { isEqual, isPlainObject, noop, isFunction } from 'lodash/fp'
   import { Observable } from 'rxjs/Observable'
   import { merge as mergeObs } from 'rxjs/observable/merge'
   import { distinctUntilKeyChanged } from 'rxjs/operator/distinctUntilKeyChanged'
@@ -20,7 +20,6 @@
     MAX_ZOOM,
     EPSG_3857,
     ZOOM_FACTOR,
-    projHelper,
     geoJsonHelper,
     observableFromOlChangeEvent,
     olCmp,
@@ -32,7 +31,7 @@
    */
   const props = /** @lends module:map/view# */{
     /**
-     * The center coordinate of the map view in **EPSG:4326** projection.
+     * The center coordinate of the view in the view projection.
      * @type {number[]}
      * @default [0, 0]
      * @vueSync
@@ -51,7 +50,7 @@
       default: true,
     },
     /**
-     * The extent that constrains the center defined in in **EPSG:4326** projection,
+     * The extent that constrains the center defined in the view projection,
      * in other words, center cannot be set outside this extent.
      * @default undefined
      */
@@ -158,13 +157,11 @@
     animate (...args) {
       assert.hasView(this)
 
-      let cb = args.reverse().find(x => typeof x === 'function') || noop
-      args.forEach(opts => {
-        let center = get('center', opts)
-        if (Array.isArray(center) && center.length) {
-          opts.center = projHelper.fromLonLat(center, this.projection)
-        }
-      })
+      let cb = noop
+      if (isFunction(args[args.length - 1])) {
+        cb = args[args.length - 1]
+        args = args.slice(0, args.length - 1)
+      }
 
       return new Promise(
         resolve => this.$view.animate(...args, complete => {
@@ -179,12 +176,10 @@
      */
     createOlObject () {
       return new View({
-        center: projHelper.fromLonLat(this.center, this.projection),
+        center: this.center,
         constrainRotation: this.constrainRotation,
         enableRotation: this.enableRotation,
-        extent: this.extent
-          ? projHelper.extentFromLonLat(this.extent, this.projection)
-          : undefined,
+        extent: this.extent,
         maxResolution: this.maxResolution,
         minResolution: this.minResolution,
         maxZoom: this.maxZoom,
@@ -206,13 +201,11 @@
     fit (geometryOrExtent, options = {}) {
       assert.hasView(this)
 
-      // transform to GeoJSON, vl-feature to ol.Feature
+      // transform from GeoJSON, vl-feature to ol.Feature
       if (isPlainObject(geometryOrExtent)) {
-        geometryOrExtent = geoJsonHelper.readGeometry(geometryOrExtent, this.$view.getProjection())
+        geometryOrExtent = geoJsonHelper.readGeometry(geometryOrExtent, this.$view.getProjection(), this.projection)
       } else if (geometryOrExtent instanceof Vue) {
         geometryOrExtent = geometryOrExtent.$geometry
-      } else if (Array.isArray(geometryOrExtent)) {
-        geometryOrExtent = projHelper.extentFromLonLat(geometryOrExtent, this.$view.getProjection())
       }
 
       let cb = options.callback || noop
@@ -255,7 +248,7 @@
   const watch = {
     center (value) {
       if (this.$view && !isEqual(value, this::getCenter())) {
-        this.$view.setCenter(projHelper.fromLonLat(value, this.$view.getProjection()))
+        this.$view.setCenter(value)
       }
     },
     resolution (value) {
@@ -362,6 +355,6 @@
   }
 
   function getCenter () {
-    return projHelper.toLonLat(this.$view.getCenter(), this.$view.getProjection())
+    return this.$view.getCenter()
   }
 </script>
diff --git a/test/app.vue b/test/app.vue
@@ -183,7 +183,7 @@
     data () {
       return {
         zoom: 13,
-        center: [-80.0307892780456, 43.456341754866685],
+        center: proj.transform([-80.0307892780456, 43.456341754866685], 'EPSG:4326', 'EPSG:3857'),
         rotation: 0,
         points: [],
         pointsLayer: true,