tchen-vuelayers/lib/mixin/tile-source.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 { createTileUrlFunction } from 'ol-tilecache';
import { CACHE_SIZE, EPSG_3857, MAX_ZOOM, MIN_ZOOM, PIXEL_RATIO, REPROJ_ERR_THRESHOLD, TILE_SIZE } from '../ol-ext/consts';
import { createExtentFromProjection } from '../ol-ext/extent';
import { createXyzGrid } from '../ol-ext/tile-grid';
import { hasView } from '../util/assert';
import { isFunction, isString, pick, replaceTokens } from '../util/minilo';
import source from './source';
import withUrl from './with-url';

var props = {
  cacheSize: {
    type: Number,
    default: CACHE_SIZE
  },
  crossOrigin: String,
  maxZoom: {
    type: Number,
    default: MAX_ZOOM
  },
  minZoom: {
    type: Number,
    default: MIN_ZOOM
  },
  opaque: Boolean,
  projection: {
    type: String,
    default: EPSG_3857
  },
  reprojectionErrorThreshold: {
    type: Number,
    default: REPROJ_ERR_THRESHOLD
  },
  tilePixelRatio: {
    type: Number,
    default: PIXEL_RATIO
  },
  tileSize: {
    type: Array,
    default: function _default() {
      return [TILE_SIZE, TILE_SIZE];
    },
    validator: function validator(value) {
      return value.length === 2;
    }
  },
  tileLoadFunction: Function,
  url: {
    type: [String, Function],
    required: true
  },

  /**
   * Duration of the opacity transition for rendering. To disable the opacity transition, pass `0`.
   * @type {number}
   */
  transition: Number
};
var computed = {
  /**
   * @type {string}
   */
  urlTmpl: function urlTmpl() {
    if (!isString(this.url)) {
      return '';
    }

    return replaceTokens(this.url, pick(this, this.urlTokens));
  }
};
var methods = {
  /**
   * @return {TileGrid}
   * @protected
   */
  createTileGrid: function createTileGrid() {
    hasView(this);
    return createXyzGrid({
      extent: createExtentFromProjection(this.$view.getProjection()),
      maxZoom: this.maxZoom,
      minZoom: this.minZoom,
      tileSize: this.tileSize
    });
  },

  /**
   * @return {TileUrlFunction}
   * @protected
   */
  createUrlFunc: function createUrlFunc() {
    // custom url function provided
    if (isFunction(this.url)) {
      return this.url;
    }

    hasView(this); // or use url function from ol-tilecache

    return createTileUrlFunction(this.urlTmpl, this._tileGrid, createExtentFromProjection(this.$view.getProjection()));
  },

  /**
   * @return {Promise}
   * @protected
   */
  init: function init() {
    /**
     * @type {TileGrid}
     * @protected
     */
    this._tileGrid = this.createTileGrid();
    return source.methods.init.call(this);
  },

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

  /**
   * @return {void}
   * @protected
   */
  mount: function mount() {
    source.methods.mount.call(this);
  },

  /**
   * @return {void}
   * @protected
   */
  unmount: function unmount() {
    source.methods.mount.call(this);
  }
};
var watch = {
  url: function url() {
    if (this.$source) {
      this.$source.setTileUrlFunction(this.createUrlFunc());
      this.scheduleRefresh();
    }
  }
};
var tileSource = {
  mixins: [source, withUrl],
  props: props,
  computed: computed,
  methods: methods,
  watch: watch
};

export default tileSource;