| | |
| | | </el-tabs> |
| | | </div> |
| | | <!-- 地图 --> |
| | | <div class="mapContainer"> |
| | | <div class="tool-tip" v-if="layerParams.addNest">点击地图生成测绘区域</div> |
| | | <div class="mapContainer" v-loading="isPageLoading" |
| | | element-loading-background="rgba(0, 0, 0, 0.5)" |
| | | element-loading-text="加载中..."> |
| | | <div class="tool-tip warning" v-show="isShowWaringTip"> |
| | | <span class="icon"> |
| | | <el-icon><WarningFilled /></el-icon> |
| | | </span> |
| | | <span>测区不支持交叉面</span> |
| | | </div> |
| | | <div class="tool-tip" v-if="!isShowWaringTip && layerParams.addNest"> |
| | | {{ showToolTipText }} |
| | | </div> |
| | | <div id="layMap" class="ztzf-cesium"></div> |
| | | <leftList |
| | | v-if=" |
| | |
| | | @update:editFolder="handleFolder" |
| | | :activeName="activeName" |
| | | @newFencesMethods="newFencesMethods" |
| | | :reset-check="resetCheck" |
| | | :reset-check="resetCheck" |
| | | ></leftList> |
| | | <rightEdit |
| | | v-if="layerParams.addNest || layerParams.editNest" |
| | | @callParentMethod="parentMethod" |
| | | @update:loading="handleLoadingChange" |
| | | ></rightEdit> |
| | | <folderFile |
| | | @refreshMethod="refreshMethod" |
| | | :activeName="activeName" |
| | | @callParentMethod="parentMethod" |
| | | v-if="layerParams.addFolder || layerParams.editFolder" |
| | | ></folderFile> |
| | | </div> |
| | |
| | | import * as Cesium from 'cesium'; |
| | | import { PublicCesium } from '@/utils/cesium/publicCesium'; |
| | | import _, { cloneDeep, throttle } from 'lodash'; |
| | | const isProd = import.meta.env.VITE_APP_ENV === 'production' |
| | | |
| | | import { provide } from 'vue'; |
| | | import { useStore } from 'vuex'; |
| | | const isProd = import.meta.env.VITE_APP_ENV === 'production' |
| | | const store = useStore(); |
| | | const userInfo = computed(() => store.getters.userInfo); |
| | | const areaCode = userInfo.value?.detail?.areaCode || ''; |
| | | const showToolTipText = ref('点击地图生成测绘区域') |
| | | // 红色警告交叉面提示窗 |
| | | const isShowWaringTip = ref(false); |
| | | const activeName = ref('自定义识别区'); |
| | |
| | | type: '2', |
| | | }, |
| | | ]; |
| | | |
| | | // 如果是生产环境,只返回自定义识别区 |
| | | if (isProd) { |
| | | return allTabs.filter(tab => tab.type === '0'); |
| | |
| | | isDetailShow: false, |
| | | isSingleLocating:false , //是否是单个定位 |
| | | currentLocationFolderId:null, |
| | | crossSurface:false,//是否交叉面 |
| | | }); |
| | | const resetCheck = ref(false); |
| | | const handleClick = tab => { |
| | |
| | | layerParams.value.addFolder = false |
| | | layerParams.value.editFolder = false |
| | | resetCheck.value = !resetCheck.value; |
| | | |
| | | |
| | | }; |
| | | const refreshMethod = () => { |
| | | getdataFolderApi(); |
| | |
| | | viewer.entities.removeAll(); |
| | | layerParams.value.editDetailData = val; |
| | | drawPolygonExample.editThePatch(true); |
| | | drawPolygonExample.drawTheArea(true); |
| | | drawPolygonExample.drawTheArea(true); |
| | | let geoDataArr = JSON.parse(val.geo_data); |
| | | if (geoDataArr.length > 0) { |
| | | geoDataArr.pop(); |
| | |
| | | // 编辑文件夹 |
| | | const handleFolder = val => { |
| | | parentMethod() |
| | | selectDataList.value = val.children; |
| | | if (selectDataList.value?.length > 0) { |
| | | loadDataToMap(selectDataList.value); |
| | | } else { |
| | | viewer.entities.removeAll(); |
| | | } |
| | | layerParams.value.editFolderData = val; |
| | | }; |
| | | // 新增开启绘制 |
| | |
| | | console.warn(`数据 ${item.name} 坐标点不足,无法绘制`); |
| | | return; |
| | | } |
| | | |
| | | |
| | | tbJwdList.push(...positions); |
| | | let degreesArray = []; |
| | | positions.forEach(pos => { |
| | |
| | | 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] |
| | | 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 |
| | | |
| | | 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}`, |
| | |
| | | material:borderColor, |
| | | clampToGround: true, |
| | | }, |
| | | zIndex: 99, |
| | | zIndex: 99, |
| | | }); |
| | | }); |
| | | }); |
| | | if (!layerParams.value.isSingleLocating) { |
| | | focusOnAllFeatures(); |
| | | focusOnAllFeatures(); |
| | | } |
| | | viewInstance.value?.addLeftClickEvent(null, handleFenceClick); |
| | | }; |
| | | const focusOnAllFeatures = () => { |
| | | if (tbJwdList.length === 0 || !viewer) return; |
| | | |
| | | |
| | | // 判断是否有指定定位的文件夹 |
| | | if (layerParams.value.currentLocationFolderId) { |
| | | // 筛选当前文件夹下的所有子节点坐标 |
| | |
| | | const positions = parseGeoDataToPositions(item.geo_data, item.altitude); |
| | | return positions.length >= 3 ? positions : []; |
| | | }); |
| | | |
| | | |
| | | if (targetFolderPositions.length > 0) { |
| | | const positionsData = targetFolderPositions.map(pos => [ |
| | | pos.lng, |
| | |
| | | const handleFenceClick = movement => { |
| | | if (!viewer) return; |
| | | layerParams.value.editDetailData = null; |
| | | |
| | | |
| | | if(activeName.value !== '国土空间规划') { |
| | | const pickedObjects = viewer.scene.drillPick(movement.position, 10); |
| | | const pickedObjects = viewer.scene.drillPick(movement.position, 10); |
| | | // 遍历所有被点击的实体,找到围栏类型(customType: 'fence_polygon') |
| | | let selectedEntity = null; |
| | | for (let i = 0; i < pickedObjects.length; i++) { |
| | | const pick = pickedObjects[i]; |
| | | if (Cesium.defined(pick.id) && pick.id?.customType === 'fence_polygon') { |
| | | selectedEntity = pick.id; |
| | | break; |
| | | break; |
| | | } |
| | | } |
| | | // viewer.entities.values.forEach(entity => { |
| | |
| | | layerParams.value.editingIsProhibited = true; |
| | | } |
| | | } |
| | | }else { |
| | | |
| | | |
| | | } |
| | | |
| | | }; |
| | |
| | | }; |
| | | // 编辑/绘制 |
| | | const loadPlanarRoute = async (positions = null, save = false) => { |
| | | isShowWaringTip.value = false; |
| | | if (positions) { |
| | | curPolygonPosition = positions.map(item => { |
| | | let cartographic = Cesium.Cartographic.fromCartesian(item); |
| | | let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度 |
| | | let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度 |
| | | let height = Cesium.Math.toDegrees(cartographic.height); //高度 |
| | | let height = Cesium.Math.toDegrees(cartographic.height); //高度 |
| | | return { |
| | | lng: _.round(lng, 6), |
| | | lat: _.round(lat, 6), |
| | |
| | | }); |
| | | } |
| | | let polygon = curPolygonPosition.map(item => [item?.lng, item?.lat]); |
| | | if(polygon.length ===0){ |
| | | isShowWaringTip.value = false |
| | | } |
| | | if(polygon.length > 0 && !isShowWaringTip.value){ |
| | | showToolTipText.value = '测绘区域已绘制完成' |
| | | }else { |
| | | showToolTipText.value = '点击地图生成测绘区域' |
| | | } |
| | | |
| | | if(polygon.length > 0){ |
| | | polygon.push([curPolygonPosition[0]?.lng, curPolygonPosition[0]?.lat]) |
| | | } |
| | |
| | | }; |
| | | drawPolygonExample.subscribe('getShowWaringTip', data => { |
| | | isShowWaringTip.value = data; |
| | | layerParams.value.crossSurface = data |
| | | }); |
| | | const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200); |
| | | drawPolygonExample.subscribe('getPolygonPositions', data => { |
| | |
| | | } else { |
| | | cesium.removeEventListener('contextmenu', preventDefault); |
| | | } |
| | | }; |
| | | // 添加loading |
| | | const isPageLoading = ref(false); |
| | | const handleLoadingChange = (status) => { |
| | | isPageLoading.value = status; |
| | | }; |
| | | provide('layerParams', layerParams); |
| | | onMounted(() => { |
| | |
| | | position: relative; |
| | | width: 100%; |
| | | height: 80vh; |
| | | .warning { |
| | | position: absolute; |
| | | top: 234px; |
| | | color: #fff; |
| | | background: rgba(140, 0, 0, 0.4) !important; |
| | | |
| | | .icon { |
| | | display: flex; |
| | | align-items: center; |
| | | color: #ff1f1f; |
| | | } |
| | | } |
| | | #layMap { |
| | | width: 100%; |
| | | height: 100%; |