tchen-vuelayers/lib/mixin/layer.js

Web map Vue components with the power of OpenLayers

/**
 * VueLayers
 * Web map Vue components with the power of OpenLayers
 *
 * @package vuelayers
 * @author Vladimir Vershinin <ghettovoice@gmail.com>
 * @version 0.11.1
 * @license MIT
 * @copyright (c) 2017-2019, Vladimir Vershinin <ghettovoice@gmail.com>
 */
import _Object$defineProperties from '@babel/runtime-corejs2/core-js/object/define-properties';
import _regeneratorRuntime from '@babel/runtime-corejs2/regenerator';
import _asyncToGenerator from '@babel/runtime-corejs2/helpers/esm/asyncToGenerator';
import uuid from 'uuid/v4';
import Vue from 'vue';
import { hasLayer, hasMap } from '../util/assert';
import { isEqual } from '../util/minilo';
import mergeDescriptors from '../util/multi-merge-descriptors';
import cmp from './ol-virt-cmp';
import sourceContainer from './source-container';
import useMapCmp from './use-map-cmp';

var props = {
  id: {
    type: [String, Number],
    default: function _default() {
      return uuid();
    }
  },

  /**
   * The bounding extent for layer rendering defined in the map view projection.
   * The layer will not be rendered outside of this extent.
   * @default undefined
   * @type {Extent|number[]|undefined}
   */
  extent: {
    type: Array,
    validator: function validator(value) {
      return value.length === 4;
    }
  },
  minResolution: Number,
  maxResolution: Number,
  opacity: {
    type: Number,
    default: 1
  },
  overlay: {
    type: Boolean,
    default: false
  },
  visible: {
    type: Boolean,
    default: true
  },
  zIndex: Number
};
var methods = {
  /**
   * @return {Promise<Layer>}
   * @protected
   */
  createOlObject: function () {
    var _createOlObject = _asyncToGenerator(
    /*#__PURE__*/
    _regeneratorRuntime.mark(function _callee() {
      var layer;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return this.createLayer();

            case 2:
              layer = _context.sent;
              layer.set('id', this.id);
              return _context.abrupt("return", layer);

            case 5:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, this);
    }));

    return function createOlObject() {
      return _createOlObject.apply(this, arguments);
    };
  }(),

  /**
   * @return {Layer|Promise<Layer>}
   * @protected
   * @abstract
   */
  createLayer: function createLayer() {
    throw new Error('Not implemented method');
  },

  /**
   * @return {Promise<Vue<Layer>>}
   * @protected
   */
  init: function init() {
    return cmp.methods.init.call(this);
  },

  /**
   * @return {void|Promise<void>}
   * @protected
   */
  deinit: function deinit() {
    return cmp.methods.deinit.call(this);
  },

  /**
   * @param {number[]} pixel
   * @return {boolean}
   */
  isAtPixel: function isAtPixel(pixel) {
    var _this = this;

    hasMap(this);
    return this.$map.forEachLayerAtPixel(pixel, function (l) {
      return l === _this.$layer;
    });
  },

  /**
   * @returns {Object}
   * @protected
   */
  getServices: function getServices() {
    var vm = this;
    return mergeDescriptors(cmp.methods.getServices.call(this), sourceContainer.methods.getServices.call(this), {
      get layer() {
        return vm.$layer;
      }

    });
  },

  /**
   * @return {{
   *     setSource: function(Source): void,
   *     getSource: function(): Source
   *   }|undefined}
   * @protected
   */
  getSourceTarget: function getSourceTarget() {
    return this.$layer;
  },

  /**
   * @return {void}
   * @protected
   */
  mount: function mount() {
    if (this.overlay && this.$map) {
      this.setMap(this.$map);
    } else if (this.$layersContainer) {
      this.$layersContainer.addLayer(this);
    }

    this.subscribeAll();
  },

  /**
   * @return {void}
   * @protected
   */
  unmount: function unmount() {
    this.unsubscribeAll();

    if (this.overlay) {
      this.setMap(undefined);
    } else if (this.$layersContainer) {
      this.$layersContainer.removeLayer(this);
    }
  },

  /**
   * Updates layer state
   * @return {Promise}
   */
  refresh: function refresh() {
    return cmp.methods.refresh.call(this);
  },

  /**
   * @param {Map|Vue|undefined} map
   */
  setMap: function setMap(map) {
    hasLayer(this);
    map = map instanceof Vue ? map.$map : map;
    this.$layer.setMap(map);
  }
};
var watch = {
  id: function id(value) {
    if (this.$layer && value !== this.$layer.get('id')) {
      this.$layer.set('id', value);
    }
  },
  maxResolution: function maxResolution(value) {
    if (this.$layer && value !== this.$layer.getMaxResolution()) {
      this.$layer.setMaxResolution(value);
    }
  },
  minResolution: function minResolution(value) {
    if (this.$layer && value !== this.$layer.getMinResolution()) {
      this.$layer.setMinResolution(value);
    }
  },
  opacity: function opacity(value) {
    if (this.$layer && value !== this.$layer.getOpacity()) {
      this.$layer.setOpacity(value);
    }
  },
  visible: function visible(value) {
    if (this.$layer && value !== this.$layer.getVisible()) {
      this.$layer.setVisible(value);
    }
  },
  zIndex: function zIndex(value) {
    if (this.$layer && value !== this.$layer.getZIndex()) {
      this.$layer.setZIndex(value);
    }
  },
  extent: function extent(value) {
    if (this.$layer && !isEqual(value, this.$layer.getExtent())) {
      this.$layer.setExtent(value);
    }
  }
};
var layer = {
  mixins: [cmp, useMapCmp, sourceContainer],
  props: props,
  methods: methods,
  watch: watch,
  stubVNode: {
    attrs: function attrs() {
      return {
        id: [this.$options.name, this.id].join('-'),
        class: this.$options.name
      };
    }
  },
  created: function created() {
    var _this2 = this;

    _Object$defineProperties(this, {
      /**
       * @type {Layer|undefined}
       */
      $layer: {
        enumerable: true,
        get: function get() {
          return _this2.$olObject;
        }
      },
      $map: {
        enumerable: true,
        get: function get() {
          return _this2.$services && _this2.$services.map;
        }
      },
      $view: {
        enumerable: true,
        get: function get() {
          return _this2.$services && _this2.$services.view;
        }
      },
      $layersContainer: {
        enumerable: true,
        get: function get() {
          return _this2.$services && _this2.$services.layersContainer;
        }
      }
    });
  }
};

export default layer;