1.口门门禁地图修改,修改成倾斜摄影
guoyuepeng
parent
8d4af194e7
commit
0f5b7b21ae
|
|
@ -74,12 +74,15 @@
|
|||
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
||||
import DragEntity from '../../../../map/js/dragentity'
|
||||
import RyDragEntity from '../../../../map/js/ry_dragentity.js'
|
||||
import { requestFN } from '@/utils/request'
|
||||
import SelectTree from '@/components/SelectTree'
|
||||
import waves from '@/directive/waves'
|
||||
import TiandiMap from '../../../../../components/TianMap/TiandiMap'
|
||||
|
||||
let viewer = null
|
||||
let drag = null
|
||||
let ry_drag = null
|
||||
const Cesium = window.Cesium
|
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOWQ0MGYwMy0yODUwLTQ1YzktOGM4OC02MTMwY2UyZjNlMzQiLCJpZCI6MTY0NTUwLCJpYXQiOjE2OTM4OTU1Mjd9.1cC0sSzyj79LZv0ILNCcl0Mabw6hl8TNngFNFr7H8f4'
|
||||
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
|
||||
|
|
@ -131,7 +134,16 @@ export default {
|
|||
{ NAME: '正常', VALUE: 0 },
|
||||
{ NAME: '停用', VALUE: 1 },
|
||||
{ NAME: '暂时关闭', VALUE: 2 }
|
||||
]
|
||||
],
|
||||
map: null,
|
||||
corpInfo: {
|
||||
CORP_INFO_ID: '21590a00ea5e462e9ee44dd332dddc26',
|
||||
longitude: '119.65009974259941',
|
||||
latitude: '39.93517744811151'
|
||||
},
|
||||
center: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
|
||||
LONGTITUDE :'',
|
||||
LATITUDE : ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -152,112 +164,6 @@ export default {
|
|||
this.form.LONGITUDEANDLATITUDE = this.form.LATITUDE + '--' + this.form.LONGITUDE
|
||||
this.dialogFormMap = false
|
||||
},
|
||||
/**
|
||||
* 初始化天地图对象
|
||||
*/
|
||||
/* initTDT() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (window.T) {
|
||||
console.log('天地图初始化成功...')
|
||||
resolve(window.T)
|
||||
reject('error')
|
||||
}
|
||||
}).then(T => {
|
||||
window.T = T
|
||||
})
|
||||
},*/
|
||||
/**
|
||||
* 初始化地图
|
||||
* @param {*} lng 经度
|
||||
* @param {*} lat 纬度
|
||||
* @param {*} zoom 缩放比例(1~18)
|
||||
*/
|
||||
initMap(lng, lat, zoom) {
|
||||
viewer = new Cesium.Viewer('cesiumContainer', {
|
||||
// terrainProvider: Cesium.createWorldTerrain()
|
||||
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
|
||||
Cesium.ExperimentalFeatures.enableModelExperimental = true
|
||||
var tile3d = new Cesium.Cesium3DTileset({
|
||||
url: config.mapJsonUrl
|
||||
})
|
||||
viewer.scene.primitives.add(tile3d)
|
||||
|
||||
this.toCenter(lng, lat, zoom)
|
||||
this.leftDownAction()
|
||||
},
|
||||
toCenter(LONGITUDE, LATITUDE, height) {
|
||||
if (!LONGITUDE && !LATITUDE) {
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Cartesian3.fromDegrees(119.58, 39.94, height)
|
||||
})
|
||||
viewer.entities.removeAll()
|
||||
} else {
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Cartesian3.fromDegrees(LONGITUDE, LATITUDE, height)
|
||||
})
|
||||
viewer.entities.removeAll()
|
||||
this.form.LONGITUDE = LONGITUDE
|
||||
this.form.LATITUDE = LATITUDE
|
||||
this.addPoint([LONGITUDE, LATITUDE], 'init')
|
||||
}
|
||||
},
|
||||
leftDownAction() {
|
||||
// 去掉entity的点击事件 start
|
||||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
|
||||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||||
// 去掉entity的点击事件 end
|
||||
|
||||
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
|
||||
handler.setInputAction(event => {
|
||||
viewer.entities.removeAll()
|
||||
const clickPosition = viewer.scene.camera.pickEllipsoid(event.position) // 转经纬度（弧度）坐标
|
||||
const radiansPos = Cesium.Cartographic.fromCartesian(clickPosition) // 转角度
|
||||
this.form.LONGITUDE = Cesium.Math.toDegrees(radiansPos.longitude)
|
||||
this.form.LATITUDE = Cesium.Math.toDegrees(radiansPos.latitude)
|
||||
this.addPoint(clickPosition, 'click')
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||||
},
|
||||
addPoint(position, type) {
|
||||
viewer.entities.add({ position: type === 'init' ? Cesium.Cartesian3.fromDegrees(...position) : position, billboard: {
|
||||
image: img_h,
|
||||
height: 25,
|
||||
width: 23,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
||||
}})
|
||||
},
|
||||
handleMap() {
|
||||
this.dialogFormMap = true
|
||||
this.$nextTick(() => {
|
||||
if (!viewer) this.initMap(this.form.LONGITUDE, this.form.LATITUDE, 5000)
|
||||
else this.toCenter(this.form.LONGITUDE, this.form.LATITUDE, 5000)
|
||||
/* else this.initCenter(this.form.LONGITUDE, this.form.LATITUDE, 16)*/
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
|
|
@ -323,6 +229,273 @@ export default {
|
|||
// 返回列表
|
||||
goBack() {
|
||||
this.$parent.activeName = 'List'
|
||||
},
|
||||
handleMap(){
|
||||
this.dialogFormMap = true
|
||||
this.$nextTick(() => {
|
||||
if (!this.map) {
|
||||
// this.initMap(this.LONGTITUDE, this.LATITUDE, 16)
|
||||
this.initMap2()
|
||||
} else {
|
||||
this.initCenter(this.LONGTITUDE, this.LATITUDE, 16)
|
||||
}
|
||||
})
|
||||
},
|
||||
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
|
||||
},
|
||||
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)
|
||||
if (this.FIRE_POINT_ID && this.LONGTITUDE && this.LATITUDE && this.LONGTITUDE.trim() != '' && this.LATITUDE.trim() != '') {
|
||||
this.center.longitude = this.LONGTITUDE
|
||||
this.center.latitude = this.LATITUDE
|
||||
} else {
|
||||
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)
|
||||
})
|
||||
},
|
||||
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)
|
||||
this.handler.setInputAction(movement => {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
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
|
||||
// eslint-disable-next-line prefer-const,one-var
|
||||
let lon = Cesium.Math.toDegrees(cartographic.longitude),
|
||||
// eslint-disable-next-line prefer-const
|
||||
lat = Cesium.Math.toDegrees(cartographic.latitude),
|
||||
// eslint-disable-next-line prefer-const
|
||||
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}`
|
||||
}
|
||||
},
|
||||
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.form.LATITUDE = LATITUDE
|
||||
this.form.LONGITUDE = LONGITUDE
|
||||
this.form.LONGITUDEANDLATITUDE = this.form.LATITUDE + '--' + this.form.LONGITUDE
|
||||
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)
|
||||
},
|
||||
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)
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue