surprise
2024-03-05 1ce1b525e7470ebaaeb0d5cd1e59bd905c1a7114
src/components/mapsdk.vue
@@ -28,6 +28,45 @@
          </div>
        </el-card>
      </div>
      <div class="romBox" v-drag v-if="$store.state.lineRoam">
        <el-card class="box-card box_divm">
          <div slot="header" class="clearfix">
            <span>线路漫游</span>
            <div style="float: right; cursor: pointer">
              <i class="el-icon-close" @click="closeBufferBox(9)"></i>
            </div>
          </div>
          <div class="box-body">
            <el-form ref="form" :model="bufFrom" label-width="100px">
              <el-form-item label="线路:">
                <el-select v-model="bufFrom.roamLine" placeholder="">
                  <el-option v-for="item in bufFrom.roamOption" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="线路:">
                <el-select v-model="bufFrom.roamLine2" placeholder="">
                  <el-option v-for="item in bufFrom.roamOption2" :key="item.id" :label="item.name" :value="item.geom">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" @click="setStartRoam">开始漫游</el-button>
                <el-button size="mini" @click="setExitRoam">结束漫游</el-button>
              </el-form-item>
            </el-form>
            <div class="romContent" v-show="flyRoamOption.length != 0">
              <ul>
                <li v-for="(item, index) in flyRoamOption" :key="index">
                  <span> {{ item.line }}</span> <span> {{ item.name }}</span> <span> {{ item.type }}</span>
                </li>
              </ul>
            </div>
          </div>
        </el-card>
      </div>
      <!--坐标点位-->
      <div class="coordLocalBox" v-if="showCoordLocalBoxDialog">
        <el-card class="box-card">
@@ -208,7 +247,7 @@
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);">
  border: 1px solid rgba(255, 255, 255, 0.5);display:none">
        <div title="2/3维切换" id="cenBg" :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div>
      </div>
      <!--      </div>-->
@@ -304,18 +343,13 @@
          <div slot="header">
            <span>属性信息</span>
            <div style="float: right; cursor: pointer">
              <el-link v-if="$store.state.surfaceDeForm.flag && this.$store.state.surfaceDeForm.gid" type="primary"
                :underline="false" @click="setSurfaceDeForm" style="margin-right: 10px">地表形变时序图</el-link>
              <el-link v-if="$store.state.propertiesName.enName == 's_surveyworksite'" type="primary" :underline="false"
                @click="getPointInfo" style="margin-right: 10px">勘察信息表</el-link>
              <el-link type="primary" :underline="false" @click="getAttatchList" style="margin-right: 10px">查看附件</el-link>
              <i class="el-icon-close" @click="closeBufferBox(6)"></i>
            </div>
          </div>
          <div class="pointInfoBoxContext" style="height:250px;overflow-y: auto">
            <div style="line-height: 20px" v-for="(value, key) in $store.state.propertiesInfo" :key="key">
              <span v-if="key != 'eventid'" style="font-size: 14px;font-weight: bold;margin-right: 5px">{{ key }}:</span>
              <span v-if="key != 'eventid'">{{ value }}</span>
              <span>{{ value.name }}:{{ value.val }}</span>
            </div>
          </div>
        </el-card>
@@ -382,6 +416,35 @@
          </div>
        </el-card>
      </div>
      <!-- 地表形变时序图 -->
      <div class="surfaceDeFormPop" v-if="$store.state.showEchartCount" style="width: 800px; height: 800px;" v-drag>
        <el-card class="box-card">
          <div slot="header">
            <span>数据统计</span>
            <div style="float: right; cursor: pointer">
              <i class="el-icon-close" @click="closeBufferBox(8)"></i>
            </div>
          </div>
          <div id="surfaceDeFormEchart" class="pointInfoBoxContext" style="height:500px;width:750px;">
            <echart1></echart1>
          </div>
        </el-card>
      </div>
      <!-- 知识图谱 -->
      <div class="knowledgePop" v-if="$store.state.knowledgeFlag" v-drag>
        <el-card class="box-card">
          <div slot="header">
            <div style="float: right; cursor: pointer">
              <i class="el-icon-close" @click="closeBufferBox(10)"></i>
            </div>
          </div>
          <div class="knowegBody">
            <knowledge-graph v-if="$store.state.knowledgeFlag"></knowledge-graph>
          </div>
        </el-card>
      </div>
      <!--附件列表弹窗-->
      <el-dialog title="附件列表" :append-to-body="false" :visible.sync="showAttach" width="35%"
        :close-on-click-modal="false">
@@ -391,11 +454,13 @@
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column label="时间" width="180">
              <template slot-scope="scope">
                <span>{{ format(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button v-if="showAttachDetailBtn(scope.row)" @click="showAttachDetail(scope.row)" type="text"
                  size="small">查看</el-button>
@@ -451,7 +516,7 @@
import mapMenuTop from "./MapView/mapMenuTop.vue";
import mapSpaceTop from "./MapView/mapSpaceTop.vue";
import ModelProperty from '../views/Tools/ModelProperty.vue';
import knowledgeGraph from '@/views/datamanage/knowledgeGraph'
import {
  select_Comprehensive_ByPageAndCount,
  select_Comprehensive_SelectWktById,
@@ -459,17 +524,21 @@
  dataLib_selectFiles, dataQuery_selectFields, dataQuery_selectDomains,
  dataQuery_selectByPage, sign_getPublicKey, inquiry_downloadTiles,
  comprehensive_selectPubById, comprehensive_selectModelByGuid, dataQuery_selectByGid,
  dataLib_selectByPage
  dataLib_selectByPage, zhangzitou_selectAllLine, zhangzitou_selectAll
} from '../api/api'
import { getToken } from '@/utils/auth'
import * as echarts from "echarts"
import echart1 from "./echart1.vue";
import mapTools from "./js/mapTool";
import { conditions } from '../views/Archive/Archive';
export default {
  name: "",
  components: {
    mapMenuTop,
    mapSpaceTop,
    ModelProperty,
    echart1,
    knowledgeGraph
  },
  data() {
@@ -583,11 +652,12 @@
      loadingText: '',
      loading: false,
      surfaceDeFormFlag: false,
      option: null
      option: null, flyRoamOption: []
    };
  },
  mounted() {
    this.init3DMap();
    this.getRomData();
    this.$bus.$on("mapChangeBox", (res) => {
      this.showChangeBox(res);
    });
@@ -609,7 +679,7 @@
      }
    });
    //模型捕捉
    this.catchmodel();
    // this.catchmodel();
    this.$bus.$on("titleDown", res => {
      this.setDownLoadTitle(res);
    });
@@ -621,6 +691,112 @@
    window.localStorage.setItem('slider_z', this.valueZ);
  },
  methods: {
    async getRomData() {
      const data = await zhangzitou_selectAllLine({
        limit: 100000,
        page: 1,
      })
      if (data.code != 200) return;
      var res = data.result.pois;
      this.bufFrom.roamData = res;
      this.setRoamData();
    },
    setRoamData() {
      var res = this.bufFrom.roamData;
      var std = [];
      var str = [];
      for (var i in res) {
        if (std.indexOf(res[i].line) == -1) {
          std.push(res[i].line)
        }
      }
      for (var i in std) {
        str.push({
          label: std[i],
          value: std[i]
        })
      }
      this.bufFrom.roamOption = str;
      this.bufFrom.roamLine = str[0].value;
      this.setRoamChange();
    },
    setRoamChange() {
      var res = this.bufFrom.roamData;
      var obj = [];
      for (var i in res) {
        if (this.bufFrom.roamLine == res[i].line) {
          obj.push(res[i])
        }
      }
      this.bufFrom.roamOption2 = obj;
      this.bufFrom.roamLine2 = obj[0].geom;
      this.setRoamPoint(this.bufFrom.roamLine2.line);
    },
    async setRoamPoint(res) {
      const data = await zhangzitou_selectAll({
        limit: 100000,
        page: 1,
        line: res
      });
      if (data.code == 200) {
        this.flyRoamOption = data.result.pois;
      }
    },
    setExitRoam() {
      if (!window.PathAnimationData) return
      window.PathAnimationData.fly && window.PathAnimationData.fly.exit();
    },
    setStartRoam() {
      var obj = this.bufFrom.roamLine2;
      var geom = this.$wkt.parse(obj).coordinates[0];
      var degreesArr = [];
      for (var i in geom) {
        degreesArr.push(geom[i][0], geom[i][1], 0)
      }
      earthCtrl.factory.getFlyData(degreesArr, data => {
        data.showPoint = false;
        data.showLine = true;
        data.mode = 1;
        // 弹窗数据
        window.PathAnimationData = {
          flyData: data,
          positionEndCallback: (res) => {
            // setTimeout(() => {
            //   PathAnimationData.fly && PathAnimationData.fly.isPause(true);
            // }, 300);
            // mapTools.init(res, geom, this.bufFrom.roamOption2);
          }
        };
        window.PathAnimationData.winIndex = layer.open({
          type: 2,
          title: '路径动画',
          shade: false,
          area: ['0px', '0px'],
          offset: 'r',
          skin: 'other-class',
          content: SmartEarthRootUrl + 'Workers/path/Path.html',
          end: function () {
            PathAnimationData.fly && PathAnimationData.fly.exit();
          }
        });
      })
      //  setTimeout(() => {
      //   layer.close(window.PathAnimationData.winIndex)
      //  }, 1000);
    },
    async setSurfaceDeForm() {
      var gid = this.$store.state.surfaceDeForm.gid;
      const data = await dataQuery_selectByGid({ gid: gid, name: 'msurfacedeformationdata' });
@@ -844,21 +1020,57 @@
      window.pickedFeature;
      window.pickedColor;
      window.modeCatchHandler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
      window.pickGlobeSlope = new SmartEarth.Cesium.PickGlobeSlope(earthCtrl.Viewer)
      window.modeCatchHandler.setInputAction((event) => {
        if (window.pickedColor) { window.pickedFeature && (window.pickedFeature.color = window.pickedColor); }
        // window.pickedFeature && (window.pickedFeature.color = window.pickedColor);
        window.pickedFeature = sgworld.Viewer.scene.pick(event.position);
        window.pickedFeature = pickGlobeSlope.pickSlope(event.position);
        if (Cesium.defined(window.pickedFeature)) {
          if (window.pickedFeature.primitive instanceof Cesium.Cesium3DTileset) {
            if (window.pickedFeature) {
              window.pickedColor = window.pickedFeature.color
              window.pickedFeature.color = Cesium.Color.RED.withAlpha(0.3);
          if (pickedFeature.primitive && pickedFeature.primitive.primitive) {
            var datat = pickedFeature.primitive.primitive;
            var std = [];
            for (var key in datat) {
              if (key != 'geom') {
                std.push({
                  name: key,
                  val: datat[key]
                })
              }
              // this.$store.state.catModel = true;
            }
            this.$store.state.propertiesInfo = std;
            this.$store.state.propertiesFlag = '1';
            return
          }
              that.setModelInfoData(window.pickedFeature);
          if (pickedFeature.id.properties.propertyNames.length > 0) {
            var val = pickedFeature.id.properties.propertyNames;
            var std = [];
            for (var i in val) {
              std.push({
                name: val[i],
                val: pickedFeature.id.properties[val[i]]._value
              })
            }
          }
          if (std.length > 0) {
            this.$store.state.propertiesInfo = std;
            this.$store.state.propertiesFlag = '1'
            return
          }
          // console.log(window.pickedFeature)
          // if (window.pickedFeature.primitive instanceof Cesium.Cesium3DTileset) {
          //   if (window.pickedFeature) {
          //     window.pickedColor = window.pickedFeature.color
          //     window.pickedFeature.color = Cesium.Color.RED.withAlpha(0.3);
          //     // this.$store.state.catModel = true;
          //     that.setModelInfoData(window.pickedFeature);
          //   }
          // }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },
@@ -944,44 +1156,40 @@
    init3DMap() {
      var webKey = "94a34772eb88317fcbf8428e10448561";
      //地图初始化
      window.sgworld = new SmartEarth.SGWorld("mapdiv", {
      // window.sgworld = new SmartEarth.SGWorld("mapdiv", {
        licenseServer: window.sceneConfig.licenseServer,
      //   licenseServer: window.sceneConfig.licenseServer,
      // });
      window.earthCtrl = new SmartEarth.EarthCtrl("mapdiv", {
        StaticFileBaseUrl: window.sceneConfig.licenseServer,
      });
      window.Viewer = window.sgworld._Viewer;
      // if (is_production) {
      //   Viewer.imageryLayers.removeAll();
      //   var base_ulr = window.sceneConfig.baseUrl;
      //   if (base_ulr.indexOf('{host}') > -1) {
      //     base_ulr = base_ulr.replace("{host}", iisHost)
      //   }
      //   Viewer.imageryLayers.addImageryProvider(
      //     new Cesium.UrlTemplateImageryProvider({
      //       url: base_ulr,
      //       maximumLevel: 5
      //     })
      //   );
      window.Viewer = earthCtrl._Viewer;
      window.sgworld = earthCtrl;
      window.Cesium = SmartEarth.Cesium;
      // }
      Viewer.imageryLayers.removeAll();
      //定位
      // sgworld.Navigate.jumpTo({
      //   //跳转视角
      //   destination: new Cesium.Cartesian3.fromDegrees(
      //     116.3911,
      //     39.9115,
      //     100000
      //   ),
      // })
      Viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(110, 33, 8000000),
      });
      earthCtrl.camera.jumpTo({
      // window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(
      //   new Cesium.UrlTemplateImageryProvider({
      //     url: gaoDeBaseUrl[1].url,
      //   })
      // );
        destination: {
          "x": -1935239.1689147458,
          "y": 4653957.816261454,
          "z": 3900586.9686804516
        }
      })
      window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=94a34772eb88317fcbf8428e10448561",
        })
      );
      window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: "http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=94a34772eb88317fcbf8428e10448561",
        })
      );
      Viewer._enableInfoOrSelection = false;
      //显示fps
      Viewer.scene.debugShowFramesPerSecond = false;
@@ -1017,12 +1225,12 @@
      //   requestVertexNormals: true,
      // };
      // window.terrainLayer = sgworld.Creator.sfsterrainprovider("", option, "", true, "");
      window.terrainLayer = new Cesium.CesiumTerrainProvider({
        url: demLayer
      });
      Viewer.terrainProvider = window.terrainLayer
      // window.terrainLayer = new Cesium.CesiumTerrainProvider({
      //   url: demLayer
      // });
      // Viewer.terrainProvider = window.terrainLayer
      // window.terrainFlag = 'MPT'
      window.elevationTool = new SmartEarth.ElevationTool(window.sgworld);
      elevationTool.setContourColor("#F1D487");
@@ -1225,6 +1433,18 @@
        case 7:
          this.surfaceDeFormFlag = false;
          break;
        case 8:
          this.$store.state.showEchartCount = false;
          break;
        case 9:
          this.$store.state.lineRoam = false;
          this.flyRoamOption = [];
          this.setRoamData()
          break;
        case 10:
          this.$store.state.knowledgeFlag = false
          break;
      }
    },
    //定位
@@ -1260,7 +1480,7 @@
        "巡检点"
      );
      sgworld.Navigate.jumpTo({
      earthCtrl.camera.jumpTo({
        //跳转视角
        destination: new Cesium.Cartesian3.fromDegrees(
          lon,
@@ -1807,6 +2027,45 @@
      position: absolute;
      right: 6%;
      bottom: 1%;
      .clearfix {
        font-size: 14px;
      }
      .el-button--mini {
        padding: 0.36458vw 0.78125vw;
      }
    }
    .romBox {
      width: 350px;
      height: 230px;
      z-index: 40;
      position: absolute;
      right: 2%;
      top: 2%;
      .romContent {
        max-height: 230px;
        overflow: auto;
        li {
          line-height: 20px;
          font-size: 22x;
          font-family: Source Han Sans CN;
          font-weight: bolder;
          display: flex;
          justify-content: space-around;
        }
      }
      .clearfix {
        font-size: 14px;
      }
      .el-button--mini {
        padding: 0.36458vw 0.78125vw;
      }
    }
    .coordLocalBox {
@@ -1829,6 +2088,12 @@
      position: absolute;
      right: 8%;
      bottom: 1%;
      font-size: 14px;
      font-family: Source Han Sans CN;
      span {
        line-height: 25px;
      }
      /deep/ .el-card__header {
        padding: 10px 20px;
@@ -1851,6 +2116,29 @@
      /deep/ .el-card__body {
        padding: 10px 20px;
      }
    }
    .knowledgePop {
      z-index: 40;
      position: absolute;
      top: 2%;
      right: 2%;
      width: 94%;
      height: 92% !important;
      /deep/ .el-card__header {
        padding: 10px 20px;
      }
      /deep/ .el-card__body {
        padding: 0px 0px;
        height: 84vh;
      }
      .knowegBody {
        height: calc(96vh - 28px);
      }
    }
@@ -2166,5 +2454,4 @@
//   background: rgba(255, 255, 255, 0.2) !important;
//   color: white !important;
//   border: 1px solid rgba(255, 255, 255, 0.2) !important;
// }
</style>
// }</style>