diff --git a/config/index.js b/config/index.js index df43f78..f15bf6e 100644 --- a/config/index.js +++ b/config/index.js @@ -16,6 +16,13 @@ module.exports = { pathRewrite: { '^/api': '' } + }, + '/mapapi/': { + target: 'http://192.168.192.215:8021/', + changeOrigin: true, + pathRewrite: { + '^/mapapi/': '' + } } }, diff --git a/src/views/firefighting/points/components/edit.vue b/src/views/firefighting/points/components/edit.vue index 7f15396..9f1ca74 100644 --- a/src/views/firefighting/points/components/edit.vue +++ b/src/views/firefighting/points/components/edit.vue @@ -135,7 +135,7 @@ -
+
经度： @@ -167,6 +167,16 @@ 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 RyDragEntity from "../../../map/js/ry_dragentity"; +import DragEntity from "../../../map/js/dragentity"; + +let viewer = null +let drag = null +let ry_drag = null +var tiandituTk = 'e8a16137fd226a62a23cc7ba5c9c78ce' +var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'] +const Cesium = window.Cesium +Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOWQ0MGYwMy0yODUwLTQ1YzktOGM4OC02MTMwY2UyZjNlMzQiLCJpZCI6MTY0NTUwLCJpYXQiOjE2OTM4OTU1Mjd9.1cC0sSzyj79LZv0ILNCcl0Mabw6hl8TNngFNFr7H8f4' export default { components: { Pagination, SelectTree, TiandiMap }, @@ -260,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: { @@ -292,7 +310,268 @@ export default { // this.getFirePointCheckPhotos(this.FIRE_POINT_ID) } }, + mounted() { + this.initCorpInfo() + }, methods: { + initCorpInfo() { + 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.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键 + geocoder: true, // 地址编码 + baseLayerPicker: false, // 图层选择控件 + timeline: false, // 时间轴 + fullscreenButton: true, // 全屏显示 + infoBox: true, // 点击要素之后浮窗 + sceneModePicker: true, // 投影方式 三维/二维 + navigationInstructionsInitiallyVisible: false, // 导航指令 + navigationHelpButton: false, // 帮助信息 + selectionIndicator: false, // 选择 + imageryProvider: new Cesium.WebMapTileServiceImageryProvider({ + // 影像底图 + url: 'http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + tiandituTk, + subdomains: subdomains, + layer: 'tdtImgLayer', + style: 'default', + format: 'image/jpeg', + tileMatrixSetID: 'GoogleMapsCompatible', // 使用谷歌的瓦片切片方式 + show: true + }) + }) + viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏cesium ion + viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ + // 影像注记 + url: 'http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' + tiandituTk, + subdomains: subdomains, + layer: 'tdtCiaLayer', + style: 'default', + format: 'image/jpeg', + tileMatrixSetID: 'GoogleMapsCompatible', + show: true + })) + drag = new DragEntity({ + viewer + }) + // 根据不同的公司将信息加载到地图上 + 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') + Cesium.ExperimentalFeatures.enableModelExperimental = true + var cfdd = new Cesium.Cesium3DTileset({ + url: '/mapapi/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/merge_tile.json' + }) + viewer.scene.primitives.add(cfdd) + + var cfdx = new Cesium.Cesium3DTileset({ + url: '/mapapi/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/merge_tile.json' + }) + viewer.scene.primitives.add(cfdx) + + var qhdxys = new Cesium.Cesium3DTileset({ + url: '/mapapi/ware/upload/qhdxys/merge_tile.json' + }) + viewer.scene.primitives.add(qhdxys) + + var qhdgysh = new Cesium.Cesium3DTileset({ + url: '/mapapi/ware/upload/qhdgysh/merge_tile.json' + }) + viewer.scene.primitives.add(qhdgysh) + }, handleRemove(file) { if (file.IMGFILES_ID) { // 已经上传过的 现在删除 记录这个id @@ -375,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 + // }) }, /** * 初始化地图 @@ -395,7 +674,8 @@ export default { */ initMap(lng, lat, zoom) { this.initTDT().then((T) => { - const imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e8a16137fd226a62a23cc7ba5c9c78ce' + // const imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e8a16137fd226a62a23cc7ba5c9c78ce' + const imageURL = 'http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + tiandituTk // 创建自定义图层对象 this.lay = new window.T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 }) // 初始化地图对象 @@ -436,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() { @@ -670,7 +954,7 @@ export default {