地图添加测量工具

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,7 +53,10 @@
         timer: null,
         /*************************原地图属性*********************/
         isEditableLayers: false, //绘图控件
-
+        selOptV: 2, // 贴地量算
+        clampMode: 1, // 空间模式
+        handlerDis: null, // 距离
+        handlerArea: null, // 面积
         /*************************原地图属性*********************/
         aac: null,
         queryParams: {
@@ -69,6 +73,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">
@@ -438,6 +452,7 @@ export default {
       btmTipIndent: '', //图例收起弹出
       eventLocationVisible: false,
       showChild: false,
+      showMeasure: false, //测量工具
       showBanChild: false, //林斑
       showChangChild: false, //林场
       fastMenu: [
@@ -546,6 +561,18 @@ destroyed() { //离开页面关闭Socket连接
 
   methods: {
 
+    // 测量距离
+    choseMeasuringDistance(){
+      this.$parent.$refs.supermap.choseMeasuringDistance()
+    },
+    // 测量面积
+    choseMeasuringArea(){
+      this.$parent.$refs.supermap.choseMeasuringArea()
+    },
+    // 测量清除
+    choseMeasuringClear(){
+      this.$parent.$refs.supermap.choseMeasuringAreaAll()
+    },
     filterbanNode(value, data) {
       //树搜索
       if (!value) return true

src/views/datacenter.vue

@@ -141,7 +141,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
@@ -149,13 +149,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) {
@@ -165,12 +165,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) {
@@ -179,7 +179,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/forest.vue

@@ -1212,7 +1212,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
@@ -1220,13 +1220,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) {
@@ -1236,12 +1236,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) {
@@ -1250,7 +1250,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/forestDanger.vue

@@ -463,7 +463,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
@@ -471,13 +471,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) {
@@ -487,12 +487,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) {
@@ -501,7 +501,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/leader.vue

@@ -123,7 +123,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
@@ -131,13 +131,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) {
@@ -147,12 +147,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) {
@@ -161,7 +161,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/monitor.vue

@@ -527,7 +527,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
@@ -535,13 +535,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) {
@@ -551,12 +551,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) {
@@ -565,7 +565,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) {