xy-map 1.0.59 → 1.1.1

package/src/package/draw/index.vue

@@ -1,239 +0,0 @@
-<template>
-  <div class="tools">
-    <div class="tools-bar flex flex-align-center">
-      <div @click="startDraw('move')"
-           :class="{'main-color': type === 'move'}"
-           title="移动">
-        <i class="el-icon-rank mr-5"></i>移动
-      </div>
-      <div class="ml-20"
-           :class="{'main-color': item.type === type}"
-           :title="item.name"
-           :label="item.type"
-           v-for="item in action"
-           :key="item.type"
-           @click="startDraw(item.type)">
-        <i class="mr-5"
-           :class="item.icon"></i>{{item.name}}
-      </div>
-
-      <template v-if="showDeleteBtn">
-        <div class="ml-20"
-             @click="drawDelete"
-             title="删除">
-          <i class="el-icon-close mr-5"></i>删除
-        </div>
-        <div class="ml-20"
-             @click="clear"
-             title="清空">
-          <i class="el-icon-delete mr-5"></i>清空
-        </div>
-      </template>
-
-      <map-full-screen class="ml-20"
-                       :dom="fullDom"
-                       v-if="showFullBtn">
-      </map-full-screen>
-    </div>
-
-    <div class="margin-top flex"
-         v-if="showMoveInput">
-      <div class="flex flex-align-center">
-        <span class="flex-child-noshrink">纬度：</span>
-        <el-input size="small"
-                  v-model="lng"
-                  placeholder="请输入纬度" />
-      </div>
-      <div class="flex flex-align-center margin-left">
-        <span class="flex-child-noshrink">经度：</span>
-        <el-input size="small"
-                  v-model="lat"
-                  placeholder="请输入经度" />
-      </div>
-      <div class="margin-left">
-        <el-button size="small"
-                   type="primary"
-                   @click="search">移动</el-button>
-      </div>
-    </div>
-
-    <slot></slot>
-  </div>
-</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: {
-    fullDom: {
-      type: String,
-      default: 'fullScreen',
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    single: { // 每次绘制前先清空画布
-      type: Boolean,
-      default: true,
-    },
-    showFullBtn: { // 全屏按钮
-      type: Boolean,
-      default: true,
-    },
-    showDeleteBtn: { // 删除按钮
-      type: Boolean,
-      default: true,
-    },
-    showMoveInput: { // 移动定位输入框
-      type: Boolean,
-      default: true
-    }
-  },
-  data () {
-    return {
-      type: 'move',
-      isEdit: false, //是否编辑模式
-      draw: '',
-      activeFeatures: '',
-      lng: '',
-      lat: ''
-    }
-  },
-  computed: {
-    action () {
-      let arr = [
-        { id: 'point', type: 'draw_point', name: '绘制点', icon: 'el-icon-coordinate' },
-        { id: 'line', type: 'draw_line_string', name: '绘制线', icon: 'el-icon-arrow-up' },
-        { id: 'polygon', type: 'draw_polygon', name: '绘制面', icon: 'el-icon-house' },
-        // { id: 'circle', type: 'draw_circle', name: '绘制圆', icon: 'el-icon-pie-chart' },
-      ]
-      let filter = this.list.length > 0 ? arr.filter(item => this.list.includes(item.id)) : arr
-      return filter
-    }
-  },
-  methods: {
-    initDraw (map) {
-      this.map = map
-      const draw = this.draw = new MapboxDraw({
-        displayControlsDefault: false,
-        controls: {
-          // point: true,
-          // line: true,
-          // polygon: true,
-          // trash: true
-        }
-      })
-      map.addControl(draw)
-      // map.drawControl.changeMode('draw_polygon')
-
-      map.on('draw.create', this.drawEnd)
-      map.on('draw.update', this.drawUpdate)
-      map.on('draw.selectionchange', this.select)
-      this.getCenter()
-
-      // map.on('draw.modechange', (e) => {
-      //   const data = draw.getAll()
-      //   console.log('datadata')
-      //   console.log(data)
-      //   console.log(draw.getMode())
-      //   if (draw.getMode() == 'draw_polygon') {
-      //     if (data.features.length > 1) {
-      //       draw.deleteAll()
-      //     }
-      //   }
-      // })
-    },
-    getDraw () { // 获取绘制内容
-      const data = this.draw.getAll()
-      return data
-    },
-    startDraw (type) {
-      this.type = type
-      if (type === 'move') return
-      if (this.single) {
-        this.clear()
-      }
-      console.log('开始绘制')
-      this.draw.changeMode(type)
-      this.$emit('start')
-    },
-    drawEnd (e) {
-      // console.log(e)
-      const data = this.getDraw()
-      console.log('绘制结束', data)
-      this.type = 'move'
-      this.$emit('end', data)
-    },
-    drawUpdate (e) {
-      // console.log(e)
-      const data = this.getDraw()
-      console.log('修改结束', data)
-      this.$emit('update', data)
-    },
-    drawEdit (geometry) { // 修改回填元素
-      // let geometry = {
-      //   type: 'Point',
-      //   coordinates: [this.lng, this.lat]
-      // }
-      this.draw.add(geometry)
-    },
-    drawDelete () { // 删除选中对象
-      if (this.activeFeatures && this.activeFeatures.length > 0) {
-        this.activeFeatures.forEach(item => {
-          this.draw.delete(item.id)
-          const data = this.getDraw()
-          console.log('删除选中对象', data)
-          this.$emit('delete', data)
-        })
-      } else {
-        this.$message.warning('未选择删除的对象')
-      }
-    },
-    clear () {
-      if (this.draw) {
-        this.draw.deleteAll()
-        this.$emit('clear')
-      }
-    },
-    select (e) {
-      this.activeFeatures = e.features
-      console.log('选中对象', this.activeFeatures)
-      this.$emit('select', e.features)
-    },
-    search () {
-      this.map.easeTo({
-        center: [this.lng, this.lat],
-      })
-    },
-    getCenter () {
-      const { lng, lat } = this.map.getCenter()
-      this.lng = lng
-      this.lat = lat
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.tools {
-  position: absolute;
-  left: 0;
-  top: 0;
-  margin: 15px;
-  background-color: rgba(255, 255, 255, 0.9);
-  padding: 14px;
-  border-radius: 5px;
-
-  .tools-bar {
-    cursor: pointer;
-  }
-}
-</style>

package/src/package/draw/line.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="['line']"
-                :single="single"
-                :showMoveInput="showMoveInput"
-                :showFullBtn="showFullBtn"
-                @update="drawUpdate"
-                @end="drawUpdate"
-                @clear="clear">
-      <div class="mt-15 flex">
-        <el-input :value="position.toString()"
-                  size="small"
-                  placeholder="点击地图获取坐标"
-                  :readonly="readonly"
-                  style="width: 300px; margin-right: 10px;">
-        </el-input>
-
-        <shp-file v-if="upload"
-                  @upload="getShp"></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: () => { }
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    upload: {
-      type: Boolean,
-      default: false
-    },
-    autoZoom: { // 自动缩放适应边界
-      type: Boolean,
-      default: false
-    },
-    single: {
-      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': 'LineString',
-              '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)
-
-      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) {
-      this.$refs.draw.clear() // 先清空画布
-      this.drawUpdate(shp, true)
-      this.edit()
-    }
-  }
-}
-</script>

package/src/package/draw/point.vue

@@ -1,152 +0,0 @@
-<template>
-  <div id="fullScreen"
-       class="full-height relative overflow">
-    <div id="map"
-         class="full-height"></div>
-
-    <draw-tools ref="draw"
-                :list="['point']"
-                :showFullBtn="showFullBtn"
-                :showMoveInput="showMoveInput"
-                @update="drawUpdate"
-                @end="drawUpdate"
-                @clear="clear">
-      <div class="mt-15"
-           style="width: 380px;">
-        <div class="flex">
-          <el-input :value="position.toString()"
-                    size="small"
-                    placeholder="点击地图获取坐标"
-                    readonly
-                    class="full-width margin-right"></el-input>
-          <el-button type="primary"
-                     size="small"
-                     @click="save">保存</el-button>
-        </div>
-        <div class="margin-top font-12"
-             v-if="address && address.formattedAddress">地址：{{address.formattedAddress}}</div>
-      </div>
-    </draw-tools>
-  </div>
-</template>
-
-<script>
-import { mapSdk } from '../../index.js'
-import drawTools from './index.vue'
-import { GeoAddress } from '../../util/gaodeApi.js'
-
-export default {
-  components: {
-    drawTools
-  },
-  props: {
-    config: {
-      type: Object,
-      default: () => { }
-    },
-    geoData: {
-      type: [Object, String],
-      default: ''
-    },
-    lng: {
-      type: [Number, String],
-      default: ''
-    },
-    lat: {
-      type: [Number, String],
-      default: ''
-    },
-    showFullBtn: { // 全屏按钮
-      type: Boolean,
-      default: true,
-    },
-    showMoveInput: { // 移动定位输入框
-      type: Boolean,
-      default: false,
-    }
-  },
-  data () {
-    return {
-      geoJson: '',
-      position: '',
-      address: '',
-    }
-  },
-  watch: {
-    lng () {
-      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.lng && this.lat) {
-        this.geoJson = {
-          'type': 'FeatureCollection',
-          'features': [
-            {
-              'type': 'Feature',
-              'geometry': {
-                'type': 'Point',
-                'coordinates': [this.lng * 1, this.lat * 1]
-              },
-              'properties': {}
-            }
-          ]
-        }
-      } else {
-        this.geoJson = this.geoData
-      }
-      this.drawUpdate(this.geoJson)
-
-      // 开启编辑
-      this.geoJson.features.forEach(item => {
-        this.$refs.draw.drawEdit(item.geometry)
-      })
-    },
-    drawUpdate (data) {
-      this.geoJson = data
-      this.position = data.features[0].geometry.coordinates
-      this.$nextTick(() => {
-        mapSdk.easeTo(this.position)
-        GeoAddress(this.position).then(data => {
-          this.address = data
-        })
-      })
-    },
-    save () {
-      let data = {
-        geoJson: this.geoJson,
-        position: this.position,
-        lng: this.position[0],
-        lat: this.position[1],
-        address: this.address
-      }
-      console.log(data)
-      this.$emit('save', data)
-    },
-    clear () {
-      this.geoJson = ''
-      this.position = ''
-      this.address = ''
-    },
-  }
-}
-</script>