122 lines
3.2 KiB
Vue
122 lines
3.2 KiB
Vue
<template>
|
||
<div id="map-container" class="map-container">
|
||
<slot></slot>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import * as Cesium from 'cesium';
|
||
import { useConfigSetting } from './mixins/useConfigSetting.js';
|
||
|
||
const props = defineProps({
|
||
options: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
}
|
||
})
|
||
const emits = defineEmits(['init'])
|
||
let viewer = null;
|
||
|
||
|
||
onMounted(async () => {
|
||
initMap();
|
||
})
|
||
|
||
// 初始化地图
|
||
const initMap = async () => {
|
||
const oldOptions = {
|
||
// 动画仪表盘
|
||
animation: false,
|
||
// 基础图层选择按钮
|
||
baseLayerPicker: false,
|
||
// 全屏按钮
|
||
fullscreenButton: false,
|
||
vrButton: false,
|
||
// 地名地址查询框
|
||
geocoder: false,
|
||
// 返回地球视角按钮
|
||
homeButton: false,
|
||
// 属性框（显示拾取要素的属性）
|
||
infoBox: false,
|
||
// 场景模式切换按钮（三维地球、2.5维场景、二维地图）
|
||
sceneModePicker: false,
|
||
// 拾取要素识别（显示个框，但不明确选中内容）？？？
|
||
selectionIndicator: false,
|
||
// 时间轴
|
||
timeline: false,
|
||
// 操作提示按钮
|
||
navigationHelpButton: false,
|
||
// 超采样开4倍，如果显示困难再降低
|
||
msaaSamples: 2,
|
||
scene3DOnly: true,
|
||
shouldAnimate: true,
|
||
contextOptions: {
|
||
webgl: {
|
||
// 允许截图
|
||
preserveDrawingBuffer: true,
|
||
},
|
||
},
|
||
}
|
||
// 添加cesium的token（目前使用zq发布的）
|
||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiZjljMTU0MC03OGY5LTRjMzQtYWJkYS02MzI2OTI2OGUyNTgiLCJpZCI6MzE3NTgsImlhdCI6MTc0MTA1MjY3OH0.uvbT5jSUFS-wU41MvzAuY33yfYnUiOWQCWad2KSX28o'
|
||
console.log(props.options.configJson)
|
||
let configJson = props.options.configJson;
|
||
try {
|
||
configJson = JSON.parse(configJson)
|
||
} catch (e) {
|
||
configJson = {}
|
||
}
|
||
if (props.options.isTerrainProvider) {
|
||
let terrainProvider = await Cesium.createWorldTerrainAsync()
|
||
// 是否使用自定义地形
|
||
if(props.options.cesiumTerrainProviderUrl) {
|
||
const customTerrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(props.options.cesiumTerrainProviderUrl);
|
||
if(customTerrainProvider) {
|
||
terrainProvider = customTerrainProvider;
|
||
}
|
||
}
|
||
oldOptions.terrainProvider = terrainProvider;
|
||
}
|
||
let options = Object.assign(oldOptions, configJson)
|
||
viewer = new Cesium.Viewer('map-container', options)
|
||
|
||
// 启用深度测试
|
||
// viewer.scene.globe.depthTestAgainstTerrain = true;
|
||
// 隐藏logo
|
||
viewer.cesiumWidget.creditContainer.style.display = 'none'
|
||
|
||
const { setInitConfig } = useConfigSetting(viewer);
|
||
|
||
setInitConfig(props.options);
|
||
|
||
// 取消左键双击
|
||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
|
||
|
||
emits('init', viewer);
|
||
}
|
||
|
||
|
||
onUnmounted(() => {
|
||
if (viewer) {
|
||
viewer.entities.removeAll()
|
||
viewer.imageryLayers.removeAll()
|
||
for (let index = 0; index < viewer.dataSources.length; index++) {
|
||
const datasource = viewer.dataSources.get(index);
|
||
datasource.entities.removeAll()
|
||
}
|
||
viewer.dataSources.removeAll(true)
|
||
// viewer.scene.primitives.removeAll();
|
||
viewer.destroy()
|
||
}
|
||
})
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.map-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style> |