maxiaoxiao 5 månader sedan
förälder
incheckning
187e6b7a57

+ 357 - 0
src/components/3DAnalysis/SightCorridor/index.vue

@@ -0,0 +1,357 @@
+<template>
+  <div class="sm-function-module-content ZTGlobal">
+    <el-row
+      :gutter="5"
+      style="border: 1px dashed #02a7f0; padding: 0.5rem; color: #ffffff"
+    >
+      <el-row :gutter="5">
+        观察者高度(米):
+        <el-input-number
+          size="small"
+          label="观察者高度:"
+          min="0"
+          max="50"
+          :step="0.5"
+          precision="1"
+          v-model="personH"
+        ></el-input-number>
+        <el-col :span="8"
+          ><el-button size="mini" type="default" @click="addGCD"
+            >添加观察点</el-button
+          >
+        </el-col>
+        <el-col :span="8"
+          ><el-button size="mini" type="default" @click="addTagget"
+            >添加目标点</el-button
+          >
+        </el-col>
+        <el-col :span="7">
+          <el-button size="mini" type="default" @click="changeView"
+            >切换视角</el-button
+          >
+        </el-col>
+      </el-row>
+    </el-row>
+    绿线为可见区域,红线为不可见区域
+
+    <el-form :model="proform" ref="ruleForm" label-width="100px">
+      <el-form-item label="宽度:" prop="horizontal">
+        <el-slider
+          class="inputwidth"
+          :min="1"
+          :max="50"
+          :step="1"
+          v-model="proform.horizontal"
+          @input="chageHor"
+        ></el-slider>
+      </el-form-item>
+      <el-form-item label="高度:" prop="vertical">
+        <el-slider
+          class="inputwidth"
+          :min="1"
+          :max="50"
+          :step="1"
+          v-model="proform.vertical"
+          @input="chageVert"
+        ></el-slider>
+      </el-form-item>
+      <el-form-item label="距离:" prop="distance">
+        <el-slider
+          class="distance"
+          :min="100"
+          :max="1000"
+          :step="1"
+          v-model="proform.distance"
+          @input="chageDist"
+        ></el-slider>
+      </el-form-item>
+    </el-form>
+
+    <div class="boxchild">
+      <el-button type="primary" size="mini" @click="active">
+        视频投放
+      </el-button>
+      <el-button type="primary" size="mini" @click="clear">清除</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { init } from "@/utils/MapHelper/sightCorridor.js";
+import RSAnalysis from "@/utils/MapHelper/RSAnalysis.js";
+// 观察点,目标点
+// import { Cartesian2toDegrees } from "@/utils/MapHelper/help.js";
+let sightline, handlerPoint, points;
+export default {
+  mixins: [RSAnalysis],
+  data() {
+    return {
+      addViewFlag: false,
+      addTargetFlag: false,
+      isFrom2To: true,
+      personH: 1.8,
+      proform: {
+        horizontal: 2,
+        vertical: 1,
+        distance: 200,
+        visibleLine: true,
+      },
+      center: null,
+    };
+  },
+  mounted() {
+    // if (this.analysisShow && this.skylineComb) {
+    // }
+    this.$nextTick(() => {
+      this.initPoint();
+      init();
+    });
+  },
+  methods: {
+    /**
+     * 添加观察点
+     */
+    addGCD() {
+      let that = this;
+      this.clearScope();
+
+      sightline.removeAllTargetPoint();
+      that.addViewFlag = true;
+      that.addTargetFlag = false;
+      // that.isFrom2To = true;
+      if (handlerPoint) handlerPoint.clear();
+      this.setInput();
+    },
+    /**
+     * 添加目标点
+     */
+    addTagget() {
+      let that = this;
+      that.addViewFlag = false;
+      that.addTargetFlag = true;
+      this.setInput();
+    },
+    initPoint() {
+      sightline = new Cesium.Sightline(viewer.scene);
+      sightline.build();
+      handlerPoint = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
+      viewer.scene.undergroundMode = false;
+    },
+    /**
+     * 输入点
+     */
+    setInput() {
+      var that = this;
+      // that.changCount = 0;
+      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;
+        debugger;
+        //将获取的点的位置转化成经纬度
+        var cartographic = Cartesian2toDegrees(position);
+        // if (cartographic[2] < 0) cartographic[2] = 0;
+        cartographic[2] += that.personH;
+        //添加观察点
+        if (that.addViewFlag) {
+          //设置观察点
+
+          sightline.viewPosition = cartographic;
+          that.addViewFlag = false;
+          viewer.entities.removeById("gcPoint");
+          var labelentity = new Cesium.Entity({
+            id: "gcPoint",
+            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(0, -20), //文字偏移
+              fillColor: Cesium.Color.RED,
+              // backgroundColor:new Cesium.Color(0, 0, 0, 1),
+              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+                0,
+                1500
+              ), //达到一定高度隐藏
+              disableDepthTestDistance: Number.POSITIVE_INFINITY,
+            },
+          });
+          // that.points.push(entity)
+          // viewer.entities.add(entity);
+          that.gcPoint = cartographic;
+          points.push(labelentity);
+          viewer.entities.add(labelentity);
+        } else if (that.addTargetFlag) {
+          //添加目标点
+          //设置目标点
+          sightline.addTargetPoint({
+            position: cartographic,
+            name: "目标点",
+          });
+          viewer.entities.removeById("targetPoint");
+          var labelentity = new Cesium.Entity({
+            id: "targetPoint",
+            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(0, -20), //文字偏移
+              fillColor: Cesium.Color.RED,
+              // backgroundColor:new Cesium.Color(0, 0, 0, 1),
+              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+                0,
+                1500
+              ), //达到一定高度隐藏
+              disableDepthTestDistance: Number.POSITIVE_INFINITY,
+            },
+          });
+          points.push(labelentity);
+          viewer.entities.add(labelentity);
+          that.addTargetFlag = false;
+          that.targetPoint = cartographic;
+          sightline.build();
+          that.ComputationalPerspective();
+        }
+        handlerPoint.deactivate();
+        handlerPoint.clear();
+      });
+    },
+    /**
+     * 计算方位角
+     * @param {} points
+     */
+    ComputationalPerspective() {
+      // this.changCount++;
+      var point1;
+      var point2;
+      debugger;
+      if (
+        sightline.viewPosition[0] == 0 ||
+        sightline.viewPosition[1] == 0 ||
+        sightline._currentTargetPoint[0] == 0 ||
+        sightline._currentTargetPoint[1] == 0
+      ) {
+        this.$message.warning("请添加观察点或目标点");
+        return;
+      }
+      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],
+        ];
+      }
+      var positionA = Cesium.Cartesian3.fromDegrees(
+        point1[0],
+        point1[1],
+        point1[2]
+      );
+      var positionB = Cesium.Cartesian3.fromDegrees(
+        point2[0],
+        point2[1],
+        point2[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)
+      );
+      const resultPitch = Cesium.Math.toDegrees(Math.asin(finalPosition.z));
+      viewer.camera.setView({
+        destination: positionA,
+        orientation: {
+          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
+        },
+      });
+    },
+    /**
+     * 停止飞行、漫游、清除图元
+     */
+    clearScope() {
+      viewer.entities.removeAll();
+      points = [];
+      console.log("sightline", "sightline");
+      console.log(sightline, "sightline");
+      sightline.removeAllTargetPoint();
+      if (handlerPoint) {
+        handlerPoint.clear();
+        handlerPoint.deactivate();
+      }
+      // this.tooltip.setVisible(false);
+      viewer.scene.camera.stopFlyCircle();
+      // this.changCount = 0;
+      viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+    },
+  },
+};
+</script>
+
+<style>
+/* @import "@/views/ConstructionApplication3D/zt.scss"; */
+</style>

+ 17 - 8
src/components/Combinations/analysisCombination/analysisCombination.vue

@@ -12,6 +12,7 @@
         <span :class="{ titleColor: smashingShow }" class="title-txt" @click="choose(5)">{{ Resource.smashing }}</span>
         <span :class="{ titleColor: clipPlaneShow }" class="title-txt" @click="choose(6)">模型剖切</span>
         <span :class="{ titleColor: projectionShow }" class="title-txt" @click="choose(7)">视频融合</span>
+        <span :class="{ titleColor: corridorShow }" class="title-txt" @click="choose(8)">视廊分析</span>
         <span class="closeBtn" @click="toggleVisibility">&times;</span>
       </div>
       <!-- 调用子组件 -->
@@ -23,6 +24,7 @@
       <sm3d-smashing></sm3d-smashing>
       <ClippingPlanes v-if="clipPlaneShow"></ClippingPlanes>
       <Projection v-if="projectionShow"></Projection>
+      <SightCorridor v-if="corridorShow"></SightCorridor>
     </div>
   </div>
 </template>
@@ -30,9 +32,10 @@
 <script>
 import ClippingPlanes from "@/components/3DAnalysis/ClippingPlanes/index.vue";
 import Projection from "@/components/3DAnalysis/Projection/index.vue";
+import SightCorridor from "@/components/3DAnalysis/SightCorridor/index.vue";
 export default {
   name: "Sm3dAnalysis",
-  components: { ClippingPlanes, Projection },
+  components: { ClippingPlanes, Projection,SightCorridor },
   props: {},
   data() {
     return {
@@ -67,6 +70,9 @@ export default {
     projectionShow: function () {
       return this.sharedState.analysis[7];
     },
+    corridorShow: function () {
+      return this.sharedState.analysis[8];
+    },
     analysisShow: function () {
       return this.sharedState.toolBar[6];
     },
@@ -87,25 +93,28 @@ export default {
       }
       switch (i) {
         case 0:
-          store.setAnalysisAction([1, 0, 0, 0, 0, 0, 0]);
+          store.setAnalysisAction([1, 0, 0, 0, 0, 0, 0, 0, 0]);
           break;
         case 1:
-          store.setAnalysisAction([0, 1, 0, 0, 0, 0, 0, 0]);
+          store.setAnalysisAction([0, 1, 0, 0, 0, 0, 0, 0, 0]);
           break;
         case 2:
-          store.setAnalysisAction([0, 0, 1, 0, 0, 0, 0, 0]);
+          store.setAnalysisAction([0, 0, 1, 0, 0, 0, 0, 0, 0]);
           break;
         case 3:
-          store.setAnalysisAction([0, 0, 0, 1, 0, 0, 0, 0]);
+          store.setAnalysisAction([0, 0, 0, 1, 0, 0, 0, 0, 0]);
           break;
         case 5:
-          store.setAnalysisAction([0, 0, 0, 0, 0, 1, 0, 0]);
+          store.setAnalysisAction([0, 0, 0, 0, 0, 1, 0, 0, 0]);
           break;
         case 6:
-          store.setAnalysisAction([0, 0, 0, 0, 0, 0, 1, 0]);
+          store.setAnalysisAction([0, 0, 0, 0, 0, 0, 1, 0, 0]);
           break;
           case 7:
-          store.setAnalysisAction([0, 0, 0, 0, 0, 0, 0,1]);
+          store.setAnalysisAction([0, 0, 0, 0, 0, 0, 0, 1, 0]);
+          break;
+          case 8:
+          store.setAnalysisAction([0, 0, 0, 0, 0, 0, 0, 0, 1]);
           break;
         default:
           store.setAnalysisAction([0, 0, 0, 0, 1, 0]);

+ 1 - 1
src/store/store.js

@@ -11,7 +11,7 @@ var store2 = {
         sceneAtttribute: [1, 0, 0, 0, 0],
         terrain: [0, 0, 0, 0, 1],
         clip: [1, 0, 0, 0],
-        analysis: [1, 0, 0, 0, 0, 0, 0],
+        analysis: [1, 0, 0, 0, 0, 0, 0, 0],
         cityPlan: [1, 0, 0, 0, 0],
         onlineEdit: [1, 0, 0],
         specialEffects: [0, 0, 0], //特效

+ 11 - 0
src/utils/MapHelper/help.js

@@ -309,3 +309,14 @@ export function str2Unicode(str) {
     es[i] = ("00" + str.charCodeAt(i).toString(16)).slice(-4);
   return "\\u" + es.join("\\u");
 }
+/**
+   *  //笛卡尔转换为经纬度
+   * @param {*} position
+   */
+export function 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];
+}

+ 510 - 0
src/utils/MapHelper/sightCorridor.js

@@ -0,0 +1,510 @@
+var viewPosition;
+export function init() {
+    // viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
+    //     url: 'https://dev.virtualearth.net',
+    //     mapStyle: Cesium.BingMapsStyle.AERIAL,
+    //     key: URL_CONFIG.BING_MAP_KEY
+    // }));
+    var scene = viewer.scene;
+
+
+    if (!scene.pickPositionSupported) {
+        alert('不支持深度纹理,可视域分析功能无法使用(无法添加观测)!');
+    }
+    // 先将此标记置为true,不激活鼠标移动事件中对可视域分析对象的操作
+    scene.viewFlag = true;
+    var pointHandler = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
+    // 创建可视域分析对象
+    var viewshed3D = new Cesium.ViewShed3D(scene);
+    var colorStr1 = viewshed3D.visibleAreaColor.toCssColorString();
+    var colorStr2 = viewshed3D.hiddenAreaColor.toCssColorString();
+
+    var widget = viewer.Widget;
+    try {
+        //添加S3M图层
+        var promise = scene.open(URL_CONFIG.SCENE_CBD);
+        Cesium.when(promise, function (layers) {
+            var waterLayer = scene.layers.find('Lake@CBD');
+            // 设置水面参数
+            waterLayer.waterSpeed = 0.5;
+            waterLayer.waterWaveScale = 0.5;
+            // 图层加载完成,设置相机位置
+            scene.camera.setView({
+                destination: Cesium.Cartesian3.fromDegrees(109.5151, 18.3185, 100),
+                orientation: {
+                    heading: 3.179304500963121,
+                    pitch: -0.46239072362282485,
+                    roll: 6.283185307179583
+                }
+            });
+            for (var i = 0; i < layers.length; i++) {
+                layers[i].selectEnabled = false;
+            }
+        }, function (e) {
+            if (widget._showRenderLoopErrors) {
+                var title = '加载SCP失败,请检查网络连接状态或者url地址是否正确?';
+                widget.showErrorPanel(title, undefined, e);
+            }
+        });
+    } catch (e) {
+        if (widget._showRenderLoopErrors) {
+            var title = '渲染时发生错误,已停止渲染。';
+            widget.showErrorPanel(title, undefined, e);
+        }
+    }
+
+    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+    // 鼠标移动时间回调
+    handler.setInputAction(function (e) {
+        // 若此标记为false,则激活对可视域分析对象的操作
+        if (!scene.viewFlag) {
+            //获取鼠标屏幕坐标,并将其转化成笛卡尔坐标
+            var windowPosition = e.endPosition;
+            scene.pickPositionAsync(windowPosition).then((last) => {
+                //计算该点与视口位置点坐标的距离
+                var distance = Cesium.Cartesian3.distance(viewPosition, last);
+
+                if (distance > 0) {
+                    // 将鼠标当前点坐标转化成经纬度
+                    var cartographic = Cesium.Cartographic.fromCartesian(last);
+                    var longitude = Cesium.Math.toDegrees(cartographic.longitude);
+                    var latitude = Cesium.Math.toDegrees(cartographic.latitude);
+                    var height = cartographic.height;
+                    // 通过该点设置可视域分析对象的距离及方向
+                    viewshed3D.setDistDirByPoint([longitude, latitude, height]);
+                }
+            })
+        }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+    handler.setInputAction(function (e) {
+        //鼠标右键事件回调,不再执行鼠标移动事件中对可视域的操作
+        scene.viewFlag = true;
+
+        // scene.camera.setView({
+        //     destination: Cesium.Cartesian3.fromDegrees(viewshed3D.viewPosition[0], viewshed3D.viewPosition[1], viewshed3D.viewPosition[2] + 1.8),
+        //     orientation: {
+        //         heading: Cesium.Math.toRadians(viewshed3D.direction),
+        //         pitch: 0,
+        //         roll: 0
+        //     }
+        // });
+        $("#wrapper").show();
+        viewModel.direction = viewshed3D.direction;
+        viewModel.pitch = viewshed3D.pitch;
+        viewModel.distance = viewshed3D.distance;
+        viewModel.horizontalFov = viewshed3D.horizontalFov;
+        viewModel.verticalFov = viewshed3D.verticalFov;
+
+    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+
+    var tooltip = createTooltip(document.body);
+
+    //绘制裁剪面
+    var handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, 0);
+    handlerPolygon.activeEvt.addEventListener(function (isActive) {
+        if (isActive == true) {
+            viewer.enableCursorStyle = false;
+            viewer._element.style.cursor = '';
+            $('body').removeClass('drawCur').addClass('drawCur');
+        } else {
+            viewer.enableCursorStyle = true;
+            $('body').removeClass('drawCur');
+        }
+    });
+    handlerPolygon.movingEvt.addEventListener(function (windowPosition) {
+        if (handlerPolygon.isDrawing) {
+            tooltip.showAt(windowPosition, '<p>绘制相交区域(右键结束绘制)</p>');
+        }
+    });
+
+    handlerPolygon.drawEvt.addEventListener(function (result) {
+        tooltip.setVisible(false);
+
+        var array = [].concat(result.object.positions);
+        var positions = [];
+        for (var i = 0, len = array.length; i < len; i++) {
+
+            var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
+            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
+            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
+            var h = cartographic.height;
+            if (positions.indexOf(longitude) == -1 && positions.indexOf(latitude) == -1) {
+                positions.push(longitude);
+                positions.push(latitude);
+                positions.push(h);
+            }
+        }
+        handlerPolygon.polygon.show = false;
+        handlerPolygon.polyline.show = false;
+        viewshed3D.addClipRegion({ name: 'test', position: positions });
+        handlerPolygon.deactivate();
+    });
+
+    pointHandler.drawEvt.addEventListener(function (result) {
+        // var point = result.object;
+        var position = result.object.position;
+        viewPosition = 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 + 1.8;
+        // point.position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
+
+        if (scene.viewFlag) {
+            // 设置视口位置
+            viewshed3D.viewPosition = [longitude, latitude, height];
+            viewshed3D.build();
+            // 将标记置为false以激活鼠标移动回调里面的设置可视域操作
+            scene.viewFlag = false;
+        }
+    });
+
+    var viewModel = {
+        direction: 1.0,
+        pitch: 1.0,
+        distance: 1.0,
+        verticalFov: 1.0,
+        horizontalFov: 1.0,
+        visibleAreaColor: '#ffffffff',
+        invisibleAreaColor: '#ffffffff'
+    };
+
+    Cesium.knockout.track(viewModel);
+    var toolbar = document.getElementById('wrapper');
+    Cesium.knockout.applyBindings(viewModel, toolbar);
+    Cesium.knockout.getObservable(viewModel, 'direction').subscribe(
+        function (newValue) {
+            if (viewshed3D.direction !== parseFloat(newValue)) {
+                viewshed3D.direction = parseFloat(newValue);
+                viewshed3D.removeClipRegion('test');
+            }
+        }
+    );
+    Cesium.knockout.getObservable(viewModel, 'pitch').subscribe(
+        function (newValue) {
+            if (viewshed3D.pitch !== parseFloat(newValue)) {
+                viewshed3D.pitch = parseFloat(newValue);
+                viewshed3D.removeClipRegion('test');
+            }
+        }
+    );
+    Cesium.knockout.getObservable(viewModel, 'distance').subscribe(
+        function (newValue) {
+            if (viewshed3D.distance !== parseFloat(newValue)) {
+                viewshed3D.distance = parseFloat(newValue);
+                viewshed3D.removeClipRegion('test');
+            }
+        }
+    );
+    Cesium.knockout.getObservable(viewModel, 'verticalFov').subscribe(
+        function (newValue) {
+            if (viewshed3D.verticalFov !== parseFloat(newValue)) {
+                viewshed3D.verticalFov = parseFloat(newValue);
+                viewshed3D.removeClipRegion('test');
+            }
+        }
+    );
+    Cesium.knockout.getObservable(viewModel, 'horizontalFov').subscribe(
+        function (newValue) {
+            if (viewshed3D.horizontalFov !== parseFloat(newValue)) {
+                viewshed3D.horizontalFov = parseFloat(newValue);
+                viewshed3D.removeClipRegion('test');
+            }
+        }
+    );
+    Cesium.knockout.getObservable(viewModel, 'visibleAreaColor').subscribe(
+        function (newValue) {
+            var color = Cesium.Color.fromCssColorString(newValue);
+            viewshed3D.visibleAreaColor = color;
+        }
+    );
+    Cesium.knockout.getObservable(viewModel, 'invisibleAreaColor').subscribe(
+        function (newValue) {
+            var color = Cesium.Color.fromCssColorString(newValue);
+            viewshed3D.hiddenAreaColor = color;
+        }
+    );
+
+    $("#colorPicker1").spectrum({
+        color: colorStr1,
+        showPalette: true,
+        showAlpha: true,
+        localStorageKey: "spectrum.demo",
+        preferredFormat: 'rgb'
+    });
+    $('#colorPicker2').spectrum({
+        color: colorStr2,
+        showPalette: true,
+        showAlpha: true,
+        localStorageKey: "spectrum.demo",
+        preferredFormat: 'rgb'
+    });
+    $(".close").click(function () {
+        $("#wrapper").hide();
+    });
+
+    $("#chooseView").click(function (e) {
+        if (pointHandler.active) {
+            return;
+        }
+        //先清除之前的可视域分析
+        // viewer.entities.removeAll();
+        viewshed3D.distance = 0.1;
+        scene.viewFlag = true;
+
+        //激活绘制点类
+        pointHandler.activate();
+    });
+
+    $("#clip-mode").on("input propertychange", function () {
+        clipMode = $(this).val() === 'keep-inside' ? Cesium.ClippingType.KeepInside : Cesium.ClippingType.KeepOutside;
+        viewshed3D.setClipMode(clipMode);
+    });
+
+    $("#cilpRegion").click(function (e) {
+        handlerPolygon.deactivate();
+        handlerPolygon.activate();
+    });
+
+    $("#clear").on("click", function () {
+        viewshed3D.removeAllClipRegion();
+
+        // 清除观察点
+        pointHandler.clear()
+
+        $("#wrapper").hide();
+        viewshed3D.distance = 0.1;
+        scene.viewFlag = true;
+    })
+    $('#loadingbar').remove();
+    $("#toolbar").show();
+}
+
+// 观察点,目标点
+import { Cartesian2toDegrees } from "@/utils/MapHelper/help.js"
+export let sightline, handlerPoint, points
+export function initPoint() {
+    sightline = new Cesium.Sightline(viewer.scene);
+    sightline.build();
+    handlerPoint = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
+    viewer.scene.undergroundMode = false;
+}
+
+
+/**
+   * 输入点
+   */
+export function setInput() {
+    var that = this;
+    console.log('ssss', sightline)
+    // that.changCount = 0;
+    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;
+        debugger;
+        //将获取的点的位置转化成经纬度
+        var cartographic = Cartesian2toDegrees(position);
+        // if (cartographic[2] < 0) cartographic[2] = 0;
+        cartographic[2] += that.personH;
+        //添加观察点
+        if (that.addViewFlag) {
+            //设置观察点
+
+            sightline.viewPosition = cartographic;
+            that.addViewFlag = false;
+            viewer.entities.removeById("gcPoint");
+            var labelentity = new Cesium.Entity({
+                id: "gcPoint",
+                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(0, -20), //文字偏移
+                    fillColor: Cesium.Color.RED,
+                    // backgroundColor:new Cesium.Color(0, 0, 0, 1),
+                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+                        0,
+                        1500
+                    ), //达到一定高度隐藏
+                    disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                },
+            });
+            // that.points.push(entity)
+            // viewer.entities.add(entity);
+            that.gcPoint = cartographic;
+            points.push(labelentity);
+            viewer.entities.add(labelentity);
+        } else if (that.addTargetFlag) {
+            //添加目标点
+            //设置目标点
+            sightline.addTargetPoint({
+                position: cartographic,
+                name: "目标点",
+            });
+            viewer.entities.removeById("targetPoint");
+            var labelentity = new Cesium.Entity({
+                id: "targetPoint",
+                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(0, -20), //文字偏移
+                    fillColor: Cesium.Color.RED,
+                    // backgroundColor:new Cesium.Color(0, 0, 0, 1),
+                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+                        0,
+                        1500
+                    ), //达到一定高度隐藏
+                    disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                },
+            });
+            points.push(labelentity);
+            viewer.entities.add(labelentity);
+            that.addTargetFlag = false;
+            that.targetPoint = cartographic;
+            sightline.build();
+            that.ComputationalPerspective();
+        }
+        handlerPoint.deactivate();
+        handlerPoint.clear();
+    });
+}
+/**
+* 计算方位角
+* @param {} points
+*/
+export function ComputationalPerspective() {
+    // this.changCount++;
+    var point1;
+    var point2;
+    debugger;
+    if (
+        sightline.viewPosition[0] == 0 ||
+        sightline.viewPosition[1] == 0 ||
+        sightline._currentTargetPoint[0] == 0 ||
+        sightline._currentTargetPoint[1] == 0
+    ) {
+        this.$message.warning("请添加观察点或目标点");
+        return;
+    }
+    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],
+        ];
+    }
+    var positionA = Cesium.Cartesian3.fromDegrees(
+        point1[0],
+        point1[1],
+        point1[2]
+    );
+    var positionB = Cesium.Cartesian3.fromDegrees(
+        point2[0],
+        point2[1],
+        point2[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)
+    );
+    const resultPitch = Cesium.Math.toDegrees(Math.asin(finalPosition.z));
+    viewer.camera.setView({
+        destination: positionA,
+        orientation: {
+            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
+        },
+    });
+}
+/**
+   * 停止飞行、漫游、清除图元
+   */
+export function clearScope() {
+    viewer.entities.removeAll();
+    points = [];
+    sightline.removeAllTargetPoint();
+    if (handlerPoint) {
+        handlerPoint.clear();
+        handlerPoint.deactivate();
+    }
+    // this.tooltip.setVisible(false);
+
+    viewer.scene.camera.stopFlyCircle();
+
+    // this.changCount = 0;
+    viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+}
+
+