地图添加测量工具

src/components/supermap-2.5d.vue

@@ -9,6 +9,7 @@
         </div>
         <div class="map-txt" v-html="bindPopupHtml">
         </div>
+        <div id="super2" />
       </div>
     </transition>
     <!--地图top 显示 结束-->
@@ -52,6 +53,10 @@
         timer: null,
         /*************************原地图属性*********************/
         isEditableLayers: false, //绘图控件
+        selOptV: 2, // 贴地量算
+        clampMode: 1, // 空间模式
+        handlerDis: null, // 距离
+        handlerArea: null, // 面积
 
         /*************************原地图属性*********************/
         aac: null,
@@ -69,6 +74,81 @@
     mounted() {},
     props: {},
     methods: {
+      choseMeasuringAreaAll() {
+        if (this.handlerDis != null) {
+          this.handlerDis.clear()
+        }
+        if (this.handlerArea != null) {
+          this.handlerArea.clear()
+        }
+      },
+      //  测量距离
+      choseMeasuringDistance() {
+        let that = this
+        if (that.handlerDis != null) {
+          that.handlerDis.deactivate()
+          that.handlerDis.clear()
+        }
+        //初始化测量距离
+        that.handlerDis = new Cesium.MeasureHandler(that.viewer, Cesium.MeasureMode.Distance, that.clampMode);
+        that.handlerDis.clampMode = 1;
+        //注册测距功能事件
+        that.handlerDis.measureEvt.addEventListener(function(result) {
+          var dis = Number(result.distance);
+          var selOptV = that.selOptV;
+          if (selOptV == 3 || selOptV == 4) {
+            dis = Number(calcClampDistance(positions));
+          };
+          var distance = dis > 1000 ? (dis / 1000).toFixed(2) + 'km' : dis.toFixed(2) + 'm';
+          that.handlerDis.disLabel.text = '距离:' + distance;
+
+        });
+        that.handlerDis.activeEvt.addEventListener(function(isActive) {
+          if (isActive == true) {
+            that.viewer.enableCursorStyle = false;
+            that.viewer._element.style.cursor = '';
+            $('#super2').removeClass('measureCur').addClass('measureCur');
+            that.viewer.scene.pickPointEnabled = false;
+          } else {
+            that.viewer.enableCursorStyle = true;
+            $('#super2').removeClass('measureCur');
+            that.viewer.scene.pickPointEnabled = false;
+          }
+        });
+        that.handlerDis.activate();
+      },
+      // 测量面积
+      choseMeasuringArea() {
+        let that = this
+        if (that.handlerArea != null) {
+          // that.handlerArea.deactivate()
+          that.handlerArea.clear()
+        }
+
+        //初始化测量面积
+        that.handlerArea = new Cesium.MeasureHandler(that.viewer, Cesium.MeasureMode.Area, that.clampMode);
+
+        that.handlerArea.clampMode = 1;
+        that.handlerArea.measureEvt.addEventListener(function(result) {
+          var mj = Number(result.area);
+          var area = mj > 1000000 ? (mj / 1000000).toFixed(2) + 'km²' : mj.toFixed(2) + '㎡'
+          that.handlerArea.areaLabel.text = '面积:' + area;
+        });
+        that.handlerArea.activeEvt.addEventListener(function(isActive) {
+          if (isActive == true) {
+            that.viewer.enableCursorStyle = false;
+            that.viewer._element.style.cursor = '';
+            $('#super2').removeClass('measureCur').addClass('measureCur');
+            that.viewer.scene.pickPointEnabled = false;
+          } else {
+            that.viewer.enableCursorStyle = true;
+            that.viewer._element.style.cursor = '';
+            $('#super2').removeClass('measureCur');
+            that.viewer.scene.pickPointEnabled = false;
+          }
+        });
+        that.handlerArea.activate();
+      },
       mapShow() {
         this.mapshow = false,
           clearInterval(this.timer)

src/components/vBottomMenu.vue

@@ -49,6 +49,20 @@
 						<!-- 	<el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
                         @click.stop="closeChild"></el-button> -->
 					</div>
+          <div v-if="showMeasure && fastMenu.click == 'editableLayers'" class="nav-child">
+            <el-button type="primary"
+                       @click.stop="choseMeasuringDistance"
+                       class="nav-child-btn" plain>测距
+            </el-button>
+            <el-button type="primary"
+                       @click.stop="choseMeasuringArea"
+                       class="nav-child-btn" plain>测面
+            </el-button>
+            <el-button type="primary"
+                       @click.stop="choseMeasuringClear"
+                       class="nav-child-btn" plain>清除
+            </el-button>
+          </div>
 					<!-- 林斑 -->
 					<div v-show="showBanChild && fastMenu.click == 'forestban'" class="nav-child">
 						<div class="forestban">
@@ -423,6 +437,7 @@
 				btmTipIndent: '', //图例收起弹出
 				eventLocationVisible: false,
 				showChild: false,
+      showMeasure: false, //测量工具
 				showBanChild: false, //林斑
 				showChangChild: false, //林场
 				fastMenu: [{
@@ -525,6 +540,19 @@
       this.websockSid.userId=Cookies.get("userId")
     },
     methods: {
+
+    // 测量距离
+    choseMeasuringDistance(){
+      this.$parent.$refs.supermap.choseMeasuringDistance()
+    },
+    // 测量面积
+    choseMeasuringArea(){
+      this.$parent.$refs.supermap.choseMeasuringArea()
+    },
+    // 测量清除
+    choseMeasuringClear(){
+      this.$parent.$refs.supermap.choseMeasuringAreaAll()
+    },
       initWebSocket(wsurl,postName,userId) {
         this.postName=postName
         this.wsurl=wsurl

src/views/atmosphere.vue

@@ -131,7 +131,7 @@ export default {
     showDialog(click) {
       if (click == 'eventLocation') {
         this.$refs.eventLocation.showEventLocation()
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
@@ -139,13 +139,13 @@ export default {
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.supermap.isEditableLayers) {
-          this.$refs.supermap.isEditableLayers = true
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true
         } else {
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
         }
       } else if (click == 'layerSwitching') {
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
         if (!this.$refs.bottomMenu.showChild) {
@@ -155,12 +155,12 @@ export default {
         }
       } else if (click == 'TVWall') {
         this.$refs.TVWall.showTVWall()
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
       } else if (click == 'forestban') {
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showChangChild = false
         if (!this.$refs.bottomMenu.showBanChild) {
@@ -169,7 +169,7 @@ export default {
           this.$refs.bottomMenu.showBanChild = false
         }
       } else if (click == 'forestchang') {
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChild = false
         if (!this.$refs.bottomMenu.showChangChild) {

src/views/datacenter.vue

@@ -187,17 +187,17 @@ export default {
     showDialog(click) {
       if (click == "eventLocation") {
         this.$refs.eventLocation.showEventLocation();
-        this.$refs.supermap.isEditableLayers = false;
+        this.$refs.bottomMenu.showMeasure = false;
         this.$refs.bottomMenu.showChild = false;
       } else if (click == "editableLayers") {
         this.$refs.bottomMenu.showChild = false;
-        if (!this.$refs.supermap.isEditableLayers) {
-          this.$refs.supermap.isEditableLayers = true;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
         } else {
-          this.$refs.supermap.isEditableLayers = false;
+          this.$refs.bottomMenu.showMeasure = false;
         }
       } else if (click == "layerSwitching") {
-        this.$refs.supermap.isEditableLayers = false;
+        this.$refs.bottomMenu.showMeasure = false;
         if (!this.$refs.bottomMenu.showChild) {
           this.$refs.bottomMenu.showChild = true;
         } else {
@@ -205,7 +205,7 @@ export default {
         }
       } else if (click == "TVWall") {
         this.$refs.TVWall.showTVWall();
-        this.$refs.supermap.isEditableLayers = false;
+        this.$refs.bottomMenu.showMeasure = false;
         this.$refs.bottomMenu.showChild = false;
       }
     },

src/views/forest.vue

@@ -1231,7 +1231,7 @@
       showDialog(click) {
         if (click == 'eventLocation') {
           this.$refs.eventLocation.showEventLocation()
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showChild = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChangChild = false
@@ -1239,13 +1239,13 @@
           this.$refs.bottomMenu.showChild = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChangChild = false
-          if (!this.$refs.supermap.isEditableLayers) {
-            this.$refs.supermap.isEditableLayers = true
+          if (!this.$refs.bottomMenu.showMeasure) {
+            this.$refs.bottomMenu.showMeasure = true
           } else {
-            this.$refs.supermap.isEditableLayers = false
+            this.$refs.bottomMenu.showMeasure = false
           }
         } else if (click == 'layerSwitching') {
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChangChild = false
           if (!this.$refs.bottomMenu.showChild) {
@@ -1255,12 +1255,12 @@
           }
         } else if (click == 'TVWall') {
           this.$refs.TVWall.showTVWall()
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showChild = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChangChild = false
         } else if (click == 'forestban') {
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showChild = false
           this.$refs.bottomMenu.showChangChild = false
           if (!this.$refs.bottomMenu.showBanChild) {
@@ -1269,7 +1269,7 @@
             this.$refs.bottomMenu.showBanChild = false
           }
         } else if (click == 'forestchang') {
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChild = false
           if (!this.$refs.bottomMenu.showChangChild) {

src/views/leader.vue

@@ -221,7 +221,7 @@
       showDialog(click) {
         if (click == 'eventLocation') {
           this.$refs.eventLocation.showEventLocation()
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showChild = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChangChild = false
@@ -229,13 +229,13 @@
           this.$refs.bottomMenu.showChild = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChangChild = false
-          if (!this.$refs.supermap.isEditableLayers) {
-            this.$refs.supermap.isEditableLayers = true
+          if (!this.$refs.bottomMenu.showMeasure) {
+            this.$refs.bottomMenu.showMeasure = true
           } else {
-            this.$refs.supermap.isEditableLayers = false
+            this.$refs.bottomMenu.showMeasure = false
           }
         } else if (click == 'layerSwitching') {
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChangChild = false
           if (!this.$refs.bottomMenu.showChild) {
@@ -245,12 +245,12 @@
           }
         } else if (click == 'TVWall') {
           this.$refs.TVWall.showTVWall()
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showChild = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChangChild = false
         } else if (click == 'forestban') {
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showChild = false
           this.$refs.bottomMenu.showChangChild = false
           if (!this.$refs.bottomMenu.showBanChild) {
@@ -259,7 +259,7 @@
             this.$refs.bottomMenu.showBanChild = false
           }
         } else if (click == 'forestchang') {
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChild = false
           if (!this.$refs.bottomMenu.showChangChild) {

src/views/monitor.vue

@@ -314,7 +314,7 @@
         this.$refs.TVWall.showTVWall(tvListJson, [{
           "channelId": channelCode
         }]);
-        this.$refs.supermap.isEditableLayers = false;
+        this.$refs.bottomMenu.showMeasure = false;
         this.$refs.bottomMenu.showChild = false;
         this.$refs.bottomMenu.showBanChild = false;
         this.$refs.bottomMenu.showChangChild = false;
@@ -547,7 +547,7 @@
       showDialog(click) {
         if (click == 'eventLocation') {
           this.$refs.eventLocation.showEventLocation()
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showChild = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChangChild = false
@@ -555,13 +555,13 @@
           this.$refs.bottomMenu.showChild = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChangChild = false
-          if (!this.$refs.supermap.isEditableLayers) {
-            this.$refs.supermap.isEditableLayers = true
+          if (!this.$refs.bottomMenu.showMeasure) {
+            this.$refs.bottomMenu.showMeasure = true
           } else {
-            this.$refs.supermap.isEditableLayers = false
+            this.$refs.bottomMenu.showMeasure = false
           }
         } else if (click == 'layerSwitching') {
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChangChild = false
           if (!this.$refs.bottomMenu.showChild) {
@@ -571,12 +571,12 @@
           }
         } else if (click == 'TVWall') {
           this.$refs.TVWall.showTVWall()
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showChild = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChangChild = false
         } else if (click == 'forestban') {
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showChild = false
           this.$refs.bottomMenu.showChangChild = false
           if (!this.$refs.bottomMenu.showBanChild) {
@@ -585,7 +585,7 @@
             this.$refs.bottomMenu.showBanChild = false
           }
         } else if (click == 'forestchang') {
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
           this.$refs.bottomMenu.showBanChild = false
           this.$refs.bottomMenu.showChild = false
           if (!this.$refs.bottomMenu.showChangChild) {

src/views/pollutionsource.vue

@@ -131,7 +131,7 @@ export default {
     showDialog(click) {
       if (click == 'eventLocation') {
         this.$refs.eventLocation.showEventLocation()
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
@@ -139,13 +139,13 @@ export default {
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.supermap.isEditableLayers) {
-          this.$refs.supermap.isEditableLayers = true
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true
         } else {
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
         }
       } else if (click == 'layerSwitching') {
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
         if (!this.$refs.bottomMenu.showChild) {
@@ -155,12 +155,12 @@ export default {
         }
       } else if (click == 'TVWall') {
         this.$refs.TVWall.showTVWall()
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
       } else if (click == 'forestban') {
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showChangChild = false
         if (!this.$refs.bottomMenu.showBanChild) {
@@ -169,7 +169,7 @@ export default {
           this.$refs.bottomMenu.showBanChild = false
         }
       } else if (click == 'forestchang') {
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChild = false
         if (!this.$refs.bottomMenu.showChangChild) {

src/views/soil.vue

@@ -131,7 +131,7 @@ export default {
     showDialog(click) {
       if (click == 'eventLocation') {
         this.$refs.eventLocation.showEventLocation()
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
@@ -139,13 +139,13 @@ export default {
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.supermap.isEditableLayers) {
-          this.$refs.supermap.isEditableLayers = true
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true
         } else {
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
         }
       } else if (click == 'layerSwitching') {
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
         if (!this.$refs.bottomMenu.showChild) {
@@ -155,12 +155,12 @@ export default {
         }
       } else if (click == 'TVWall') {
         this.$refs.TVWall.showTVWall()
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
       } else if (click == 'forestban') {
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showChangChild = false
         if (!this.$refs.bottomMenu.showBanChild) {
@@ -169,7 +169,7 @@ export default {
           this.$refs.bottomMenu.showBanChild = false
         }
       } else if (click == 'forestchang') {
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChild = false
         if (!this.$refs.bottomMenu.showChangChild) {

src/views/waterquality.vue

@@ -131,7 +131,7 @@ export default {
     showDialog(click) {
       if (click == 'eventLocation') {
         this.$refs.eventLocation.showEventLocation()
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
@@ -139,13 +139,13 @@ export default {
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.supermap.isEditableLayers) {
-          this.$refs.supermap.isEditableLayers = true
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true
         } else {
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showMeasure = false
         }
       } else if (click == 'layerSwitching') {
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
         if (!this.$refs.bottomMenu.showChild) {
@@ -155,12 +155,12 @@ export default {
         }
       } else if (click == 'TVWall') {
         this.$refs.TVWall.showTVWall()
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChangChild = false
       } else if (click == 'forestban') {
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showChild = false
         this.$refs.bottomMenu.showChangChild = false
         if (!this.$refs.bottomMenu.showBanChild) {
@@ -169,7 +169,7 @@ export default {
           this.$refs.bottomMenu.showBanChild = false
         }
       } else if (click == 'forestchang') {
-        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showMeasure = false
         this.$refs.bottomMenu.showBanChild = false
         this.$refs.bottomMenu.showChild = false
         if (!this.$refs.bottomMenu.showChangChild) {