opengis/src/base/mixins/common.js

openlayer Map Component for Vue 2.0

const types = {
  control: {
    unload: 'removeControl' // 删除控件方法---
  },
  layer: {
    unload: 'removeLayer' // 删除图层方法
  },
  overlay: {
    unload: 'removeOverlay'  // 删除叠置覆盖物方法
  },
  interaction: {
    unload: 'removeInteraction' // 删除交互控件方法
  }
}

const getParent = $component => ($component.abstract || $component.$el === $component.$children[0].$el) ? getParent($component.$parent) : $component

class Mixin {
  constructor (prop) {
    this.methods = {
      ready () {
        const ol = this.ol = this.$rootComponent.ol // 获取地图命名空间----
        const map = this.map = this.$rootComponent.olmap // 获取地图对象------
        this.load() // 地图添加组件---
        // 分发地图事件----
        this.$emit('ready', {
          ol,
          map
        })
      },
      transmitEvent (e) {
        this.$emit(e.type.replace(/^on/, ''), e)
      },
      // 重新加载地图
      reload () {
        this && this.ol && this.$nextTick(() => {
          this.unload()
          this.$nextTick(this.load)
        })
      },
      // 卸载地图控件
      unload () {
        const { map, originInstance } = this
        map[types[prop.type].unload](originInstance)
      }
    }
    this.computed = {
      renderByParent () {
        return this.$parent.preventChildrenRender
      }
    }
    this.mounted = function () {
      this.$rootComponent = getParent(this.$parent)
      const map = this.$rootComponent.olmap
      const { ready } = this
      if (map) {
        ready()
      } else {
        this.$rootComponent.$on('ready', (config) => {
          const ol = this.ol = config.ol // 获取地图命名空间----
          const map = this.map = config.map // 获取地图对象------
          this.load() // 地图添加组件---
          // 分发地图事件----
          this.$emit('ready', {
            ol,
            map
          })
        })
      }
    }
    this.beforeDestroy = function () {
      const { unload, renderByParent, $parent } = this
      if (renderByParent) {
        $parent.reload()
      }
      unload()
    }
  }
}

export default type => new Mixin({ type })