htree
/
powerGrid
12
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

场景默认加载网线、区、电力塔；线支持拾取名称；

This commit is contained in:
honglingjin1994 2024-05-20 00:33:37 +08:00
parent 5d70575376
commit fa5ecb70a0
6 changed files with 170892 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -1,5 +1,4 @@
{
"dependencies": {
"lodash": "^4.17.21"
}
}

1072
power-front/public/data/geojson/line.geojson Normal file
View File

File diff suppressed because one or more lines are too long

974
power-front/public/data/geojson/polygon.geojson Normal file
View File

File diff suppressed because one or more lines are too long

168609
power-front/src/assets/data/line.json Normal file
View File

File diff suppressed because it is too large Load Diff

184
power-front/src/components/Map.vue
View File

@ -21,7 +21,7 @@
</div>
<el-tree
ref="treeRef"
style="max-width: 600px;max-height: 300px"
style="max-width: 600px; max-height: 300px"
class="filter-tree"
:data="treeData"
show-checkbox
@ -32,7 +32,7 @@
@node-click="handleNodeClick"
@check-change="handleCheckedKeys"
:filter-node-method="filterNode"
:props="{ class: customNodeClass, }"
:props="{ class: customNodeClass }"
/>
<div class="map_data_line"></div>
<span class="map_data_text">我的数据目录</span>
@ -41,7 +41,7 @@
style="max-width: 600px"
class="filter-tree"
:data="treeDataUser"
:props="{ class: customNodeClass, }"
:props="{ class: customNodeClass }"
show-checkbox
default-expand-all
:expand-on-click-node="false"
@ -84,7 +84,7 @@
<script setup>
import { ElMessage } from "element-plus";
import { onBeforeMount, onMounted } from "vue";
import {getTree} from "@/api/home/index";
import { getTree } from "@/api/home/index";
import { Search } from "@element-plus/icons-vue";
import Img57 from "@/assets/img/home/img57.png";
import Img58 from "@/assets/img/home/img58.png";
@ -96,65 +96,11 @@ import Img64 from "@/assets/img/home/img64.png";
import { usePanelStore } from "@/store/panel";
import { storeToRefs } from "pinia";
import { loadEarth, load3DTiles } from "../utils/map.js";
import { loadEarth, addPowerSceneData } from "../utils/map.js";
onMounted(() => {
loadEarth();
// load3DTiles({ url:'/terrain/tileset.json', modelMatrix });
//加载倾斜摄影数据3dtiles
const tileset = new Cesium.Cesium3DTileset({
url: "/power_data/terra_3diles_1.0/tileset.json",
});
// viewer.scene.primitives.add(tileset);
tileset.readyPromise
.then(function (tileset) {
viewer.scene.primitives.add(tileset);
viewer.zoomTo(
tileset,
new Cesium.HeadingPitchRange(
0.0,
-0.5,
tileset.boundingSphere.radius * 2.0
)
);
})
.otherwise(function (error) {
console.log(error);
});
// 添加geoserver 发布的wms服务【正射影像、电网线路】
// const provider = new Cesium.WebMapServiceImageryProvider({
// // url: '/geoserver/nurc/wms',
// // layers: 'nurc:Arc_Sample',
// url: "/geoserver/ningxiang/wms",
// layers: "ningxiang:zs-ningxiang",
// parameters: {
// service: "WMS",
// format: "image/png",
// transparent: true,
// },
// });
// viewer.imageryLayers.addImageryProvider(provider); //加载geoserver 发布的wms服务
const imageryManager = new Geowin3D.GwTools.GwImageryLayersManager(viewer);
imageryManager.add({
name: "正射影像与电线",
type: "WMS",
layerOption: {
show: true,
alpha: 1.0,
},
providerOptions: {
url: "/geoserver/ningxiang/wms",
layers: "ningxiang:zs-ningxiang",
parameters: {
service: "WMS",
format: "image/png",
transparent: true,
},
},
});
// viewer.scene.requestRender();
addPowerSceneData(); //加载场景数据
});
const panelStore = usePanelStore();
@ -179,7 +125,7 @@ const filterNode = (value, data) => {
if (!value) return true;
return data.label.includes(value);
};
const treeData = reactive([])
const treeData = reactive([]);
const default_open = reactive([]);
const default_check = reactive([]);
const handleNodeClick = (node, checked) => {
@ -204,51 +150,52 @@ const fetchData = async () => {
try {
const res = await getTree();
const backendData = res.data.data;
console.log("backendData",backendData)
console.log("backendData", backendData);
const transformedData = transformData(backendData);
console.log("transformedData",transformedData)
console.log("transformedData", transformedData);
treeData.length = 0; // 清空数组
transformedData.forEach(item => treeData.push(item)); // 添加新数据
transformedData.forEach((item) => treeData.push(item)); // 添加新数据
nextTick(() => {
// 强制更新树，增加默认选中
treeRef.value.setCheckedKeys(default_check)
})
treeRef.value.setCheckedKeys(default_check);
});
} catch (error) {
console.error('获取数据失败', error);
console.error("获取数据失败", error);
}
};
fetchData()
fetchData();
function transformData(backendData) {
let tree = [];
let map = {};
// 遍历数据以建立映射表，并初始化每个节点（包括转换属性）
backendData.forEach(item => {
if (item.parentId !== -1) { // 忽略pId为-1的项
backendData.forEach((item) => {
if (item.parentId !== -1) {
// 忽略pId为-1的项
map[item.id] = {
...item,
value: String(item.id), // 将id转换为value
label: item.name, // 使用name作为label
children: [] // 初始化children数组
children: [], // 初始化children数组
};
}
});
// 遍历映射表以建立父子关系
Object.values(map).forEach(item => {
Object.values(map).forEach((item) => {
let node = map[item.id];
if (node.ischeck) {
default_check.push(node.id)
default_check.push(node.id);
}
if (node.open) {
default_open.push(node.id)
default_open.push(node.id);
}
if (item.parentId === 0) {
tree.push(item);
} else if (map[item.parentId]) {
map[item.parentId].penultimate = 1
map[item.parentId].penultimate = 1;
map[item.parentId].children.push(item);
}
}
});
return tree;
@ -261,7 +208,7 @@ const filterNodeUser = (value, data) => {
if (!value) return true;
return data.label.includes(value);
};
const treeDataUser = reactive([])
const treeDataUser = reactive([]);
const default_open_user = reactive([]);
const default_check_user = reactive([]);
const handleNodeClickUser = (node, checked) => {
@ -287,49 +234,50 @@ const fetchDataUser = async () => {
const res = await getTree();
const backendDataUser = res.data.data;
const transformedDataUser = transformDataUser(backendDataUser);
console.log("transformedDataUser",transformedDataUser)
console.log("transformedDataUser", transformedDataUser);
treeDataUser.length = 0; // 清空数组
transformedDataUser.forEach(item => treeDataUser.push(item)); // 添加新数据
transformedDataUser.forEach((item) => treeDataUser.push(item)); // 添加新数据
nextTick(() => {
// 强制更新树，增加默认选中
treeRefUser.value.setCheckedKeys(default_check_user)
})
treeRefUser.value.setCheckedKeys(default_check_user);
});
} catch (error) {
console.error('获取数据失败', error);
console.error("获取数据失败", error);
}
};
fetchDataUser()
fetchDataUser();
function transformDataUser(backendDataUser) {
let tree = [];
let map = {};
// 遍历数据以建立映射表，并初始化每个节点（包括转换属性）
backendDataUser.forEach(item => {
if (item.parentId !== -1) { // 忽略pId为-1的项
backendDataUser.forEach((item) => {
if (item.parentId !== -1) {
// 忽略pId为-1的项
map[item.id] = {
...item,
value: String(item.id), // 将id转换为value
label: item.name, // 使用name作为label
children: [] // 初始化children数组
children: [], // 初始化children数组
};
}
});
// 遍历映射表以建立父子关系
Object.values(map).forEach(item => {
Object.values(map).forEach((item) => {
let node = map[item.id];
if (node.ischeck) {
default_check_user.push(node.id)
default_check_user.push(node.id);
}
if (node.open) {
default_open_user.push(node.id)
default_open_user.push(node.id);
}
if (item.parentId === 0) {
tree.push(item);
} else if (map[item.parentId]) {
map[item.parentId].penultimate = 1
map[item.parentId].penultimate = 1;
map[item.parentId].children.push(item);
}
}
});
return tree;
@ -337,12 +285,12 @@ function transformDataUser(backendDataUser) {
// 地图右侧点击事件
const handelSelect = (index) => {
console.log(1111);
if(index== 1){
window.open('http://localhost/system/user', '_blank')
}else if(index == 2){
window.open('http://localhost/cloud/index', '_blank')
if (index == 1) {
window.open("http://localhost/system/user", "_blank");
} else if (index == 2) {
window.open("http://localhost/cloud/index", "_blank");
}
// dataShrink.value = true
};
</script>
@ -517,34 +465,34 @@ const handelSelect = (index) => {
transition: all 0.5s linear; // 过度内容，时间，是否匀速
}
:deep(.el-tree) {
.el-tree-node__content {
.el-checkbox {
display: none;
}
.el-tree-node__content {
.el-checkbox {
display: none;
}
.is-penultimate{
.is-penultimate{
.el-tree-node__content{
.el-checkbox{
display: none;
}
}
.el-tree-node__children {
.el-tree-node__content {
.el-checkbox {
display: flex;
}
}
}
}
}
.el-tree-node__children {
}
.is-penultimate {
.is-penultimate {
.el-tree-node__content {
.el-checkbox {
display: flex;
display: none;
}
}
.el-tree-node__children {
.el-tree-node__content {
.el-checkbox {
display: flex;
}
}
}
}
}
.el-tree-node__children {
.el-tree-node__content {
.el-checkbox {
display: flex;
}
}
}
}
}
</style>

174
power-front/src/utils/map.js
View File

@ -1,5 +1,8 @@
import _ from "lodash";
import { ElNotification } from "element-plus";
import lineGeojson from "@/assets/data/line.json";
var geoapp,
terrainManager, //地形管理器
pmtsManager,
th, //平移组件
mm, //模型管理工具
@ -13,6 +16,8 @@ var geoapp,
fog,
sun,
moon;
// 初始化地球
export function loadEarth() {
window.geoapp = geoapp = new Geowin3DAPP(
"earth",
@ -30,6 +35,7 @@ export function loadEarth() {
window.viewer = geoapp?.getViewer();
window.mm = mm = new Geowin3D.GwModel.GwModelManager(viewer); //模型管理工具
window.am = am = new Geowin3D.GwMicroApp.GwAnalysisManager(viewer); //测量分析工具
terrainManager = new Geowin3D.GwTools.GwTerrain(viewer); //地形管理器
viewer.scene.globe.depthTestAgainstTerrain = false;
// 亮度设置
@ -40,15 +46,84 @@ export function loadEarth() {
viewer.scene.brightness.enabled = true;
viewer.scene.brightness.uniforms.brightness = Number(1.3);
// viewer.scene.globe.depthTestAgainstTerrain = false
stkTerrain();
}
export const addTowerModel = () => {
// STK地形（全球、中国高精度）
export const stkTerrain = () => {
terrainManager.setTerrain("//terrain.gbim360.com/", "STK", []);
};
// 加载倾斜摄影等3Dtiles数据
export const addTileset = (url) => {
// load3DTiles({ url:'/terrain/tileset.json', modelMatrix });
//加载倾斜摄影数据3dtiles
const tileset = new Cesium.Cesium3DTileset({
url: url || "/power_data/terra_3diles_1.0/tileset.json",
});
// viewer.scene.primitives.add(tileset);
tileset.readyPromise
.then(function (tileset) {
viewer.scene.primitives.add(tileset);
viewer.zoomTo(
tileset,
new Cesium.HeadingPitchRange(
0.0,
-0.5,
tileset.boundingSphere.radius * 2.0
)
);
})
.otherwise(function (error) {
console.log(error);
});
};
// 添加geoserver 发布的wms服务【正射影像、电网线路】
export const addGeoserverWms = () => {
// const provider = new Cesium.WebMapServiceImageryProvider({
// // url: '/geoserver/nurc/wms',
// // layers: 'nurc:Arc_Sample',
// url: "/geoserver/ningxiang/wms",
// layers: "ningxiang:zs-ningxiang",
// parameters: {
// service: "WMS",
// format: "image/png",
// transparent: true,
// },
// });
// viewer.imageryLayers.addImageryProvider(provider); //加载geoserver 发布的wms服务
const imageryManager = new Geowin3D.GwTools.GwImageryLayersManager(viewer);
imageryManager.add({
name: "正射影像与电线",
type: "WMS",
layerOption: {
show: true,
alpha: 1.0,
},
providerOptions: {
url: "/geoserver/ningxiang/wms",
layers: "ningxiang:zs-ningxiang",
parameters: {
service: "WMS",
format: "image/png",
transparent: true,
},
},
});
};
/* 添加塔模型 */
export const addTowerModel = (x, y, z) => {
const entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(112.75387, 29.6127,49),
position: Cesium.Cartesian3.fromDegrees(
x || 112.75387,
y || 29.6127,
z || 49
),
model: {
uri: "//data.mars3d.cn/gltf/mars/tower/tower.glb",
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
minimumPixelSize: 128,
minimumPixelSize: 20,
// maximumScale: 100,
},
});
@ -56,6 +131,99 @@ export const addTowerModel = () => {
// viewer.trackedEntity = entity;
};
/* 加载电网【塔模型、线、区】专题数据 */
export const addPowerSceneData = () => {
// 1.点线杆模型位置
const towerData = [
[111.17014, 29.9414, 684.71],
[111.14909, 30.03881, 785.0124],
];
towerData.forEach((item) => {
addTowerModel(item[0], item[1], item[2]);
});
// 2.网线
var lineEntities = [];
const { features } = lineGeojson;
const powerLineFeatures = features.filter(
(feature) => feature.properties.Name.indexOf("路") === -1
);
const getColor = (name) => {
if (name.indexOf("电力线") > 0) return [0, 255, 255, 1.0];
if (name.indexOf("特殊断面") > 0) return [255, 155, 0, 1.0];
if (name.indexOf("路线路径") > 0) return [255, 255, 0, 1.0];
return [255, 155, 0, 1.0];
};
powerLineFeatures.forEach((feature) => {
const { properties, geometry } = feature;
const { type, coordinates } = geometry;
if (type === "MultiLineString") {
let lineColor = getColor(feature.properties.Name);
// console.log(lineColor, feature.properties.Name);
let line = mm.add("Polyline", {
pts: coordinates[0],
lineWidth: 2.0,
lineColor,
// polylineDash: true,
properties,
});
lineEntities.push(line);
}
});
viewer.scene.requestRender();
Geowin3D.GwCamera.goToByCameraInfo(
viewer.scene.camera,
[111.197857120379339, 29.842079832885027, 12000, 0, -40, 0]
);
mm.on(function (eventType, eventArg) {
if (eventType == "EntSelected") {
if (eventArg.type === "Polyline") {
console.log(eventArg.option.option.properties);
ElNotification({
title: "属性信息",
message: eventArg.option.option?.properties?.Name
? eventArg.option.option?.properties?.Name
: "暂无属性",
type: "success",
});
}
}
});
// 开启点击事件
mm.setClickEventOn();
// 关闭点击事件
// mm.setClickEventOff();
let poly = mm.add("GeoJson", {
jsonURL: "/data/geoJson/polygon.geojson",
lineWidth: 1.0,
fillColor: [255, 0, 0, 0.1],
lineColor: [100, 255, 0, 1.0],
outline: true,
clampToGround: true,
// label: true,
// labelOption: {
// textAtt: ['JQBH'],
// type: 'DivLabel',
// style: 3,
// offset: 10,
// },
// createByAtt: 'JQBH',
//fillColor: [255, 0, 0, 0.1], //面的填充色
//lineColor: [100, 255, 0, 1.0],
});
// let line = mm.add("GeoJson", {
// jsonURL: "/data/geoJson/line.geojson",
// lineWidth: 2.0,
// lineColor: [0, 100, 255, 1.0],
// });
// geoJsons.push(jq);
};
/* 添加模型拾取测试数据 */
const addPickModelTestData = () => {
pmtsManager = new Geowin3D.GwTools.GwPMTSManager(viewer);