合并中图代码

src/components/Combinations/NightscapeAnalysis/index.js

@@ -25,7 +25,7 @@ const Nightscape = {
   startNight(isNight) {
     let that = this;
     scene.globe.show = true;
-    viewer.scene.hdrEnabled = true;
+    viewer.scene.hdrEnabled = isNight;
     viewer.scene.bloomEffect.show = false;
 
     // 是否开启夜景
@@ -34,6 +34,8 @@ const Nightscape = {
         clearTimeout(this.dgdsq);
       }
 
+
+
       if (scene.layers.find("白天")) scene.layers.find("白天").visible = true;
       if (scene.layers.find("夜晚")) scene.layers.find("夜晚").visible = false;
       scene.sun.show = true;
@@ -46,13 +48,13 @@ const Nightscape = {
       viewer.imageryLayers.remove(this.imageLayer);
       //泛光
       scene.bloomEffect.show = false;
+
     } else {
       scene.sun.show = false;
 
       if (scene.layers.find("白天")) scene.layers.find("白天").visible = false;
       if (scene.layers.find("夜晚")) scene.layers.find("夜晚").visible = true;
 
-      debugger;
       // var layer = scene.layers.find("BaoPo@BaoPo0621N");
       //泛光
       // scene.bloomEffect.show = true;
@@ -60,6 +62,7 @@ const Nightscape = {
       // scene.bloomEffect.threshold = 0.8;
       // scene.hdrEnabled = true;
 
+
       // var p1 = Cesium.Cartesian3.fromDegrees(109.483493671187, 18.2992501184806, 300);
       // var p2 = Cesium.Cartesian3.fromDegrees(109.517609654785, 18.3174247770029, 300);
 
@@ -244,16 +247,23 @@ const Nightscape = {
         for (var i = 0; i < features.length; i++) {
           var element = features[i];
 
-          // if (i % 2 == 0)
-          //   continue;
+
           let p = element.geometry.coordinates;
           var SpotLightPos3 = new Cesium.Cartesian3.fromDegrees(
             p[0],
             p[1],
-            p[2] + window.NightLightUrl.dldg.baseHeight
+            p[2] + NightLightUrl.dldg.baseHeight
           );
+          // var SpotLightPos31 = new Cesium.Cartesian3.fromDegrees(
+          //   p[0],
+          //   p[1],
+          //   p[2]+100
+          // );
           var SpotLightOptions3 = {
+
             cutoffDistance: window.NightLightUrl.dldg.cutoffDistance,
+            // distance:1000,
+            // angle:Math.PI,
             color: new Cesium.Color(
               window.NightLightUrl.dldg.LightColor.r,
               window.NightLightUrl.dldg.LightColor.g,
@@ -264,13 +274,15 @@ const Nightscape = {
             intensity: window.NightLightUrl.dldg.intensity,
           };
 
-          let SpotLight33 = new Cesium.PointLight(
+          let SpotLight3 = new Cesium.PointLight(
             SpotLightPos3,
             // SpotLightPos32,
             SpotLightOptions3
           );
-          scene.addLightSource(SpotLight33);
-          debugger;
+          // let SpotLight33 = new Cesium.SpotLight(SpotLightPos31,SpotLightPos3,SpotLightOptions3)
+
+          scene.addLightSource(SpotLight3);
+
           // var SpotLightPos31 = new Cesium.Cartesian3.fromDegrees(p[0],
           //   p[1],
           //   p[2] + 100)
@@ -352,41 +364,66 @@ const Nightscape = {
         //绿色
         else if (that.tycindex == 1) {
           //绿色
-          colorTable.insert(58, new Cesium.Color(0 / 255, 104 / 255, 0 / 255));
-          colorTable.insert(30, new Cesium.Color(0 / 255, 104 / 255, 0 / 255));
+          colorTable.insert(
+            58,
+            new Cesium.Color(0 / 255, 104 / 255, 0 / 255)
+          );
+          colorTable.insert(
+            30,
+            new Cesium.Color(0 / 255, 104 / 255, 0 / 255)
+          );
           // colorTable.insert(
           //   30,
           //   new Cesium.Color(0 / 255, 232 / 255, 255 / 255)
           // );
         }
-        //蓝色
+        //蓝色     
         else if (that.tycindex == 2) {
-          colorTable.insert(58, new Cesium.Color(3 / 255, 3 / 255, 188 / 255));
-          colorTable.insert(30, new Cesium.Color(3 / 255, 3 / 255, 188 / 255));
+          colorTable.insert(
+            58,
+            new Cesium.Color(3 / 255, 3 / 255, 188 / 255)
+          );
+          colorTable.insert(
+            30,
+            new Cesium.Color(3 / 255, 3 / 255, 188 / 255)
+          );
           // colorTable.insert(
           //   30,
           //   new Cesium.Color(95 / 255, 234 / 255, 106 / 255)
           // );
         }
-        // 紫色
+        // 紫色    
         else if (that.tycindex == 3) {
-          colorTable.insert(58, new Cesium.Color(184 / 255, 5 / 255, 18 / 255));
-          colorTable.insert(30, new Cesium.Color(184 / 255, 5 / 255, 18 / 255));
+          colorTable.insert(
+            58,
+            new Cesium.Color(184 / 255, 5 / 255, 18 / 255)
+          );
+          colorTable.insert(
+            30,
+            new Cesium.Color(184 / 255, 5 / 255, 18 / 255)
+          );
           // colorTable.insert(
           //   30,
           //   new Cesium.Color(95 / 255, 234 / 255, 106 / 255)
           // );
         }
-        //金色
+        //金色 
         else {
-          colorTable.insert(58, new Cesium.Color(86 / 255, 66 / 255, 0 / 255));
-          colorTable.insert(30, new Cesium.Color(115 / 255, 94 / 255, 0 / 255));
+          colorTable.insert(
+            58,
+            new Cesium.Color(86 / 255, 66 / 255, 0 / 255)
+          );
+          colorTable.insert(
+            30,
+            new Cesium.Color(115 / 255, 94 / 255, 0 / 255)
+          );
           // colorTable.insert(
           //   30,
           //   new Cesium.Color(95 / 255, 234 / 255, 106 / 255)
           // );
         }
 
+
         var layer = scene.layers.find("TYCB@BaoPo0621N");
         var hyp = new Cesium.HypsometricSetting();
         hyp.MaxVisibleValue = 58;
@@ -402,6 +439,7 @@ const Nightscape = {
           analysisMode:
             Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL,
           // DisplayMode:Cesium.HypsometricSettingEnum.DisplayMode.FACE_AND_LINE
+
         };
         that.tycindex += 1;
         if (that.tycindex > 4) {
@@ -410,35 +448,42 @@ const Nightscape = {
       }, 1000 * 5);
 
       // //模型图层泛光
-      var layerP = scene.layers.find("BaoPo@BaoPo0621N");
+      var layerP = scene.layers.find(window.NightLightUrl.ghmx);
       // layerP.bloomEffect.enable =true
       // layerP.bloomEffect.speed =3
       // layerP.bloomEffect.period =5
       // layerP.bloomEffect.maxBloomHeight =8
       // layerP.partlyTransparent =true
       layerP.hasLight = true;
-      layerP.bloomEffect.enable = true;
-      layerP.bloomEffect.maxBloomHeight = 1.2;
-      layerP.bloomEffect.period = 2;
-      layerP.bloomEffect.speed = 50;
-      // // layerP.hasWireframe =true;
-      // layerP.style3D.lineWidth = 1.5;
-      // layerP.style3D.lineColor = new Cesium.Color(0 / 255, 255 / 255, 0 / 255, 1);
-      // layerP.style3D.fillStyle = Cesium.FillStyle.Fill_And_WireFrame ;
-      // layerP.wireFrameMode = Cesium.WireFrameType.EffectOutline;
-      // // layerP. wireFrameMode =Cesium.WireFrameType.Quad
+      // layerP.bloomEffect.enable = true;
+      // // layerP.bloomEffect.maxBloomHeight=50
+      // layerP.bloomEffect.period=2;
+      // layerP.bloomEffect.speed =50
+
+      // var layerR = scene.layers.find(window.NightLightUrl.road);
+      // layerR.hasLight = true;
+
+      // layerP. wireFrameMode =Cesium.WireFrameType.Quad 
       // // var s3mpolylineEffect = layerP.effect;
       // // var EffectSetting = s3mpolylineEffect.getEffectSetting();
       // // s3mpolylineEffect.setValue('PolylineType', 0);
       // // s3mpolylineEffect.setValue('Width', 5);
+       console.log(scene.camera)
     }
+
   },
 
   //设置环境光
   switchLight(isDayLight) {
     if (isDayLight) {
       //设置环境光（白天）
-      scene.lightSource.ambientLightColor = new Cesium.Color(0.1, 0.1, 0.1, 1);
+      scene.lightSource.ambientLightColor = new Cesium.Color(
+        0.1,
+        0.1,
+        0.1,
+        1
+      );
+
     } else {
       //设置环境光(夜晚)
       // scene.lightSource.ambientLightColor = new Cesium.Color(34/255, 34/255, 34/255,0.5);
@@ -742,11 +787,11 @@ const Nightscape = {
       });
     });
     //楼顶流动线
-    var liness = [];
+    var liness = []
 
     Cesium.loadJson(window.NightLightUrl.buildTopLine.url).then((jsonData) => {
       debugger;
-      liness = jsonData;
+      liness = jsonData
       jsonData.features.forEach((route) => {
         let list = route.geometry.coordinates.flat(Infinity);
         let topLine = viewer.entities.add({
@@ -754,28 +799,36 @@ const Nightscape = {
           polyline: {
             positions: Cesium.Cartesian3.fromDegreesArrayHeights(list),
             width: window.NightLightUrl.dlzxx.ldxWidth,
-            material: new Cesium.PolylineTrailMaterialProperty({
-              outlineColor: new Cesium.Color(
-                window.NightLightUrl.buildTopLine.ldxOutlineColor.r,
-                window.NightLightUrl.buildTopLine.ldxOutlineColor.g,
-                window.NightLightUrl.buildTopLine.ldxOutlineColor.b,
-                window.NightLightUrl.buildTopLine.ldxOutlineColor.a
-              ),
-              outlineWidth: window.NightLightUrl.dlzxx.ldxOutlineWidth,
-              color: new Cesium.Color(
-                window.NightLightUrl.buildTopLine.ldxColor.r,
-                window.NightLightUrl.buildTopLine.ldxColor.g,
-                window.NightLightUrl.buildTopLine.ldxColor.b,
-                window.NightLightUrl.buildTopLine.ldxColor.a
-              ),
-              trailLength: window.NightLightUrl.buildTopLine.trailLength,
-              period: window.NightLightUrl.buildTopLine.period,
-            }),
+            material: new Cesium.Color(
+              window.NightLightUrl.buildTopLine.ldxColor.r,
+              window.NightLightUrl.buildTopLine.ldxColor.g,
+              window.NightLightUrl.buildTopLine.ldxColor.b,
+              window.NightLightUrl.buildTopLine.ldxColor.a
+            ),
+            // new Cesium.PolylineTrailMaterialProperty({
+            //   outlineColor: new Cesium.Color(
+            //     window.NightLightUrl.buildTopLine.ldxOutlineColor.r,
+            //     window.NightLightUrl.buildTopLine.ldxOutlineColor.g,
+            //     window.NightLightUrl.buildTopLine.ldxOutlineColor.b,
+            //     window.NightLightUrl.buildTopLine.ldxOutlineColor.a
+            //   ),
+            //   outlineWidth: window.NightLightUrl.dlzxx.ldxOutlineWidth,
+            //   color: new Cesium.Color(
+            //     window.NightLightUrl.buildTopLine.ldxColor.r,
+            //     window.NightLightUrl.buildTopLine.ldxColor.g,
+            //     window.NightLightUrl.buildTopLine.ldxColor.b,
+            //     window.NightLightUrl.buildTopLine.ldxColor.a
+            //   ),
+            //   trailLength: window.NightLightUrl.buildTopLine.trailLength,
+            //   period: window.NightLightUrl.buildTopLine.period,
+            // }),
           },
         });
         this.buildTopLines.push(topLine);
       });
     });
+
+
   },
   // changlineColor(){},
 

src/utils/MapHelper/MapHelper.js

@@ -8,7 +8,6 @@ const CTservice = axios.create({
 // 响应拦截器
 CTservice.interceptors.response.use(
   (res) => {
-    debugger;
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 二进制数据则直接返回
@@ -48,7 +47,7 @@ export const mapQuery = async (url, queryObj) => {
 
 /**
  * 墨卡托转经纬度
- * @author JohnLiu 20231116
+ * @author
  * @param {*} x
  * @param {*} y
  * @returns [x,y]
@@ -60,7 +59,7 @@ export const mercator2lonLat = (x, y) => {
 
 /**
  * 经纬度转墨卡托
- * @author JohnLiu 20231116
+ * @author
  * @param {*} x
  * @param {*} y
  * @returns [x,y]
@@ -105,7 +104,7 @@ export const flatten = (arr, children = "children") => {
 };
 
 /**
- * @author JohnLiu 20231010
+ * @author
  * @description 设置地下模式状态
  * @param {*} state
  */
@@ -117,3 +116,38 @@ export const undergroundMode = (state) => {
   }
   // this.scene.undergroundMode = state; //设置开启地下场景
 };
+/**
+ * @namespace   名称：getGroundPoint
+ * @description 作用：根据经纬度（或者墨卡托）获取地面三维坐标
+ * @param {*} lng 经度，
+ * @param {*} lat 纬度，
+ * @returns {Cartesian3} 返回笛卡尔坐标
+ */
+export const getGroundPoint = async (lng, lat, completed) => {
+  if (!lng || !lat) return null;
+  try {
+    debugger;
+    let positions = [Cesium.Cartographic.fromDegrees(lng, lat)];
+    //如果有dem高程，则取dem高程，如果没有，则地图面高度为0
+    if (viewer.terrainProvider) {
+      var promise = Cesium.sampleTerrainMostDetailed(
+        viewer.terrainProvider,
+        positions
+      );
+      const resultP = await Promise.resolve(promise);
+      if (resultP && resultP.length > 0) {
+        let myP = new Cesium.Cartesian3.fromDegrees(
+          lng,
+          lat,
+          resultP[0].height
+        );
+        return myP;
+      }
+    }
+  } catch (error) {
+    return null;
+  }
+
+  let myP = Cesium.Cartesian3.fromDegrees(lng, lat, 0);
+  return myP;
+};

src/views/ConstructionApplication3D/BenchmarkLandPriceAnalysis/BenchmarkLandPrice.vue

@@ -16,7 +16,7 @@
           style="height: 100%"
           @tab-click="handleClick"
         >
-          <el-tab-pane label="拆迁补偿预估" name="first">
+          <el-tab-pane label="基准地价分析" name="first">
             <el-form
               ref="ruleForm"
               :model="form"
@@ -28,46 +28,19 @@
                   <el-input size="mini" v-model="form.ProjectName"></el-input>
                 </el-col>
               </el-form-item>
-              <el-form-item label="项目类型" size="mini" prop="ProjectType">
+              <!-- <el-form-item label="项目类型" size="mini" prop="ProjectType">
                 <el-col :span="20">
-                  <!-- <el-select
-                    v-model="form.ProjectType"
-                    placeholder="请选择土地用途"
-                    clearable
-                    @change="handleChange"
-                  >
-                    <el-option
-                      v-for="dict in zt_jzdj_LandUse"
-                      :key="dict.value"
-                      :label="dict.label"
-                      :value="dict.value"
-                    />
-                  </el-select> -->
-                  <!-- <el-cascader
-                    placeholder="请选择土地用途"
-                    v-model="form.ProjectType"
-                    :options="landUseNatureRelation"
-                    :show-all-levels="false"
-                    clearable
-                    @change="handleChange"
-                    :props="{
-                      value: 'tdyt',
-                      label: 'tdyt',
-                      children: 'children',
-                      emitPath: false,
-                    }"
-                  ></el-cascader> -->
                   <el-input size="mini" v-model="form.ProjectType"></el-input>
                 </el-col>
-              </el-form-item>
+              </el-form-item> -->
               <el-form-item label="选址范围" size="mini" prop="ProjectScope">
                 <el-col :span="20">
                   <input @change="handleUpload" type="file" style="display:none" id="fileInput" accept=".zip"></input>
-            <el-button type="primary" @click="inputGeometry">导入范围</el-button>
+                  <el-button type="primary" @click="inputGeometry">导入范围</el-button>
                   <!-- <el-button type="primary">导入范围</el-button> -->
                   <el-button type="primary" @click="getProjectScope"
-                    >绘制范围</el-button
-                  >
+                    >绘制范围
+                  </el-button>
                 </el-col>
               </el-form-item>
               <el-form-item

src/views/ConstructionApplication3D/BenchmarkLandPriceAnalysis/jzdjfxsmjg.vue

@@ -3,171 +3,177 @@
     class="ZTGlobal"
     style="width: 100%; padding: 1rem 1rem 0rem 1rem; color: white"
   >
-    <el-row :gutter="10" style="display: flex; align-items: center">
-      <el-col :span="18">
-        {{ info.BenchmarkLandPrice.ProjectName }}
-      </el-col>
-      <el-col :span="6">
-        <el-button size="mini" type="default" @click="handleGetBG"
-          >导出报告</el-button
-        >
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="10">
-      <el-col :span="12">
-        <el-row :gutter="10" class="container_center">
-          <el-col
-            :span="8"
-            class="container_center"
-            style="
-              height: 3rem;
-              background-color: rgba(2, 167, 240, 1);
-              border-radius: 6px;
-            "
-          >
-            <i style="font-size: 2rem" class="el-icon-office-building"></i>
+    <el-container style="height: 100%">
+      <el-header height="12rem">
+        <el-row :gutter="10" style="display: flex; align-items: center">
+          <el-col :span="18">
+            {{ info.BenchmarkLandPrice.ProjectName }}
           </el-col>
-          <el-col
-            :span="16"
-            class="container_center"
-            style="justify-content: flex-start"
-          >
-            <div class="con-col" style="align-items: flex-start">
-              <a style="color: white">分析总范围（亩）</a>
-              <a style="font-weight: bold; color: rgba(2, 167, 240, 1)">{{
-                Number(
-                  info.BenchmarkLandPrice.AnalysisResults.analysisArea
-                ).toFixed(2)
-              }}</a>
-            </div>
+          <el-col :span="6">
+            <el-button size="mini" type="default" @click="handleGetBG"
+              >导出报告</el-button
+            >
           </el-col>
         </el-row>
-      </el-col>
-      <el-col :span="12">
-        <el-row :gutter="10" class="container_center">
-          <el-col
-            :span="8"
-            class="container_center"
-            style="
-              height: 3rem;
-              background-color: rgba(2, 167, 240, 1);
-              border-radius: 6px;
-            "
-          >
-            <i style="font-size: 2rem" class="el-icon-bank-card"></i>
+
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-row :gutter="10" class="container_center">
+              <el-col
+                :span="8"
+                class="container_center"
+                style="
+                  height: 3rem;
+                  background-color: rgba(2, 167, 240, 1);
+                  border-radius: 6px;
+                "
+              >
+                <i style="font-size: 2rem" class="el-icon-office-building"></i>
+              </el-col>
+              <el-col
+                :span="16"
+                class="container_center"
+                style="justify-content: flex-start"
+              >
+                <div class="con-col" style="align-items: flex-start">
+                  <a style="color: white">分析总范围（亩）</a>
+                  <a style="font-weight: bold; color: rgba(2, 167, 240, 1)">{{
+                    Number(
+                      info.BenchmarkLandPrice.AnalysisResults.analysisArea
+                    ).toFixed(2)
+                  }}</a>
+                </div>
+              </el-col>
+            </el-row>
           </el-col>
-          <el-col
-            :span="16"
-            class="container_center"
-            style="justify-content: flex-start"
-          >
-            <div class="con-col" style="align-items: flex-start">
-              <a style="color: white">总地价（万元）</a>
-              <a style="font-weight: bold; color: rgba(2, 167, 240, 1)">{{
-                Number(
-                  info.BenchmarkLandPrice.AnalysisResults.totalLandPrice
-                ).toFixed(2)
-              }}</a>
-            </div>
+          <el-col :span="12">
+            <el-row :gutter="10" class="container_center">
+              <el-col
+                :span="8"
+                class="container_center"
+                style="
+                  height: 3rem;
+                  background-color: rgba(2, 167, 240, 1);
+                  border-radius: 6px;
+                "
+              >
+                <i style="font-size: 2rem" class="el-icon-bank-card"></i>
+              </el-col>
+              <el-col
+                :span="16"
+                class="container_center"
+                style="justify-content: flex-start"
+              >
+                <div class="con-col" style="align-items: flex-start">
+                  <a style="color: white">总地价（万元）</a>
+                  <a style="font-weight: bold; color: rgba(2, 167, 240, 1)">{{
+                    Number(
+                      info.BenchmarkLandPrice.AnalysisResults.totalLandPrice
+                    ).toFixed(2)
+                  }}</a>
+                </div>
+              </el-col>
+            </el-row>
           </el-col>
         </el-row>
-      </el-col>
-    </el-row>
-    <el-row :gutter="10">
-      <el-col :span="12">
-        <el-row :gutter="10" class="container_center">
-          <el-col
-            :span="8"
-            class="container_center"
-            style="
-              height: 3rem;
-              background-color: rgba(2, 167, 240, 1);
-              border-radius: 6px;
-            "
-          >
-            <i style="font-size: 2rem" class="el-icon-discount"></i>
-          </el-col>
-          <el-col
-            :span="16"
-            class="container_center"
-            style="justify-content: flex-start"
-          >
-            <div class="con-col" style="align-items: flex-start">
-              <a style="color: white">计算地价面积</a>
-              <a style="color: white">（亩）</a>
-              <a style="font-weight: bold; color: rgba(2, 167, 240, 1)">{{
-                Number(
-                  info.BenchmarkLandPrice.AnalysisResults.ParticipationArea
-                ).toFixed(2)
-              }}</a>
-            </div>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-row :gutter="10" class="container_center">
+              <el-col
+                :span="8"
+                class="container_center"
+                style="
+                  height: 3rem;
+                  background-color: rgba(2, 167, 240, 1);
+                  border-radius: 6px;
+                "
+              >
+                <i style="font-size: 2rem" class="el-icon-discount"></i>
+              </el-col>
+              <el-col
+                :span="16"
+                class="container_center"
+                style="justify-content: flex-start"
+              >
+                <div class="con-col" style="align-items: flex-start">
+                  <a style="color: white">计算地价面积</a>
+                  <a style="color: white">（亩）</a>
+                  <a style="font-weight: bold; color: rgba(2, 167, 240, 1)">{{
+                    Number(
+                      info.BenchmarkLandPrice.AnalysisResults.ParticipationArea
+                    ).toFixed(2)
+                  }}</a>
+                </div>
+              </el-col>
+            </el-row>
           </el-col>
         </el-row>
-      </el-col>
-    </el-row>
-    <el-row :gutter="10">
-      <el-col :span="24">
-        <div id="echartFGY" ref="echartFGY" class="EchartsWH">
-          <div
-            id="GYEcharts"
-            ref="GYEcharts"
-            :style="{ width: '100%', height: '100%' }"
-          ></div>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="10">
-      <el-col :span="24" style="height: 25rem">
-        <el-table
-          :data="tableData"
-          :span-method="objectSpanMethod"
-          border
-          height="100%"
-          style="width: 100%; margin-top: 20px"
-        >
-          <el-table-column prop="dkbm" label="地块编码"> </el-table-column>
-          <el-table-column prop="ghyt" label="地类名称"> </el-table-column>
+      </el-header>
+      <el-main>
+        <el-tabs v-model="activeName" class="full-height">
+          <el-tab-pane label="总体情况" name="first" style="height: 100%">
+            <div id="echartFGY" ref="echartFGY" class="EchartsWH">
+              <div
+                id="GYEcharts"
+                ref="GYEcharts"
+                :style="{ width: '100%', height: '100%' }"
+              ></div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="地块详情" name="second" style="height: 100%">
+            <el-table
+              :data="tableData"
+              :span-method="objectSpanMethod"
+              border
+              height="100%"
+              style="width: 100%"
+              @row-click="rowClick"
+            >
+              <el-table-column prop="dkbm" label="地块编码"> </el-table-column>
+              <el-table-column prop="ghyt" label="地类名称"> </el-table-column>
+
+              <el-table-column prop="area" align="center">
+                <template slot="header">
+                  <div>占用面积</div>
+                  <div>（亩）</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.area }}</span>
+                </template>
+              </el-table-column>
 
-          <el-table-column prop="area" align="center">
-            <template slot="header">
-              <div>面积</div>
-              <div>（亩）</div>
-            </template>
-            <template slot-scope="scope">
-              <span>{{ scope.row.area }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="area" align="center">
-            <template slot="header">
-              <div>面积</div>
-              <div>（亩）</div>
-            </template>
-            <template slot-scope="scope">
-              <span>{{ scope.row.area }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="dj" align="center">
-            <template slot="header">
-              <div>单价</div>
-              <div>（万元）</div>
-            </template>
-            <template slot-scope="scope">
-              <span>{{ scope.row.dj }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="zdj" align="center">
-            <template slot="header">
-              <div>总地价</div>
-              <div>（万元）</div>
-            </template>
-            <template slot-scope="scope">
-              <span>{{ scope.row.dj }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="tdjb" label="土地级别"> </el-table-column>
-        </el-table> </el-col
-    ></el-row>
+              <el-table-column prop="tdjb" align="center">
+                <template slot="header">
+                  <div>土地</div>
+                  <div>级别</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.tdjb }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="dj" align="center">
+                <template slot="header">
+                  <div>单价</div>
+                  <div>（万元）</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.dj }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="zdj" align="center">
+                <template slot="header">
+                  <div>总地价</div>
+                  <div>（万元）</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.dj }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+      </el-main>
+    </el-container>
   </div>
 </template>
 <script>
@@ -182,9 +188,15 @@ export default {
 
       //点查entities事件
       getEntitiesHandler: {},
-
+      /**
+       * tabs 标签
+       */
+      activeName: "first",
       GYmyChart: null,
       JTmyChart: null,
+      Interval: null,
+      entitieid: "",
+      Interval: null,
     };
   },
   props: {
@@ -227,6 +239,21 @@ export default {
   },
   methods: {
     async init() {
+      // 设置用地类型图层颜色
+      let ghyts = [];
+      this.info.BenchmarkLandPrice.AnalysisResults.ghdkDetailedDjList.forEach(
+        (ghdkDetailedDj) => {
+          if (!ghyts[ghdkDetailedDj.ghyt]) {
+            ghyts[ghdkDetailedDj.ghyt] = this.getLandColor(ghdkDetailedDj.ghyt);
+          }
+        }
+      );
+      this.info.BenchmarkLandPrice.AnalysisResults.ghdkDetailedDjList.forEach(
+        (ghdkDetailedDj) => {
+          ghdkDetailedDj.ColorString = ghyts[ghdkDetailedDj.ghyt];
+        }
+      );
+
       this.initEntitiesHandler();
       this.DrawScope();
       this.initTable();
@@ -275,9 +302,7 @@ export default {
             startindex = endindex;
           }
 
-          let col = Cesium.Color.fromCssColorString(
-            this.getLandColor(ghdkDetailedDj.ghyt)
-          );
+          let col = Cesium.Color.fromCssColorString(ghdkDetailedDj.ColorString);
           if (point3ds.length > 0 && pointholes.length > 0) {
             let holes = [];
             pointholes.forEach((hole) => {
@@ -330,7 +355,8 @@ export default {
           },
         });
       } else {
-        this.$message.error("请在传入分析范围");
+        // this.$message.error("请在传入分析范围");
+        console.log("未传入分析范围");
       }
     },
 
@@ -352,19 +378,23 @@ export default {
           if (ghdkDetailedDj.zytdList.length > 0) {
             ghdkDetailedDj.zytdList.forEach((zytd) => {
               let row = {
+                ColorString: ghdkDetailedDj.ColorString,
                 dkbm: ghdkDetailedDj.dkbm,
                 ghyt: ghdkDetailedDj.ghyt,
                 area: zytd.area.toFixed(2),
                 dj: zytd.dj.toFixed(2),
                 tdjb: zytd.tdjb,
                 zdj: zytd.zdj.toFixed(2),
+                ghdkDetailedDjid: ghdkDetailedDj.id,
               };
               this.tableData.push(row);
             });
           } else {
             let row = {
+              ColorString: ghdkDetailedDj.ColorString,
               dkbm: ghdkDetailedDj.dkbm,
               ghyt: ghdkDetailedDj.ghyt,
+              ghdkDetailedDjid: ghdkDetailedDj.id,
             };
             this.tableData.push(row);
           }
@@ -372,10 +402,11 @@ export default {
       );
     },
     objectSpanMethod({ rowIndex, columnIndex }) {
-      if (columnIndex === 0) {
+      debugger;
+      if (columnIndex === 0 || columnIndex === 1) {
         let _row = this.spanArray[rowIndex];
         let _col = _row > 0 ? 1 : 0;
-        console.log(`{rowspan: ${_row}, colspan: ${_col}}`);
+        // console.log(`{rowspan: ${_row}, colspan: ${_col}}`);
         // 打印结果
         // {rowspan: 3, colspan: 1}
         // {rowspan: 0, colspan: 0}
@@ -395,6 +426,53 @@ export default {
         };
       }
     },
+    rowClick(row) {
+      let that = this;
+      debugger;
+      if (that.Interval) {
+        clearInterval(that.Interval);
+        that.Interval = null;
+      }
+
+      if (that.entitieid != "") {
+        var entitie = viewer.entities.getById(that.entitieid);
+        let ghdkDetailedDj =
+          this.info.BenchmarkLandPrice.AnalysisResults.ghdkDetailedDjList.find(
+            (c) => c.id == that.entitieid
+          );
+        let col = Cesium.Color.fromCssColorString(
+          ghdkDetailedDj.ColorString
+        ).withAlpha(0.4);
+        entitie.polygon.material = col;
+        that.entitieid = "";
+      }
+      if (row) {
+        that.entitieid = row.ghdkDetailedDjid;
+        that.Interval = setInterval(function () {
+          var entitie = viewer.entities.getById(that.entitieid);
+          if (entitie.polygon.material.color.getValue().alpha == 0.4) {
+            entitie.polygon.material = new Cesium.Color(
+              3 / 255,
+              240 / 255,
+              248 / 255,
+              1
+            );
+          } else {
+            entitie.polygon.material = new Cesium.Color(
+              3 / 255,
+              240 / 255,
+              248 / 255,
+              0.4
+            );
+          }
+        }, 1000);
+
+        var entitie = viewer.entities.getById(that.entitieid);
+        if (entitie) {
+          viewer.flyTo(entitie, { maximumHeight: 30 });
+        }
+      }
+    },
 
     /**
      * 点击弹窗显示图斑信息
@@ -452,8 +530,12 @@ export default {
      * 打印分析报告
      */
     async handleGetBG() {
-      if (this.BenchmarkLandPrice) {
-        await getJZDJWord(this.BenchmarkLandPrice);
+      if (
+        this.info.BenchmarkLandPrice &&
+        this.info.BenchmarkLandPrice.AnalysisResults
+      ) {
+        debugger;
+        await getJZDJWord(this.info.BenchmarkLandPrice.AnalysisResults);
       }
     },
 
@@ -484,6 +566,12 @@ export default {
       window.colorList.forEach((element) => {
         if (element.name.indexOf(name) > -1) color = element.color;
       });
+      if (color == "rgb(172,255,207)") {
+        const r = Math.floor(Math.random() * 256);
+        const g = Math.floor(Math.random() * 256);
+        const b = Math.floor(Math.random() * 256);
+        color = `rgb(${r}, ${g}, ${b})`;
+      }
       return color;
     },
     /**
@@ -504,24 +592,25 @@ export default {
         }
 
         datas.push({
+          area: Number(element.area.toFixed(2)),
           value: Number(element.zdj.toFixed(2)),
           name: element.ghyt,
         });
-        color = that.getLandColor(element.ghyt);
+        color = element.ColorString;
         colors.push(color);
       });
 
       var option = {
         tooltip: {
           trigger: "item",
-          formatter: "{a} <br/>{b} : {c} ({d}%)",
+          formatter: "{a} <br/>{b} : {c}万元 ({d}%)",
         },
         legend: {
           type: "scroll",
           orient: "vertical",
           right: 0,
-          top: 20,
-          bottom: 20,
+          top: "center",
+          // bottom: 20,
           radius: "55%",
           textStyle: {
             // fontSize: '12px',
@@ -532,7 +621,7 @@ export default {
           },
           data: datas.map((t) => t.name),
           formatter: function (name) {
-            var val = datas.find((t) => t.name == name).value;
+            var thisdata = datas.find((t) => t.name == name);
 
             let lab = "";
             // 遍历输入字符串的每个字符
@@ -548,7 +637,15 @@ export default {
             if (name.length % 4 != 0) {
               lastSpace += "   ".repeat(4 - (name.length % 4));
             }
-            return lab + lastSpace + val + "万元";
+            return (
+              lab +
+              lastSpace +
+              "\n" +
+              thisdata.area +
+              "亩" +
+              thisdata.value +
+              "万元"
+            );
           },
         },
         color: colors, // ['#0a915d', '#bb88dd', '#6699ff', '#d5b158', '#ff6347', 'indigo', 'purple'],
@@ -593,12 +690,20 @@ export default {
       const groupedData = data.reduce((accumulator, currentValue) => {
         // 如果累加器（accumulator）中没有这个分组，就添加它
         if (!accumulator[currentValue.ghyt]) {
-          accumulator[currentValue.ghyt] = { ghyt: currentValue.ghyt, zdj: 0 };
+          accumulator[currentValue.ghyt] = {
+            ghyt: currentValue.ghyt,
+            zdj: 0,
+            area: 0,
+            ColorString: currentValue.ColorString,
+          };
         }
         // 将当前对象的b值累加到对应分组上
         accumulator[currentValue.ghyt].zdj += Number(
           currentValue.zdj ? currentValue.zdj : 0
         );
+        accumulator[currentValue.ghyt].area += Number(
+          currentValue.area ? currentValue.area : 0
+        );
         // 返回累加器，以便下一次迭代使用
         return accumulator;
       }, {});
@@ -611,6 +716,10 @@ export default {
     },
   },
   beforeDestroy() {
+    if (this.Interval) {
+      clearInterval(this.Interval);
+      this.Interval = null;
+    }
     if (this.getEntitiesHandler) {
       this.getEntitiesHandler.removeInputAction(
         Cesium.ScreenSpaceEventType.LEFT_CLICK
@@ -650,6 +759,13 @@ export default {
 }
 .EchartsWH {
   width: 100%;
-  height: 18rem;
+  height: 100%;
+}
+.full-height {
+  height: 100%; /* 适应父容器的高度 */
+  .el-tabs__content {
+    height: calc(100% - 55px); /* 计算内容区域的高度 */
+    overflow-y: auto; /* 滚动条 */
+  }
 }
 </style>

src/views/ConstructionApplication3D/Demolition/DemolitionList.vue

@@ -1071,6 +1071,9 @@ export default {
       this.zdList = window.ZSBC.ZDBCList;
       this.cqList = window.ZSBC.CQBCList;
       this.qmList = window.ZSBC.QMBCList;
+      this.ruleForm.qmValue= this.qmList[0].value
+      this.ruleForm.cqValue= this.cqList[0].value
+      this.ruleForm.zdValue= this.zdList[0].value
     },
     //关闭窗体
     dialogClose() {
@@ -1299,7 +1302,7 @@ export default {
      * 征地权属切换
      */
     qsClick(tab, event) {
-      viewer.entities.removeAll()
+      // viewer.entities.removeAll()
     },
     handlePreview(file) { },
     handleRemove(file, fileList) { },

src/views/ConstructionApplication3D/Demolition/ZDShowInfo.vue

@@ -22,7 +22,7 @@
     <el-row class="subtitle">
       <el-col :span="12">统一年产值</el-col>
     </el-row>
-    <el-row>
+    <el-row style="display: flex; align-items: center">
       <el-col :span="6">土地年产值：</el-col>
       <el-col :span="16"
         ><el-input

src/views/ConstructionApplication3D/RSAnalysis/RSAnalysis.vue

@@ -1,13 +1,40 @@
 <template>
-  <div class="ZTGlobal" style="width: 100%; padding: 1rem 1rem 0rem 1rem; color: white">
+  <div
+    class="ZTGlobal"
+    style="width: 100%; padding: 1rem 1rem 0rem 1rem; color: white"
+  >
     <el-row :gutter="10">
-      <el-col :span="6"><el-button size="mini" type="default" @click="getGCZ">添加观察点</el-button>
+      观察者高度(米):
+      <el-input-number
+        size="small"
+        label="观察者高度:"
+        min="0"
+        max="50"
+        :step="0.5"
+        precision="1"
+        v-model="personH"
+      ></el-input-number>
+    </el-row>
+    <el-row :gutter="10">
+      <el-col :span="6"
+        ><el-button size="mini" type="default" @click="addGCD"
+          >添加观察点</el-button
+        >
+      </el-col>
+      <el-col :span="6"
+        ><el-button size="mini" type="default" @click="addTagget"
+          >添加目标点</el-button
+        >
       </el-col>
       <el-col :span="5.5">
-        <el-button size="mini" type="default">切换视角</el-button>
+        <el-button size="mini" type="default" @click="changeView"
+          >切换视角</el-button
+        >
       </el-col>
       <el-col :span="4">
-        <el-button size="mini" type="default" @click="clearScope">清除</el-button>
+        <el-button size="mini" type="default" @click="clearScope"
+          >清除</el-button
+        >
       </el-col>
     </el-row>
   </div>
@@ -20,13 +47,18 @@ import {
   mercator2lonLat,
   undergroundMode,
 } from "@/utils/MapHelper/MapHelper.js";
-import { point, distance } from "@turf/turf";
-let handlerLine = null; //绘制线
+// import { point, distance } from "@turf/turf";
+let handlerPoint = null; //绘制线
+var sightline;
 export default {
   data() {
     return {
       tooltip: createTooltip(document.body),
       points: [],
+      addViewFlag: false, //当前点击状态是否是 添加观察点
+      addTargetFlag: false, //当前点击状态是否是 添加目标点,
+      personH: 1.8,
+      isFrom2To: true,
     };
   },
   props: {
@@ -54,356 +86,233 @@ export default {
     },
   },
   computed: {},
-  mounted() { },
+  mounted() {
+    sightline = new Cesium.Sightline(scene);
+    sightline.lin;
+    handlerPoint = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
+    scene.undergroundMode = false;
+  },
   methods: {
-    getGCZ() {
+    /**
+     * 添加观察点
+     */
+    addGCD() {
       let that = this;
-      that.clearScope();
-      handlerLine = new Cesium.DrawHandler(
-        viewer,
-        Cesium.DrawMode.Line,
-        Cesium.ClampMode.Space
-      );
-      handlerLine.activate();
-      handlerLine.activeEvt.addEventListener(function (isActive) {
-        if (isActive == true) {
-          // viewer.enableCursorStyle = false;
-          // viewer._element.style.cursor = "";
-          document.body.classList.add("drawCur");
-        } else {
-          // viewer.enableCursorStyle = true;
-          document.body.classList.remove("drawCur");
-        }
-      });
-      handlerLine.movingEvt.addEventListener((windowPosition) => {
-        that.tooltip.showAt(
-          windowPosition,
-          "<p>点击鼠标左键开始绘制分析视角,右键结束</p>"
-        );
-      });
-      handlerLine.drawEvt.addEventListener((result) => {
-        that.tooltip.setVisible(false);
-        var line = result.object;
-        if (!line) {
-          return;
-        }
-        // that.points = polygon.positions;
-        //遍历多边形，取出所有点
-        for (var i = 0, len = line.positions.length; i < len; i++) {
-          let xyz = cartesian3ToWGS84(line.positions[i]);
-          that.points.push([xyz.lng, xyz.lat, xyz.alt]);
-        }
-        that.ComputationalPerspective(that.points);
-      });
+      sightline.removeAllTargetPoint();
+      that.addViewFlag = true;
+      that.addTargetFlag = false;
+      that.isFrom2To = true;
+      if (handlerPoint) handlerPoint.clear();
+      that.setInput();
     },
     /**
-     * 计算方位角
-     * @param {} points 
+     *  //笛卡尔转换为经纬度
+     * @param {*} position
      */
-    ComputationalPerspective(points) {
-      debugger
-      // A点坐标
-      var positionA = Cesium.Cartesian3.fromDegrees(
-        points[0][0],
-        points[0][1],
-        points[0][2]
-      );
-      // B点坐标
-      var positionB = Cesium.Cartesian3.fromDegrees(
-        points[1][0],
-        points[1][1],
-        points[1][2]
-      );
-      console.log("相机Pitch"+ viewer.camera.pitch*180/Math.PI )
-      console.log("相机heading"+ viewer.camera.heading  *180/Math.PI  )
-      // var center = Cesium.Cartesian3.fromDegrees(points[1][0], points[1][1], points[1][2]);
-      // var target = Cesium.Cartesian3.fromDegrees(points[1][0], points[1][1], points[1][2]);
-      var datx = positionA.x - positionB.x;
-      var daty = positionA.y - positionB.y;
-      var datz = positionA.z - positionB.z;
-
-
-      //获取相机方位角
-      var heading = Math.atan2((points[1][1] - points[0][1]), (points[1][0] - points[0][0]))
-      // if(heading < 0)
-      // heading =Math.PI/2- heading
-
-   
-      heading=this.computeHeading(points[0][0], points[0][1], points[1][0], points[1][1])+Math.PI/2;
-      var angle = heading * 180 / Math.PI
-  
-      console.log("计算角度" + angle)
-      // heading=(position)
-      //获取相机的俯仰角
-      var len=Math.sqrt(Math.pow((points[1][1] - points[0][1]),2)+Math.pow((points[1][0] - points[0][0]),2))
-      var pitch =Math.atan2(points[1][2]-points[0][2],len)
-      //获取相机旋转角度
-      var roll = 0.0;
-      debugger
-      viewer.camera.setView({
-        destination: positionA,
-        orientation: {
-          heading: heading, // east, default value is 0.0 (north)
-          pitch:0,    // default value (looking down)
-          roll: 0.0                         // default value
-        }
-      });
-
-      // // 计算从A到B的向量
-      // var subtract = Cesium.Cartesian3.subtract(
-      //   position2,
-      //   position,
-      //   new Cesium.Cartesian3()
-      // );
-      // var direction = Cesium.Cartesian3.normalize(
-      //   subtract,
-      //   new Cesium.Cartesian3()
-      // ); // 转换为单位向量
-
-      // // 计算朝向（假设Cesium.Cartesian3.UNIT_Z为上方，可能需要根据实际情况调整）
-      // var heading = Cesium.Math.toDegrees(
-      //   Cesium.Cartesian3.angleBetween(direction, Cesium.Cartesian3.UNIT_X)
-      // );
-      // if (
-      //   Cesium.Cartesian3.dot(
-      //     direction,
-      //     Cesium.Cartesian3.cross(
-      //       Cesium.Cartesian3.UNIT_X,
-      //       Cesium.Cartesian3.UNIT_Z,
-      //       new Cesium.Cartesian3()
-      //     )
-      //   ) < 0
-      // ) {
-      //   heading = (360 - heading) % 360; // 如果需要，调整heading到0-360度范围
-      // }
-
-      // // 计算倾斜
-
-      // let heightDifference = points[0][2] - points[1][2];
-      // var from = point([points[0][0], points[0][1]]);
-      // var to = point([points[1][0], points[1][1]]);
-      // var options = { units: "kilometers" };
-
-      // var horizontalDistance = distance(from, to, options) * 1000;
-      // var pitch = Cesium.Math.toDegrees(
-      //   Math.atan2(heightDifference, horizontalDistance)
-      // );
-
-      // 设置相机视角
-      // viewer.camera.setView({
-      //   destination: positionB,
-      //   orientation: {
-      //     heading: heading,
-      //     pitch: pitch,
-      //     roll: 0.0,
-      //   },
-      // });
+    Cartesian2toDegrees(position) {
+      var cartographic = Cesium.Cartographic.fromCartesian(position);
+      var longitude = Cesium.Math.toDegrees(cartographic.longitude);
+      var latitude = Cesium.Math.toDegrees(cartographic.latitude);
+      var height = cartographic.height;
+      return [longitude, latitude, height];
     },
-    caculHeading(p0, p1) {
-      //计算p0位置的enu位置矩阵的旋转部分
-      var defrotmat = Cesium.Matrix4.getRotation(Cesium.Transforms.eastNorthUpToFixedFrame(p0), new Cesium.Matrix3());
 
-      //获取矩阵的三个坐标轴
-      var xaxis = Cesium.Matrix3.getColumn(defrotmat, 0, new Cesium.Cartesian3());
-      var yaxis = Cesium.Matrix3.getColumn(defrotmat, 1, new Cesium.Cartesian3());
-      var zaxis = Cesium.Matrix3.getColumn(defrotmat, 2, new Cesium.Cartesian3());
-
-      //两个位置点的射线方向
-      var dir = Cesium.Cartesian3.subtract(p1, p0, new Cesium.Cartesian3());
-
-      //计算在 enu 旋转矩阵上的 x y 平面上的投影向量
-      dir = Cesium.Cartesian3.cross(dir, zaxis, dir);
-      dir = Cesium.Cartesian3.cross(zaxis, dir, dir);
+    /**
+     * 添加目标点
+     */
+    addTagget() {
+      let that = this;
+      that.addViewFlag = false;
+      that.addTargetFlag = true;
 
-      //归一化
-      dir = Cesium.Cartesian3.normalize(dir, dir);
+      that.setInput();
+    },
+    setInput() {
+      var that = this;
+      handlerPoint = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
+      handlerPoint.activate();
+      handlerPoint.drawEvt.addEventListener(function (result) {
+        var point = result.object;
+        // point.show = false;
+        var position = result.object.position;
 
-      //计算和x轴夹角  0 ~  pi
-      var heading = Cesium.Cartesian3.angleBetween(xaxis, dir);
+        debugger;
 
-      //和y轴夹角 判定在y轴的正方向还是负方向
-      var ay = Cesium.Cartesian3.angleBetween(yaxis, dir);
+        //将获取的点的位置转化成经纬度
+        var cartographic = that.Cartesian2toDegrees(position);
+        if (cartographic[2] < 0) cartographic[2] = 0;
+        //添加观察点
+        if (that.addViewFlag) {
+          //设置观察点
+          cartographic[2] += that.personH;
+          sightline.viewPosition = cartographic;
+          that.addViewFlag = false;
 
-      // 保证处于0~2PI
-      // if (ay > Math.PI * 0.5) {
-      //   heading = Math.PI - heading;
-      // }
+          var labelentity = new Cesium.Entity({
+            position: Cesium.Cartesian3.fromDegrees(
+              cartographic[0],
+              cartographic[1],
+              cartographic[2]
+            ),
+            point: {
+              // 点的大小（像素）
+              pixelSize: 10,
+              // 点位颜色，fromCssColorString 可以直接使用CSS颜色
+              color: Cesium.Color.RED,
+              // 边框颜色
+              outlineColor: Cesium.Color.fromCssColorString("#fff"),
+              // 边框宽度(像素)
+              outlineWidth: 2,
+              // 显示在距相机的距离处的属性，多少区间内是可以显示的
+              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+                0,
+                1500
+              ),
+              // 是否显示
+              show: true,
+            },
+            label: {
+              show: true,
+              text: "观察点",
+              font: "15px sans-serif",
+              pixelOffset: new Cesium.Cartesian2(60, -100), //文字偏移
+              fillColor: Cesium.Color.RED,
+              // backgroundColor:new Cesium.Color(0, 0, 0, 1),
+              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+                0,
+                1500
+              ), //达到一定高度隐藏
+            },
+          });
+          // that.points.push(entity)
+          // viewer.entities.add(entity);
+          that.points.push(labelentity);
+          viewer.entities.add(labelentity);
+        } else if (that.addTargetFlag) {
+          //添加目标点
+          //设置目标点
+          sightline.addTargetPoint({
+            position: cartographic,
+            name: "目标点",
+          });
 
-      console.log("heading:" + Cesium.Math.toDegrees(heading).toFixed(5));
-      return heading;
-    },
-    computeHeading(lng_a, lat_a, lng_b, lat_b) {
-      //以a点为原点建立局部坐标系（东方向为x轴,北方向为y轴,垂直于地面为z轴），得到一个局部坐标到世界坐标转换的变换矩阵
-      var localToWorld_Matrix = Cesium.Transforms.eastNorthUpToFixedFrame(new Cesium.Cartesian3.fromDegrees(lng_a, lat_a));
-      //求世界坐标到局部坐标的变换矩阵
-      var worldToLocal_Matrix = Cesium.Matrix4.inverse(localToWorld_Matrix, new Cesium.Matrix4());
-      //a点在局部坐标的位置，其实就是局部坐标原点
-      var localPosition_A = Cesium.Matrix4.multiplyByPoint(worldToLocal_Matrix, new Cesium.Cartesian3.fromDegrees(lng_a, lat_a), new Cesium.Cartesian3());
-      //B点在以A点为原点的局部的坐标位置
-      var localPosition_B = Cesium.Matrix4.multiplyByPoint(worldToLocal_Matrix, new Cesium.Cartesian3.fromDegrees(lng_b, lat_b), new Cesium.Cartesian3());
-      //弧度
-      var angle = Math.atan2((localPosition_B.y - localPosition_A.y), (localPosition_B.x - localPosition_A.x))
-      // //角度
-      // var theta = angle * (180 / Math.PI);
-      // if (theta < 0) {
-      //   theta = theta + 360;
-      // }
-      return angle;
-    },
-    computePitch(lng_a, lat_a, alt_a, lng_b, lat_b, alt_b) {
-      //以a点为原点建立局部坐标系（东方向为x轴,北方向为y轴,垂直于地面为z轴），得到一个局部坐标到世界坐标转换的变换矩阵
-      var localToWorld_Matrix = Cesium.Transforms.eastNorthUpToFixedFrame(new Cesium.Cartesian3.fromDegrees(lng_a, lat_a, alt_a));
-      //求世界坐标到局部坐标的变换矩阵
-      var worldToLocal_Matrix = Cesium.Matrix4.inverse(localToWorld_Matrix, new Cesium.Matrix4());
-      //a点在局部坐标的位置，其实就是局部坐标原点
-      var localPosition_A = Cesium.Matrix4.multiplyByPoint(worldToLocal_Matrix, new Cesium.Cartesian3.fromDegrees(lng_a, lat_a, alt_a), new Cesium.Cartesian3());
-      //B点在以A点为原点的局部的坐标位置
-      var localPosition_B = Cesium.Matrix4.multiplyByPoint(worldToLocal_Matrix, new Cesium.Cartesian3.fromDegrees(lng_b, lat_b, alt_b), new Cesium.Cartesian3());
-      //弧度
-      var angle = Math.atan2((localPosition_B.z - localPosition_A.z), (localPosition_B.x - localPosition_A.x))
-      //角度
-      // var theta = angle * (180 / Math.PI);
-      // if (theta < 0) {
-      //   theta = theta + 360;
-      // }
-      return angle;
+          var labelentity = new Cesium.Entity({
+            position: position,
+            point: {
+              // 点的大小（像素）
+              pixelSize: 10,
+              // 点位颜色，fromCssColorString 可以直接使用CSS颜色
+              color: Cesium.Color.RED,
+              // 边框颜色
+              outlineColor: Cesium.Color.fromCssColorString("#fff"),
+              // 边框宽度(像素)
+              outlineWidth: 2,
+              // 显示在距相机的距离处的属性，多少区间内是可以显示的
+              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+                0,
+                1500
+              ),
+              // 是否显示
+              show: true,
+            },
+            label: {
+              show: true,
+              text: "目标点",
+              font: "15px sans-serif",
+              pixelOffset: new Cesium.Cartesian2(60, -20), //文字偏移
+              fillColor: Cesium.Color.WHITE,
+              // backgroundColor:new Cesium.Color(0, 0, 0, 1),
+              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+                0,
+                1500
+              ), //达到一定高度隐藏
+            },
+          });
+          that.points.push(labelentity);
+          viewer.entities.add(labelentity);
+          that.addTargetFlag = false;
+          sightline.build();
+          that.ComputationalPerspective();
+        }
+        handlerPoint.deactivate();
+        handlerPoint.clear();
+      });
     },
-    updateOrientation(targetEntity) {
-      debugger;
-      var pathPosition = targetEntity;
-      // 前一个坐标点
-      var preIndex = 0;
+    /**
+     * 计算方位角
+     * @param {} points
+     */
+    ComputationalPerspective() {
+      var point1;
+      var point2;
+      if (this.isFrom2To) {
+        point1 = [
+          sightline.viewPosition[0],
+          sightline.viewPosition[1],
+          sightline.viewPosition[2],
+        ];
+        point2 = [
+          sightline._currentTargetPoint[0],
+          sightline._currentTargetPoint[1],
+          sightline._currentTargetPoint[2],
+        ];
+      } else {
+        point1 = [
+          sightline._currentTargetPoint[0],
+          sightline._currentTargetPoint[1],
+          sightline._currentTargetPoint[2],
+        ];
+        point2 = [
+          sightline.viewPosition[0],
+          sightline.viewPosition[1],
+          sightline.viewPosition[2],
+        ];
+        point1[2] += this.personH;
+        point2[2] -= this.personH;
+      }
 
-      var prevPosition = Cesium.Cartesian3.fromDegrees(
-        pathPosition[preIndex][0],
-        pathPosition[preIndex][1],
-        pathPosition[preIndex][2]
-      );
-      // 当前坐标点
-      var currentIndex = 1;
-      var currentPosition = Cesium.Cartesian3.fromDegrees(
-        pathPosition[currentIndex][0],
-        pathPosition[currentIndex][1],
-        pathPosition[currentIndex][2]
+      var positionA = Cesium.Cartesian3.fromDegrees(
+        point1[0],
+        point1[1],
+        point1[2]
       );
-
-      // 计算a点和b点的角度（偏行角）
-      var angle = this.courseAngle(
-        pathPosition[preIndex][0],
-        pathPosition[preIndex][1],
-        pathPosition[currentIndex][0],
-        pathPosition[currentIndex][1]
+      var positionB = Cesium.Cartesian3.fromDegrees(
+        point2[0],
+        point2[1],
+        point2[2]
       );
-      angle = 360 - Number(angle.toFixed(0));
-      // 计算a点和b点的角度（俯仰角）
-      var pitchAngle = this.coursePitchAngle(
-        pathPosition[currentIndex][0],
-        pathPosition[currentIndex][1],
-        pathPosition[currentIndex][2],
-        pathPosition[preIndex][0],
-        pathPosition[preIndex][1],
-        pathPosition[preIndex][2]
+      let finalPosition = new Cesium.Cartesian3();
+      let matrix4 = Cesium.Transforms.eastNorthUpToFixedFrame(positionA);
+      Cesium.Matrix4.inverse(matrix4, matrix4);
+      Cesium.Matrix4.multiplyByPoint(matrix4, positionB, finalPosition);
+      Cesium.Cartesian3.normalize(finalPosition, finalPosition);
+      const resultHead = Cesium.Math.toDegrees(
+        Math.atan2(finalPosition.x, finalPosition.y)
       );
-      pitchAngle = Number(pitchAngle.toFixed(0));
-      if (pitchAngle > 180) {
-        pitchAngle = 360 - pitchAngle;
-      } else {
-        pitchAngle = 180 + pitchAngle;
-      }
-      // 根据“俯仰角、偏行角、滚转角”得到目标方位
-      var gheading = Cesium.Math.toRadians(angle);
-      var gpitch = Cesium.Math.toRadians(pitchAngle);
-      var groll = Cesium.Math.toRadians(0);
-      // var hpr = new Cesium.HeadingPitchRoll(gheading, gpitch, groll);
-      // var orientation = Cesium.Transforms.headingPitchRollQuaternion(
-      //   prevPosition,
-      //   hpr
-      // );
-      viewer.camera.flyTo({
-        destination: prevPosition,
+      const resultPitch = Cesium.Math.toDegrees(Math.asin(finalPosition.z));
+      viewer.camera.setView({
+        destination: positionA,
         orientation: {
-          heading: gheading,
-          pitch: gpitch,
-          roll: groll,
+          heading: Cesium.Math.toRadians(resultHead), // east, default value is 0.0 (north)
+          pitch: Cesium.Math.toRadians(resultPitch), // default value (looking down)
+          roll: 0.0, // default value
         },
       });
     },
-    // 计算a点和b点的角度（偏行角：逆时针）
-    courseAngle(lng_a, lat_a, lng_b, lat_b) {
-      //以a点为原点建立局部坐标系（东方向为x轴,北方向为y轴,垂直于地面为z轴），得到一个局部坐标到世界坐标转换的变换矩阵
-      var localToWorld_Matrix = Cesium.Transforms.eastNorthUpToFixedFrame(
-        new Cesium.Cartesian3.fromDegrees(lng_a, lat_a)
-      );
-      //求世界坐标到局部坐标的变换矩阵
-      var worldToLocal_Matrix = Cesium.Matrix4.inverse(
-        localToWorld_Matrix,
-        new Cesium.Matrix4()
-      );
-      //a点在局部坐标的位置，其实就是局部坐标原点
-      var localPosition_A = Cesium.Matrix4.multiplyByPoint(
-        worldToLocal_Matrix,
-        new Cesium.Cartesian3.fromDegrees(lng_a, lat_a),
-        new Cesium.Cartesian3()
-      );
-      //B点在以A点为原点的局部的坐标位置
-      var localPosition_B = Cesium.Matrix4.multiplyByPoint(
-        worldToLocal_Matrix,
-        new Cesium.Cartesian3.fromDegrees(lng_b, lat_b),
-        new Cesium.Cartesian3()
-      );
-      //弧度
-      var angle = Math.atan2(
-        localPosition_B.y - localPosition_A.y,
-        localPosition_B.x - localPosition_A.x
-      );
-      //角度
-      var theta = angle * (180 / Math.PI);
-      if (theta < 0) {
-        theta = theta + 360;
-      }
-      return theta;
-    },
-
-    // 计算a点和b点的角度（俯仰角：逆时针）
-    coursePitchAngle(lng_a, lat_a, alt_a, lng_b, lat_b, alt_b) {
-      //以a点为原点建立局部坐标系（东方向为x轴,北方向为y轴,垂直于地面为z轴），得到一个局部坐标到世界坐标转换的变换矩阵
-      var localToWorld_Matrix = Cesium.Transforms.eastNorthUpToFixedFrame(
-        new Cesium.Cartesian3.fromDegrees(lng_a, lat_a, alt_a)
-      );
-      //求世界坐标到局部坐标的变换矩阵
-      var worldToLocal_Matrix = Cesium.Matrix4.inverse(
-        localToWorld_Matrix,
-        new Cesium.Matrix4()
-      );
-      //a点在局部坐标的位置，其实就是局部坐标原点
-      var localPosition_A = Cesium.Matrix4.multiplyByPoint(
-        worldToLocal_Matrix,
-        new Cesium.Cartesian3.fromDegrees(lng_a, lat_a, alt_a),
-        new Cesium.Cartesian3()
-      );
-      //B点在以A点为原点的局部的坐标位置
-      var localPosition_B = Cesium.Matrix4.multiplyByPoint(
-        worldToLocal_Matrix,
-        new Cesium.Cartesian3.fromDegrees(lng_b, lat_b, alt_b),
-        new Cesium.Cartesian3()
-      );
-      //弧度
-      var angle = Math.atan2(
-        localPosition_B.z - localPosition_A.z,
-        localPosition_B.x - localPosition_A.x
-      );
-      //角度
-      var theta = angle * (180 / Math.PI);
-      if (theta < 0) {
-        theta = theta + 360;
-      }
-      return theta;
+    /**
+     * 视角切换
+     */
+    changeView() {
+      this.isFrom2To = !this.isFrom2To;
+      this.ComputationalPerspective();
     },
     clearScope() {
-      if (handlerLine) {
-        handlerLine.clear();
-        handlerLine.deactivate();
-        handlerLine = null;
+      viewer.entities.removeAll();
+      this.points = [];
+      sightline.removeAllTargetPoint();
+      if (handlerPoint) {
+        handlerPoint.clear();
+        handlerPoint.deactivate();
       }
       this.tooltip.setVisible(false);
     },

src/views/ConstructionApplication3D/billboard/addBiillboardModel.vue

@@ -3,15 +3,17 @@
     <el-row>
       <span>模型名称：</span
       ><el-input
+        size="mini"
         type="text"
         placeholder="请输入模型名称"
         v-model="billboardModel.billboardName"
       ></el-input>
     </el-row>
     <el-row>
-      <el-col :span="9"> <span>模型类型：</span></el-col>
+      <el-col :span="9"> <span>广告类型：</span></el-col>
       <el-col :span="15">
         <el-cascader
+          size="mini"
           placeholder="请选择广告类型"
           v-model="billboardModel.billboardType"
           :options="options"
@@ -43,7 +45,7 @@
         <el-input-number
           name="x"
           v-model="billboardModel.x"
-          size="medium"
+          size="mini"
           precision="6"
           :min="108.6"
           :max="110.5"
@@ -59,7 +61,7 @@
         <el-input-number
           name="y"
           v-model="billboardModel.y"
-          size="medium"
+          size="mini"
           precision="6"
           :min="18.16"
           :max="18.7"
@@ -75,7 +77,7 @@
         <el-input-number
           name="z"
           v-model="billboardModel.z"
-          size="small"
+          size="mini"
           precision="2"
           :min="0"
           :max="100"
@@ -91,7 +93,7 @@
         <el-input-number
           name="xL"
           v-model="billboardModel.xL"
-          size="small"
+          size="mini"
           precision="2"
           :min="0"
           :max="100"
@@ -107,7 +109,7 @@
         <el-input-number
           name="yL"
           v-model="billboardModel.yL"
-          size="small"
+          size="mini"
           precision="2"
           :min="0"
           :max="50"
@@ -124,7 +126,7 @@
         <el-input-number
           name="zL"
           v-model="billboardModel.zL"
-          size="small"
+          size="mini"
           precision="2"
           :min="0"
           :max="100"
@@ -141,7 +143,7 @@
         <el-input-number
           name="rotateX"
           v-model="billboardModel.rotateX"
-          size="small"
+          size="mini"
           precision="1"
           :min="0"
           :max="360"
@@ -157,7 +159,7 @@
         <el-input-number
           name="rotateY"
           v-model="billboardModel.rotateY"
-          size="small"
+          size="mini"
           precision="1"
           :min="0"
           :max="360"
@@ -173,7 +175,7 @@
         <el-input-number
           name="rotateZ"
           v-model="billboardModel.rotateZ"
-          size="small"
+          size="mini"
           precision="1"
           :min="0"
           :max="360"
@@ -183,11 +185,33 @@
         ></el-input-number
       ></el-col>
     </el-row>
+    <el-row>
+      <el-col :span="9"><span>是否添加模型：</span></el-col>
+      <el-col :span="8">
+        <el-switch
+          size="mini"
+          v-model="billboardModel.isAddModel"
+          active-text="是"
+          inactive-text="否"
+        >
+        </el-switch>
+      </el-col>
+      <el-col :span="6">
+        <el-button
+          size="mini"
+          v-show="billboardModel.isAddModel"
+          type="primary"
+          @click="addModel()"
+          >添加广告牌</el-button
+        >
+      </el-col>
+    </el-row>
     <el-row>
       <div style="display: inline-flex">
-        <el-button type="primary" @click="addModel()">添加广告牌</el-button>
-        <el-button type="primary" @click="saveMode()">保存</el-button>
-        <el-button @click="cancle()">取消</el-button>
+        <el-button size="mini" type="primary" @click="saveMode()"
+          >保存</el-button
+        >
+        <el-button size="mini" @click="cancle()">取消</el-button>
       </div>
     </el-row>
   </div>
@@ -247,6 +271,7 @@ export default {
         rotateZ: 0,
         ReviewStatus: "",
         ReviewComments: "",
+        isAddModel: false,
       },
       options: window.billboardReviewList,
       /**
@@ -490,7 +515,7 @@ export default {
         return;
       }
 
-      if (modelList.length == 0) {
+      if (that.billboardModel.isAddModel && modelList.length == 0) {
         this.$message.error("请先完成[添加广告牌]，再保存");
         return;
       }

src/views/ConstructionApplication3D/billboard/billboardCheckList.vue

@@ -58,6 +58,7 @@
       <el-table-column fixed="right" label="操作" width="100">
         <template slot-scope="scope">
           <el-button
+            v-show="scope.row.isAddModel"
             @click="locationClick(scope.row)"
             type="text"
             size="small"

src/views/ConstructionApplication3D/billboard/billboardChekInfo.vue

@@ -17,12 +17,14 @@
             :disabled="shenchazhaugntai('符合', scope.row)"
             v-model="scope.row.ruleResult"
             label="true"
+            @change="chg(scope.$index, scope.row)"
             >符合</el-radio
           >
           <el-radio
             :disabled="shenchazhaugntai('不符合', scope.row)"
             v-model="scope.row.ruleResult"
             label="false"
+            @change="chg(scope.$index, scope.row)"
             >不符合</el-radio
           >
         </template>
@@ -51,11 +53,21 @@ import {
   flatten,
   mercator2lonLat,
   undergroundMode,
+  getGroundPoint,
 } from "@/utils/MapHelper/MapHelper.js";
-import { pointToLineDistance, point, lineString } from "@turf/turf";
+import {
+  pointToLineDistance,
+  point,
+  lineString,
+  difference,
+  buffer,
+  lineToPolygon,
+} from "@turf/turf";
+import { v4 as uuidv4 } from "uuid";
 export default {
   data() {
     return {
+      layerDatas: [],
       tableData: [],
       ReviewComments: "",
     };
@@ -84,14 +96,19 @@ export default {
       },
     },
   },
-  mounted() {
+  created() {
     this.init();
   },
+  mounted() {},
   methods: {
     async init() {
       let that = this;
-      debugger;
-      let Z = Number(that.info.z) - 19.4;
+      let Cartesian3 = await getGroundPoint(that.info.x, that.info.y);
+      let Elevation = 19.4; //地形高程
+      if (Cartesian3) {
+        Elevation = cartesian3ToWGS84(Cartesian3).alt;
+      }
+      let Z = Number(that.info.z) - Elevation;
       let ltData = await this.getloutiData(that.info);
       //过滤规则
       let billboardReviewList = flatten(window.window.billboardReviewList);
@@ -102,21 +119,30 @@ export default {
 
       if (billboardReviewTree) {
         let billboardReviews = flatten([billboardReviewTree]);
-        //临时加
-        //默认
-        let mr = billboardReviewList.find((c) => c.code == "001");
-        billboardReviews.splice(0, 0, mr);
-        billboardReviews.forEach((billboardReview) => {
+        for (
+          let billboardReviewsindex = 0;
+          billboardReviewsindex < billboardReviews.length;
+          billboardReviewsindex++
+        ) {
+          const billboardReview = billboardReviews[billboardReviewsindex];
+
           if (billboardReview.ReviewItems) {
-            billboardReview.ReviewItems.forEach((ReviewItem) => {
+            for (
+              let ReviewItemsindex = 0;
+              ReviewItemsindex < billboardReview.ReviewItems.length;
+              ReviewItemsindex++
+            ) {
+              let ReviewItem = billboardReview.ReviewItems[ReviewItemsindex];
+
               //获取到的单个规则，并对规则判断是否合规
               if (ReviewItem.ReviewMethod == "自动审查") {
-                let ruleResult = "true";
+                var ruleResult = "true";
+                //zL 厚度， yL宽/高，xL长
                 switch (ReviewItem.code) {
                   case "001234": //筑高度不超过24米的多层建筑墙面和高层建筑裙楼的主体墙面
                     if (ltData.length > 0) {
                       //多层高
-                      let MHEIGHT = ltData[0].data.find(
+                      var MHEIGHT = ltData[0].data.find(
                         (c) => c.label == "MHEIGHT"
                       );
                       if (MHEIGHT && MHEIGHT.value) {
@@ -131,11 +157,11 @@ export default {
                     break;
                   case "0010101": //户外广告上沿不得突出墙面（包括女儿墙）的外轮廓线
                     //广告上沿高度
-                    let ggsygd = Z + that.info.yL / 2;
+                    var ggsygd = Z + that.info.yL / 2;
                     //楼高
                     if (ltData.length > 0) {
                       //多层高
-                      let MHEIGHT = ltData[0].data.find(
+                      var MHEIGHT = ltData[0].data.find(
                         (c) => c.label == "MHEIGHT"
                       );
                       if (MHEIGHT && MHEIGHT.value) {
@@ -149,7 +175,7 @@ export default {
                     break;
                   case "0010104": //广告设施宽度应与墙面相协调，周围不应超出墙面外轮廓线，垂直方向突出墙面距离不宜大于0.5米
                     debugger;
-                    let points = [];
+                    var points = [];
                     if (ltData.length > 0) {
                       ltData[0].geometry.points.forEach((point) => {
                         points.push([point.x, point.y]);
@@ -161,7 +187,7 @@ export default {
                           units: "kilometers",
                         }) * 1000
                       ).toFixed(4);
-                      let jl = Number(distance - 0.6) + that.info.zL / 2;
+                      var jl = Number(distance - 0.6) + that.info.zL / 2;
                       if (jl > 0.5) {
                         ruleResult = "false";
                       } else {
@@ -172,7 +198,7 @@ export default {
                     break;
                   case "0010105": //户外广告下端距地面净高不得低于3米，且不得防碍行人安全；
                     //广告下沿高度
-                    let ggxygd = Z - that.info.yL / 2;
+                    var ggxygd = Z - Elevation - that.info.yL / 2;
                     if (ggxygd > 3) {
                       ruleResult = "true";
                     } else {
@@ -180,7 +206,7 @@ export default {
                     }
                     break;
                   case "001020102": //宽度应以建筑开间为单元,且广告高度不得大于3米
-                    let gggd = that.info.xL;
+                    var gggd = that.info.xL;
                     if (gggd > 3) {
                       ruleResult = "false";
                     } else {
@@ -190,7 +216,7 @@ export default {
                   case "00102020102": //一层建筑层高≤4.5m并且广告高度≤1.5m 或者一层建筑层高＞4.5m并且广告高度小于等于2m
                     if (ltData.length > 0) {
                       //层高
-                      let FLOORH = ltData[0].data.find(
+                      var FLOORH = ltData[0].data.find(
                         (c) => c.label == "FLOORH"
                       );
 
@@ -210,7 +236,7 @@ export default {
                         }
                       }
                       // //广告上沿高度
-                      // let ggsygd1 = Number(Z) + Number(that.info.yL) / 2;
+                      // var ggsygd1 = Number(Z) + Number(that.info.yL) / 2;
                       // if (FLOORH && FLOORH.value) {
                       //   if (Number(FLOORH.value) > ggsygd1) {
                       //     if (Number(FLOORH.value) <= 4.5) {
@@ -233,6 +259,8 @@ export default {
                     }
 
                     break;
+                  case "001020103": //户外广告外表面距离墙面不得超过0.3米（霓虹灯户外广告则外表面距离墙面不得超过0.5米）
+                  case "00102020205": //户外广告外表面距离墙面不得超过0.3米（霓虹灯户外广告外表面距离墙面不得超过0.5米）
                   case "00102020104": //户外广告外表面距离墙面不得超过0.3米（霓虹灯户外广告则外表面距离墙面不得超过0.5米）
                     debugger;
                     var points1 = [];
@@ -257,20 +285,340 @@ export default {
                     }
 
                     break;
+                  case "00102020201": //出挑部分的底部距离地面小于3米
+                    var ggxygd = Z - Elevation - that.info.yL / 2;
+                    if (ggxygd > 3) {
+                      ruleResult = "true";
+                    } else {
+                      ruleResult = "false";
+                    }
+                    break;
+                  case "00102020204": //广告高度不得大于3米
+                    if (that.info.yL <= 3) {
+                      ruleResult = "true";
+                    } else {
+                      ruleResult = "false";
+                    }
+                    break;
+                  case "0020103": //出租车候车牌、公交指示牌牌面单边长度不得大于3.5米，高度不超过1.5米，厚度不得大于0.3米
+                    if (
+                      that.info.xL <= 3.5 &&
+                      that.info.yL <= 1.5 &&
+                      that.info.zL <= 0.3
+                    ) {
+                      ruleResult = "true";
+                    } else {
+                      ruleResult = "false";
+                    }
+
+                    break;
+                  case "0020104": //单块广告牌（含牌面、边框、底座）的面积不得大于5.5平方米
+                    var area = that.info.xL * that.info.yL;
+                    if (area <= 5.5) {
+                      ruleResult = "true";
+                    } else {
+                      ruleResult = "false";
+                    }
+
+                    break;
+                  case "003020101": //广告牌面下缘距离地面高度大于等于0.5米
+                  case "003020201": //广告牌面下缘距离地面高度大于等于0.5米
+                  case "0030101": //广告牌面下缘距离地面高度大于等于0.5米
+                    //广告下沿高度
+                    var ggxygd = Z - Elevation - that.info.yL / 2;
+                    if (ggxygd >= 0.5) {
+                      ruleResult = "true";
+                    } else {
+                      ruleResult = "false";
+                    }
+                    break;
+                  case "0030102": //广告总体高度（含广告牌面和支撑结构）不得超过4米
+                    //广告上沿高度
+                    var ggxygd = Z - Elevation + that.info.yL / 2;
+                    if (ggxygd <= 4) {
+                      ruleResult = "true";
+                    } else {
+                      ruleResult = "false";
+                    }
+                    break;
+                  case "0030103": //广告牌单面面积不应大于2平方米
+                    var area = that.info.xL * that.info.yL;
+                    if (area <= 2) {
+                      ruleResult = "true";
+                    } else {
+                      ruleResult = "false";
+                    }
+                    break;
+                  case "0030104": //任意一边长度不应大于2米
+                    if (that.info.xL <= 2 && that.info.yL <= 2) {
+                      ruleResult = "true";
+                    } else {
+                      ruleResult = "false";
+                    }
+                    break;
+                  case "0030105": //厚度不应大于0.3米
+                    if (that.info.zL <= 0.3) {
+                      ruleResult = "true";
+                    } else {
+                      ruleResult = "false";
+                    }
+                    break;
+                  case "003020205": //底座型户外广告设施的总高度不得大于2.4米
+                    //广告上沿高度
+                    var ggxygd = Z - Elevation + that.info.yL / 2;
+                    if (ggxygd <= 2.4) {
+                      ruleResult = "true";
+                    } else {
+                      ruleResult = "false";
+                    }
+                    break;
+                  case "003030103": //广告长度不得大于1.5米
+                  case "003020207": //长度不得大于1.5米
+                    if (that.info.xL <= 1.5) {
+                      ruleResult = "true";
+                    } else {
+                      ruleResult = "false";
+                    }
+                    break;
+                  case "003020208": //牌面(单面)面积不得大于2.5平方米
+                    var area = that.info.xL * that.info.yL;
+                    if (area <= 2.5) {
+                      ruleResult = "true";
+                    } else {
+                      ruleResult = "false";
+                    }
+                    break;
+                  case "003020209": //厚度不得大于0.5米
+                    if (that.info.zL <= 0.5) {
+                      ruleResult = "true";
+                    } else {
+                      ruleResult = "false";
+                    }
+                    break;
+                  case "003030102": //广告总高度不得大于3米，且不得低于1.2米
+                    //广告上沿高度
+                    var ggxygd = Z - Elevation + that.info.yL / 2;
+                    if (ggxygd >= 1.2 && ggxygd <= 3) {
+                      ruleResult = "true";
+                    } else {
+                      ruleResult = "false";
+                    }
+                    break;
+
                   default:
                     break;
                 }
-                ReviewItem.ruleResult = ruleResult;
+                this.$set(ReviewItem, "ruleResult", ruleResult);
+                // ReviewItem.ruleResult = ruleResult;
               } else {
-                ReviewItem.ruleResult = "1";
+                debugger;
+                //加载辅助决策
+                switch (ReviewItem.code) {
+                  case "0030109":
+                  case "0030108": //当用地内建筑退让红线距离不得小于15米时，广告仅允许设置于建筑退让红线的距离内，且广告实体或最大水平投影不得超出用地红线；
+                    debugger;
+                    //避免重复加载
+                    if (this.layerDatas.filter((c) => c.includes("JZTX_")) > 0)
+                      break;
+                    var layer = flatten(window.layerTree).find(
+                      (item) => item.core == "004004"
+                    );
+                    if (layer && layer.date_server && layer.date_server.url) {
+                      var queryByGeometryParameters = {
+                        getFeatureMode: "BUFFER",
+                        datasetNames: [
+                          layer.date_server.dataSourceName +
+                            ":" +
+                            layer.date_server.datasetName,
+                        ],
+                        geometry: {
+                          parts: [1],
+                          points: [{ y: that.info.y, x: that.info.x }],
+                          type: "POINT",
+                        },
+                        bufferDistance: 0.0005,
+                        hasGeometry: true,
+                      };
+
+                      var e = await mapQuery(
+                        layer.date_server.url +
+                          "/featureResults.json?returnContent=true",
+                        queryByGeometryParameters
+                      );
+
+                      if (e && e.totalCount > 0) {
+                        e.features.forEach((feature) => {
+                          var ps = [];
+                          for (
+                            var index = 0;
+                            index < feature.geometry.points.length;
+                            index++
+                          ) {
+                            const element = feature.geometry.points[index];
+                            ps.push(element.x);
+                            ps.push(element.y);
+                          }
+                          var id = uuidv4();
+                          //添加建筑退线线
+                          viewer.entities.add({
+                            id: "JZTX_" + id,
+
+                            polyline: {
+                              positions: Cesium.Cartesian3.fromDegreesArray(ps),
+                              width: 4,
+                              material: Cesium.Color.RED,
+                              clampToGround: true,
+                            },
+                            position: Cesium.Cartesian3.fromDegrees(
+                              ps[0],
+                              ps[1]
+                            ),
+                            label: {
+                              text: "建筑退让线", //描述内容
+                              font: "20px Sans-Serif", //字体大小 类型
+                              fillColor: Cesium.Color.RED, //颜色
+                              outlineColor: Cesium.Color.GOLD,
+                              style: Cesium.LabelStyle.CENTER_LABEL,
+                              // 垂直位置
+                              verticalOrigin: Cesium.VerticalOrigin.BUTTON,
+                              // 中心位置
+                              pixelOffset: new Cesium.Cartesian2(0, -10),
+                              //设置背景颜色透明
+                              backgroundColor: new Cesium.Color(
+                                0.0,
+                                0.0,
+                                0.0,
+                                0.0
+                              ),
+                              //打开背景  打开背景 （不会被线段覆盖）
+                              showBackground: true,
+                              clampToGround: true,
+                            },
+                          });
+
+                          that.layerDatas.push(id);
+                        });
+                      }
+                    }
+                    break;
+                  case "0030109": //设置立杆型广告的用地，沿城市道路用地面宽不得小于15米
+                    debugger;
+                    //避免重复加载
+                    if (this.layerDatas.filter((c) => c.includes("DLM_")) > 0)
+                      break;
+                    var layer = flatten(window.layerTree).find(
+                      (item) => item.core == "005004"
+                    );
+                    if (layer && layer.date_server && layer.date_server.url) {
+                      var queryByGeometryParameters = {
+                        getFeatureMode: "BUFFER",
+                        datasetNames: [
+                          layer.date_server.dataSourceName +
+                            ":" +
+                            layer.date_server.datasetName,
+                        ],
+                        geometry: {
+                          parts: [1],
+                          points: [{ y: that.info.y, x: that.info.x }],
+                          type: "POINT",
+                        },
+                        bufferDistance: 0.0005,
+                        hasGeometry: true,
+                      };
+
+                      var e = await mapQuery(
+                        layer.date_server.url +
+                          "/featureResults.json?returnContent=true",
+                        queryByGeometryParameters
+                      );
+
+                      if (e && e.totalCount > 0) {
+                        e.features.forEach((feature) => {
+                          debugger;
+                          var DLKDindex = feature.fieldNames.findIndex(
+                            (c) => c == "DLKD"
+                          );
+                          var ps = [];
+                          for (
+                            var index = 0;
+                            index < feature.geometry.points.length;
+                            index++
+                          ) {
+                            const element = feature.geometry.points[index];
+                            ps.push([element.x, element.y]);
+                          }
+                          var lk = Number(feature.fieldValues[DLKDindex]);
+                          if (lk < 2) {
+                            lk = 2;
+                          }
+
+                          var line = lineString(ps);
+
+                          // 使用turf.buffer生成线的缓冲区，options中的steps和units可以控制缓冲区的形状和单位
+                          // steps参数决定了缓冲区的圆滑程度，units决定了缓冲区的单位（如'kilometers'、'meters'等）
+                          var buffered = buffer(line, lk / 2 / 1000, {
+                            units: "kilometers",
+                          });
+                          var po = buffered.geometry.coordinates[0].flat();
+                          debugger;
+                          var id = uuidv4();
+                          //添加建筑退线线
+                          viewer.entities.add({
+                            id: "DLM_" + id,
+                            polygon: {
+                              hierarchy: Cesium.Cartesian3.fromDegreesArray(po),
+                              material: Cesium.Color.DARKGRAY.withAlpha(0.5),
+                            },
+                            position: Cesium.Cartesian3.fromDegrees(
+                              po[0],
+                              po[1]
+                            ),
+                            label: {
+                              text: "道路面", //描述内容
+                              font: "20px Sans-Serif", //字体大小 类型
+                              fillColor: Cesium.Color.RED, //颜色
+                              outlineColor: Cesium.Color.GOLD,
+                              style: Cesium.LabelStyle.CENTER_LABEL,
+                              // 垂直位置
+                              verticalOrigin: Cesium.VerticalOrigin.BUTTON,
+                              // 中心位置
+                              pixelOffset: new Cesium.Cartesian2(0, -10),
+                              //设置背景颜色透明
+                              backgroundColor: new Cesium.Color(
+                                0.0,
+                                0.0,
+                                0.0,
+                                0.0
+                              ),
+                              //打开背景  打开背景 （不会被线段覆盖）
+                              showBackground: true,
+                              clampToGround: true,
+                            },
+                          });
+
+                          that.layerDatas.push(id);
+                        });
+                      }
+                    }
+                    break;
+
+                  default:
+                    break;
+                }
+                debugger;
+                this.$set(ReviewItem, "ruleResult", "1");
+                // ReviewItem.ruleResult = "1";
               }
 
               that.tableData.push(ReviewItem);
-            });
+            }
           }
-        });
+        }
       }
     },
+    chg(i, r) {
+      this.$forceUpdate();
+    },
     /**
      * 审核状态提交
      */
@@ -379,6 +727,9 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    viewer.entities.removeAll();
+  },
 };
 </script>
 <style lang="scss">

src/views/ConstructionApplication3D/billboard/billboardDesign.vue

@@ -336,91 +336,93 @@ export default {
      * 绘制广告牌
      */
     DrawBillboard(billboardModel) {
-      this.removeBillboard(billboardModel);
-      var modelurl = "../../../../static/ModelData/billboard/box.gltf";
-      let newposition = Cesium.Cartesian3.fromDegrees(
-        billboardModel.x,
-        billboardModel.y,
-        billboardModel.z
-      );
-      var orientation = Cesium.Transforms.headingPitchRollQuaternion(
-        newposition,
-        new Cesium.HeadingPitchRoll(
-          Cesium.Math.toRadians(billboardModel.rotateX),
-          Cesium.Math.toRadians(billboardModel.rotateY),
-          Cesium.Math.toRadians(billboardModel.rotateZ)
-        )
-      );
-      var entity = viewer.entities.add({
-        id: "billboard_" + billboardModel.id,
-        name: "gltf",
-        show: true,
-        position: newposition,
-
-        /**
-         * 长方体
-         */
-        box: {
-          dimensions: new Cesium.Cartesian3(
-            billboardModel.xL,
-            billboardModel.zL,
-            billboardModel.yL
-          ),
-          show: true,
-          material: Cesium.Color.LIGHTGREEN,
-          // outline: true,
-          // outlineColor: Cesium.Color.SPRINGGREEN,
-          // outlineWidth: 1,
-        },
-        /**
-         * 模型
-         */
-        // model: {
-        //   uri: modelurl,
-        //   scale: billboardModel.xL,
-        // },
-        /**
-         * 广告牌
-         */
-        // billboard: {
-        //     image: imageurl,
-        //     width: billboardModel.xL,
-        //     height: billboardModel.zL,
-        //     rotation: 0,
-        // },
-        orientation: orientation,
-      });
-      entityList.push(entity);
-      const point = viewer.entities.add({
-        id: "pointBillboard_" + billboardModel.id,
-        //点
-        position: Cesium.Cartesian3.fromDegrees(
+      if (billboardModel.isAddModel) {
+        this.removeBillboard(billboardModel);
+        var modelurl = "../../../../static/ModelData/billboard/box.gltf";
+        let newposition = Cesium.Cartesian3.fromDegrees(
           billboardModel.x,
           billboardModel.y,
-          billboardModel.z + billboardModel.yL / 2
-        ),
-        label: {
-          text: billboardModel.billboardName, //描述内容
-          font: "20px Sans-Serif", //字体大小 类型
-          fillColor: Cesium.Color.RED, //颜色
-          outlineColor: Cesium.Color.GOLD,
-          style: Cesium.LabelStyle.CENTER_LABEL,
-          // 垂直位置
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          // 中心位置
-          pixelOffset: new Cesium.Cartesian2(0, -10),
-          //设置背景颜色透明
-          backgroundColor: new Cesium.Color(0.0, 0.0, 0.0, 0.0),
-          //打开背景  打开背景 （不会被线段覆盖）
-          showBackground: true,
-          // heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
-          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
-            0.0,
-            300.0
+          billboardModel.z
+        );
+        var orientation = Cesium.Transforms.headingPitchRollQuaternion(
+          newposition,
+          new Cesium.HeadingPitchRoll(
+            Cesium.Math.toRadians(billboardModel.rotateX),
+            Cesium.Math.toRadians(billboardModel.rotateY),
+            Cesium.Math.toRadians(billboardModel.rotateZ)
+          )
+        );
+        var entity = viewer.entities.add({
+          id: "billboard_" + billboardModel.id,
+          name: "gltf",
+          show: true,
+          position: newposition,
+
+          /**
+           * 长方体
+           */
+          box: {
+            dimensions: new Cesium.Cartesian3(
+              billboardModel.xL,
+              billboardModel.zL,
+              billboardModel.yL
+            ),
+            show: true,
+            material: Cesium.Color.LIGHTGREEN,
+            // outline: true,
+            // outlineColor: Cesium.Color.SPRINGGREEN,
+            // outlineWidth: 1,
+          },
+          /**
+           * 模型
+           */
+          // model: {
+          //   uri: modelurl,
+          //   scale: billboardModel.xL,
+          // },
+          /**
+           * 广告牌
+           */
+          // billboard: {
+          //     image: imageurl,
+          //     width: billboardModel.xL,
+          //     height: billboardModel.zL,
+          //     rotation: 0,
+          // },
+          orientation: orientation,
+        });
+        entityList.push(entity);
+        const point = viewer.entities.add({
+          id: "pointBillboard_" + billboardModel.id,
+          //点
+          position: Cesium.Cartesian3.fromDegrees(
+            billboardModel.x,
+            billboardModel.y,
+            billboardModel.z + billboardModel.yL / 2
           ),
-          heightReference: Cesium.HeightReference.NONE,
-        },
-      });
+          label: {
+            text: billboardModel.billboardName, //描述内容
+            font: "20px Sans-Serif", //字体大小 类型
+            fillColor: Cesium.Color.RED, //颜色
+            outlineColor: Cesium.Color.GOLD,
+            style: Cesium.LabelStyle.CENTER_LABEL,
+            // 垂直位置
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            // 中心位置
+            pixelOffset: new Cesium.Cartesian2(0, -10),
+            //设置背景颜色透明
+            backgroundColor: new Cesium.Color(0.0, 0.0, 0.0, 0.0),
+            //打开背景  打开背景 （不会被线段覆盖）
+            showBackground: true,
+            // heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
+            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+              0.0,
+              300.0
+            ),
+            heightReference: Cesium.HeightReference.NONE,
+          },
+        });
+      }
     },
 
     initEntitiesHandler() {

src/views/ConstructionApplication3D/projectManagement/projectManagement.vue

@@ -261,14 +261,14 @@
                                 >指标分析
                               </el-button>
                             </el-col>
-                            <el-col :span="8">
+                            <!-- <el-col :span="8">
                               <el-button
                                 type="primary"
                                 size="mini"
                                 @click.stop="PlanningAnalysis(itemModel)"
                                 >规划情况
                               </el-button>
-                            </el-col>
+                            </el-col> -->
                             <el-col :span="8">
                               <el-button
                                 type="primary"
@@ -277,8 +277,6 @@
                                 >车位审核
                               </el-button>
                             </el-col>
-                          </el-row>
-                          <el-row :gutter="24">
                             <el-col :span="8">
                               <el-button
                                 type="primary"
@@ -287,6 +285,8 @@
                                 >建筑风貌
                               </el-button>
                             </el-col>
+                          </el-row>
+                          <el-row :gutter="24">
                             <el-col :span="8">
                               <el-button
                                 type="primary"
@@ -943,7 +943,7 @@ export default {
           data: { info }, //props
         },
         offset: [left, top], //left top
-        area: ["430px", "550px"],
+        area: ["300px", "250px"],
         title: "天际线分析",
         maxmin: false,
         shade: false, //是否显示遮罩
@@ -3581,7 +3581,7 @@ export default {
           data: { info: {} }, //props
         },
         offset: [left, top], //left top
-        area: ["430px", "100px"], //宽 高
+        area: ["430px", "150px"], //宽 高
         title: "人视分析",
         maxmin: false,
         shade: false, //是否显示遮罩

src/views/ConstructionApplication3D/skylineAnalysis/TJXResult.vue

@@ -0,0 +1,94 @@
+<template>
+    <div style="margin: 1rem; padding: 0.5rem;background-color: azure; width: 99%;height: 99%;">
+        <el-button type="primary" @click="download">下载</el-button>
+        <canvas id="mycan" ref="mycan" style="height: 90%;width: 99%;background-color: azure;"></canvas>
+        <!-- <img id="img"  ref="img" style=" width: 100%;height: :100%;"/> -->
+    </div>
+</template>
+<script>
+import { cond } from 'lodash';
+
+export default {
+    props: ['imageData'],
+    data() {
+        return {
+        }
+    },
+    mounted() {
+        this.init()
+    },
+    methods: {
+        init() {
+            var that = this;
+            var canvas = this.$refs['mycan']
+            var image = new Image();
+            var context = canvas.getContext("2d")
+            image.src = this.imageData.data;
+            image.onload = function () {
+                canvas.width = image.width;
+                canvas.height = image.height;
+               
+                context.drawImage(image, 0, 0, canvas.width, canvas.height);
+                // context.fillStyle = '#fff';
+                // context.fillRect(0, 0, canvas.width, canvas.height);
+                // 将canvas的透明背景设置成白色
+                var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+
+                // 遍历像素点，将彩色像素点转换为黑白像素点
+
+                for (var i = 0; i < imageData.data.length; i += 4) {
+
+                    var r = imageData.data[i];
+
+                    var g = imageData.data[i + 1];
+
+                    var b = imageData.data[i + 2];
+                    // var a = imageData.data[i + 3];
+                    if (r == 0 && b == 0 && g == 0) {
+
+                        imageData.data[i] = 132;
+
+                        imageData.data[i + 1] = 180;
+
+                        imageData.data[i + 2] = 237;
+                    }
+                }
+                context.putImageData(imageData, 0, 0)
+                context.strokeStyle = "rgba(255,0,0,1)";
+                context.lineWidt = 25
+                context.strokeRect(0, 0, canvas.width, canvas.height)
+
+                let xRate = canvas.width / that.imageData.width;
+
+                let yRate = canvas.height / that.imageData.height;
+                for (var i = 50; i < that.imageData.width; i += 50) {
+                    context.font = "30px serif";
+                    context.strokeText(i, i * xRate, 20);
+                    context.strokeText(i, i * xRate, canvas.height);
+                }
+                for (var j = that.imageData.height; j >= 10; j -= 20) {
+                    context.font = "30px serif";
+                    context.strokeText(j, 20, (that.imageData.height - j) * yRate);
+                    context.strokeText(j, canvas.width - 30, (that.imageData.height - j) * yRate);
+                }
+            }
+        },
+        download() {
+            var canvas = this.$refs['mycan']
+
+            // var context = canvas.getContext("2d")
+            var url = canvas.toDataURL("image/jpeg");
+            var a = document.createElement('a');
+            var event = new MouseEvent('click');
+            a.download = (new Date()).getTime() + ".png"; // 指定下载图片的名称
+            a.href = url;
+            a.dispatchEvent(event); // 触发超链接的点击事件
+        }
+    }
+}
+</script>
+<style scoped>
+.vl-notify-content {
+    background-color: white;
+}
+</style>)

src/views/ConstructionApplication3D/skylineAnalysis/skylineAnalysis.vue

@@ -1,448 +1,115 @@
 <template>
-  <div
-    class="ZTGlobal"
-    style="width: 100%; padding: 1rem 1rem 0rem 1rem; color: white"
-  >
-    <el-row :gutter="10">
-      <el-col :span="24">
-        <div class="titleHeader">
-          <h3>观察者信息</h3>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="10">
-      <el-col :span="24">
-        <el-row :gutter="10">
-          <el-col :span="12">
-            经度(°):
-            <el-input
-              style="width: 50%"
-              size="mini"
-              v-model="form.viewlongitude"
-            ></el-input>
-          </el-col>
-          <el-col :span="12">
-            纬度(°):
-            <el-input
-              style="width: 50%"
-              size="mini"
-              v-model="form.viewlatitude"
-            ></el-input>
-          </el-col>
-        </el-row>
-        <el-row :gutter="10">
-          <el-col :span="12">
-            高程(米):
-            <el-input
-              style="width: 50%"
-              size="mini"
-              v-model="form.viewheight"
-            ></el-input>
-          </el-col>
-          <el-col :span="12">
-            方向角(°):
-            <el-input
-              style="width: 50%"
-              size="mini"
-              v-model="form.direction"
-            ></el-input>
-          </el-col>
-        </el-row>
-        <el-row :gutter="10">
-          <el-col :span="12">
-            俯仰角(°):
-            <el-input
-              style="width: 50%"
-              size="mini"
-              v-model="form.pitch"
-            ></el-input>
-          </el-col>
-          <el-col :span="12">
-            分析半径:
-            <el-input
-              style="width: 50%"
-              size="mini"
-              v-model="form.skylineRadius"
-            ></el-input>
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
-    <el-row :gutter="10">
-      <el-col :span="24">
-        <div class="titleHeader">
-          <h3>参数设置</h3>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="10">
-      <el-col :span="24">
-        <el-form :inline="true">
-          <el-form-item label="显示模式:">
-            <el-select
-              size="mini"
-              v-model="form.skylineMode"
-              placeholder="请选择显示模式"
-            >
-              <el-option label="线显示" :value="0"></el-option>
-              <el-option label="面显示" :value="1"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="天际线颜色:">
-            <el-color-picker
-              color-format="rgb"
-              v-model="form.skylineColor"
-            ></el-color-picker>
-          </el-form-item>
-          <el-form-item label="障碍物高亮颜色:">
-            <el-color-picker
-              color-format="rgb"
-              v-model="form.highlightBarrierColor"
-            ></el-color-picker>
-          </el-form-item>
-          <el-form-item>
-            <el-checkbox size="mini" v-model="form.highlightBarrier"
-              >高亮障碍物</el-checkbox
-            >
-          </el-form-item>
-          <el-form-item>
-            <el-checkbox size="mini" v-model="form.Skyline2D"
-              >二维天际线</el-checkbox
-            >
-          </el-form-item>
-        </el-form>
-        <div id="echartF" ref="echartF" class="EchartsWH">
-          <div
-            id="skyEcharts"
-            ref="skyEcharts"
-            :style="{ width: '100%', height: '100%' }"
-          ></div>
-        </div>
-
-        <div class="SaveCenter">
-          <el-button size="mini" type="primary" @click="onSubmit"
-            >天际线</el-button
-          >
-          <el-button size="mini" @click="resetForm">清除</el-button>
-        </div>
-      </el-col>
-    </el-row>
+  <div class="ZTGlobal" style="margin: 1rem;">
+    <el-form>
+      <el-form-item>宽度：
+        <el-input-number min="0" max="1000" :step="1" v-model="faceW" @change="farChange"></el-input-number>
+      </el-form-item>
+      <el-form-item>高度：
+        <el-input-number min="0" max="500" :step="1" v-model="faceH" @change="heightChange"></el-input-number>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="draw">绘制范围</el-button>
+        <el-button @click="create">分析</el-button>
+        <el-button @click="clear">取消</el-button>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
-
 <script>
-import elementResizeDetectorMaker from "element-resize-detector";
-let skyline = null;
+import TJXResult from './TJXResult.vue'
+var drawHandler;
+var facade
 export default {
   data() {
     return {
-      form: {
-        viewlongitude: 0,
-        viewlatitude: 0,
-        viewheight: 0,
-        direction: 0.0,
-        pitch: 0.0,
-        lineWidth: 1,
-        skylineRadius: 10000,
-        skylineColor: "rgb(200, 0, 0)",
-        highlightBarrierColor: "rgba(255, 186, 1, 1)",
-        skylineMode: 0,
-        highlightBarrier: false,
-        Skyline2D: false,
-      },
-      // skyline: null,
-      myChart: null,
-      s3mInstance: null,
-      flag: false,
-      erd: null,
-    };
-  },
-  props: {
-    info: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    layerid: {
-      type: String,
-      default: "",
-    },
-    lydata: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    lyoption: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
+      faceW: 200,
+      faceH: 100,
+    }
   },
-  computed: {},
   mounted() {
-    const erd = elementResizeDetectorMaker();
-    let that = this;
-    erd.listenTo(this.$refs.echartF, () => {
-      that.$nextTick(() => {
-        //监听到事件后执行的业务逻辑
-        window.echarts.init(this.$refs.skyEcharts).resize();
-      });
-    });
-    this.$refs.echartF.style.display = "none";
-    this.init();
+    facade = new Cesium.Facade(scene);
+    facade.build();
   },
   methods: {
-    init() {},
-
-    //提交数据
-    onSubmit() {
-      this.analysis();
-    },
-    //清空from
-    resetForm() {
-      this.clear();
-    },
-    /**
-     * 开始分析天际线
-     */
-    analysis() {
-      let that = this;
-      this.clear(); // 清除上一次分析结果
-      this.flag = true;
-      if (!skyline) {
-        skyline = new Cesium.Skyline(scene);
-      }
-
-      let cartographic = scene.camera.positionCartographic;
-      let longitude = Cesium.Math.toDegrees(cartographic.longitude);
-      let latitude = Cesium.Math.toDegrees(cartographic.latitude);
-      let height = cartographic.height;
-      // 天际线分析的视口位置设置成当前相机位置
-      skyline.viewPosition = [longitude, latitude, height];
-
-      this.form.viewlongitude = longitude.toFixed(6);
-      this.form.viewlatitude = latitude.toFixed(6);
-      this.form.viewheight = height.toFixed(6);
-
-      //设置俯仰和方向
-      skyline.pitch = Cesium.Math.toDegrees(scene.camera.pitch);
-      skyline.direction = Cesium.Math.toDegrees(scene.camera.heading);
-
-      this.form.pitch = skyline.pitch;
-      this.form.direction = skyline.direction;
-      skyline.radius = this.form.skylineRadius;
-      skyline.lineWidth = Number(this.form.lineWidth);
-      let color = Cesium.Color.fromCssColorString(this.form.skylineColor);
-      skyline.color = color;
-      skyline.displayStyle = this.form.skylineMode;
-      skyline.setVisibleInViewport(1);
-      skyline.build();
-
-      setTimeout(function () {
-        // 延时执行的函数
-        if (that.form.highlightBarrier) {
-          that.ObstacleSwitching(true);
-        }
-        if (that.form.Skyline2D) {
-          that.getSkyline2D(true);
-        }
-      }, 500);
-
-      // console.log(skyline.lineWidth,this.lineWidth)
-    },
-    clear() {
-      this.flag = false;
-      this.getSkyline2D(false);
-      // viewer.entities.removeAll();
-      // scene.primitives._primitives = [];
-      if (skyline) {
-        skyline.clear();
-        skyline = null;
-      }
-
-      for (var i = 0; i < scene.layers._layerQueue.length; i++) {
-        var layer = scene.layers.findByIndex(i);
-        layer.removeAllObjsColor();
-      }
+    draw() {
 
-      this.form.viewlongitude = 0;
-      this.form.viewlatitude = 0;
-      this.form.viewheight = 0;
-      this.form.direction = 0.0;
-      this.form.pitch = 0.0;
+      var that = this;
+      viewer.entities.removeAll()
+      // facade.clear();
+      drawHandler = new Cesium.DrawHandler(
+        viewer,
+        Cesium.DrawMode.Line,
+        0
+      );
+      drawHandler.activate()
+      // drawHandler.activeEvt.addEventListener(function (isActive) {
+      // });
+      // drawHandler.movingEvt.addEventListener(function (windowPosition) {
 
-      this.form.skylineColor = "rgb(200, 0, 0)";
-      this.form.highlightBarrierColor = "rgba(255, 186, 1, 1)";
-      //初始化参数
-    },
-    /**
-     * 障碍物切换显示隐藏
-     * @param isShow 是否显示
-     */
-    ObstacleSwitching(isShow = true) {
-      console.log(JSON.stringify(skyline.getObjectIds()));
-      if (skyline && isShow) {
-        let BarrierColor = Cesium.Color.fromCssColorString(
-          this.form.highlightBarrierColor
-        );
-        let ObjectIds = skyline.getObjectIds();
-        for (let index in ObjectIds) {
-          //   let layer = scene.layers.findByIndex(Number(index)); // 底层索引从3开始
-          let layer = scene.layers.layerQueue.find(
-            (c) => c.id == Number(index)
-          );
-          let ids = skyline.getObjectIds()[index];
-          layer.setObjsColor(ids, BarrierColor);
-        }
-      } else if (skyline && !isShow) {
-        for (var i = 0; i < scene.layers._layerQueue.length; i++) {
-          var layer = scene.layers.findByIndex(i);
-          layer.removeAllObjsColor();
-        }
-      }
-    },
-    /**
-     * 障碍物切换显示隐藏
-     * @param isShow 是否显示
-     */
-    getSkyline2D: function (isShow = false) {
-      if (isShow) {
-        this.$refs.echartF.style.display = "block";
-        console.log(this.$refs.echartF.style.display);
-        this.myChart = window.echarts.init(this.$refs.skyEcharts);
+      // });
+      drawHandler.drawEvt.addEventListener(function (result) {
+        debugger
+        // var averageH = result.object.positions[0].z + result.object.positions[1].z
+        var startPoint = result.object.positions[0];
+        var endPoint = result.object.positions[1];
 
-        let object = skyline.getSkyline2D();
-        let option = {
-          backgroundColor: "rgba(73,139,156,0.0)",
-          grid: {
-            top: "20%",
-            right: "10%",
-            left: "8%",
-            bottom: "12%",
+        // var averageH =(startPoint.z +endPoint.z)/2
+        // startPoint.z = averageH
+        // endPoint.z = averageH
+        // var point1 = that.Cartesian2toDegrees(startPoint)
+        // point1[2] += 2
+        // var point2 = that.Cartesian2toDegrees(endPoint)
+        // point2[2] += 2
+        // facade.startPoint = Cesium.Cartesian3.fromDegrees(point1[0], point1[1], point1[2]);
+        // facade.endPoint = Cesium.Cartesian3.fromDegrees(point2[0], point2[1], point2[2]);
+        facade.startPoint = startPoint
+        facade.endPoint =endPoint
+        facade.maxHeight = parseFloat(that.faceH)
+        facade.farDistance = parseFloat(that.faceW)
+      })
+    },
+    Cartesian2toDegrees(position) {
+      var cartographic = Cesium.Cartographic.fromCartesian(position);
+      var longitude = Cesium.Math.toDegrees(cartographic.longitude);
+      var latitude = Cesium.Math.toDegrees(cartographic.latitude);
+      var height = cartographic.height;
+      return [longitude, latitude, height];
+    },
+    create() {
+      var that = this;
+      facade.readyPromise.then(function (base64data) {
+        debugger
+        that.$layer.iframe({
+          content: {
+            content: TJXResult, //传递的组件对象
+            parent: that, //当前的vue对象
+            data: { 'imageData': { 'height': that.faceH, 'width': that.faceW, 'data': base64data } }, //props
           },
-          xAxis: [
-            {
-              type: "category",
-              boundaryGap: false,
-              data: object.x,
-              show: false,
-            },
-          ],
-          yAxis: [
-            {
-              type: "value",
-              min: 0,
-              max: 1,
-              // grid: {
-              //   show: false
-              // },
-              axisLabel: {
-                show: true,
-                textStyle: {
-                  color: "#fff",
-                },
-              },
-            },
-          ],
-          series: [
-            {
-              name: "",
-              type: "line",
-              data: object.y,
-            },
-          ],
-        };
-        this.myChart.setOption(option);
-      } else {
-        this.$refs.echartF.style.display = "none";
-        // this.myChart = null;
-      }
-    },
-  },
-  watch: {
-    //初始化echarts，切换时需要能获取节点
 
-    "form.direction": function (newValue) {
-      if (this.flag) {
-        skyline.direction = parseFloat(newValue);
-      }
-    },
-    "form.pitch": function (newValue) {
-      if (this.flag) {
-        skyline.pitch = parseFloat(newValue);
-      }
-    },
-    "form.skylineRadius": function (newValue) {
-      if (this.flag) {
-        skyline.radius = parseFloat(newValue);
-      }
-    },
-    "form.lineWidth": function (newValue) {
-      if (this.flag) {
-        skyline.lineWidth = parseFloat(newValue);
-      }
-    },
-    "form.skylineColor": function (newValue) {
-      if (this.flag) {
-        let color = Cesium.Color.fromCssColorString(newValue);
-        if (skyline) {
-          skyline.color = color;
-        }
-      }
-    },
-    "form.highlightBarrierColor": function (newValue) {
-      this.form.highlightBarrierColor = newValue;
-    },
-    "form.highlightBarrier": function (newValue) {
-      // let skyline = skyline;
-      if (newValue && skyline) {
-        this.ObstacleSwitching(true);
-      } else if (!newValue && skyline) {
-        this.ObstacleSwitching(false);
-      }
+          area: ["60rem", "30rem"], //宽 高
+          title: "天际线分析结果",
+          maxmin: false,
+          shade: false, //是否显示遮罩
+          shadeClose: false, //点击遮罩是否关闭
+          cancel: () => {
+            //关闭事件
+          },
+        });
+      });
     },
-    "form.Skyline2D": function (newValue) {
-      if (newValue && skyline) {
-        this.getSkyline2D(true);
-      } else if (!newValue && skyline) {
-        this.getSkyline2D(false);
-      }
+    farChange() {
+      facade.farDistance = parseFloat(this.faceW)
     },
-    "form.skylineMode": function (newValue) {
-      this.form.skylineMode = Number(newValue);
-      if (!skyline) {
-        return;
-      }
-      let value = newValue;
-      if (value == "0") {
-        skyline.displayStyle = 0;
-        // scene.primitives._primitives = [];
-      } else if (value == "1") {
-        skyline.displayStyle = 1;
-        // scene.primitives._primitives = [];
-      }
+    heightChange() {
+      facade.maxHeight = parseFloat(this.faceH)
     },
-  },
-  beforeDestroy() {
-    this.clear();
-  },
-};
-</script>
-<style lang="scss">
-@import "@/../../zt.scss";
-</style>
-<style lang="scss" scoped>
-.el-card {
-  border: 0px solid #02a7f0;
-}
-.el-form-item {
-  margin-bottom: 0;
-}
-.EchartsWH {
-  width: 100%;
-  height: 8rem;
+    clear() {
+      viewer.entities.removeAll()
+      facade.clear();
+      drawHandler.clear();
+    }
+
+  }
 }
-</style>
+</script>
+<style></style>