traffic-eff-backend/ruoyi-ui/src/views/bd/fence/index.vue

<template>
  <pannel class="fence-location-container">
    <template v-slot:title>
      围栏闯禁
    </template>
    <template v-slot:action>
      <i
          class="el-icon-plus"
          title="清空所有轨迹"
          @click="clearAll"
      />
    </template>
    <template v-slot:content>
      <template v-if="!editState">
        <div>

        </div>
      </template>
    </template>
  </pannel>
</template>

<script>

import Pannel from '@/views/bd/pannel/index.vue';
// this.drawtool = new BDLayers.Lib.Tools.CBDrawTool('mytool', this.mapView, 'Rectangle', true); // 绘制矩形，参数1：id，参数2：地图，参数3：绘制类型，参数4：是否可拖拽编辑
// this.drawtool.enable(); // 开始绘制
// this.drawtool.disable(); // 结束绘制
// this.drawtool.clear(); // 清除绘制内容
// this.drawtool.setDrawMode(type); // 设置绘制类型
// this.drawtool.on('drawend', (geom) => {}) // 绘制结束事件
// this.drawtool.on('selectDraw', geom => {}) // 绘制完毕后选择绘制图形
export default {
  name: 'fence',
  components: { Pannel },
  data() {
    return {
      playItem: {},
      editState: false,
      editPolyInfo: {},
    };
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
  },
  created() {
  },
  mounted() {
    this.getFenceList();
  },
  methods: {
    getFenceList() {
      const vlayer = new BDLayers.Lib.Layer.CBVectorLayer('vl');
      window.map.addCustomLayers(vlayer);
      const polygon = new BDLayers.Lib.Overlays.Polygon('p1', {
        coordinates: [
          [
            [118.86318437, 31.52265586],
            [118.86265566, 31.52228823],
            [118.86086721, 31.52109704],
            [118.85828955, 31.51855584],
            [118.85609438, 31.51526213],
            [118.8532821, 31.5110545],
            [118.85176272, 31.5086165],
            [118.85066095, 31.50684702],
            [118.8475185, 31.50462126],
            [118.84380357, 31.50436705],
            [118.84167739, 31.50515526],
            [118.84092182, 31.50623378],
            [118.84056598, 31.50775093],
            [118.84080926, 31.51001804],
            [118.84122597, 31.5112316],
            [118.84243213, 31.51333141],
            [118.84423733, 31.51633511],
            [118.84663359, 31.5190328],
            [118.84861203, 31.52112279],
            [118.85080872, 31.52367],
            [118.85279596, 31.52591382],
            [118.85515677, 31.52739321],
            [118.85829864, 31.52901656],
            [118.86102371, 31.52928225],
            [118.86335805, 31.52894132],
            [118.86548497, 31.52815403],
            [118.86624005, 31.52693407],
            [118.86620514, 31.52541921],
            [118.86520697, 31.52406319],
            [118.86318437, 31.52265586],
          ],
        ],
        symbol: {
          lineColor: '#34495e',
          lineWidth: 2,
          polygonFill: '#1bbc9b',
          polygonOpacity: 0.4,
        },
        labelSymbol: {
          labelText: '多边形',
          labelTextSize: 10,
        },
        bizAttr: {
          name: '围栏名称',
        },
      });
      // 地图绘制工具
      const drawtool = new BDLayers.Lib.Tools.CBDrawTool('myTool', window.map, 'Polygon', true);
      let editingDrawGeom = null;
      //多边形的点击事件
      polygon.on('click', (data) => {
        console.log(data.target.options);
        if (this.editState) {
          return;
        }
        editingDrawGeom = data.target.geometry ? data.target.geometry : data.target.geom
            ? data.target.geom
            : data.target;
        this.$confirm('检测到选中了围栏，请选择操作类型?', '提示', {
          confirmButtonText: '编辑围栏',
          cancelButtonText: '删除围栏',
          type: 'warning',
        }).then(() => {
          // 开始编辑围栏
          this.editState = true;
          editingDrawGeom.startEdit();
        }).catch(() => {
          editingDrawGeom.remove();
          this.editState = false;
          editingDrawGeom = null;
          this.$message({
            type: 'info',
            message: '删除围栏',
          });
        });
        // 点击地图 图形取消编辑状态
        window.map.map.once('click', () => {
          editingDrawGeom.endEdit();

          this.$confirm('检测到未保存的内容，是否保存修改?', '提示', {
            confirmButtonText: '保存',
            cancelButtonText: '放弃修改',
            type: 'warning',
          }).then(() => {
            debugger

            this.$message({
              type: 'success',
              message: '保存!',
            });
            editingDrawGeom = null;
            this.editState = false;
          }).catch(() => {

          });
        });
      });
      vlayer.addGeometry(polygon);
      vlayer.addGeometry(polygon1);
      window.map.flyToPoint([118.86318437, 31.52265586], {
        zoom: 13,
        pitch: 0,
        bearing: 20,
        duration: 5000,
      });

      // 监听图形编辑
      // drawtool.on('selectDraw', geom => {
      //   editingDrawGeom = geom.target.geometry ? geom.target.geometry : geom.target.geom
      //       ? geom.target.geom
      //       : geom.target;
      //   if (editingDrawGeom.isEditing && editingDrawGeom.isEditing()) {
      //     // 点击地图 图形取消编辑状态
      //     window.map.map.once('click', function () {
      //       editingDrawGeom.endEdit();
      //       editingDrawGeom = null;
      //     });
      //   } else {
      //     window.map.map.once('click', function () {
      //       editingDrawGeom = null;
      //     });
      //   }
      // });
    },
    clearAll() {

    },
  },
};
</script>
<style lang="scss" src="./index.scss" />