@mapgis/webclient-vue-cesium 10.5.5-1 → 10.5.5-6

package/src/components/Analysis/HeightLimited.vue

@@ -1,19 +1,8 @@
 <template>
-  <div :class="['heightlimited',{ right: position === 'right', left: position === 'left' }]">
-    <div
-        :style="{
-                background: 'rgb(38, 151, 204)',
-                padding: '5px',
-                color: 'white',
-            }"
-        class="card-title"
-    >
-      控高分析
-    </div>
-    <mapgis-3d-draw :vue-key="vueKey" v-on:drawcreate="handleCreate" v-on:load="handleDrawLoad">
-      <mapgis-ui-card class="a-card">
+  <div class="mapgis-widget-heightLimited-analysis">
+    <mapgis-3d-draw :vue-key="vueKey" v-on:drawcreate="handleCreate" v-on:load="handleDrawLoad" :enableControl="enableControl">
         <mapgis-ui-row>
-          <mapgis-ui-col :span="5">分析区域</mapgis-ui-col>
+          <mapgis-ui-col :span="5">分析区域：</mapgis-ui-col>
           <mapgis-ui-col :span="19">
             <mapgis-ui-button @click="drawRectangle">绘制矩形</mapgis-ui-button>
             <mapgis-ui-button style="margin:0 8px" @click="drawPolygon">绘制面</mapgis-ui-button>
@@ -22,7 +11,7 @@
         </mapgis-ui-row>
         <mapgis-ui-row style="padding-top: 10px">
           <mapgis-ui-col :span="5">
-            <span>限制高度</span>
+            <span>限制高度：</span>
           </mapgis-ui-col>
           <mapgis-ui-col :span="10" style="padding-right: 8px">
             <mapgis-ui-slider v-model="heightLimit" :disabled="excavateAn" :max="maxSliderHeight" :min="mindepth" :step="5"
@@ -33,7 +22,6 @@
                             :style="{marginLeft: '16px'}"/>
           </mapgis-ui-col>
         </mapgis-ui-row>
-      </mapgis-ui-card>
     </mapgis-3d-draw>
   </div>
 </template>
@@ -41,16 +29,12 @@
 <script>
 import ServiceLayer from "../UI/Controls/ServiceLayer.js";
 import Mapgis3dDraw from "../UI/Controls/Draw/Draw";
-import {deepEqual} from "../../../../mapboxgl/src/components/util/util";
+import {deepEqual} from "../Utils/deepequal";
 
 export default {
   name: "mapgis-3d-heightlimited",
   mixins: [ServiceLayer],
   props: {
-    position: {
-      type: String,
-      default: "right",
-    },
     vueKey: {
       type: String,
       default: "default"
@@ -74,7 +58,7 @@ export default {
       default: 50
     }
   },
-  components: { Mapgis3dDraw },
+  components: {Mapgis3dDraw},
   inject: ["Cesium", "CesiumZondy", "webGlobe"],
   data() {
     return {
@@ -84,12 +68,20 @@ export default {
       mindepth: 0,
       boundingSphere: "",
       waitManagerName: "M3DIgsManager",
-      cartesianForHeight: []
+      cartesianForHeight: [],
+      enableControl:false
     }
   },
   mounted() {
-    // let vm = this;
-    // vm.$_init(vm.heightLimitedAnalysis);
+    let vm = this;
+    Object.keys(this.$props).forEach(function (key) {
+      if (key!=="vueKey" && key!=="vueIndex"){
+        vm.$watch(key,function () {
+          this.heightLimitedAnalysis();
+        })
+      }
+    })
+    vm.$_init(vm.heightLimitedAnalysis);
   },
   destroyed() {
     this.unmount();
@@ -101,6 +93,27 @@ export default {
           this.heightLimitedAnalysis();
         }
       }
+    },
+    color:{
+      handler(next, old) {
+        if (!deepEqual(next, old)) {
+          this.heightLimitedAnalysis();
+        }
+      }
+    },
+    opacity:{
+      handler(next, old) {
+        if (!deepEqual(next, old)) {
+          this.heightLimitedAnalysis();
+        }
+      }
+    },
+    maxSliderHeight:{
+      handler(next, old) {
+        if (!deepEqual(next, old)) {
+          this.heightLimitedAnalysis();
+        }
+      }
     }
   },
   methods: {
@@ -125,6 +138,8 @@ export default {
     handleDrawLoad(drawer) {
       this.drawer = drawer;
     },
+
+    //绘制组件的回调函数
     handleCreate(cartesian3, lnglat) {
       let vm = this;
       this.drawer && this.drawer.removeEntities(true);
@@ -132,14 +147,19 @@ export default {
       vm.lnglat = lnglat;
       this.heightLimitedAnalysis(lnglat);
     },
+
+    //开始控高分析
     heightLimitedAnalysis(lnglat) {
       const vm = this;
       let {vueKey, vueIndex} = this
       let {heightLimit, CesiumZondy, webGlobe} = this;
       let viewer = webGlobe.viewer;
       let findSource = vm.$_getObject();
+
+      //先判断m3d模型是否加载完成
       if (findSource) {
-        // console.log("findSource.source[0]._root", findSource.source[0]._root);
+
+        //判断分析方式，不通过绘制矩形和绘制面的方式，则lnglat为空，走if,否则绘制方式就走else
         if (!lnglat) {
           let find = CesiumZondy.HeightLimitedAnalysisManager.findSource(vueKey, vueIndex);
           if (find) {
@@ -162,19 +182,17 @@ export default {
             temp[index] = lTemp;
           })
           lnglat = temp;
-          // console.log("lnglat", lnglat);
         }
       }
-      //求相对坐标（笛卡尔）
-      // let localCertesian3 = vm.transformToLocal(cartesian3, findSource);
 
+      //控高分析边界点数组
       let pnts = [];
       for (let i = 0; i < lnglat.length; i++) {
         pnts.push(new Cesium.Cartesian3(lnglat[i].longitude, lnglat[i].latitude, 0));
       }
-      // console.log("pnts", pnts);
       let cesiumColor = Cesium.Color.fromCssColorString(vm.color);
-      // console.log("heightLimit", heightLimit);
+
+      //调用控告分析接口
       var heightLimited = new Cesium.HeightLimited(viewer, {
         height: heightLimit,
         limitedColor: cesiumColor,
@@ -183,7 +201,8 @@ export default {
         polygonColor: Cesium.Color.WHITE.withAlpha(0),
         useOutLine: false
       });
-      webGlobe.addSceneEffect(heightLimited);
+      // webGlobe.addSceneEffect(heightLimited);
+      heightLimited.add();
       CesiumZondy.HeightLimitedAnalysisManager.addSource(
           vm.vueKey,
           vm.vueIndex,
@@ -191,6 +210,7 @@ export default {
           lnglat
       );
     },
+
     transformToLocal(cartesian3, findSource) {
       let localCertesian3 = [];
       let transform = findSource.source[0]._root.transform;
@@ -204,6 +224,8 @@ export default {
       }
       return localCertesian3;
     },
+
+    //根据外包盒子两个点求出四个点
     getAllPoint(southwest, northeast) {
       let p1 = this.degreefromCartesian(southwest);
       let p2 = this.degreefromCartesian(northeast);
@@ -220,6 +242,8 @@ export default {
       let allPoint = [p1, p4, p2, p3];
       return allPoint;
     },
+
+    //绘制方式返回的点坐标是经纬度坐标
     getAllPointByDegree(lnglat1, lnglat2) {
       let p1 = {}, p2 = {}, p3 = {}, p4 = {};
       p1.longitude = lnglat1[0];
@@ -237,6 +261,8 @@ export default {
       let allPoint = [p1, p4, p2, p3];
       return allPoint;
     },
+
+    //根据笛卡尔坐标求出点的经纬度坐标
     degreefromCartesian(p) {
       let point = {};
       let cartographic = Cesium.Cartographic.fromCartesian(p);
@@ -245,6 +271,7 @@ export default {
       point.height = cartographic.height; //模型高度
       return point;
     },
+
     remove() {
       const {vueKey, vueIndex} = this;
       let find = CesiumZondy.HeightLimitedAnalysisManager.findSource(vueKey, vueIndex);
@@ -269,23 +296,11 @@ export default {
   overflow: auto;
 }
 
-.heightlimited.right {
-  /*width: calc(50vw);*/
-  min-width: calc(20vw);
-  max-width: calc(50vw);
-  position: absolute;
-  top: 20px;
-  right: 20px;
+.mapgis-ui-card-bordered{
+  border:unset;
 }
 
-.heightlimited.left {
-  width: calc(50vw);
-  position: absolute;
-  top: 20px;
-  left: 20px;
-}
-
-::v-deep .mapgis-ui-card-body {
+.mapgis-ui-card-body{
   padding: 10px;
 }
 
@@ -296,4 +311,8 @@ export default {
   display: flex;
   padding-right: 5px;
 }
+
+.mapgis-widget-heightLimited-analysis{
+  font-size: 12px;
+}
 </style>

package/src/components/Analysis/ModelFlatten.vue

@@ -52,7 +52,7 @@ export default {
   destroyed() {
     this.clearModelFlatten();
     let find = this.findSource();
-    if (find.source) {
+    if (find && find.source) {
       let tool = find.source;
       tool.destroy();
     }
@@ -92,7 +92,7 @@ export default {
     clearModelFlatten() {
       const { webGlobe } = this;
       let find = this.findSource();
-      if (find.source) {
+      if (find && find.source) {
         let tool = find.source;
 
         let m3d = find.options.m3d;