+ 围栏编辑功能

ruoyi-ui/src/views/bd/fence/index.scss

@@ -0,0 +1,2 @@
+.fence-location-container {
+}

ruoyi-ui/src/views/bd/fence/index.vue

@@ -0,0 +1,188 @@
+<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" />

ruoyi-ui/src/views/bd/index.vue

@@ -2,8 +2,9 @@
   <div class="bd-container">
     <bd-map :loaded="loaded" />
     <div class="header">北斗定位融合</div>
-    <div class="left-container">
+    <div class="left-container" v-if="mapLoaded">
       <location />
+      <fence />
     </div>
     <div class="right-container">
 
@@ -13,23 +14,27 @@
 
 <script>
 
+import Fence from '@/views/bd/fence/index.vue';
 import Location from '@/views/bd/location/index.vue';
 import BdMap from '@/views/bd/map/index.vue';
 
 export default {
   name: 'bd',
   components: {
+    Fence,
     Location,
     BdMap,
   },
   data() {
-    return {};
+    return {
+      mapLoaded: false,
+    };
   },
   created() {
   },
   methods: {
     loaded(map) {
-      console.log(map);
+      this.mapLoaded = true;
     },
   },
 };

ruoyi-ui/src/views/bd/location/index.scss

@@ -1,30 +1,3 @@
-.pannel {
-  width: 100%;
-
-  .pannel-header {
-    width: 100%;
-    height: 40px;
-    padding: 0 10px;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    background: url("./img/bg_main_title_bg.svg") 100% 100% no-repeat;
-    background-size: contain;
-    font-family: PingFangSC-Medium;
-    font-size: 16px;
-    color: #E8F3FF;
-    letter-spacing: 0;
-    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.50);
-    font-weight: 500;
-  }
-
-  .pannel-body {
-    width: 100%;
-    margin-top: 10px;
-  }
-}
-
 .location-list {
   width: 100%;
   padding: 0 10px;
@@ -58,9 +31,3 @@
     }
   }
 }
-
-.over-flow-hidden {
-  white-space: nowrap; //强制文本在一行内输出
-  overflow: hidden; //隐藏溢出部分
-  text-overflow: ellipsis; //对溢出部分加上...
-}

ruoyi-ui/src/views/bd/location/index.vue

@@ -1,7 +1,16 @@
 <template>
-  <div class="devc-location-container pannel">
-    <div class="pannel-header">轨迹查询</div>
-    <div class="pannel-body">
+  <pannel class="devc-location-container">
+    <template v-slot:title>
+      轨迹查询
+    </template>
+    <template v-slot:action>
+      <i
+          class="el-icon-delete-location"
+          title="清空所有轨迹"
+          @click="clearAll"
+      />
+    </template>
+    <template v-slot:content>
       <div class="location-list">
         <div class="list-item">
           <span class="over-flow-hidden" style="width: 40%">
@@ -16,7 +25,7 @@
                 :title="playItem[1]&&playItem[1].play ? '暂停': '开始播放' "
                 @click="()=>onLocationPlay({key:1})"
             />
-            <i class="el-icon-circle-close" title="清空轨迹" @click="clearLocation" />
+            <i class="el-icon-circle-close" title="清空轨迹" @click="()=>clearLocation({key:1})" />
           </span>
         </div>
         <div class="list-item">
@@ -32,23 +41,31 @@
                 :title="playItem[2]&&playItem[2].play ? '暂停': '开始播放' "
                 @click="()=>onLocationPlay({key:2})"
             />
-            <i class="el-icon-circle-close" title="清空轨迹" @click="clearLocation" />
+             <i class="el-icon-refresh-left" title="重播" @click="()=>replayLocation({key:2})" />
+            <i class="el-icon-circle-close" title="清空轨迹" @click="()=>clearLocation({key:2})" />
           </span>
         </div>
       </div>
-    </div>
-  </div>
+    </template>
+  </pannel>
 </template>
 
 <script>
 
+import Pannel from '@/views/bd/pannel/index.vue';
+
 export default {
   name: 'location',
+  components: { Pannel },
   data() {
     return {
       playItem: {},
     };
   },
+  // 组件卸载前清空图层信息
+  beforeDestroy() {
+    this.clearAll();
+  },
   created() {
   },
   methods: {
@@ -57,22 +74,152 @@ export default {
     },
     onLocationPlay({ key }) {
       if (this.playItem[key]) {
+        if (this.playItem[key].play) {
+          bdmap.comp.Trajectory.trajectoryPause(this.playItem[key].line);
+        } else {
+          bdmap.comp.Trajectory.trajectoryPlay(this.playItem[key].line);
+        }
         this.playItem = {
           [key]: {
+            ...this.playItem[key],
             play: !this.playItem[key].play,
           },
         };
       } else {
+        this.clearAll();
         this.playItem = {
           [key]: {
             play: true,
           },
         };
+
+        this.playItem[key].line = this.startPlay();
+      }
+    },
+    startPlay() {
+      const coordinates = [
+        [118.510344073029572, 32.093731676821307],
+        [118.510374370940283, 32.093527573458772],
+        [118.510387650407282, 32.093425544068282],
+        [118.510400982227964, 32.09332669752061],
+        [118.510410732278714, 32.09323744409496],
+        [118.510428221966407, 32.093164015714144],
+        [118.510441867993563, 32.093084266230839],
+        [118.510448612429926, 32.093039617220981],
+        [118.510485058313833, 32.092981880106635],
+        [118.510517293848437, 32.09289554196976],
+        [118.510538155585763, 32.092799789067762],
+        [118.510585136919985, 32.092700541165151],
+        [118.510653765503889, 32.092553283001713],
+        [118.510696483876899, 32.092422251207211],
+        [118.510717502501578, 32.09233604681264],
+        [118.51072719979102, 32.092243610516697],
+        [118.510718674363204, 32.092180042810142],
+        [118.51072858119106, 32.092100337892759],
+        [118.510740969534041, 32.091944200094105],
+        [118.510764731477138, 32.091797477034682],
+        [118.510795499488424, 32.091622019166245],
+        [118.510779024971171, 32.091529895046364],
+        [118.510838861565105, 32.091189345833804],
+        [118.51087340381045, 32.090902421451432],
+        [118.51087812135782, 32.090848246178545],
+        [118.510876016211085, 32.090833945673786],
+        [118.510692239599265, 32.090801119629013],
+        [118.510366127552757, 32.090754073380161],
+        [118.51000060154216, 32.090697945771666],
+        [118.509934963475075, 32.090685994408759],
+        [118.509749422753075, 32.090659554955813],
+        [118.509625833684098, 32.090648294195802],
+        [118.509481838386677, 32.090646826930168],
+        [118.509253799073093, 32.090651136213971],
+        [118.509027812249769, 32.090666562784293],
+        [118.508799929784459, 32.090680419798431],
+        [118.508667360005134, 32.090691549387145],
+        [118.508486159867502, 32.09070166630147],
+        [118.508389082289696, 32.090710781144516],
+        [118.508232158009235, 32.09071901684954],
+        [118.508146087550671, 32.090715266544017],
+        [118.507979371809753, 32.090696559011214],
+        [118.507793883792232, 32.090673299526408],
+        [118.507657000016053, 32.090649461216543],
+        [118.507493997112689, 32.090629117108001],
+        [118.507282154936803, 32.090595028382964],
+        [118.507194110693021, 32.09058493397027],
+        [118.507085424792962, 32.09057030990261],
+        [118.506926239284013, 32.090554694844201],
+        [118.506794937915217, 32.090529197439537],
+        [118.506617084744747, 32.090515395808161],
+        [118.50649331329619, 32.090492991990665],
+        [118.506400000570864, 32.090503652264289],
+        [118.506291863284133, 32.090522447458177],
+        [118.506271075849355, 32.09062297409131],
+        [118.506279384788115, 32.090901429202418],
+        [118.506276335902569, 32.091057455655339],
+        [118.506275574271015, 32.091238922688987],
+        [118.506265256688522, 32.091407769471331],
+        [118.506269834544227, 32.091629762276384],
+        [118.50626926881327, 32.091823164988803],
+        [118.506270044714256, 32.091927414499395],
+        [118.50627274985375, 32.09197831789384],
+        [118.50626805356525, 32.092147893674429],
+        [118.506291184226299, 32.092247102107017],
+        [118.506348259438596, 32.092306909277831],
+        [118.506388235638639, 32.09235020656353],
+        [118.506454214078786, 32.09238284827272],
+        [118.506470221749083, 32.092389820684197],
+        [118.506749994247556, 32.092461304228593],
+        [118.506920765421185, 32.092499065902963],
+        [118.507102910091703, 32.092546242421875],
+        [118.50729442822707, 32.092594898857307],
+        [118.507504248793609, 32.092619461113586],
+        [118.507619120567171, 32.092669029325684],
+        [118.50787825251615, 32.092735980829012],
+        [118.508088648792068, 32.092795553437476],
+        [118.508205495121302, 32.092851464536842],
+        [118.508542138019706, 32.092970018886092],
+        [118.508674228089234, 32.093043257063009],
+        [118.508899947338264, 32.093124930063404],
+        [118.50902011479775, 32.09315533305918],
+        [118.509103364510494, 32.093214827069964],
+        [118.509204785389386, 32.093242269788632],
+        [118.50925201865843, 32.093271949905017],
+      ];
+      let playLine = bdmap.comp.Trajectory.loadTrajectory({
+        mapView: window.map,
+        latlons: coordinates,
+        unitTime: 500,
+        speedValue: 1,
+        mapToCenter: false,
+      });
+      bdmap.comp.Trajectory.trajectoryPlay(playLine);
+      return playLine;
+    },
+    replayLocation({ key }) {
+      if (this.playItem[key] && this.playItem[key].line) {
+        bdmap.comp.Trajectory.trajectoryCancel(this.playItem[key].line);
+        this.playItem[key].play = false;
       }
+
     },
-    clearLocation() {
+    removeLine({ key }) {
+      if (this.playItem[key] && this.playItem[key].line) {
+        bdmap.comp.Trajectory.trajectoryRemove(this.playItem[key].line);
+        delete this.playItem[key];
+      }
 
     },
+    clearAll() {
+      Object.keys(this.playItem).forEach(keyItem => {
+        if (this.playItem[keyItem] && this.playItem[keyItem].line) {
+          this.removeLine({ key: keyItem });
+        }
+      });
+      this.playItem = {};
+    },
+    clearLocation({ key }) {
+      this.removeLine({ key });
+      this.playItem = {};
+    },
   },
 };
 </script>

ruoyi-ui/src/views/bd/pannel/index.scss

@@ -0,0 +1,41 @@
+.pannel {
+  width: 100%;
+
+  .pannel-header {
+    width: 100%;
+    height: 40px;
+    padding: 0 10px;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    background: url("./img/bg_main_title_bg.svg") 100% 100% no-repeat;
+    background-size: contain;
+    font-family: PingFangSC-Medium;
+    font-size: 16px;
+    color: #E8F3FF;
+    letter-spacing: 0;
+    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.50);
+    font-weight: 500;
+
+    > i {
+      margin-left: auto;
+
+      &:hover {
+        color: #00afff;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .pannel-body {
+    width: 100%;
+    margin-top: 10px;
+  }
+}
+
+.over-flow-hidden {
+  white-space: nowrap; //强制文本在一行内输出
+  overflow: hidden; //隐藏溢出部分
+  text-overflow: ellipsis; //对溢出部分加上...
+}

ruoyi-ui/src/views/bd/pannel/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="devc-location-container pannel">
+    <div class="pannel-header">
+      <slot name="title" />
+      <slot name="action" />
+    </div>
+    <div class="pannel-body">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'pannel',
+  data() {
+    return {};
+  },
+  created() {
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" src="./index.scss" />