v-ol-map 1.0.11 → 1.1.0

package/src/components/map/index.vue

@@ -0,0 +1,194 @@
+<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

@@ -0,0 +1,10 @@
+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')