1.消防模块地图修改
parent
89cb569c4b
commit
192a354c4f
|
@ -167,8 +167,8 @@ import { upload } from '@/utils/upload'
|
||||||
import SelectTree from '@/components/SelectTree'
|
import SelectTree from '@/components/SelectTree'
|
||||||
import waves from '@/directive/waves' // waves directive
|
import waves from '@/directive/waves' // waves directive
|
||||||
import TiandiMap from '@/components/TianMap/TiandiMap.vue'
|
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 viewer = null
|
||||||
let drag = null
|
let drag = null
|
||||||
|
@ -270,7 +270,15 @@ export default {
|
||||||
limit: 20
|
limit: 20
|
||||||
},
|
},
|
||||||
multipleSelection: [],
|
multipleSelection: [],
|
||||||
accidentList: []
|
accidentList: [],
|
||||||
|
corpInfo: {
|
||||||
|
CORP_INFO_ID: '',
|
||||||
|
longitude: '',
|
||||||
|
latitude: ''
|
||||||
|
},
|
||||||
|
center: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
|
||||||
|
poinEntity: {},
|
||||||
|
dichitype :0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -310,15 +318,19 @@ export default {
|
||||||
requestFN(
|
requestFN(
|
||||||
'/map/getCorpInfo', {}
|
'/map/getCorpInfo', {}
|
||||||
).then((data) => {
|
).then((data) => {
|
||||||
// this.corpInfo.CORP_INFO_ID = data.info.CORP_INFO_ID
|
this.corpInfo.CORP_INFO_ID = data.info.CORP_INFO_ID
|
||||||
// this.corpInfo.latitude = data.info.latitude
|
this.corpInfo.latitude = data.info.latitude
|
||||||
// this.corpInfo.longitude = data.info.longitude
|
this.corpInfo.longitude = data.info.longitude
|
||||||
this.initMap2()
|
this.initMap2()
|
||||||
}).catch((e) => {
|
}).catch((e) => {
|
||||||
console.log(e)
|
console.log(e)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
initMap2() {
|
initMap2() {
|
||||||
|
console.info(viewer)
|
||||||
|
if (this.dichitype ===2){
|
||||||
|
return
|
||||||
|
}
|
||||||
viewer = new Cesium.Viewer('cesiumContainer', {
|
viewer = new Cesium.Viewer('cesiumContainer', {
|
||||||
animation: false, // 动画
|
animation: false, // 动画
|
||||||
homeButton: true, // home键
|
homeButton: true, // home键
|
||||||
|
@ -342,7 +354,6 @@ export default {
|
||||||
show: true
|
show: true
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏cesium ion
|
viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏cesium ion
|
||||||
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
|
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
|
||||||
// 影像注记
|
// 影像注记
|
||||||
|
@ -354,18 +365,189 @@ export default {
|
||||||
tileMatrixSetID: 'GoogleMapsCompatible',
|
tileMatrixSetID: 'GoogleMapsCompatible',
|
||||||
show: true
|
show: true
|
||||||
}))
|
}))
|
||||||
|
|
||||||
drag = new DragEntity({
|
drag = new DragEntity({
|
||||||
viewer
|
viewer
|
||||||
})
|
})
|
||||||
// 根据不同的公司将信息加载到地图上
|
// 根据不同的公司将信息加载到地图上
|
||||||
// this.initInfo()
|
this.initInfo()
|
||||||
// this.leftDownAction()
|
this.leftDownAction()
|
||||||
// this.dragAreaEntity(this.initPoint)
|
console.log(this.LATITUDE)
|
||||||
|
if(this.LATITUDE){
|
||||||
|
console.log('LATITUDE')
|
||||||
|
this.dfdfd (this.LONGTITUDE,this.LATITUDE)
|
||||||
|
}
|
||||||
|
|
||||||
this.loadTilesetHandler()
|
this.loadTilesetHandler()
|
||||||
ry_drag = new RyDragEntity({
|
ry_drag = new RyDragEntity({
|
||||||
viewer
|
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() {
|
loadTilesetHandler() {
|
||||||
console.log('loadTilesetHandler')
|
console.log('loadTilesetHandler')
|
||||||
|
@ -472,17 +654,17 @@ export default {
|
||||||
this.dialogFormMap = false
|
this.dialogFormMap = false
|
||||||
},
|
},
|
||||||
initTDT() {
|
initTDT() {
|
||||||
return new Promise((resolve, reject) => {
|
// return new Promise((resolve, reject) => {
|
||||||
if (window.T) {
|
// if (window.T) {
|
||||||
console.log('天地图初始化成功...')
|
// console.log('天地图初始化成功...')
|
||||||
resolve(window.T)
|
// resolve(window.T)
|
||||||
reject('error')
|
// reject('error')
|
||||||
} else {
|
// } else {
|
||||||
console.info(999999999)
|
// console.info(999999999)
|
||||||
}
|
// }
|
||||||
}).then(T => {
|
// }).then(T => {
|
||||||
window.T = T
|
// window.T = T
|
||||||
})
|
// })
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 初始化地图
|
* 初始化地图
|
||||||
|
@ -534,8 +716,12 @@ export default {
|
||||||
handleMap() {
|
handleMap() {
|
||||||
this.dialogFormMap = true
|
this.dialogFormMap = true
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
if (!this.map) this.initMap(this.LONGTITUDE, this.LATITUDE, 16)
|
if (!this.map){
|
||||||
else this.initCenter(this.LONGTITUDE, this.LATITUDE, 16)
|
// this.initMap(this.LONGTITUDE, this.LATITUDE, 16)
|
||||||
|
this.initCorpInfo()
|
||||||
|
} else {
|
||||||
|
this.initCenter(this.LONGTITUDE, this.LATITUDE, 16)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
confirm() {
|
confirm() {
|
||||||
|
|
|
@ -749,16 +749,17 @@ export default {
|
||||||
checkImg: require('../../assets/map/gangkou_index/buttom/ico23_on.png'),
|
checkImg: require('../../assets/map/gangkou_index/buttom/ico23_on.png'),
|
||||||
containAuthorization: [],
|
containAuthorization: [],
|
||||||
eliminateAuthorization: []
|
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: '锅炉',
|
// label: '锅炉',
|
||||||
// dialog_width: '1200px',
|
// dialog_width: '1200px',
|
||||||
|
@ -1347,7 +1348,7 @@ export default {
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
var _this = this
|
var _this = this
|
||||||
const collection = new Cesium.CustomDataSource('clickEntityCollection')
|
const collection = new Cesium.CustomDataSource('clickEntityCollection')
|
||||||
|
console.info()
|
||||||
poin.forEach(item => {
|
poin.forEach(item => {
|
||||||
if (!this.poinEntity.hasOwnProperty(item.id)) {
|
if (!this.poinEntity.hasOwnProperty(item.id)) {
|
||||||
const entity = drag.addEntity(item)
|
const entity = drag.addEntity(item)
|
||||||
|
|
Loading…
Reference in New Issue