From 192a354c4f90576bb76bae2ffc16da16f5b84cb3 Mon Sep 17 00:00:00 2001 From: guoyuepeng <770272267@qq.com> Date: Sat, 13 Apr 2024 18:04:36 +0800 Subject: [PATCH] =?UTF-8?q?1.=E6=B6=88=E9=98=B2=E6=A8=A1=E5=9D=97=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../firefighting/points/components/edit.vue | 234 ++++++++++++++++-- src/views/map/index.vue | 21 +- 2 files changed, 221 insertions(+), 34 deletions(-) diff --git a/src/views/firefighting/points/components/edit.vue b/src/views/firefighting/points/components/edit.vue index c61895c..9f1ca74 100644 --- a/src/views/firefighting/points/components/edit.vue +++ b/src/views/firefighting/points/components/edit.vue @@ -167,8 +167,8 @@ import { upload } from '@/utils/upload' import SelectTree from '@/components/SelectTree' import waves from '@/directive/waves' // waves directive import TiandiMap from '@/components/TianMap/TiandiMap.vue' -import DragEntity from '../../../map/js/dragentity' -import RyDragEntity from '../../../map/js/ry_dragentity' +import RyDragEntity from "../../../map/js/ry_dragentity"; +import DragEntity from "../../../map/js/dragentity"; let viewer = null let drag = null @@ -270,7 +270,15 @@ export default { limit: 20 }, multipleSelection: [], - accidentList: [] + accidentList: [], + corpInfo: { + CORP_INFO_ID: '', + longitude: '', + latitude: '' + }, + center: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 }, + poinEntity: {}, + dichitype :0 } }, watch: { @@ -310,15 +318,19 @@ export default { requestFN( '/map/getCorpInfo', {} ).then((data) => { - // this.corpInfo.CORP_INFO_ID = data.info.CORP_INFO_ID - // this.corpInfo.latitude = data.info.latitude - // this.corpInfo.longitude = data.info.longitude + this.corpInfo.CORP_INFO_ID = data.info.CORP_INFO_ID + this.corpInfo.latitude = data.info.latitude + this.corpInfo.longitude = data.info.longitude this.initMap2() }).catch((e) => { console.log(e) }) }, initMap2() { + console.info(viewer) + if (this.dichitype ===2){ + return + } viewer = new Cesium.Viewer('cesiumContainer', { animation: false, // 动画 homeButton: true, // home键 @@ -342,7 +354,6 @@ export default { show: true }) }) - viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏cesium ion viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ // 影像注记 @@ -354,18 +365,189 @@ export default { tileMatrixSetID: 'GoogleMapsCompatible', show: true })) - drag = new DragEntity({ viewer }) // 根据不同的公司将信息加载到地图上 - // this.initInfo() - // this.leftDownAction() - // this.dragAreaEntity(this.initPoint) + this.initInfo() + this.leftDownAction() + console.log(this.LATITUDE) + if(this.LATITUDE){ + console.log('LATITUDE') + this.dfdfd (this.LONGTITUDE,this.LATITUDE) + } + this.loadTilesetHandler() ry_drag = new RyDragEntity({ viewer }) + this.dichitype = 2 + }, + leftDownAction(){ + // 去掉entity的点击事件 start + viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK) + viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK) + // 去掉entity的点击事件 end + this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas) + let id + this.handler.setInputAction(movement => { + var cartesian = this.getCatesian3FromPX(movement.position) + }, Cesium.ScreenSpaceEventType.LEFT_CLICK) + + }, + getCatesian3FromPX: function(px) { + if (viewer && px) { + var picks = viewer.scene.drillPick(px) + var cartesian = null + // eslint-disable-next-line one-var + var isOn3dtiles = false, + isOnTerrain = false + // drillPick + for (const i in picks) { + const pick = picks[i] + + if ( + (pick && pick.primitive instanceof Cesium.Cesium3DTileFeature) || + (pick && pick.primitive instanceof Cesium.Cesium3DTileset) || + (pick && pick.primitive instanceof Cesium.Model) + ) { + // 模型上拾取 + isOn3dtiles = true + } + // 3dtilset + if (isOn3dtiles) { + viewer.scene.pick(px) // pick + cartesian = viewer.scene.pickPosition(px) + if (cartesian) { + const cartographic = Cesium.Cartographic.fromCartesian(cartesian) + if (cartographic.height < 0) cartographic.height = 0 + let lon = Cesium.Math.toDegrees(cartographic.longitude), + lat = Cesium.Math.toDegrees(cartographic.latitude), + height = cartographic.height + cartesian = this.transformWGS84ToCartesian({ + lng: lon, + lat: lat, + alt: height + }) + } + } + } + // 地形 + const boolTerrain = + viewer.terrainProvider instanceof + Cesium.EllipsoidTerrainProvider + // Terrain + if (!isOn3dtiles && !boolTerrain) { + var ray = viewer.scene.camera.getPickRay(px) + if (!ray) return null + cartesian = viewer.scene.globe.pick(ray, viewer.scene) + isOnTerrain = true + } + // 地球 + if (!isOn3dtiles && !isOnTerrain && boolTerrain) { + cartesian = viewer.scene.camera.pickEllipsoid( + px, + viewer.scene.globe.ellipsoid + ) + } + const cartesian1 = new Cesium.Cartesian3(cartesian.x, cartesian.y, cartesian.z) // 替换为实际的 Cartesian3 坐标值 + + // 将 Cartesian3 坐标转换为 Cartographic 坐标 + const cartographic = Cesium.Cartographic.fromCartesian(cartesian1) + + // 将 Cartographic 坐标转换为 CGCS2000 计算经纬度 + const lng = Cesium.Math.toDegrees(cartographic.longitude) + const lat = Cesium.Math.toDegrees(cartographic.latitude) + const height = cartographic.height // 高度 + this.LONGTITUDE = lng + this.LATITUDE = lat + this.dfdfd(lng,lat) + return `CGCS2000 坐标: 经度 ${lng}, 纬度 ${lat}, 高度 ${height}` + } + }, + transformWGS84ToCartesian: function(position, alt) { + // eslint-disable-next-line no-return-assign + return position ? Cesium.Cartesian3.fromDegrees( + position.lng || position.lon, + position.lat, + position.alt = alt || position.alt, + Cesium.Ellipsoid.WGS84 + ) + : Cesium.Cartesian3.ZERO + }, + dfdfd (LONGITUDE,LATITUDE){ + let dianweiName = '消防点位' + if(this.form.FIRE_POINT_NAME){ + dianweiName = this.form.FIRE_POINT_NAME + } + var initPoint = [ + { + 'id': '00002', + 'data_id': '00002', + 'MAP_POINT_NAME': dianweiName, + 'name': '', + 'point_type': '', + 'type': '', + 'descr': '', + 'position': { + 'x': LONGITUDE, + 'y': LATITUDE + }, + CORP_INFO_ID: 'f8da1790b1034058ae2efefd69af3284' + } + ] + this.dragAreaEntity(initPoint) + ry_drag = new RyDragEntity({ + viewer + }) + }, + // 加载点 + dragAreaEntity(pointArr) { + console.log('pointArr',pointArr) + console.log('') + this.poinEntity = {} + + const collection = new Cesium.CustomDataSource('clickEntityCollection') + pointArr.forEach(item => { + if (!this.poinEntity.hasOwnProperty(item.id)) { + const entity = drag.addEntity(item) + this.poinEntity[item.id] = entity + collection.entities.add(entity) + } + }) + viewer.dataSources.removeAll() + viewer.dataSources.add(collection) + }, + initInfo() { + this.bottomOptionsIndex = '' + this.clickPort({ + id: '00003', + CORP_INFO_ID: this.corpInfo.CORP_INFO_ID, + longitude: this.corpInfo.longitude, + latitude: this.corpInfo.latitude, + height: '2000' + }) + }, + clickPort({ id, longitude, latitude, height, CORP_INFO_ID }) { + console.log('clickPort', id, longitude, latitude, height, CORP_INFO_ID) + this.gangkouActive = id + this.CORP_INFO_ID = CORP_INFO_ID + this.componentKey = Math.random() + this.bottomOptionsKey = Math.random() + this.bottomOptionsAnimationComplex = false + this.toCenter({ longitude, latitude, height }) + drag.addPolygon(id) + viewer.dataSources.removeAll() + }, + toCenter(center = this.center) { + console.log('toCenter', center) + this.center.longitude = center.longitude + this.center.latitude = center.latitude + this.center.height = center.height + viewer.camera.flyTo({ + // 设置中心点,x,y,缩放等级 + destination: Cesium.Cartesian3.fromDegrees(this.center.longitude, this.center.latitude, this.center.height) + }) }, loadTilesetHandler() { console.log('loadTilesetHandler') @@ -472,17 +654,17 @@ export default { this.dialogFormMap = false }, initTDT() { - return new Promise((resolve, reject) => { - if (window.T) { - console.log('天地图初始化成功...') - resolve(window.T) - reject('error') - } else { - console.info(999999999) - } - }).then(T => { - window.T = T - }) + // return new Promise((resolve, reject) => { + // if (window.T) { + // console.log('天地图初始化成功...') + // resolve(window.T) + // reject('error') + // } else { + // console.info(999999999) + // } + // }).then(T => { + // window.T = T + // }) }, /** * 初始化地图 @@ -534,8 +716,12 @@ export default { handleMap() { this.dialogFormMap = true this.$nextTick(() => { - if (!this.map) this.initMap(this.LONGTITUDE, this.LATITUDE, 16) - else this.initCenter(this.LONGTITUDE, this.LATITUDE, 16) + if (!this.map){ + // this.initMap(this.LONGTITUDE, this.LATITUDE, 16) + this.initCorpInfo() + } else { + this.initCenter(this.LONGTITUDE, this.LATITUDE, 16) + } }) }, confirm() { diff --git a/src/views/map/index.vue b/src/views/map/index.vue index b0da679..4bff457 100644 --- a/src/views/map/index.vue +++ b/src/views/map/index.vue @@ -749,16 +749,17 @@ export default { checkImg: require('../../assets/map/gangkou_index/buttom/ico23_on.png'), containAuthorization: [], eliminateAuthorization: [] - }, - { - label: '压力管道', - dialog_width: '1200px', - check: false, - img: require('../../assets/map/gangkou_index/buttom/ico24.png'), - checkImg: require('../../assets/map/gangkou_index/buttom/ico24_on.png'), - containAuthorization: [], - eliminateAuthorization: [] } + // , + // { + // label: '压力管道', + // dialog_width: '1200px', + // check: false, + // img: require('../../assets/map/gangkou_index/buttom/ico24.png'), + // checkImg: require('../../assets/map/gangkou_index/buttom/ico24_on.png'), + // containAuthorization: [], + // eliminateAuthorization: [] + // } // { // label: '锅炉', // dialog_width: '1200px', @@ -1347,7 +1348,7 @@ export default { // eslint-disable-next-line no-unused-vars var _this = this const collection = new Cesium.CustomDataSource('clickEntityCollection') - + console.info() poin.forEach(item => { if (!this.poinEntity.hasOwnProperty(item.id)) { const entity = drag.addEntity(item)