536 lines
18 KiB
Vue
536 lines
18 KiB
Vue
<template>
|
||
<div class="flex justify-between" v-loading="treeLoading">
|
||
<el-tree-v2
|
||
style="width: 340px; overflow: auto"
|
||
show-checkbox
|
||
:data="jsonData"
|
||
:height="500"
|
||
@check-change="handleCheckChange"
|
||
:props="treeProps"
|
||
@node-contextmenu="showMenu"
|
||
ref="treeRef"
|
||
@node-click="isMenuVisible = false"
|
||
>
|
||
<template #default="{ node, data }">
|
||
<span @dblclick="handlePosition(data, node)">{{ data.name }}</span>
|
||
</template>
|
||
</el-tree-v2>
|
||
<div>
|
||
<div class="ol-map" id="olMap"></div>
|
||
<div class="h15 mt-2" v-if="!selectLayer.length"></div>
|
||
<div class="m-0 c-white text-3 flex w-237.5 mt-2 flex-wrap" v-else>
|
||
<p
|
||
v-for="(item, index) in selectLayer"
|
||
class="pl-xl border-rd pr p-3 w-111 mr-1 bg-#909399 flex items-center cursor-pointer justify-between"
|
||
@click="delLayer(index)"
|
||
>
|
||
{{ item.location.name + '被选中为' + item.option }}
|
||
<el-icon>
|
||
<Close />
|
||
</el-icon>
|
||
</p>
|
||
</div>
|
||
<el-form-item label="类型" class="items-center">
|
||
<el-radio-group v-model="layerType">
|
||
<el-radio value="1" size="large">光伏板</el-radio>
|
||
<el-radio value="2" size="large">桩点/支架</el-radio>
|
||
<el-radio value="3" size="large">方阵</el-radio>
|
||
<el-radio value="4" size="large">逆变器</el-radio>
|
||
<el-radio value="5" size="large">箱变</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<div v-if="isMenuVisible" :style="{ left: menuX + 'px', top: menuY + 'px' }" class="fixed bg-white shadow-md rounded-md overflow-hidden">
|
||
<ul class="py-1 pl-0">
|
||
<li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" @click="handleMenuItemClick('光伏板')">
|
||
<i class="fa-solid fa-check mr-2"></i>光伏板
|
||
</li>
|
||
<li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" @click="handleMenuItemClick('桩点/支架')">
|
||
<i class="fa-solid fa-times mr-2"></i>桩点/支架
|
||
</li>
|
||
<li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" @click="handleMenuItemClick('方阵')">
|
||
<i class="fa-solid fa-times mr-2"></i>方阵
|
||
</li>
|
||
<li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" @click="handleMenuItemClick('逆变器')">
|
||
<i class="fa-solid fa-times mr-2"></i>逆变器
|
||
</li>
|
||
<li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" @click="handleMenuItemClick('箱变')">
|
||
<i class="fa-solid fa-times mr-2"></i>箱变
|
||
</li>
|
||
<li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" @click="handleMenuItemClick('名称')">
|
||
<i class="fa-solid fa-times mr-2"></i>名称
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="float-right">
|
||
<el-button @click="emit('close')">取消</el-button>
|
||
<el-button type="primary" @click="addFacilities" :loading="loading">确定</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<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, OSM } from 'ol/source'; // OpenLayers的瓦片数据源，包括XYZ格式和OpenStreetMap专用的数据源
|
||
import { fromLonLat, toLonLat } from 'ol/proj'; // OpenLayers的投影转换函数，用于经纬度坐标和投影坐标之间的转换
|
||
import { defaults as defaultInteractions, DragRotateAndZoom } from 'ol/interaction'; // OpenLayers的交互类，包括默认的交互集合和特定的旋转缩放交互
|
||
import { defaults as defaultControls, defaults, FullScreen, MousePosition, ScaleLine } from 'ol/control'; // OpenLayers的控件类，包括默认的控件集合和特定的全屏、鼠标位置、比例尺控件
|
||
import Feature from 'ol/Feature'; // OpenLayers的要素类，表示地图上的一个对象或实体
|
||
import Point from 'ol/geom/Point'; // OpenLayers的点几何类，用于表示点状的地理数据
|
||
import { Vector as VectorLayer } from 'ol/layer'; // OpenLayers的矢量图层类，用于显示矢量数据
|
||
import { Vector as VectorSource } from 'ol/source'; // OpenLayers的矢量数据源类，用于管理和提供矢量数据
|
||
import { Circle, Style, Stroke, Fill, Icon, Text } from 'ol/style'; // OpenLayers的样式类，用于定义图层的样式，包括圆形样式、基本样式、边框、填充和图标
|
||
import LineString from 'ol/geom/LineString'; // OpenLayers的线几何类，用于表示线状的地理数据
|
||
import Polygon from 'ol/geom/Polygon'; // OpenLayers的多边形几何类，用于表示面状的地理数据
|
||
import * as turf from '@turf/turf';
|
||
import { FeatureCollection } from 'geojson';
|
||
import { TreeInstance } from 'element-plus';
|
||
import { addProjectFacilities, addProjectPilePoint, addProjectSquare, listDXFProject, addInverter, addBoxTransformer } from '@/api/project/project';
|
||
import { BatchUploader } from '@/utils/batchUpload';
|
||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||
|
||
const props = defineProps({
|
||
projectId: String,
|
||
designId: String
|
||
});
|
||
const treeData = ref<any>([]);
|
||
const layerType = ref(null);
|
||
const contextMenu = ref(null);
|
||
const selectLayer = ref([]);
|
||
const treeRef = ref<TreeInstance>();
|
||
const treeProps = {
|
||
value: 'name'
|
||
};
|
||
const loading = ref(false);
|
||
const treeLoading = ref(false);
|
||
const emit = defineEmits(['handleCheckChange', 'close']);
|
||
let map: any = null;
|
||
|
||
const layerData = reactive<any>({});
|
||
const centerPosition = ref(fromLonLat([107.13761560163239, 23.80480003743964]));
|
||
|
||
const jsonData = computed(() => {
|
||
let id = 0;
|
||
let arr = [];
|
||
treeData.value.forEach((item: any, index: any) => {
|
||
arr.push({
|
||
name: item.name,
|
||
index
|
||
});
|
||
for (const itm of item.features) {
|
||
if (itm.geometry.id) {
|
||
break;
|
||
}
|
||
itm.geometry.id = ++id;
|
||
itm.geometry.coordinates = convertStrToNum(itm.geometry.coordinates);
|
||
}
|
||
});
|
||
return arr; // treeData.value;
|
||
});
|
||
console.log(jsonData);
|
||
const handlePosition = (data: any, node) => {
|
||
//切换中心点
|
||
const featureCollection: FeatureCollection = { type: 'FeatureCollection', features: treeData.value[data.index].features } as FeatureCollection;
|
||
|
||
centerPosition.value = fromLonLat(turf.center(featureCollection).geometry.coordinates);
|
||
|
||
map.getView().setCenter(centerPosition.value);
|
||
};
|
||
const handleCheckChange = (data: any, bool) => {
|
||
// 处理树形结构的选中变化
|
||
let features = treeData.value[data.index].features;
|
||
if (isMenuVisible.value) isMenuVisible.value = false;
|
||
if (bool) {
|
||
if (!layerData[features[0].properties.id]) {
|
||
features.forEach((item: any) => {
|
||
creatPoint(item.geometry.coordinates, item.geometry.type, item.geometry.id, item.properties.text);
|
||
});
|
||
} else {
|
||
features.forEach((item: any) => {
|
||
map.addLayer(layerData[item.geometry.id]);
|
||
});
|
||
}
|
||
} else {
|
||
features.forEach((item, index) => {
|
||
map.removeLayer(layerData[item.geometry.id]);
|
||
});
|
||
}
|
||
|
||
// creatPoint(fromLonLat(data.geometry.coordinates), data.geometry.type);
|
||
};
|
||
function initOLMap() {
|
||
// 创造地图实例
|
||
map = new Map({
|
||
// 设置地图容器的ID
|
||
target: 'olMap',
|
||
// 定义地图的图层列表，用于显示特定的地理信息。
|
||
layers: [
|
||
// 高德地图
|
||
// TileLayer表示一个瓦片图层，它由一系列瓦片（通常是图片）组成，用于在地图上显示地理数据。
|
||
new TileLayer({
|
||
// 设置图层的数据源为XYZ类型。XYZ是一个通用的瓦片图层源，它允许你通过URL模板来获取瓦片
|
||
source: new XYZ({
|
||
url: 'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
|
||
})
|
||
})
|
||
],
|
||
// 设置地图的视图参数
|
||
// View表示地图的视图，它定义了地图的中心点、缩放级别、旋转角度等参数。
|
||
view: new View({
|
||
// fromLonLat是一个函数，用于将经纬度坐标转换为地图的坐标系统。
|
||
center: centerPosition.value, //地图中心点
|
||
zoom: 15, // 缩放级别
|
||
minZoom: 0, // 最小缩放级别
|
||
// maxZoom: 18, // 最大缩放级别
|
||
constrainResolution: true // 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
|
||
// projection: 'EPSG:4326' // 投影坐标系，默认是3857
|
||
}),
|
||
// 按住shift进行旋转
|
||
// interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
|
||
// 控件
|
||
// controls: defaults().extend([
|
||
// new FullScreen(), // 全屏
|
||
// new MousePosition(), // 显示鼠标当前位置的地图坐标
|
||
// new ScaleLine() // 显示比例尺
|
||
|
||
// ])
|
||
|
||
//加载控件到地图容器中
|
||
controls: defaultControls({
|
||
zoom: false,
|
||
rotate: false,
|
||
attribution: false
|
||
}).extend([
|
||
new FullScreen() // 全屏
|
||
])
|
||
});
|
||
|
||
// 事件
|
||
// map.on('moveend', (e: any) => {
|
||
// // console.log('地图移动', e);
|
||
// // 获取当前缩放级别
|
||
// var zoomLevel = map.getView().getZoom();
|
||
// // console.log('当前缩放级别：', zoomLevel);
|
||
// });
|
||
// map.on('rendercomplete', () => {
|
||
// // console.log('渲染完成');
|
||
// });
|
||
// map.on('click', (e: any) => {
|
||
// var coordinate = e.coordinate;
|
||
|
||
// // 将投影坐标转换为经纬度坐标
|
||
// var lonLatCoordinate = toLonLat(coordinate);
|
||
// // 输出转换后的经纬度坐标
|
||
// console.log('经纬度坐标：', lonLatCoordinate);
|
||
// });
|
||
}
|
||
|
||
//递归字符串数组变成数字
|
||
function convertStrToNum(arr) {
|
||
if (typeof arr === 'string') {
|
||
const num = Number(arr);
|
||
return isNaN(num) ? arr : num;
|
||
} else if (Array.isArray(arr)) {
|
||
return arr.map((item) => convertStrToNum(item));
|
||
}
|
||
return arr;
|
||
}
|
||
|
||
/**
|
||
* 创建图层
|
||
* @param {*} pointObj 坐标数组
|
||
* @param {*} type 类型
|
||
* @param {*} id 唯一id
|
||
* @param {*} name 名称
|
||
* */
|
||
const creatPoint = (pointObj: Array<any>, type: string, id: string, name?: string) => {
|
||
// 创建多边形的几何对象
|
||
let polygon;
|
||
if (type === 'Point') {
|
||
polygon = new Point(fromLonLat(pointObj));
|
||
} else if (type === 'LineString') {
|
||
const lineStringData = pointObj.map((arr: any) => fromLonLat(arr));
|
||
polygon = new Polygon([lineStringData]);
|
||
} else {
|
||
const polygonData = pointObj.map((arr: any) => arr.map((i: any) => fromLonLat(i)));
|
||
polygon = new Polygon(polygonData);
|
||
}
|
||
// 创建特征（Feature）
|
||
let polygonFeature = new Feature({
|
||
geometry: polygon
|
||
});
|
||
|
||
const pointStyle = new Style({
|
||
image: new Circle({
|
||
radius: 2,
|
||
fill: new Fill({
|
||
color: 'red'
|
||
})
|
||
}),
|
||
text: new Text({
|
||
font: '12px Microsoft YaHei',
|
||
text: name,
|
||
scale: 1,
|
||
fill: new Fill({
|
||
color: '#7bdd63'
|
||
})
|
||
})
|
||
});
|
||
const polygonStyle = new Style({
|
||
stroke: new Stroke({
|
||
color: type === 'LineString' ? 'skyblue' : 'purple', // 多边形边界线的颜色
|
||
width: 2 // 多边形边界线的宽度
|
||
}),
|
||
fill: new Fill({
|
||
color: 'transparent' // 多边形填充颜色，这里设置为半透明红色
|
||
})
|
||
});
|
||
// 设置多边形的样式（Style）
|
||
polygonFeature.setStyle(type === 'Point' ? pointStyle : polygonStyle);
|
||
// 创建和添加特征到源（Source）
|
||
let source = new VectorSource();
|
||
source.addFeature(polygonFeature);
|
||
// 创建图层并设置源（Layer）
|
||
layerData[id] = new VectorLayer();
|
||
layerData[id].setSource(source);
|
||
|
||
map.addLayer(layerData[id]);
|
||
};
|
||
|
||
// 控制菜单是否显示
|
||
const isMenuVisible = ref(false);
|
||
// 菜单的 x 坐标
|
||
const menuX = ref(0);
|
||
// 菜单的 y 坐标
|
||
const menuY = ref(0);
|
||
|
||
// 显示菜单的方法
|
||
const showMenu = (event: MouseEvent, data) => {
|
||
console.log('🚀 ~ showMenu ~ data:', data, treeData.value[data.index]);
|
||
contextMenu.value = data;
|
||
isMenuVisible.value = true;
|
||
menuX.value = event.clientX;
|
||
menuY.value = event.clientY;
|
||
};
|
||
|
||
// 处理菜单项点击事件的方法
|
||
const handleMenuItemClick = (option: string) => {
|
||
isMenuVisible.value = false;
|
||
|
||
if (selectLayer.value.some((item) => item.location.name === contextMenu.value.name)) {
|
||
return proxy?.$modal.msgError('已选择该图层，请勿重复选择');
|
||
}
|
||
if (selectLayer.value.some((item) => item.option !== '名称' && item.option !== '箱变')) {
|
||
if (option !== '名称' && option !== '箱变') return proxy?.$modal.msgError('只能选择一个类型');
|
||
}
|
||
selectLayer.value.push({ location: contextMenu.value, option });
|
||
console.log('selectLayer.value', selectLayer.value);
|
||
|
||
emit('handleCheckChange', selectLayer.value);
|
||
};
|
||
|
||
//删除菜单
|
||
const delLayer = (index) => {
|
||
selectLayer.value.splice(index, 1);
|
||
emit('handleCheckChange', selectLayer.value);
|
||
};
|
||
|
||
// 点击页面其他区域隐藏菜单
|
||
const closeMenuOnClickOutside = (event: MouseEvent) => {
|
||
if (isMenuVisible.value) {
|
||
const menuElement = document.querySelector('.fixed.bg-white');
|
||
if (menuElement && !menuElement.contains(event.target as Node)) {
|
||
isMenuVisible.value = false;
|
||
}
|
||
}
|
||
};
|
||
|
||
// 添加全局点击事件监听器
|
||
window.addEventListener('click', closeMenuOnClickOutside);
|
||
const getTreeData = async () => {
|
||
treeLoading.value = true;
|
||
try {
|
||
const res = await listDXFProject(props.designId);
|
||
treeData.value = res.data.layers;
|
||
treeLoading.value = false;
|
||
} catch (err) {
|
||
treeLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// 组件卸载时移除事件监听器
|
||
const onUnmounted = () => {
|
||
window.removeEventListener('click', closeMenuOnClickOutside);
|
||
};
|
||
|
||
type LayerConfig = {
|
||
optionB: string;
|
||
apiFunc: (data: any) => Promise<any>;
|
||
};
|
||
|
||
const LAYER_CONFIG: Record<number, LayerConfig> = {
|
||
1: { optionB: '光伏板', apiFunc: addProjectFacilities },
|
||
3: { optionB: '方阵', apiFunc: addProjectSquare },
|
||
4: { optionB: '逆变器', apiFunc: addInverter },
|
||
5: { optionB: '箱变', apiFunc: addBoxTransformer }
|
||
};
|
||
|
||
const showError = (msg: string) => proxy?.$modal.msgError(msg);
|
||
const showSuccess = (msg: string) => proxy?.$modal.msgSuccess(msg);
|
||
|
||
const getGeoJsonData = (nameOption = '名称', secondOption: string): { nameGeoJson: any[]; locationGeoJson: any | null } | null => {
|
||
const nameLayers = selectLayer.value.filter((item) => item.option === nameOption);
|
||
const secondLayer = selectLayer.value.filter((item) => item.option === secondOption);
|
||
|
||
if (!nameLayers.length || !secondLayer) {
|
||
showError(`请选择${nameOption}和${secondOption}`);
|
||
return null;
|
||
}
|
||
|
||
const nameGeoJson = nameLayers.map((item) => treeData.value[item.location.index]);
|
||
const locationGeoJson = secondLayer.map((item) => treeData.value[item.location.index]);
|
||
|
||
return { nameGeoJson, locationGeoJson };
|
||
};
|
||
|
||
const handleTwoLayerUpload = async (optionB: string, apiFunc: (data: any) => Promise<any>) => {
|
||
const geoJson = getGeoJsonData('名称', optionB);
|
||
if (!geoJson) return;
|
||
|
||
const data = {
|
||
projectId: props.projectId,
|
||
nameGeoJson: geoJson.nameGeoJson,
|
||
locationGeoJson: geoJson.locationGeoJson,
|
||
pointGeoJson: null
|
||
};
|
||
|
||
loading.value = true;
|
||
await apiFunc(data);
|
||
await showSuccess('添加成功');
|
||
};
|
||
|
||
const handlePointUpload = async () => {
|
||
if (selectLayer.value.length > 1) return showError('最多选择一个桩点/支架');
|
||
if (selectLayer.value[0].option !== '桩点/支架') return showError('请选择类型为桩点/支架');
|
||
|
||
const features = treeData.value[selectLayer.value[0].location.index]?.features || [];
|
||
if (!features.length) return showError('桩点数据为空');
|
||
|
||
loading.value = true;
|
||
const sessionId = new Date().getTime().toString(36) + Math.random().toString(36).substring(2, 15);
|
||
const uploader = new BatchUploader({
|
||
dataList: features,
|
||
chunkSize: 15000,
|
||
delay: 200,
|
||
uploadFunc: async (chunk, batchNum, totalBatch) => {
|
||
await addProjectPilePoint({
|
||
projectId: props.projectId,
|
||
locationGeoJson: {
|
||
type: 'FeatureCollection',
|
||
features: chunk
|
||
},
|
||
sessionId,
|
||
totalBatch,
|
||
batchNum
|
||
});
|
||
},
|
||
onComplete: () => {
|
||
showSuccess('桩点上传完成');
|
||
reset();
|
||
loading.value = false;
|
||
}
|
||
});
|
||
|
||
await uploader.start();
|
||
};
|
||
|
||
const addFacilities = async () => {
|
||
if (!layerType.value) return showError('请选择图层类型');
|
||
if (!selectLayer.value.length) return showError('请选择需要上传的图层');
|
||
|
||
const config = LAYER_CONFIG[layerType.value];
|
||
|
||
try {
|
||
if (layerType.value == 2) {
|
||
await handlePointUpload();
|
||
} else if (config) {
|
||
await handleTwoLayerUpload(config.optionB, config.apiFunc);
|
||
} else {
|
||
showError('不支持的图层类型');
|
||
}
|
||
} finally {
|
||
reset();
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
const reset = () => {
|
||
selectLayer.value = [];
|
||
treeRef.value?.setCheckedKeys([]);
|
||
for (const key in layerData) {
|
||
map.removeLayer(layerData[key]);
|
||
}
|
||
layerType.value = null;
|
||
};
|
||
|
||
watch(
|
||
() => props.designId,
|
||
(newId, oldId) => {
|
||
if (newId !== oldId) {
|
||
reset();
|
||
getTreeData();
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
|
||
onMounted(() => {
|
||
// 地图初始化
|
||
initOLMap();
|
||
// creatPoint(
|
||
// [
|
||
// [
|
||
// [107.13205125908726, 23.806785824010216],
|
||
// [107.13218187963494, 23.806867960389773],
|
||
// [107.13215698891558, 23.806902336258318],
|
||
// [107.13202636835067, 23.8068201998575],
|
||
// [107.13205125908726, 23.806785824010216]
|
||
// ]
|
||
// ],
|
||
// 'Polygon',
|
||
// '1',
|
||
// '测试方阵'
|
||
// );
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.ol-map {
|
||
height: 450px;
|
||
width: 950px;
|
||
margin: 0 auto;
|
||
}
|
||
.ol-custome-full-screen {
|
||
border-radius: 3px;
|
||
font-size: 12px;
|
||
padding: 5px 11px;
|
||
height: 24px;
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
border: 1px solid #409eff;
|
||
&:active {
|
||
background-color: #337ecc;
|
||
border-color: #66b1ff;
|
||
}
|
||
&:hover {
|
||
background-color: #79bbff;
|
||
border-color: #79bbff;
|
||
}
|
||
}
|
||
li {
|
||
list-style-type: none;
|
||
}
|
||
</style>
|