1.消防模块地图修改
guoyuepeng
parent
89cb569c4b
commit
192a354c4f
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue