td_official/src/views/gis2D/index.vue

<template>
  <div class="ol-map" id="olMap"></div>
  <div class="left_title_button">
    <div class="title">{{ projectName }}</div>
    <div class="btn" @click="updateZhiJiaZhuanDian('zhuangdian')">
      <SvgIcon :name="bottomSvg" :isStyle="true" :className="'width:250px;height:50px;'" />
      <span>桩点-更新高程</span>
    </div>
    <div class="btn" @click="updateHighLevel('nibianqi')">
      <SvgIcon :name="bottomSvg" :isStyle="true" :className="'width:250px;height:50px;'" />
      <span>逆变器-更新高程</span>
    </div>
    <div class="btn" @click="updateHighLevel('xiangbian')">
      <SvgIcon :name="bottomSvg" :isStyle="true" :className="'width:250px;height:50px;'" />
      <span>箱变-更新高程</span>
    </div>
    <div class="btn" @click="updateZhiJiaZhuanDian('zhijia')">
      <SvgIcon :name="bottomSvg" :isStyle="true" :className="'width:250px;height:50px;'" />
      <span>支架-更新高程</span>
    </div>
    <div class="btn" @click="a()">
      <SvgIcon :name="bottomSvg" :isStyle="true" :className="'width:250px;height:50px;'" />
      <span>光伏板-更新高程</span>
    </div>
  </div>
</template>

<script setup>
import { workScheduleDel } from '@/api/progress/plan';
import { renderFacilitiesToCesium } from '@/views/gisHome/js/renderFacilities';
import { CenterHeight } from '@/views/gis2D/js/center';
import md5 from 'js-md5';
const arr = ref();
const initFacilities = async () => {
  const res = await workScheduleDel('1933358821565095951');
  let count = 0;
  arr.value = res.data.filter((item) => item.category === 'gfb');
  // renderFacilitiesToCesium(sdk.viewer, res.data);
  console.log(arr.value);
};
const a = () => {
  let Height = [];
  let heightAndcenter = CenterHeight(arr.value);
  let arr2 = heightAndcenter.arr2;
  let center = heightAndcenter.center;
  heightAndcenter.Height(arr2, (height) => {
    Height.push(height);

    if (Height.length == arr2.length) {
      heightAndcenter.Cartographic.then((Cartographic) => {
        console.log(Cartographic);
        if (Cartographic.length > 0) {
          console.log(center, Cartographic, Height);
        }
      });
    }
  });
};
// 初始化 Cesium 地球
const createEarth = () => {
  let sdk = new YJ.YJEarth('olMap');
  window.sdk = sdk;
  YJ.Global.setDefaultView(sdk, {
    destination: { lng: 100, lat: 30, alt: 22099000 },
    orientation: {
      heading: 0.0,
      pitch: -90.0,
      roll: 0.0
    }
  });

  new YJ.Obj.ArcgisWXImagery(sdk, {
    show: true,
    layer_index: 1
  });

  YJ.Global.CesiumContainer(sdk, {
    compass: false
  });

  new YJ.Tools(sdk).flyHome(0);
};

const handletilList = async () => {
  window.tileset = new YJ.Obj.Tileset(window.sdk, { id: 'b8d2d39c10f4e5568e647fde175d652b' });
  // window.terrain = new YJ.Obj.Terrain(window.sdk, { id: 'e904acb32aaa8b872c64866ebaaaf5e2' });
  await tileset.on();
  tileset.flyTo();
};
// 更新高程（箱变、逆变器）
// const updateHighLevel = (str) => {
// 	let gxArr;
// 	if (str == 'nibianqi') {
// 		gxArr = nibianqi;
// 	}
// 	if (str == 'xiangbian') {
// 		gxArr = xiangbian;
// 	}
// 	if (gxArr.length == 0) {
// 		ElMessage({
// 			message: '数据为空，请确认数据是否上传',
// 			type: 'warning',
// 		});
// 		return;
// 	}
// 	let arr = [];
// 	gxArr.forEach((item) => {
// 		let p = JSON.parse(item.detail).positions[0];
// 		arr.push(p);
// 	});
// 	const loading = ElLoading.service({
// 		lock: true,
// 		text: '更新高程中...',
// 		background: 'rgba(0, 0, 0, 0.7)',
// 	});
// 	state.tools.sampleHeightMostDetailed(arr).then((Cartographic) => {
// 		if (Cartographic.length > 0) {
// 			loading.close();
// 			assemblyData(gxArr, Cartographic);
// 		}
// 	});
// };

onMounted(async () => {
  // 最早执行
  window.CESIUM_BASE_URL = '/Cesium/';

  await YJ.on({
    username: 'admin',
    password: md5('admin_admin123'),
    host: 'http://192.168.110.2:8895/'
  });
  createEarth();
  await handletilList();
  await initFacilities();
  console.log(YJ);
});
</script>

<style lang="scss" scoped>
.ol-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.left_title_button {
  position: absolute;
  top: 10%;
  left: 30px;
  width: 250px;
  height: 100px;
  z-index: 1999;

  .title {
    color: #fff;
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 20px;
  }

  .btn {
    width: 100%;
    height: 50px;
    position: relative;
    margin-bottom: 30px;

    > span {
      width: 100%;
      font-size: 22px;
      font-weight: bold;
      color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      letter-spacing: 3px;
      text-align: center;
    }
  }
}
</style>