xy-map 1.0.60 → 1.1.1

package/src/package/draw/polygon.vue

@@ -1,172 +0,0 @@
-<template>
-  <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"
-                :showMoveInput="showMoveInput"
-                @update="drawUpdate"
-                @end="drawUpdate"
-                @clear="clear">
-      <div class="mt-15 ">
-        <el-input :value="position.toString()"
-                  size="small"
-                  placeholder="点击地图获取坐标"
-                  :readonly="readonly"
-                  style="width: 300px; margin-right: 10px;"></el-input>
-
-        <shp-file @upload="getShp"
-                  v-if="upload"></shp-file>
-
-        <el-button type="primary"
-                   size="small"
-                   @click="save">保存</el-button>
-      </div>
-    </draw-tools>
-  </div>
-</template>
-
-<script>
-import { mapSdk } from '../../index.js'
-import drawTools from './index.vue'
-import shpFile from './shpFile.vue'
-
-export default {
-  components: {
-    drawTools,
-    shpFile
-  },
-  props: {
-    config: {
-      type: Object,
-      default: () => { }
-    },
-    single: {
-      type: Boolean,
-      default: false
-    },
-    autoZoom: { // 自动缩放适应边界
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: true
-    },
-    upload: {
-      type: Boolean,
-      default: false
-    },
-    geoData: {
-      type: [Object, String],
-      default: ''
-    },
-    pointList: {
-      type: [Array, String],
-      default: ''
-    },
-    showFullBtn: { // 全屏按钮
-      type: Boolean,
-      default: true,
-    },
-    showMoveInput: { // 移动定位输入框
-      type: Boolean,
-      default: false,
-    }
-  },
-  data () {
-    return {
-      geoJson: '',
-      position: '',
-    }
-  },
-  watch: {
-    pointList () {
-      this.draw()
-    },
-    geoData () {
-      this.draw()
-    }
-  },
-  mounted () {
-    this.init()
-  },
-  methods: {
-    init () {
-      let config = Object.assign({}, {
-        accessToken: 'pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2w5YzNjOTZvMDF6NDNwb2d6YmJkYWRpMCJ9.-fW-OChGB1oY2DCMO_c8sg',
-        zoom: 14,
-        center: [102.83643451528434, 24.81972792178513],
-        is3d: false,
-      }, this.config)
-      mapSdk.initMap(config).then(map => {
-        this.$refs.draw.initDraw(map)
-        this.draw()
-      })
-    },
-    draw () {
-      if (this.pointList && this.pointList.length > 0) {
-        let features = this.pointList.map(item => {
-          return {
-            'type': 'Feature',
-            'geometry': {
-              'type': 'Polygon',
-              'coordinates': [item]
-            },
-            'properties': {}
-          }
-        })
-        this.geoJson = {
-          'type': 'FeatureCollection',
-          'features': features
-        }
-      } else {
-        this.geoJson = this.geoData
-      }
-      this.drawUpdate(this.geoJson, true)
-      this.edit()
-    },
-    edit () { // 开启编辑
-      if (this.geoJson) {
-        this.$refs.draw.drawEdit(this.geoJson)
-      }
-    },
-    drawUpdate (data, autoZoom = false) {
-      if (!data) return
-      this.geoJson = data
-      this.position = data.features.map(item => item.geometry.coordinates[0])
-
-      if (this.autoZoom || autoZoom) {
-        this.$nextTick(() => {
-          const bounds = this.position.flat() // 二维数组转一维数组
-          mapSdk.fitLineBounds(bounds, {
-            padding: 100
-          })
-        })
-      }
-    },
-    save () {
-      let data = {
-        geoJson: this.geoJson,
-        position: this.position
-      }
-      console.log(data)
-      this.$emit('save', data)
-    },
-    clear () {
-      this.geoJson = ''
-      this.position = ''
-    },
-    getShp (shp) {
-      console.log(shp)
-      this.$refs.draw.clear() // 先清空画布
-      this.drawUpdate(shp, true)
-      this.edit()
-    }
-  }
-}
-</script>

package/src/package/draw/shpFile.vue

@@ -1,49 +0,0 @@
-<template>
-  <el-button size="small"
-             class="upload"
-             type="warning">
-    shp上传
-    <input class="file"
-           type="file"
-           accept=".json"
-           @change="getFile" />
-  </el-button>
-</template>
-
-<script>
-export default {
-  data () {
-    return {}
-  },
-  methods: {
-    getFile (e) {
-      const file = e.target.files ? e.target.files[0] : ''
-      if (file) {
-        let reader = new FileReader()
-        reader.readAsText(file, 'UTF-8')
-        reader.onload = (f) => {
-          let json = f.target.result
-          if (json) {
-            json = JSON.parse(json)
-            this.$emit('upload', json)
-          }
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.upload {
-  position: relative;
-  input {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    opacity: 0;
-  }
-}
-</style>

package/src/package/draw/styles.js

@@ -1,162 +0,0 @@
-export default [
-	// 绘制点图标
-	{
-		'id': 'points-are-blue',
-		'type': 'symbol',
-		'filter': ['all',
-			['==', '$type', 'Point'],
-			['==', 'meta', 'feature'],
-			['==', 'active', 'false']
-		],
-		'layout': { // 设置绘制后显示的点图标
-			'icon-image': 'Point',
-			'icon-size': 0.6,
-			/* 图标大小 */
-			'icon-offset': [0, -15],
-			'icon-ignore-placement': true, //图标忽略位置
-			// 'text-field': ['get', this.props.title],     /* 使用text标签显示的值，Feature属性使用{域名}格式*/
-			'text-anchor': 'top', // 图标与锚点的位置关系
-		},
-		'paint': {
-			'text-color': '#fff',
-		}
-	},
-	// ACTIVE (being drawn)
-	// line stroke
-	{
-		id: 'gl-draw-line',
-		type: 'line',
-		filter: ['all', ['==', '$type', 'LineString'],
-			['!=', 'mode', 'static']
-		],
-		layout: {
-			'line-cap': 'round',
-			'line-join': 'round',
-		},
-		paint: {
-			'line-color': '#409eff',
-			// 'line-dasharray': [0.8, 2],
-			'line-width': 4,
-		},
-	},
-	// polygon fill
-	{
-		id: 'gl-draw-polygon-fill',
-		type: 'fill',
-		filter: ['all', ['==', '$type', 'Polygon'],
-			['!=', 'mode', 'static']
-		],
-		paint: {
-			'fill-color': '#409eff',
-			'fill-outline-color': '#409eff',
-			'fill-opacity': 0.1,
-		},
-	},
-	// polygon mid points
-	{
-		id: 'gl-draw-polygon-midpoint',
-		type: 'circle',
-		filter: ['all', ['==', '$type', 'Point'],
-			['==', 'meta', 'midpoint']
-		],
-		paint: {
-			'circle-radius': 4,
-			'circle-color': '#fbb03b',
-		},
-	},
-	// polygon outline stroke
-	// This doesn't style the first edge of the polygon, which uses the line stroke styling instead
-	{
-		id: 'gl-draw-polygon-stroke-active',
-		type: 'line',
-		filter: ['all', ['==', '$type', 'Polygon'],
-			['!=', 'mode', 'static']
-		],
-		layout: {
-			'line-cap': 'round',
-			'line-join': 'round',
-		},
-		paint: {
-			'line-color': '#409eff',
-			// 'line-dasharray': [0.8, 2],
-			'line-width': 4,
-		},
-	},
-	// vertex point halos
-	{
-		id: 'gl-draw-polygon-and-line-vertex-halo-active',
-		type: 'circle',
-		filter: [
-			'all',
-			['==', 'meta', 'vertex'],
-			['==', '$type', 'Point'],
-			['!=', 'mode', 'static'],
-		],
-		paint: {
-			'circle-radius': 5,
-			'circle-color': '#FFF',
-		},
-	},
-	// vertex points
-	{
-		id: 'gl-draw-polygon-and-line-vertex-active',
-		type: 'circle',
-		filter: [
-			'all',
-			['==', 'meta', 'vertex'],
-			['==', '$type', 'Point'],
-			['!=', 'mode', 'static'],
-		],
-		paint: {
-			'circle-radius': 4,
-			'circle-color': '#409eff',
-		},
-	},
-
-	// INACTIVE (static, already drawn)
-	// line stroke
-	{
-		id: 'gl-draw-line-static',
-		type: 'line',
-		filter: ['all', ['==', '$type', 'LineString'],
-			['==', 'mode', 'static']
-		],
-		layout: {
-			'line-cap': 'round',
-			'line-join': 'round',
-		},
-		paint: {
-			'line-color': '#000',
-			'line-width': 4,
-		},
-	},
-	// polygon fill
-	{
-		id: 'gl-draw-polygon-fill-static',
-		type: 'fill',
-		filter: ['all', ['==', '$type', 'Polygon'],
-			['==', 'mode', 'static']
-		],
-		paint: {
-			'fill-color': '#000',
-			'fill-outline-color': '#000',
-			'fill-opacity': 0.1,
-		},
-	},
-	// polygon outline
-	{
-		id: 'gl-draw-polygon-stroke-static',
-		type: 'line',
-		filter: ['all', ['==', '$type', 'Polygon'],
-			['==', 'mode', 'static']
-		],
-		layout: {
-			'line-cap': 'round',
-			'line-join': 'round',
-		},
-		paint: {
-			'line-color': '#000',
-			'line-width': 4,
-		},
-	},
-]

package/src/package/mapFullScreen.vue

@@ -1,105 +0,0 @@
-<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>
-      {{ isFullScreen ? '退出全屏' : '全屏' }}
-    </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>

package/src/package/mapLoad.vue

@@ -1,120 +0,0 @@
-<template>
-  <div class="mapLoad flex flex-col flex-align-center"
-       :class="{'loadOver' : !show}">
-    <img src="/img/loading.gif"
-         style="margin-top: 10%"
-         width="400" />
-
-    <div class="text-center"
-         style="width: 400px; margin-top: -90px">
-      <div class="mb-20">正在努力加载中...{{progress.toFixed(0)}}%</div>
-      <div class="progress-wrap">
-        <div class="progress-inner">
-          <div class="progress-nums"
-               :style="`width: ${progress}%`"></div>
-        </div>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    loading: { // 是否在加载
-      type: Boolean,
-      default: true,
-    },
-    loadTime: { // 等待时长，毫秒
-      type: Number,
-      default: 5000,
-    }
-  },
-  data () {
-    return {
-      progress: 0,
-      timer: '',
-      show: true,
-    }
-  },
-  watch: {
-    loading: {
-      handler (val) {
-        if (!val) {
-          this.show = false
-          this.progress = 100
-          window.clearInterval(this.timer)
-        }
-      },
-      immediate: true,
-    }
-  },
-  destroyed () {
-    window.clearInterval(this.timer)
-  },
-  created () {
-    this.timer = setInterval(() => {
-      this.progress += 3
-      if (this.progress >= 99) {
-        window.clearInterval(this.timer)
-      }
-    }, this.loadTime / 30)
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.mapLoad {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background-color: #d5f2fd;
-  z-index: 99999999;
-  transition: all 0.5s;
-  opacity: 1;
-  overflow: hidden;
-}
-.loadOver {
-  opacity: 0;
-  pointer-events: none;
-}
-
-/*进度条*/
-.progress-wrap {
-  width: 100%;
-  height: 12px;
-  border-radius: 8px;
-  position: relative;
-}
-/*进度条底层背景样式*/
-.progress-inner {
-  height: inherit;
-  background: rgba(142, 193, 255, 0.2);
-  border-radius: 8px;
-}
-/*进度层样式效果，使用动画效果*/
-.progress-nums {
-  height: inherit;
-  border-radius: 6px;
-  background: repeating-linear-gradient(
-    -45deg,
-    #008bdd 25%,
-    #49beff 0,
-    #49beff 50%,
-    #008bdd 0,
-    #008bdd 75%,
-    #49beff 0
-  );
-  background-size: 16px 16px;
-  animation: panoramic 30s linear infinite;
-}
-/*定义动画*/
-@keyframes panoramic {
-  to {
-    background-position: 200% 0;
-  }
-}
-</style>

package/src/package/mapMarker.vue

@@ -1,50 +0,0 @@
-<template>
-  <div ref="dom">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import mapBoxGl from 'mapbox-gl'
-import { mapSdk } from '../index.js'
-
-export default {
-  props: {
-    map: {
-      type: Object,
-      default: () => { }
-    },
-    position: {
-      type: Array,
-      default: () => []
-    },
-    drag: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-    }
-  },
-  mounted () {
-    this.createdMarker()
-  },
-  methods: {
-    createdMarker () {
-      let { map } = mapSdk
-      let el = this.$refs.dom
-      const marker = new mapBoxGl.Marker(el, { draggable: this.drag }).setLngLat(this.position).addTo(map)
-      if (this.drag) {
-        marker.on('dragend', () => {
-          const lngLat = marker.getLngLat()
-          this.$emit('dragEnd', lngLat)
-        })
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-</style>