需要瓦片图和天空图的小伙伴,可以关注我私信找我,给你发天空图和瓦片图
initCesium() { //初始化地图
var that = this
that.viewer = new Cesium.Viewer('earthBox', {
shouldAnimate: true,
animation: false, // 是否创建动画小器件,左下角仪表
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: Cesium.buildModuleUrl('/static/Cesium/Assets/Textures/NaturalEarthII') +
'/{z}/{x}/{reverseY}.jpg',
tilingScheme: new Cesium.GeographicTilingScheme(),
maximumLevel: 5
}),
baseLayerPicker: false, // 是否显示图层选择器
fullscreenButton: false, // 是否显示全屏按钮
geocoder: false, // 是否显示geocoder小器件,右上角查询按钮
homeButton: false, // 是否显示Home按钮
infoBox: false, // 是否显示信息框
sceneModePicker: false, //隐藏切换二三维按钮
selectionIndicator: false, // 是否显示选取指示器组件
timeline: false, // 是否显示时间轴
navigationHelpButton: false, // 是否显示右上角的帮助按钮
navigationInstructionsInitiallyVisible: false,
navigation: false,
mapMode2D: Cesium.MapMode2D.ROTATE,
orderIndependentTranslucency: false,
contextOptions: {
webgl: {
alpha: true,
},
},
})
//去掉三维球的黑色背景色 和orderIndependentTranslucency、contextOptions属性配合使用
// that.viewer.scene.skyBox.show = false;
that.viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
that.viewer.cesiumWidget.creditContainer.style.display = "none";
that.handler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);
//2d 3d 切换 SCENE3D
// that.viewer.scene.mode = Cesium.SceneMode.SCENE2D;
that.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
that.viewer.scene.globe.depthTestAgainstTerrain = true;
//添加天空图
that.viewer.scene.skyBox = new Cesium.SkyBox({
sources: {
positiveX: '././public/skybox/sky2_left.jpg',
negativeX: '././public/skybox/sky2_right.jpg',
positiveY: '././public/skybox/sky2_down.jpg',
negativeY: '././public/skybox/sky2_up.jpg',
positiveZ: '././public/skybox/sky2_front.jpg',
negativeZ: '././public/skybox/sky2_back.jpg'
}
});
// 给地球添加点击事件
let handler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);//处理用户输入事件
handler.setInputAction(function (event) { // 设置左键点击事件
let pick = viewer.scene.pick(event.position); // 获取 pick 拾取对象
if (Cesium.defined(pick)) { // 判断是否获取到了 pick
pick.id.billboard.image = "......" // 修改拾取到的entity的样式
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},