拉白膜研究实现

src/views/siteselection/components/dkDetails.vue

@@ -41,6 +41,20 @@
               {{ value_field.data }}
             </div>
           </div>
+          <div v-if="title == '三维分析'">
+            <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
+              <el-form-item label="拉膜高度:" prop="height">
+                <el-input
+                  v-model="ruleForm.height"
+                  size="mini"
+                  type="number"
+                  placeholder="请输入地块拉白膜高度"
+                ></el-input>
+                米
+              </el-form-item>
+            </el-form>
+            <el-button type="primary" @click="submit">确 定</el-button>
+          </div>
         </el-collapse-item>
       </el-collapse>
     </div>
@@ -63,14 +77,20 @@ export default {
       collapseList: [],
       loading: true,
       isDateilsShow: false,
+      ruleForm: {},
     };
   },
   methods: {
     show(item, title) {
       this.title = title;
       this.isDateilsShow = true;
+      this.itemObj = item;
       this.getData(item);
     },
+    submit() {
+      this.$emit("pullUp", this.itemObj, this.ruleForm.height);
+    },
+
     getData(item) {
       let formdata = {
         xmmc: "选址调用",

src/views/siteselection/components/xzjg.vue

@@ -114,7 +114,7 @@
         >
       </div>
     </div> -->
-    <dkDetails ref="dkDetails" @mapview="mapview"></dkDetails>
+    <dkDetails ref="dkDetails" @mapview="mapview" @pullUp="pullUp"></dkDetails>
   </div>
 </template>
 
@@ -268,7 +268,7 @@ export default {
     },
 
     // 加载GeoJSON数据
-    loadGeoJSON(geojson, yanse, id) {
+    loadGeoJSON(geojson, yanse, id, height) {
       let fcolor = id
         ? Cesium.Color.fromCssColorString(yanse)
         : Cesium.Color.WHITE;
@@ -284,19 +284,27 @@ export default {
         .then((data) => {
           viewer.dataSources.add(data);
           let entities = data.entities.values;
-          if (!geojson.type.includes("Polygon")) {
-            entities.forEach((value) => {
-              if (value.billboard) {
-                value.billboard = undefined;
-                value.point = {
+          if (!geojson.type.includes("Polygon") || height) {
+            entities.forEach((entity) => {
+              if (entity.billboard) {
+                entity.billboard = undefined;
+                entity.point = {
                   pixelsize: 20,
                   color: Cesium.Color.fromCssColorString(yanse),
                 };
               }
+              if (height && entity.polygon) {
+                entity.polygon.extrudedHeight = height;
+                entity.polygon.material = Cesium.Color.WHITE;
+                entity.polygon.outlineColor = Cesium.Color.BLACK;
+                entity.polygon.outlineWidth = 1.0;
+              }
             });
           }
+          var pitch = height ? -0.8 : 45; // Cesium.Math.toRadians(-45.0);-0.7853981633974483
+          let range = height ? 3000 : 5000;
           viewer.flyTo(data, {
-            offset: new Cesium.HeadingPitchRange(0, -45, 5000),
+            offset: new Cesium.HeadingPitchRange(0, pitch, range),
           });
           // viewer.zoomTo(data);
           if (id) {
@@ -320,7 +328,6 @@ export default {
     },
     //规划信息
     planInfo(e, item) {
-      this.$refs.dkDetails.itemObj = item;
       this.$refs.dkDetails.show(item, "规划信息");
       this.$refs.dkDetails.getCollapseList();
     },
@@ -354,6 +361,10 @@ export default {
       if (!dataSources[item.id])
         this.drawWktPloygon(item.geom, "#ff0000", item.id);
     },
+    pullUp(item, height) {
+      if (!dataSources[item.id])
+        this.loadGeoJSON(parse(item.geom), "#000000", item.id, height);
+    },
 
     submit() {
       console.log("生成报告");