|
|
|
|
|
<template>
|
|
|
|
|
|
<div id="cesium-viewer" ref="viewerDivRef"></div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
|
|
import * as Cesium from 'cesium'
|
|
|
|
|
|
import 'cesium/Build/Cesium/Widgets/widgets.css'
|
|
|
|
|
|
import {
|
|
|
|
|
|
TDTLayerType,
|
|
|
|
|
|
TDTProjectionType,
|
|
|
|
|
|
getTDTProvider,
|
|
|
|
|
|
getTDTTerrainProvider,
|
|
|
|
|
|
} from '@/utils/map/TDTProvider'
|
|
|
|
|
|
const viewerDivRef = ref<HTMLDivElement>()
|
|
|
|
|
|
window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/'
|
|
|
|
|
|
// window.CESIUM_BASE_URL = 'libs/cesium/' //打包部署
|
|
|
|
|
|
|
|
|
|
|
|
Cesium.Ion.defaultAccessToken =
|
|
|
|
|
|
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YjU4MjJlMS0wMWE4LTRhOWQtYjQ1OC04MTgzMzFhMzQ5ZjAiLCJpZCI6MTE1ODUxLCJpYXQiOjE2NjkyMDM1MzN9.8ajEuv3VKYg8wvFiQlUWWY6Ng6JfY4PuVgRyStL1B-E'
|
|
|
|
|
|
|
|
|
|
|
|
//离线地球底图
|
|
|
|
|
|
const earth_native = Cesium.TileMapServiceImageryProvider.fromUrl(
|
|
|
|
|
|
// 'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII',
|
|
|
|
|
|
Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'),
|
|
|
|
|
|
)
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
|
// 修改相机的默认矩形范围
|
|
|
|
|
|
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
|
|
|
|
|
|
75.0, // 西经
|
|
|
|
|
|
0.0, // 南纬
|
|
|
|
|
|
140.0, // 东经
|
|
|
|
|
|
60.0, // 北纬
|
|
|
|
|
|
)
|
|
|
|
|
|
//未联网状态加载默认本地底图，保证地球有底图显示
|
|
|
|
|
|
let viewer = new Cesium.Viewer(viewerDivRef.value as HTMLElement, {
|
|
|
|
|
|
infoBox: false, //是否显示点击要素之后显示的信息
|
|
|
|
|
|
homeButton: false, //是否显示Home按钮
|
|
|
|
|
|
navigationHelpButton: false, //是否显示帮助信息控件
|
|
|
|
|
|
timeline: false, //是否显示时间线控件
|
|
|
|
|
|
animation: false, //是否显示动画控件
|
|
|
|
|
|
sceneModePicker: true, //是否显示投影方式控件
|
|
|
|
|
|
sceneMode: Cesium.SceneMode.SCENE3D, //设置场景模式，3D球体
|
|
|
|
|
|
// terrain: Cesium.Terrain.fromWorldTerrain(),
|
|
|
|
|
|
baseLayerPicker: false, //是否显示图层选择控件
|
|
|
|
|
|
requestRenderMode: true, //启用请求渲染模式
|
|
|
|
|
|
scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
|
|
|
|
|
|
fullscreenButton: false, //右下角 全屏控件
|
|
|
|
|
|
orderIndependentTranslucency: false,
|
|
|
|
|
|
contextOptions: { webgl: { alpha: true } },
|
|
|
|
|
|
baseLayer: Cesium.ImageryLayer.fromProviderAsync(earth_native, {}),
|
|
|
|
|
|
})
|
|
|
|
|
|
//去除cesium logo，隐藏版本信息
|
|
|
|
|
|
const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement
|
|
|
|
|
|
creditContainer.style.display = 'none'
|
|
|
|
|
|
// 抗锯齿
|
|
|
|
|
|
// 是否支持图像渲染像素化处理
|
|
|
|
|
|
// if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
|
|
|
|
|
|
// viewer.resolutionScale = window.devicePixelRatio
|
|
|
|
|
|
// }
|
|
|
|
|
|
viewer.scene.postProcessStages.fxaa.enabled = true
|
|
|
|
|
|
// 水雾特效
|
|
|
|
|
|
viewer.scene.globe.showGroundAtmosphere = true
|
|
|
|
|
|
// 关闭太阳，月亮，天空盒，雾等相关特效
|
|
|
|
|
|
viewer.scene.moon.show = false
|
|
|
|
|
|
viewer.scene.fog.enabled = false
|
|
|
|
|
|
viewer.scene.sun.show = false
|
|
|
|
|
|
viewer.scene.skyBox.show = false
|
|
|
|
|
|
// 优化加载WMTS图层速度
|
|
|
|
|
|
Cesium.RequestScheduler.maximumRequestsPerServer = 18 // 设置cesium请求调度器的最大并发数量
|
|
|
|
|
|
Cesium.RequestScheduler.throttleRequests = false //关闭请求调度器的请求节流
|
|
|
|
|
|
|
|
|
|
|
|
//添加天地图影像
|
|
|
|
|
|
viewer.imageryLayers.addImageryProvider(
|
|
|
|
|
|
getTDTProvider(TDTLayerType.Img, TDTProjectionType.WebMercator),
|
|
|
|
|
|
)
|
|
|
|
|
|
//添加天地图影像注记
|
|
|
|
|
|
viewer.imageryLayers.addImageryProvider(
|
|
|
|
|
|
getTDTProvider(TDTLayerType.Cia, TDTProjectionType.WebMercator),
|
|
|
|
|
|
)
|
|
|
|
|
|
// 添加三维地形服务
|
|
|
|
|
|
viewer.terrainProvider = getTDTTerrainProvider()
|
|
|
|
|
|
// 将三维球定位到中国
|
|
|
|
|
|
viewer.camera.flyTo({
|
|
|
|
|
|
destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 12550000),
|
|
|
|
|
|
orientation: {
|
|
|
|
|
|
heading: Cesium.Math.toRadians(348.4202942851978),
|
|
|
|
|
|
pitch: Cesium.Math.toRadians(-89.74026687972041),
|
|
|
|
|
|
roll: Cesium.Math.toRadians(0),
|
|
|
|
|
|
},
|
|
|
|
|
|
complete: function callback() {
|
|
|
|
|
|
// 定位完成之后的回调函数
|
|
|
|
|
|
},
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
#cesium-viewer {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
