taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

二维GIS高程

Browse Source
This commit is contained in:
Teo
2025-06-20 19:54:58 +08:00
parent ea98580b07
commit 61cd9f6bcf
8 changed files with 386 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

BIN
src/assets/images/orthophoto.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 MiB

BIN
src/assets/images/orthophoto.tif Normal file
View File

Binary file not shown.

5
src/router/index.ts
View File

@ -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
}
];
// 动态路由，基于用户权限动态去加载

183
src/views/gis2D/index.vue Normal file
View File

@ -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>

137
src/views/gis2D/js/center.js Normal file
View File

@ -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([]);
}
});
}

37
src/views/gisHome/component/map.vue
View File

@ -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>

31
src/views/progress/progressPaper/index.vue
View File

@ -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 { XYZ } from 'ol/source'; // OpenLayers的瓦片数据源，包括XYZ格式和OpenStreetMap专用的数据源
import { Tile as TileLayer, WebGLTile } from 'ol/layer'; // OpenLayers的瓦片图层类
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