ll

liukangdong

2025-02-19 3481edda6666c21253dbf180263b4c91676252d7

ll

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

@@ -1,13 +1,24 @@
<template>
  <GlobalWindow title="绘制地图停车区域" :visible.sync="isShowModal" :confirm-working="isWorking" @confirm="confirm"
    width="1000px">
    <div class="map_title">站点名称 停车区域绘制</div>
    <div id="mapContainer" style="width: 100%; height: calc( 100% - 40px )"></div>
  <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="changeMode">结束绘制</el-button>
        <el-button plain  type="primary" @click="handleAgain">继续绘制</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'
var map // 地图
// var editor // 编辑器
export default {
  components: {
    GlobalWindow
@@ -16,58 +27,104 @@
    return {
      isShowModal: false,
      isWorking: false,

      map: null,
      editor: null,
      polygon: null,
      polygons: [],            // 存储所有绘制的多边形
      selectedPolygon: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    initMap() {
      this.map = new TMap.Map(document.getElementById("mapContainer"), {
        zoom: 14, // 设置地图缩放级别
        center: new TMap.LatLng(30.656964, 104.066186), // 设置地图中心点坐标
      map = new TMap.Map("container", {
        zoom: 15, // 设置地图缩放级别
        center: new TMap.LatLng(31.722763, 117.385480) // 设置地图中心点坐标
      })
      var polygon = new TMap.MultiPolygon({
        map: this.map,
      this.polygon = new TMap.MultiPolygon({
        map: map,
        id: 'polygon',
        selectedStyleId: 'highlight',
        styles: {
          highlight: new TMap.PolygonStyle({
            color: 'rgba(255, 255, 0, 0.6)'
          })
        },
      })
      this.editor = new TMap.tools.GeometryEditor({
        // TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
        map: this.map, // 编辑器绑定的地图对象
        overlayList: [
          // 可编辑图层 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4
          {
            overlay: polygon,
            id: "polygon",
          },
        ],
        map,
        overlayList: [{
          overlay: this.polygon,
          id: 'polygon',
        }],
        actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
        activeOverlayId: this.activeId, // 激活图层
        activeOverlayId: 'polygon', // 激活图层
        snappable: true, // 开启吸附
        selectable: true,
      })
      // 监听绘制结束事件，获取绘制几何图形
      this.editor.on("draw_complete", (geometry) => {
        console.log('所有顶点坐标集合', geometry)
        // 多边形处理
        if (this.activeId === "polygon") {
          console.log("得到顶点经纬度的数组", geometry.paths)

      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
          })
          // console.log('绘制的多边形坐标：', geo[0].paths)
        }
      })
    },
    confirm() { }
    handleAgain() {
      this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW)
    },
    reset() {
      // this.editor.enable()
      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() {
      editor = null
    },
    confirm() {
      this.changeMode()
      const list = this.editor.getOverlayList()[0].overlay.geometries
      console.log('list', list);
      
    }
  }
}
</script>

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

#mapContainer {
  
.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>

 admin/src/views/operation/site.vue

@@ -17,43 +17,34 @@
    <!-- 表格和分页 -->
    <template v-slot:table-wrap>
      <ul class="toolbar" v-permissions="['business:sites:create']">
        <li><el-button type="primary" @click="$refs.operaSitesWindow.open('新建站点')" icon="el-icon-plus" v-permissions="['business:sites:create']">新建</el-button></li>
        <li><el-button type="primary" @click="$refs.operaSitesWindow.open('新建站点')" icon="el-icon-plus"
            v-permissions="['business:sites:create']">新建</el-button></li>
      </ul>
      <el-table
        v-loading="isWorking.search"
        :data="tableData.list"
        stripe
        border
      >
        <el-table-column prop="code" label="站点编号"  :sort-method="(a,b)=>{ return   a.code-b.code}"  sortable min-width="100px" align="center"></el-table-column>
      <el-table v-loading="isWorking.search" :data="tableData.list" stripe border>
        <el-table-column prop="code" label="站点编号" :sort-method="(a, b) => { return a.code - b.code }" sortable
          min-width="100px" align="center"></el-table-column>
        <el-table-column prop="name" label="站点名称" sortable min-width="100px" align="center"></el-table-column>
       
        <el-table-column prop="createTime" label="创建时间" sortable  min-width="100px" align="center"></el-table-column>
        <el-table-column
          v-if="containPermissions(['business:sites:update', 'business:sites:delete'])"
          label="操作"
          min-width="120"
          align="center"
          fixed="right"
        >

        <el-table-column prop="createTime" label="创建时间" sortable min-width="100px" align="center"></el-table-column>
        <el-table-column v-if="containPermissions(['business:sites:update', 'business:sites:delete'])" label="操作"
          min-width="120" align="center" fixed="right">
          <template slot-scope="{row}">
            <el-button type="text" @click="handleDraw(row)">绘制地图区域</el-button>
            <el-button type="text" @click="$refs.operaSitesWindow.open('编辑站点', row)" icon="el-icon-edit" v-permissions="['business:sites:update']">编辑</el-button>
            <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" v-permissions="['business:sites:delete']">删除</el-button>
            <el-button type="text" @click="$refs.operaSitesWindow.open('编辑站点', row)" icon="el-icon-edit"
              v-permissions="['business:sites:update']">编辑</el-button>
            <el-button type="text" @click="deleteById(row)" icon="el-icon-delete"
              v-permissions="['business:sites:delete']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :pagination="tableData.pagination"
      >
      <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination">
      </pagination>
    </template>
    <!-- 新建/修改 -->
    <OperaSitesWindow ref="operaSitesWindow" @success="handlePageChange" />
    <!--  查看二维码  -->
    <AMap v-if="isShowMap" ref="MapRef" />
    <AMap ref="MapRef" />
    <div id="aaa"></div>
  </TableLayout>
</template>

@@ -67,7 +58,7 @@
  name: 'Sites',
  extends: BaseTable,
  components: { TableLayout, Pagination, OperaSitesWindow, AMap },
  data () {
  data() {
    return {
      // 搜索
      searchForm: {
@@ -88,7 +79,7 @@
      isShowMap: false
    }
  },
  created () {
  created() {
    this.config({
      module: '站点信息表',
      api: '/business/sites',
@@ -99,9 +90,10 @@
  },
  methods: {
    handleDraw() {
      this.isShowMap = true
      this.$refs.MapRef.isShowModal = true
      this.$nextTick(() => {
        this.$refs.MapRef.isShowModal = true
        // this.$refs.MapRef.isShowModal = true
        this.$refs.MapRef.initMap()
      })
    }
  }