绘制逻辑

src/components/TerrainAnalysis/TerrainCutFillAnalysis/TerrainCutFillAnalysis.vue

@@ -9,8 +9,8 @@
 
     </div>
     <div class="cut_fill_Buttons">
-      <el-button>绘制</el-button>
-      <el-button>清楚</el-button>
+      <el-button @click="draw">绘制</el-button>
+      <el-button @click="clear">清楚</el-button>
 
     </div>
   </div>
@@ -24,7 +24,10 @@ export default {
   components: {},
   data() {
 
-    return { input: '', sharedState: store.state,height:300,result:null };
+    return {
+      input: '', sharedState: store.state, height: 300, result: null,
+      handler_Cut_fill: new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, 0)
+    };
   },
   //监听属性 类似于data概念
   computed: {
@@ -36,18 +39,82 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
-  beforeCreate() { }, //生命周期 - 创建之前
-  created() {
-    console.log(123123);
-    // http://www.supermapol.com/realspace/services/3D-dixingyingxiang/rest/realspace/datas/DatasetDEM
-    // http://192.168.60.3:8099/iserver/services/3D-local3DCache-SanYaDSMHuanCun/rest/realspace/datas/dsm@dsm    
+  methods: {
+    draw() {
+      //绘制多边形
+      const that = this;
+      that.handler_Cut_fill.clear();
+      viewer.scene.globe.removeAllExcavationRegion();
 
+      that.handler_Cut_fill.activeEvt.addEventListener(function (isActive) {
+        if (isActive == true) {
+          viewer.enableCursorStyle = false;
+          viewer._element.style.cursor = '';
+          // $('body').removeClass('drawCur').addClass('drawCur');
+        }
+        else {
+          viewer.enableCursorStyle = true;
+          // $('body').removeClass('drawCur');
+        }
+      });
+      that.handler_Cut_fill.movingEvt.addEventListener(function (windowPosition) {
+        if (windowPosition.x < 200 && windowPosition.y < 150) {
+          tooltip.setVisible(false);
+          return;
+        }
+        if (that.handler_Cut_fill.isDrawing) {
+          tooltip.showAt(windowPosition, '<p>点击确定开挖区域中间点</p><p>右键单击结束绘制,进行开挖</p>');
+        }
+        else {
+          tooltip.showAt(windowPosition, '<p>点击绘制开挖区域第一个点</p>');
+        }
+      });
+      that.handler_Cut_fill.drawEvt.addEventListener(function (result) {
+        if (!result.object.positions) {
+          tooltip.showAt(result, '<p>请绘制正确的多边形</p>');
+          that.handler_Cut_fill.polygon.show = false;
+          that.handler_Cut_fill.polyline.show = false;
+          that.handler_Cut_fill.deactivate();
+          that.handler_Cut_fill.activate();
+          return;
+        };
+        var array = [].concat(result.object.positions);
+        tooltip.setVisible(false);
+        var positions = [];
+        for (var i = 0, len = array.length; i < len; i++) {
+          var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
+          var longitude = Cesium.Math.toDegrees(cartographic.longitude);
+          var latitude = Cesium.Math.toDegrees(cartographic.latitude);
+          var h = cartographic.height;
+          if (positions.indexOf(longitude) == -1 && positions.indexOf(latitude) == -1) {
+            positions.push(longitude);
+            positions.push(latitude);
+            positions.push(h);
+          }
+        }
+        viewer.scene.globe.removeAllExcavationRegion();
+        viewer.scene.globe.addExcavationRegion({
+          name: 'ggg',
+          position: positions,
+          height: 500,
+          transparent: false
+        });
+        that.handler_Cut_fill.polygon.show = false;
+        that.handler_Cut_fill.polyline.show = false;
+        that.handler_Cut_fill.deactivate();
+        // that.handler_Cut_fill.activate();
+      });
+      that.handler_Cut_fill.activate();
+    },
+    clear() {
+      const that = this;
+      that.handler_Cut_fill.clear();
+      viewer.scene.globe.removeAllExcavationRegion();
 
-    // terrainProvider: new Cesium.CesiumTerrainProvider({
-    //   url: 'http://192.168.60.3:8099/iserver/services/3D-local3DCache-SanYaDSMHuanCun/rest/realspace/datas/dsm@dsm',
-    //   isSct: true//地形服务源自SuperMap iServer发布时需设置isSct为true
-    // }),
+    }
+  },
+  beforeCreate() { }, //生命周期 - 创建之前
+  created() {
 
     const terrainP = new Cesium.CesiumTerrainProvider({
       url: 'http://192.168.60.3:8099/iserver/services/3D-local3DCache-SanYaDSMHuanCun/rest/realspace/datas/dsm@dsm',
@@ -58,67 +125,6 @@ export default {
     viewer.scene.globe.depthTestAgainstTerrain = false;
 
 
-    //绘制多边形
-    var handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, 0);
-    handlerPolygon.activeEvt.addEventListener(function (isActive) {
-      if (isActive == true) {
-        viewer.enableCursorStyle = false;
-        viewer._element.style.cursor = '';
-        // $('body').removeClass('drawCur').addClass('drawCur');
-      }
-      else {
-        viewer.enableCursorStyle = true;
-        // $('body').removeClass('drawCur');
-      }
-    });
-    handlerPolygon.movingEvt.addEventListener(function (windowPosition) {
-      if (windowPosition.x < 200 && windowPosition.y < 150) {
-        tooltip.setVisible(false);
-        return;
-      }
-      if (handlerPolygon.isDrawing) {
-        tooltip.showAt(windowPosition, '<p>点击确定开挖区域中间点</p><p>右键单击结束绘制,进行开挖</p>');
-      }
-      else {
-        tooltip.showAt(windowPosition, '<p>点击绘制开挖区域第一个点</p>');
-      }
-    });
-    handlerPolygon.drawEvt.addEventListener(function (result) {
-      if (!result.object.positions) {
-        tooltip.showAt(result, '<p>请绘制正确的多边形</p>');
-        handlerPolygon.polygon.show = false;
-        handlerPolygon.polyline.show = false;
-        handlerPolygon.deactivate();
-        handlerPolygon.activate();
-        return;
-      };
-      var array = [].concat(result.object.positions);
-      tooltip.setVisible(false);
-      var positions = [];
-      for (var i = 0, len = array.length; i < len; i++) {
-        var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
-        var longitude = Cesium.Math.toDegrees(cartographic.longitude);
-        var latitude = Cesium.Math.toDegrees(cartographic.latitude);
-        var h = cartographic.height;
-        if (positions.indexOf(longitude) == -1 && positions.indexOf(latitude) == -1) {
-          positions.push(longitude);
-          positions.push(latitude);
-          positions.push(h);
-        }
-      }
-      viewer.scene.globe.removeAllExcavationRegion();
-      viewer.scene.globe.addExcavationRegion({
-        name: 'ggg',
-        position: positions,
-        height: 500,
-        transparent: false
-      });
-      handlerPolygon.polygon.show = false;
-      handlerPolygon.polyline.show = false;
-      handlerPolygon.deactivate();
-      handlerPolygon.activate();
-    });
-    handlerPolygon.activate();
   }, //生命周期 - 创建完成（可以访问当前this实例）
   beforeMount() { }, //生命周期 - 挂载之前
   mounted() { }, //生命周期 - 挂在完成