<script setup>
import { reactive, ref, onMounted } from "vue";
// ---------------------------<<数据>>---------------------------
// ---------------------------<<函数>>---------------------------
function initMap() {
// 在线地图token
Cesium.Ion.defaultAccessToken = "map_token";
// 在线地图
let imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
url: "/ArcGIS/rest/services/World_Imagery/MapServer",
});
var viewer = new Cesium.Viewer("cesiumContainer", {
sceneMode: Cesium.SceneMode.SCENE3D, //初始场景模式 为二维
fullscreenButton: false,
homeButton: false,
scene3DOnly: false,
creditContainer: "cesiumContainer",
vrButton: false,
skyAtmosphere: false,
infoBox: false, //是否显示点击要素之后显示的信息
imageryProvider: imageryProvider,
maximumScreenSpaceError: 16, //默认值16 用于提高细节细化级别的最大屏幕空间错误
animation: false, //是否显示动画控件 是否显示图层选择控件
geocoder: false, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: true, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
shadows: true,
shouldAnimate: true,
baseLayerPicker: false, //是否显示图层选择控件
selectionIndicator: false, //设置绿色框框不可见
skyBox: false,
contextOption: {
webgl: {
alpha: true,
},
},
});
viewer.scene.globe.enableLighting = false;
viewer.shadows = false;
viewer.sceneModePicker.viewModel.duration = 0;
viewer.scene.globe.enableLighting = false;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.2; // 摄像机到地图的距离放大倍数
viewer.camera.flyHome(0);
//取消双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
// 调整画面精细度
viewer.resolutionScale = 1; //默认值为1.0
viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;
viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;
//是否开启抗锯齿
viewer.scene.fxaa = false;
viewer.scene.postProcessStages.fxaa.enabled = false;
viewer.scene.globe.showGroundAtmosphere = true;
//指北针
var options = {};
options.enableCompass = true; //罗盘
options.enableZoomControls = true; //缩放
options.enableDistanceLegend = true; //比例尺
options.enableCompassOuterRing = true; //指南针外环
// (CesiumNavigation, options);
window.viewer = viewer;
// 设置相机位置
viewer.scene.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(123.652734, 22.032279, 3000),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: 0.0,
},
});
// 开启画面帧频
// = true;
// 鼠标事件
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 移动事件
handler.setInputAction((movement) => {
console.log("移动事件")
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// 滚轮事件
handler.setInputAction((movement) => {
console.log("滚轮事件");
}, Cesium.ScreenSpaceEventType.WHEEL);
// 双击事件
handler.setInputAction((movement) => {
console.log("双击事件");
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
// 单击事件
handler.setInputAction((movement) => {
console.log("单击事件");
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
// ---------------------------<<执行>>---------------------------
// 挂载后生命周期
onMounted(() => {
initMap();
});
</script>