| | |
|---|
| | | import { flyVisual } from '@/utils/cesium/mapUtil'; |
|---|
| | | import rightEdit from '@/views/layerManagement/components/rightEdit.vue'; |
|---|
| | | import leftList from '@/views/layerManagement/components/leftList.vue'; |
|---|
| | | import nationalSpatialPlanning from '@/views/layerManagement/components/nationalSpatialPlanning.vue'; |
|---|
| | | import { DrawPolygon } from '@/views/layerManagement/components/utils'; |
|---|
| | | import * as Cesium from 'cesium'; |
|---|
| | | import { PublicCesium } from '@/utils/cesium/publicCesium'; |
|---|
| | | import _, { cloneDeep, throttle } from 'lodash'; |
|---|
| | | import { ElButton } from 'element-plus'; |
|---|
| | | |
|---|
| | | import { provide } from 'vue'; |
|---|
| | | import { useStore } from 'vuex'; |
|---|
| | | const store = useStore(); |
|---|
| | | const userInfo = computed(() => store.getters.userInfo); |
|---|
| | | const areaCode = userInfo.value?.detail?.areaCode || ''; |
|---|
| | | // console.log('用户信息',areaCode); |
|---|
| | | // 红色警告交叉面提示窗 |
|---|
| | | const isShowWaringTip = ref(false); |
|---|
| | | const activeName = ref('电子围栏'); |
|---|
| | |
|---|
| | | layerParams.value.folderOption = formattedFolderOption; |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // 编辑围栏区域 |
|---|
| | | // const handleEdit = val => { |
|---|
| | | // console.log('编辑数据',val.geo_data); |
|---|
| | | |
|---|
| | | // viewer.entities.removeAll(); |
|---|
| | | // layerParams.value.editDetailData = val; |
|---|
| | | // drawPolygonExample.editThePatch(true); |
|---|
| | | // drawPolygonExample.drawTheArea(true); |
|---|
| | | // const positions = parseGeoDataToPositions(val.geo_data, val.altitude); |
|---|
| | | // if (positions.length < 3) return; // 少于3个点无法构成多边形 |
|---|
| | | // drawPolygonExample.initPolygon(viewer, positions, true); |
|---|
| | | // }; |
|---|
| | | // 编辑围栏区域 |
|---|
| | | const handleEdit = val => { |
|---|
| | | viewer.entities.removeAll(); |
|---|
| | | layerParams.value.editDetailData = val; |
|---|
| | | drawPolygonExample.editThePatch(true); |
|---|
| | | drawPolygonExample.drawTheArea(true); |
|---|
| | | // 移除最后一个点 |
|---|
| | | let geoDataArr = JSON.parse(val.geo_data); |
|---|
| | | if (geoDataArr.length > 0) { |
|---|
| | | geoDataArr.pop(); |
|---|
| | | } |
|---|
| | | const processedGeoData = JSON.stringify(geoDataArr); |
|---|
| | | // 使用处理后的 geo_data 解析坐标 |
|---|
| | | //geo_data 解析坐标 |
|---|
| | | const positions = parseGeoDataToPositions(processedGeoData, val.altitude); |
|---|
| | | if (positions.length < 3) return; // 少于3个点无法构成多边形 |
|---|
| | | drawPolygonExample.initPolygon(viewer, positions, true); |
|---|
| | | }; |
|---|
| | | // 编辑文件夹 |
|---|
| | | const handleFolder = val => { |
|---|
| | | parentMethod() |
|---|
| | | layerParams.value.editFolderData = val; |
|---|
| | | }; |
|---|
| | | // 新增开启绘制 |
|---|
| | |
|---|
| | | const loadDataToMap = dataList => { |
|---|
| | | if (!viewer) return; |
|---|
| | | viewer.entities.removeAll(); |
|---|
| | | // 存储所有有效坐标，用于后续定位 |
|---|
| | | // 存储所有有效坐标 |
|---|
| | | tbJwdList = []; |
|---|
| | | dataList.forEach(item => { |
|---|
| | | let positions = parseGeoDataToPositions(item.geo_data, item.altitude); |
|---|
| | | // positions.push(positions[0]); |
|---|
| | | if (positions.length < 3) { |
|---|
| | | console.warn(`数据 ${item.name} 坐标点不足，无法绘制`); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | |
|---|
| | | tbJwdList.push(...positions); |
|---|
| | | // 转换为 Cesium 所需的 [lng, lat, lng, lat, ...] 扁平数组格式 |
|---|
| | | let degreesArray = []; |
|---|
| | | positions.forEach(pos => { |
|---|
| | | degreesArray.push(pos.lng, pos.lat, pos.height); |
|---|
| | | }); |
|---|
| | | const colorMap = { |
|---|
| | | 1: Cesium.Color.fromCssColorString('#00ff06').withAlpha(0.5), // 绿色（填充色） |
|---|
| | | 2: Cesium.Color.fromCssColorString('#ff0000').withAlpha(0.5), // 红色（填充色） |
|---|
| | | 3: Cesium.Color.fromCssColorString('#00ffea').withAlpha(0.5), // 青色（填充色） |
|---|
| | | // 边框色：去掉透明度，保持纯色 |
|---|
| | | border1: Cesium.Color.fromCssColorString('#00ff06'), |
|---|
| | | border2: Cesium.Color.fromCssColorString('#ff0000'), |
|---|
| | | border3: Cesium.Color.fromCssColorString('#00ffea'), |
|---|
| | | }; |
|---|
| | | const fillColor = item.category_id === 1 |
|---|
| | | ? colorMap[1] |
|---|
| | | : item.category_id === 2 |
|---|
| | | ? colorMap[2] |
|---|
| | | : item.category_id === 3 |
|---|
| | | ? colorMap[3] |
|---|
| | | : Cesium.Color.YELLOW.withAlpha(0.5); |
|---|
| | | |
|---|
| | | const borderColor = item.category_id === 1 |
|---|
| | | ? colorMap.border1 |
|---|
| | | : item.category_id === 2 |
|---|
| | | ? colorMap.border2 |
|---|
| | | : item.category_id === 3 |
|---|
| | | ? colorMap.border3 |
|---|
| | | : Cesium.Color.YELLOW; |
|---|
| | | viewer.entities.add({ |
|---|
| | | id: `polygon_${item.id}`, |
|---|
| | | customType: 'fence_polygon', |
|---|
| | |
|---|
| | | hierarchy: new Cesium.PolygonHierarchy( |
|---|
| | | Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray) |
|---|
| | | ), |
|---|
| | | material: Cesium.Color.YELLOW.withAlpha(0.5), // 填充色 |
|---|
| | | material:fillColor, // 填充色 |
|---|
| | | outline: true, // 显示边框 |
|---|
| | | outlineColor: Cesium.Color.YELLOW, // 边框色 |
|---|
| | | outlineColor: borderColor, // 边框色 |
|---|
| | | outlineWidth: 2, // 边框宽度 |
|---|
| | | clampToGround: true, // 贴地显示 |
|---|
| | | }, |
|---|
| | |
|---|
| | | polyline: { |
|---|
| | | positions: Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray), |
|---|
| | | width: 2, |
|---|
| | | material: Cesium.Color.YELLOW, |
|---|
| | | material:borderColor, |
|---|
| | | clampToGround: true, |
|---|
| | | }, |
|---|
| | | zIndex: 99, // 层级，确保在其他图层上方显示 |
|---|
| | | zIndex: 99, |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | focusOnAllFeatures(); |
|---|
| | | viewInstance.value?.addLeftClickEvent(null, handleFenceClick); |
|---|
| | | }; |
|---|
| | | //计算所有图斑的包围球并定位 |
|---|
| | | const focusOnAllFeatures = () => { |
|---|
| | | if (tbJwdList.length === 0 || !viewer) return; |
|---|
| | | |
|---|
| | | // 转换所有经纬度坐标为Cartesian3 |
|---|
| | | const allPositions = tbJwdList.flatMap(pos => |
|---|
| | | Cesium.Cartesian3.fromDegrees(pos.lng, pos.lat, pos.height || 0) |
|---|
| | | ); |
|---|
| | | if (allPositions.length === 0) return; |
|---|
| | | const boundingSphere = Cesium.BoundingSphere.fromPoints(allPositions); |
|---|
| | | viewer.camera.flyToBoundingSphere(boundingSphere, { |
|---|
| | | duration: 0, // 飞行时间（秒） |
|---|
| | | offset: new Cesium.HeadingPitchRange( |
|---|
| | | Cesium.Math.toRadians(0), // 方向角 |
|---|
| | | Cesium.Math.toRadians(-90) // 俯仰角 |
|---|
| | | ), |
|---|
| | | const positionsData = tbJwdList.map(pos => [ |
|---|
| | | pos.lng, |
|---|
| | | pos.lat, |
|---|
| | | pos.height || 0 |
|---|
| | | ]); |
|---|
| | | flyVisual({ |
|---|
| | | positionsData, |
|---|
| | | viewer, |
|---|
| | | multiple: 13, // 缩放倍数 |
|---|
| | | pitch: -90 |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // 区域点击显示详细信息 |
|---|
| | |
|---|
| | | let publicCesiumInstance = null; |
|---|
| | | let viewer = null; |
|---|
| | | const viewInstance = shallowRef(null); |
|---|
| | | const homeViewer = shallowRef(null); |
|---|
| | | |
|---|
| | | // 初始化绘制工具实例 |
|---|
| | | const drawPolygonExample = new DrawPolygon(); |
|---|
| | | // 地图初始化 |
|---|
| | | const initMap = () => { |
|---|
| | |
|---|
| | | layerMode: 4, |
|---|
| | | contour: false, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | viewer = publicCesiumInstance.getViewer(); |
|---|
| | | viewInstance.value = publicCesiumInstance; |
|---|
| | | |
|---|
| | | const nanChangPosition = Cesium.Cartesian3.fromDegrees( |
|---|
| | | 115.892151, // 经度 |
|---|
| | | 28.676493, // 纬度 |
|---|
| | |
|---|
| | | let polygonString = JSON.stringify(polygon); |
|---|
| | | layerParams.value.polygonPosition = polygon.length > 0 ? polygonString : null; |
|---|
| | | if (polygon.length >= 3) { |
|---|
| | | // 确保多边形闭合：最后一个点与第一个点一致（避免计算偏差） |
|---|
| | | // 确保多边形闭合：最后一个点与第一个点一致 |
|---|
| | | const firstPoint = polygon[0]; |
|---|
| | | const lastPoint = polygon[polygon.length - 1]; |
|---|
| | | const isClosed = |
|---|
| | | _.round(firstPoint[0], 6) === _.round(lastPoint[0], 6) && |
|---|
| | | _.round(firstPoint[1], 6) === _.round(lastPoint[1], 6); |
|---|
| | | // 若未闭合，手动添加闭合点 |
|---|
| | | const closedPolygon = isClosed ? polygon : [...polygon, firstPoint]; |
|---|
| | | // 转换为 turf 支持的 GeoJSON 格式（Polygon 类型需外层嵌套数组） |
|---|
| | | const turfPolygon = turf.polygon([closedPolygon]); |
|---|
| | | // 计算面积（turf.area() 返回平方米，保留2位小数） |
|---|
| | | const area = _.round(turf.area(turfPolygon), 2); |
|---|
| | | // 赋值给 layerParams， |
|---|
| | | layerParams.value.fenceArea = area; |
|---|
| | | } else { |
|---|
| | | // 坐标点不足3个时，清空面积 |
|---|
| | | layerParams.value.fenceArea = 0; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | |
|---|
| | | initMap(); |
|---|
| | | cesiumContextMenu(); |
|---|
| | | getdataFolderApi(); |
|---|
| | | // 监听单个实体删除事件 |
|---|
| | | EventBus.on('deleteMapEntityById', deleteMapEntityById); |
|---|
| | | // 监听文件夹下所有实体删除事件 |
|---|
| | | EventBus.on('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId); |
|---|
| | | }); |
|---|
| | | onBeforeUnmount(() => { |
|---|
| | | destroyMap(); |
|---|
| | | cesiumContextMenu(false); |
|---|
| | | // 移除事件监听 |
|---|
| | | EventBus.off('deleteMapEntityById', deleteMapEntityById); |
|---|
| | | EventBus.off('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId); |
|---|
| | | }); |
|---|
| | |
|---|
| | | // 删除文件夹下所有地图实体 |
|---|
| | | const deleteMapEntitiesByFolderId = folderId => { |
|---|
| | | if (!viewer) return; |
|---|
| | | // 假设围栏数据中包含 folder_id 字段，根据文件夹ID过滤 |
|---|
| | | const entitiesToDelete = viewer.entities.values.filter(entity => { |
|---|
| | | return entity.customInfo?.folder_id === folderId; |
|---|
| | | }); |
|---|
| | |
|---|
| | | -ms-user-select: none; |
|---|
| | | user-select: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | </style> |
|---|
