v-ol-map 1.1.0 → 1.2.1

package/src/components/map/index.vue

@@ -1,194 +0,0 @@
-<template>
-  <div :id="target" :style="{'width':mapWidth,'height':mapHeight}">
-    <a :id="downLoadId" :download="downloadName"></a>
-    <slot v-if="load"></slot>
-  </div>
-</template>
-
-<script>
-import { nanoid } from 'nanoid'
-import { OlMap } from '@/utils/index.js'
-
-export default {
-  name: 'v-map',
-  provide () {
-    return {
-      VMap: this
-    }
-  },
-  props: {
-    // 地图容器宽度
-    width: {
-      type: [String, Number],
-      default () {
-        return '100%'
-      }
-    },
-    // 地图容器高度
-    height: {
-      type: [String, Number],
-      default () {
-        return '100%'
-      }
-    },
-    // 地图容器Id
-    target: {
-      type: String,
-      default: `map-${nanoid()}`
-    },
-    // 视窗属性
-    view: {
-      type: Object
-    },
-    // 未引入tile组件时默认加载图层
-    defaultTile: {
-      type: String,
-      default: 'TD'
-    },
-    // 控制属性
-    controls: {
-      type: Object
-    },
-    // 控制类扩展
-    controlsExtend: {
-      type: Object
-    },
-    // 交互属性
-    interactions: {
-      type: Object
-    },
-    // 交互类扩展
-    interactionsExtend: {
-      type: Object
-    }
-  },
-  computed: {
-    mapOption () {
-      return {
-        target: this.target,
-        view: this.view,
-        controls: this.controls,
-        interactions: this.interactions
-      }
-    },
-    map () {
-      return OlMap.map.map
-    },
-    mapWidth () {
-      return typeof this.width === 'string' ? this.width : this.width.toString() + 'px'
-    },
-    mapHeight () {
-      return typeof this.height === 'string' ? this.height : this.height.toString() + 'px'
-    }
-  },
-  watch: {
-    'view.center': {
-      handler (value) {
-        if (value) {
-          OlMap.panTo(value)
-        }
-      },
-      immediate: false,
-      deep: true
-    }
-  },
-  data () {
-    return {
-      vMap: null,
-      load: false,
-      downLoadId: `download-${nanoid()}`,
-      downloadName: 'map.png',
-      noBase: true,
-      properties: {
-        isDefault: true
-      },
-      modify: null,
-      select: null,
-      translates: null,
-      dragRotateAndZoom: null,
-      fullScreen: null
-    }
-  },
-  methods: {
-    init () {
-      return new Promise((resolve, reject) => {
-        OlMap.map = new OlMap(this.mapOption)
-        if (OlMap.map.map) {
-          resolve('success')
-        } else {
-          reject(new Error('fail'))
-        }
-      })
-    },
-    dispose () {
-      if (!this.map) return
-      const layers = [...this.map.getLayers().getArray()]
-      layers.forEach(layer => {
-        if (layer) {
-          const layerTitle = layer.get('users')
-          if (layerTitle) {
-            console.log('destroying layer', layerTitle)
-            layer.getSource().clear()
-            layer.getRenderer().dispose()
-            layer.setSource(undefined)
-            this.map.removeLayer(layer)
-          }
-        }
-      })
-      this.map.disposeInternal()
-    },
-    zoomEnd (evt) {
-      this.$emit('changeZoom', evt, this.map)
-      evt.map.once('moveend', (evt) => {
-        this.zoomEnd(evt)
-      })
-    }
-  },
-  mounted () {
-    this.init().then(res => {
-      if (res === 'success') {
-        // 点击事件
-        this.map.on('singleclick', (r) => {
-          this.$emit('click', r, this.map)
-          this.map.forEachSmFeatureAtPixel(r.pixel, (i, e) => {
-            this.$emit('onClickFeature', i, e, r)
-          }, {}, r)
-        })
-        // 层级变化
-        this.map.getView().once('change:resolution', () => {
-          this.map.once('moveend', (evt) => {
-            this.zoomEnd(evt)
-          })
-        })
-        // 鼠标悬浮
-        this.map.on('pointermove', evt => {
-          const pixel = this.map.getEventPixel(evt.originalEvent)
-          const hit = this.map.hasFeatureAtPixel(pixel)
-          this.map.getTargetElement().style.cursor = hit ? 'pointer' : ''
-          this.map.getLayers().getArray().forEach(layer => {
-            if (layer.get('type') === 'graphic') {
-              const data = layer.getData(evt.pixel)
-              const hitImage = data && data[3] > 0 // transparent pixels have zero for data[3]
-              this.map.getTargetElement().style.cursor = hitImage || hit ? 'pointer' : ''
-            }
-          })
-          this.$emit('pointermove', evt, this.map)
-        })
-        // 鼠标右键
-        this.map.on('contextmenu', evt => {
-          this.$emit('contextmenu', evt, this.map)
-        })
-        this.$emit('load')
-        this.load = true
-      }
-    })
-  },
-  beforeUnmount () {
-    this.dispose()
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

package/src/main.js

@@ -1,10 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-import olMap from '@/components/index'
-
-Vue.config.productionTip = false
-Vue.use(olMap)
-
-new Vue({
-  render: h => h(App)
-}).$mount('#app')