1.初始化地图
const initCesium = () => {
viewer.value = new Cesium.Viewer("cesiumContainer", {
homeButton: false, //主页按钮
baseLayerPicker: false, //是否显示图层选择控件
navigationHelpButton: false, //帮助信息按钮
geocoder: false, //是否显示地名查找控件
infoBox: false, //是否显示点击要素之后显示的信息
fullscreenButton: false, //是否显示全屏按钮
timeline: false, //是否显示时间线控件
animation: false, //是否显示动画控件
sceneModePicker: false, //是否显示投影方式控件
selectionIndicator: true, // 点击有绿框
shouldAnimate: false, //允许动画
navigationInstructionsInitiallyVisible: false,
sceneMode: 3, //初始场景模式 1 1D模式 1 1D循环模式 3 3D模式 Cesium.SceneMode
scene3DOnly: true, //每个几何实例将只能以3D渲染以节省GPU内存
});
viewer.value.scene.globe.depthTestAgainstTerrain = false; //关闭深度检测
viewer.value.scene.debugShowFramesPerSecond = true; //显示刷新率和帧率
// viewer.value.scene.screenSpaceCameraController.enableRotate = false //禁止地图拖拽
viewer.value._cesiumWidget._creditContainer.style.display = "none"; //去除掉 版权信息
viewer.value.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(114, 16, 1000000),
});
handler.value = new Cesium.ScreenSpaceEventHandler(
viewer.value.scene.canvas
);
// viewer.value.scene.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
// url: '/map/{z}/{x}/{reverseY}.png',
// }))
}
2.消除地图
const cancelCesium = () => {
if (Cesium.defined(viewer.value)) {
viewer.value.entities.removeAll();
viewer.value.imageryLayers.removeAll();
viewer.value.dataSources.removeAll();
// viewer.scene.primitives.removeAll();
// 获取webgl上下文
let gl = viewer.value.scene.context._originalGLContext;
gl.canvas.width = 1;
gl.canvas.height = 1;
viewer.value.destroy(); // 销毁Viewer实例
gl.getExtension("WEBGL_lose_context").loseContext();
gl = null;
viewer.value = null;
var cesiumContainer = document.getElementById("cesiumContainer");
if (cesiumContainer) {
cesiumContainer.remove(); // 移除与地图相关的DOM元素
}
}
}
欢迎补充,一起进步。