xy-map 1.0.38 → 1.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xy-map",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "description": "地图组件",
   "main": "src/index.js",
   "scripts": {

package/src/index.js

@@ -127,6 +127,7 @@ const mapEvent = {
 import mapMarker from './package/mapMarker.vue'
 import mapRain from './package/mapRain.vue'
 import mapLoad from './package/mapLoad.vue'
+import mapFullScreen from './package/mapFullScreen.vue'
 import drawTools from './package/draw/index.vue'
 import drawPoint from './package/draw/point.vue'
 import drawLine from './package/draw/line.vue'
@@ -136,14 +137,13 @@ const mapComponent = {
   mapMarker,
   mapRain,
   mapLoad,
+  mapFullScreen,
   drawTools,
   drawPoint,
   drawLine,
   drawPolygon
 }
 
-// Vue.component('drawTools', mapLoad)
-
 export {
   mapSdk,
   mapLayers,

package/src/package/draw/index.vue

@@ -21,6 +21,11 @@
            title="清空">
         <i class="el-icon-delete mr-5"></i>清空
       </div>
+
+      <map-full-screen class="ml-20"
+                       dom="fullScreen"
+                       v-if="showFullBtn">
+      </map-full-screen>
     </div>
 
     <slot></slot>
@@ -28,11 +33,15 @@
 </template>
 
 <script>
+import mapFullScreen from '../mapFullScreen.vue'
 import MapboxDraw from '@mapbox/mapbox-gl-draw'
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
 // import styles from './styles'
 
 export default {
+  components: {
+    mapFullScreen
+  },
   props: {
     list: {
       type: Array,
@@ -41,6 +50,10 @@ export default {
     single: { // 每次绘制前先清空画布
       type: Boolean,
       default: true,
+    },
+    showFullBtn: { // 全屏按钮
+      type: Boolean,
+      default: true,
     }
   },
   data () {
@@ -129,6 +142,9 @@ export default {
         this.$emit('clear')
       }
     },
+    fullScreen () {
+
+    }
   }
 }
 </script>

package/src/package/draw/line.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="full-height relative overflow">
+  <div id="fullScreen"
+       class="full-height relative overflow">
     <div id="map"
          class="full-height"></div>
 
     <draw-tools ref="draw"
                 :list="['line']"
                 :single="single"
+                :showFullBtn="showFullBtn"
                 @update="drawUpdate"
                 @end="drawUpdate"
                 @clear="clear">
@@ -66,6 +68,10 @@ export default {
       type: [Array, String],
       default: ''
     },
+    showFullBtn: { // 全屏按钮
+      type: Boolean,
+      default: true,
+    }
   },
   data () {
     return {
@@ -120,10 +126,11 @@ export default {
       this.edit()
     },
     edit () { // 开启编辑
-      if (this.geoJson && this.geoJson.features.length === 0) return
-      this.geoJson.features.forEach(item => {
-        this.$refs.draw.drawEdit(item.geometry)
-      })
+      if (this.geoJson && this.geoJson.features.length > 0) {
+        this.geoJson.features.forEach(item => {
+          this.$refs.draw.drawEdit(item.geometry)
+        })
+      }
     },
     drawUpdate (data, autoZoom = false) {
       if (!data) return

package/src/package/draw/point.vue

@@ -1,10 +1,12 @@
 <template>
-  <div class="full-height relative overflow">
+  <div id="fullScreen"
+       class="full-height relative overflow">
     <div id="map"
          class="full-height"></div>
 
     <draw-tools ref="draw"
                 :list="['point']"
+                :showFullBtn="showFullBtn"
                 @update="drawUpdate"
                 @end="drawUpdate"
                 @clear="clear">
@@ -53,6 +55,10 @@ export default {
       type: [Number, String],
       default: ''
     },
+    showFullBtn: { // 全屏按钮
+      type: Boolean,
+      default: true,
+    }
   },
   data () {
     return {

package/src/package/draw/polygon.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="full-height relative overflow">
+  <div id="fullScreen"
+       class="full-height relative overflow">
     <div id="map"
          class="full-height"></div>
 
     <draw-tools ref="draw"
                 :list="['polygon']"
                 :single="single"
+                :showFullBtn="showFullBtn"
                 @update="drawUpdate"
                 @end="drawUpdate"
                 @clear="clear">
@@ -66,6 +68,10 @@ export default {
       type: [Array, String],
       default: ''
     },
+    showFullBtn: { // 全屏按钮
+      type: Boolean,
+      default: true,
+    }
   },
   data () {
     return {
@@ -120,10 +126,11 @@ export default {
       this.edit()
     },
     edit () { // 开启编辑
-      if (this.geoJson && this.geoJson.features.length === 0) return
-      this.geoJson.features.forEach(item => {
-        this.$refs.draw.drawEdit(item.geometry)
-      })
+      if (this.geoJson && this.geoJson.features.length > 0) {
+        this.geoJson.features.forEach(item => {
+          this.$refs.draw.drawEdit(item.geometry)
+        })
+      }
     },
     drawUpdate (data, autoZoom = false) {
       if (!data) return

package/src/package/mapFullScreen.vue

@@ -0,0 +1,105 @@
+<template>
+  <span>
+    <span v-if="isSlot"
+          @click="handleFullScreen"
+          :title="isFullScreen ? '退出全屏' : '进入全屏'">
+      <slot></slot>
+    </span>
+    <span v-else
+          @click="handleFullScreen"
+          :title="isFullScreen ? '退出全屏' : '进入全屏'">
+      <i class="el-icon-full-screen mr-5"></i>
+      全屏
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    isSlot: {
+      type: Boolean,
+      default: false
+    },
+    dom: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isFullScreen: false,
+    }
+  },
+  watch: {
+    isFullScreen (val) {
+      this.$emit('change', val)
+    }
+  },
+  methods: {
+    // 全屏
+    handleFullScreen () {
+      let mapMainContent
+      // 判断是否有dom传入，没有则是整个页面全屏展示
+      this.dom ? mapMainContent = document.getElementById(this.dom) : mapMainContent = document.documentElement
+      if (this.isFUllScreenEnabled()) {
+        if (this.hasFullScreenElement()) {
+          this.exitFullScreen()
+          this.isFullScreen = false
+        } else {
+          this.setFullScreen(mapMainContent)
+          this.isFullScreen = true
+        }
+      } else {
+        console.log('此浏览器不支持全屏')
+      }
+    },
+    // 判断浏览器是否支持全屏
+    isFUllScreenEnabled () {
+      return document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled
+    },
+    // 判断是否有已全屏的元素
+    hasFullScreenElement () {
+      return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement
+    },
+    // 将目标元素设置为全屏展示
+    setFullScreen (target) {
+      if (target.requestFullscreen) {
+        target.requestFullscreen()
+      }
+      if (target.webkitRequestFullscreen) {
+        target.webkitRequestFullscreen()
+      }
+      if (target.mozRequestFullScreen) {
+        target.mozRequestFullScreen()
+      }
+      if (target.msRequestFullscreen) {
+        target.msRequestFullscreen()
+      }
+    },
+    // 文档退出全屏
+    exitFullScreen () {
+      if (document.exitFullscreen) {
+        document.exitFullscreen()
+      }
+      if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen()
+      }
+      if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen()
+      }
+      if (document.msExitFullscreen) {
+        document.msExitFullscreen()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+:fullscreen {
+  .d {
+    color: red;
+  }
+}
+</style>