二维GIS高程

package.json

@@ -39,6 +39,7 @@
     "ezuikit-js": "^8.1.10",
     "file-saver": "2.0.5",
     "fuse.js": "7.0.0",
+    "geotiff": "^2.1.4-beta.0",
     "highlight.js": "11.9.0",
     "image-conversion": "2.1.1",
     "js-cookie": "3.0.5",

src/router/index.ts

@@ -109,6 +109,11 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import('@/views/progress/progressPaper/index.vue'),
     hidden: true
   },
+  {
+    path: '/gis2D1',
+    component: () => import('@/views/gis2D/index.vue'),
+    hidden: true
+  }
 ];
 
 // 动态路由，基于用户权限动态去加载

src/views/gis2D/index.vue

@@ -0,0 +1,183 @@
+<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>

src/views/gis2D/js/center.js

@@ -0,0 +1,137 @@
+import { polygon, centerOfMass } from '@turf/turf';
+export function CenterHeight(list) {
+  
+  let arr = []
+  let arr2 = []
+  list.forEach(ele => {
+    let point = CenterPoint(ele)
+    let point2 = sampleHeight(ele)
+    arr.push(point)
+    arr2.push(point2)
+  })
+  return {
+    Cartographic: sampleHeightMostDetailed(arr),
+    center: arr,
+    arr2: arr2,
+    Height: sampleHeightMostDetailed2
+  }
+}
+
+
+// list:[
+//   {
+//     positionList:[]
+//   }
+// ]
+//   center[0]  == [106,23]
+//   Cartographic[0] == {
+//     longitude:106,
+//     latitude:23,
+//     height:100,
+//   }
+//   Height[0] == [
+//     {
+//       longitude:106,
+//       latitude:23,
+//       height:100,
+//     },
+//     {
+//       longitude:106,
+//       latitude:23,
+//       height:100,
+//     },
+//     {
+//       longitude:106,
+//       latitude:23,
+//       height:100,
+//     },
+//     {
+//       longitude:106,
+//       latitude:23,
+//       height:100,
+//     },
+//     {
+//       longitude:106,
+//       latitude:23,
+//       height:100,
+//     },
+//   ]
+
+function CenterPoint(item) {
+  const { positionList } = item
+  let arr = []
+  positionList.forEach(ele => {
+    let itemdata =[Number(ele[0]),Number(ele[1])]
+    arr.push(itemdata)
+  })
+  let polygondata = polygon([arr]);
+  let point = centerOfMass(polygondata).geometry.coordinates
+  return point
+}
+// 计算所有的点的高程
+function sampleHeight(item) { 
+  const { positionList } = item
+  let arr = []
+  positionList.forEach(item => {
+    let a = [Number(item[0]),Number(item[1])]
+    arr.push(a)
+  })
+  return arr
+}
+
+function sampleHeightMostDetailed(cartesians) {
+  let positionList = []
+  let viewer = window.sdk.viewer
+  // console.log('cartesianscartesians', cartesians);
+  cartesians.forEach(cartesian => {
+    positionList.push(new Cesium.Cartographic.fromDegrees(cartesian[0], cartesian[1]))
+  })
+  return new Promise(async resolve => {
+    try {
+      // 当前场景中没有使用地形
+      const promise = viewer.scene.sampleHeightMostDetailed(positionList)
+      promise.then(updatedPositions => {
+        let resultCartesians = []
+        updatedPositions.forEach(position => {
+          if (position) {
+            // 采集成功，转为笛卡尔坐标
+            // resultCartesians.push(this.cartographicToCartesian(position))
+            resultCartesians.push(position)
+          } else {
+            // postion为undefined时，说明该位置采集失败
+            // resultCartesians.push(position)
+          }
+        })
+        resolve(resultCartesians)
+      })
+    } catch (e) {
+      resolve(false)
+    }
+  })
+}
+function sampleHeightMostDetailed2(cartesians, onResult) {
+  cartesians.forEach(cartesianGroup => {
+    const positionList = cartesianGroup.map(c =>
+      Cesium.Cartographic.fromDegrees(c[0], c[1])
+    );
+    getHeight(positionList).then(res => {
+      if (typeof onResult === 'function') {
+        onResult(res);
+      }
+    });
+  });
+}
+
+function getHeight(positionList) {
+  const viewer = window.sdk.viewer;
+  return new Promise(resolve => {
+    try {
+      viewer.scene.sampleHeightMostDetailed(positionList).then(updatedPositions => {
+        const resultCartesians = updatedPositions.filter(Boolean);
+        resolve(resultCartesians);
+      });
+    } catch (e) {
+      resolve([]);
+    }
+  });
+}

src/views/gisHome/component/map.vue

@@ -5,7 +5,8 @@
 <script setup>
 import { workScheduleDel } from '@/api/progress/plan';
 import { renderFacilitiesToCesium } from '@/views/gisHome/js/renderFacilities';
-let sdk = null;
+import axios from 'axios';
+import md5 from 'js-md5';
 
 const initFacilities = async () => {
   const res = await workScheduleDel('1933358821565095951');
@@ -16,8 +17,8 @@ const initFacilities = async () => {
 
 // 初始化 Cesium 地球
 const createEarth = () => {
-  sdk = new YJ.YJEarth('olMap');
+  let sdk = new YJ.YJEarth('olMap');
-
+  window.sdk = sdk;
   YJ.Global.setDefaultView(sdk, {
     destination: { lng: 100, lat: 30, alt: 22099000 },
     orientation: {
@@ -39,13 +40,39 @@ const createEarth = () => {
   new YJ.Tools(sdk).flyHome(0);
 };
 
+const handletilList = async () => {
+  // axios.post('http://192.168.110.2:8895/yjearth4.0/api/v1/source/list').then((res) => {
+  //   console.log(res);
+  // });
+  window.tileset = new YJ.Obj.Tileset(window.sdk, {
+    id: 'b8d2d39c10f4e5568e647fde175d652b'
+    //       host: getAddress(),
+    //       show: true,
+    //       position: position,
+    //       ...node.detail,
+    //       name: node.source_name,
+  });
+  window.terrain = new YJ.Obj.Terrain(window.sdk, {
+    id: 'e904acb32aaa8b872c64866ebaaaf5e2'
+  });
+  await tileset.on();
+
+  tileset.flyTo(); // terrain.on();
+};
+
 onMounted(async () => {
   // 最早执行
   window.CESIUM_BASE_URL = '/Cesium/';
+  console.log(md5('admin_admin123'));
 
-  await YJ.on();
+  await YJ.on({
+    username: 'admin',
+    password: md5('admin_admin123'),
+    host: 'http://192.168.110.2:8895/'
+  });
   createEarth();
-  await initFacilities();
+  await handletilList();
+  // await initFacilities();
   console.log(YJ);
 });
 </script>

src/views/progress/progressPaper/index.vue

@@ -53,8 +53,8 @@
 <script lang="ts" setup>
 import Map from 'ol/Map'; // OpenLayers的主要类，用于创建和管理地图
 import View from 'ol/View'; // OpenLayers的视图类，定义地图的视图属性
-import { Tile as TileLayer } from 'ol/layer'; // OpenLayers的瓦片图层类
+import { Tile as TileLayer, WebGLTile } from 'ol/layer'; // OpenLayers的瓦片图层类
-import { XYZ } from 'ol/source'; // OpenLayers的瓦片数据源，包括XYZ格式和OpenStreetMap专用的数据源
+import { GeoTIFF, Raster, XYZ } from 'ol/source'; // OpenLayers的瓦片数据源，包括XYZ格式和OpenStreetMap专用的数据源
 import { defaults as defaultControls, defaults, FullScreen, MousePosition, ScaleLine } from 'ol/control';
 import { fromLonLat } from 'ol/proj';
 import { useUserStoreHook } from '@/store/modules/user';
@@ -73,7 +73,12 @@ import { FeatureCollection, Geometry } from 'geojson';
 import { MapViewFitter } from '@/utils/setMapCenter';
 import PointerInteraction from 'ol/interaction/Pointer';
 import { Coordinate } from 'ol/coordinate';
+import { fromBlob, fromUrl, fromArrayBuffer, Pool } from 'geotiff';
+
+import GeoTIFFSource from 'ol/source/GeoTIFF';
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const orthophoto = '@/assets/images/orthophoto.tif';
 const selector = ref<LassoSelector | null>(null);
 // 获取用户 store
 const userStore = useUserStoreHook();
@@ -398,8 +403,28 @@ const getList = async () => {
 let map: any = null;
 const layerData = reactive<any>({});
 const centerPosition = ref(fromLonLat([107.12932403398425, 23.805564054229908]));
-
 const initOLMap = () => {
+  const source = new GeoTIFF({
+    sources: [
+      {
+        url: '../../../assets/images/orthophoto.tif'
+      }
+    ],
+    convertToRGB: true // 将色彩系统转换为RGB
+  });
+  source.on('change', () => {
+    const state = source.getState();
+    console.log('GeoTIFF 加载状态:', state);
+    if (state === 'ready') {
+      console.log('✅ GeoTIFF 加载成功');
+    } else if (state === 'error') {
+      console.error('❌ GeoTIFF 加载失败');
+    }
+  });
+  const tiffLayer = new WebGLTile({
+    source: source
+  });
+
   // 创造地图实例
   map = new Map({
     // 设置地图容器的ID