1

MrShi

2025-03-18 a836f03a5d1fbfa81e147d09ffdfa87ba3975c13

 admin/src/views/business/components/Map.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,144 @@
<template>
  <GlobalWindow title="绘制运营区域" :visible.sync="isShowModal" :confirm-working="isWorking" @close="close"
    @confirm="confirm" width="1000px">
    <div class="map_title">绘制：鼠标左键点击及移动即可绘制图形，绘制过程中按下esc键可中断该过程</div>
    <div class="map_title">鼠标左键双击即可结束当前多边形绘制，多边形会自动闭合；</div>
    <div class="map_wrap">
      <div class="btns">
        <el-button plain type="primary" @click="reset">{{ polygons.length > 0 ? '重新绘制' : '开始绘制' }}</el-button>
        <!-- <el-button plain type="primary" @click="changeMode">结束绘制</el-button> -->
        <!-- <el-button plain @click="reset">重新绘制</el-button> -->
        <!-- <el-button plain  type="danger" @click="deleteObj">删除</el-button> -->
      </div>
      <div id="container" style="width: 100%; height: 100%"></div>
    </div>
  </GlobalWindow>
</template>

<script>
import GlobalWindow from '@/components/common/GlobalWindow'
import { Message } from 'element-ui'
var map // åœ°å›¾
// var editor // ç¼–辑器
export default {
  components: {
    GlobalWindow
  },
  data() {
    return {
      isShowModal: false,
      isWorking: false,

      map: null,
      editor: null,
      polygon: null,
      polygons: [],            // å­˜å‚¨æ‰€æœ‰ç»˜åˆ¶çš„多边形
      selectedPolygon: null,
    }
  },
  methods: {
    initMap() {
      map = new TMap.Map("container", {
        zoom: 16, // è®¾ç½®åœ°å›¾ç¼©æ”¾çº§åˆ«
        center: new TMap.LatLng(31.722763, 117.385480) // è®¾ç½®åœ°å›¾ä¸­å¿ƒç‚¹åæ ‡
      })
      var tempList = []
      if (this.polygons.length > 0) {
        tempList = [{ paths: this.polygons.map(item => new TMap.LatLng(item.lat, item.lng)) }]
      }
      this.polygon = new TMap.MultiPolygon({
        map: map,
        id: 'polygon',
        selectedStyleId: 'highlight',
        styles: {
          highlight: new TMap.PolygonStyle({
            color: 'rgba(255, 255, 0, 0.6)'
          })
        },
        geometries: tempList
      })
      this.editor = new TMap.tools.GeometryEditor({
        map,
        overlayList: [{
          overlay: this.polygon,
          id: 'polygon',
        }],
        actionMode: tempList.length > 0 ? TMap.tools.constants.EDITOR_ACTION.INTERACT : TMap.tools.constants.EDITOR_ACTION.DRAW, // ç¼–辑器的工作模式
        activeOverlayId: 'polygon', // æ¿€æ´»å›¾å±‚
        snappable: true, // å¼€å¯å¸é™„
        selectable: true,
      })

      let evtList = ['delete', 'adjust', 'split', 'union']
      evtList.forEach(evtName => {
        this.editor.on(evtName + '_complete', evtResult => {
          // console.log(evtName, evtResult)
        })
      })
      this.editor.on('draw_complete', (geometry) => {
        var id = geometry.id
        if (this.editor.getActiveOverlay().id === 'polygon') {
          var geo = this.polygon.geometries.filter(function (item) {
            return item.id === id
          })
          this.polygons = geo[0].paths
          // console.log('绘制的多边形坐标：', geo[0].paths)
        }
        this.changeMode()
      })
    },
    handleAgain() {
      this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW)
    },
    reset() {
      // this.editor.enable()
      this.polygons = []
      this.polygon.setGeometries([])
      this.polygon.remove('polygon')
      this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW)
    },
    changeMode() {
      this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT)
    },
    deleteObj() {
      this.editor.delete()
    },
    close() {
      this.reset()
      map.destroy()
      this.isShowModal = false
    },
    confirm() {
      const list = this.editor.getOverlayList()[0].overlay.geometries
      if (list.length == 0) return Message.warning('请先绘制运营区域')
      this.isShowModal = false
      this.reset()
      this.$emit('change', list[0].paths)


    }
  }
}
</script>

<style lang="scss" scoped>
.map_title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

.map_wrap {
  width: 100%;
  height: calc(100% - 60px);
  position: relative;

  .btns {
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translate(-50%, 0);
    z-index: 99999999999;
  }
}
</style>