场景设置
晨昏线
晨昏线的设置只需要设置：viewer.scene.globe.enableLighting = true;即可
场景截图
对于场景截图的设置，我们需要对viewer进行特定的初始化设置，否则加载出来的图片是全黑没有内容的：
js
viewer = new window.Cesium.Viewer('cesiumContainer', {
navigationHelpButton: false, // 是否显示帮助信息控件
infoBox: true, // 是否显示点击要素之后显示的信息
fullscreenButton: false, // 全屏显示
CreditsDisplay: false,
contextOptions: {
webgl: {
alpha: true,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: true,
// 通过canvas.toDataURL()实现截图需要将该项设置为true
preserveDrawingBuffer: true,
failIfMajorPerformanceCaveat: true
}
}
});场景截图并导出的相关函数：
js
export function exportImage(){
// 获取场景的canvas
const canvas = viewer.scene.canvas;
// 创建一个临时的a标签用于下载图片
const a = document.createElement('a');
a.href = canvas.toDataURL('image/png');
a.download = 'screenshot.png';
// 模拟点击a标签进行下载
a.click();
}场景信息
对于地球中的某个场景，我们想要点击它时可以显示出其具体的描述信息，我们需要对viewer进行特定的初始化设置：
js
const viewer = new window.Cesium.Viewer('cesiumContainer', {
infoBox: true, // 启用InfoBox（也可以不写，其值默认时true）
});对于CZML中的场景节点，我们设置description就是我们在场景展示面板中会显示的内容，description需要使用HTML的格式进行编写：
js
const czml = [
{
id: "document",
name: "CZML Point",
version: "1.0",
},
{
id: "point",
name: "point",
description: "<!--HTML-->\r\n<p>GeoEye-1 is a high-resolution earth observation satellite owned by GeoEye, which was launched in September 2008.</p>\r\n\r\n<p>On December 1, 2004, General Dynamics C4 Systems announced it had been awarded a contract worth approximately $209 million to build the OrbView-5 satellite. Its sensor is designed by the ITT Exelis.</p>\r\n\r\n<p>The satellite, now known as GeoEye-1, was originally scheduled for April 2008 but lost its 30-day launch slot to a U.S. government mission which had been delayed. It was rescheduled for launch August 22, 2008 from Vandenberg Air Force Base aboard a Delta II launch vehicle. The launch was postponed to September 4, 2008, due to unavailability of the Big Crow telemetry-relay aircraft. It was delayed again to September 6 because Hurricane Hanna interfered with its launch crews.</p>\r\n\r\n<p>The launch took place successfully on September 6, 2008 at 11:50:57 a.m. PDT (18:50:57 UTC). The GeoEye-1 satellite separated successfully from its Delta II launch vehicle at 12:49 p.m. PDT (19:49 UTC), 58 minutes and 56 seconds after launch.</p>",
position: {
cartographicDegrees: [-111.0, 40.0, 0],
},
point: {
color: {
rgba: [255, 255, 255, 255],
},
outlineColor: {
rgba: [255, 0, 0, 255],
},
outlineWidth: 4,
pixelSize: 20,
},
},
];这样我们点击地球上的对应的节点就可以看到其对应的描述信息
经纬度网络
设置经纬度网络需要对经度和纬度进行分开设置同时还需要进行抗锯齿设置(在折线进行放大的时候会出现锯齿状的形态，开启抗锯齿可以避免这种情况)
js
// 判断是否支持图像渲染像素化处理
if(Cesium.FeatureDetection.supportsImageRenderingPixelated()){
viewer.resolutionScale = window.devicePixelRatio;
}
// 开启抗锯齿(在折线进行放大的时候会出现锯齿状的形态，开启抗锯齿可以避免这种情况)
viewer.scene.fxaa = true;
viewer.scene.postProcessStages.fxaa.enabled = true;
const entities = viewer.entities;
for (let lang = -180; lang <= 180; lang += 20) {
let text = "";
if (lang === 0) {
text = "0";
}
text += lang === 0 ? "" : "" + lang + "°";
if (lang === -180) {
text = "";
}
entities.add({
position: Cesium.Cartesian3.fromDegrees(lang, 0),
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
lang,
-90,
lang,
0,
lang,
90,
]),
width: 1.0,
material: Cesium.Color.WHITE,
},
label: {
text: text,
verticalOrigin: Cesium.VerticalOrigin.TOP,
font: "12px sans-serif",
fillColor: Cesium.Color.WHITE,
},
});
}
//纬度
let langS = [];
for (let lang = -180; lang <= 180; lang += 5) {
langS.push(lang);
}
// 每隔10读绘制一条纬度线和纬度标注
for (let lat = -80; lat <= 80; lat += 10) {
let text = "";
text += "" + lat + "°";
if (lat === 0) {
text = "";
}
entities.add({
position: Cesium.Cartesian3.fromDegrees(0, lat),
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray(
langS
.map((long) => {
return [long, lat].join(",");
})
.join(",")
.split(",")
.map((item) => Number(item))
),
width: 1.0,
material: Cesium.Color.WHITE,
},
label: {
text: text,
font: "12px sans-serif",
fillColor: Cesium.Color.WHITE,
},
});
}地球坐标系
创建地球坐标系的案例需要先设置地球透明遮罩的效果，即可以看到地球的内部，从而口语定位地球坐标系的原点位置，实现地球透明遮罩效果：
js
const viewer = new window.Cesium.Viewer('cesiumContainer', {
infoBox: false,
orderIndependentTranslucency: false,
});
// 获取Cesium Viewer的场景实例
const scene = viewer.scene;
// 获取场景中的globe实例
const globe = scene.globe;
// 获取场景中的第一个影像图层，通常是底图图层
const baseLayer = viewer.scene.imageryLayers.get(0);
// 禁用碰撞检测
scene.screenSpaceCameraController.enableCollisionDetection = false;
// 重置函数
function reset() {
globe.showGroundAtmosphere = true; // 显示地球表面的 atmospher 效果
globe.baseColor = Cesium.Color.BLUE; // 设置地球的基本颜色为蓝色
globe.translucency.enabled = false; // 禁用透明度效果
globe.translucency.frontFaceAlpha = 1.0;// 设置正面透明度为1.0（不透明）
globe.undergroundColor = Cesium.Color.BLACK; // 设置地下的颜色为黑色
globe.translucency.rectangle = undefined; // 清除透明度矩形区域
baseLayer.colorToAlpha = undefined; // 清除底图图层的颜色到透明度的映射
}
// 使用透明度遮罩函数
function useTranslucencyMask() {
globe.showGroundAtmosphere = false; // 隐藏地球表面的 atmospher 效果
globe.baseColor = Cesium.Color.TRANSPARENT; // 设置地球的基本颜色为透明
globe.translucency.enabled = true; // 启用透明度效果
globe.undergroundColor = undefined; // 清除地下的颜色设置
// 设置底图图层的颜色到透明度的映射，使得海洋部分透明
baseLayer.colorToAlpha = new Cesium.Color(0.0, 0.016, 0.059);
baseLayer.colorToAlphaThreshold = 0.2; // 设置颜色到透明度的阈值为0.2
}
reset();
useTranslucencyMask();上述代码实现地球表面的透明度遮罩效果，使得底图图层中的海洋部分透明，从而可以看到地球的内部结构
添加地理位置坐标系：以地球球心为中心
js
// 创建一个以地球球心为起点的坐标系
const center = new Cesium.Cartesian3(0, 0, 0); // 地球球心的坐标
const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
// 添加坐标轴图元
viewer.scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({
modelMatrix: modelMatrix,
length: 10000000, // 坐标轴的长度
width: 2.0 // 坐标轴的宽度
}));圆形空间网格
添加圆形空间网格需要指定圆心的坐标和半径，同时要给出圆环的数量和径向数量：
js
// 定义圆心位置和半径
const center = Cesium.Cartesian3.fromDegrees(120, 30);
const radius = 100000; // 半径，单位为米
// 定义网格参数
const numRings = 10; // 圆环数量
const numRadials = 24; // 径向数量
// 创建圆环
for (let i = 1; i <= numRings; i++) {
const circleRadius = radius * i / numRings;
const circlePositions = [];
for (let j = 0; j <= 360; j++) {
const angle = Cesium.Math.toRadians(j);
const x = circleRadius * Math.cos(angle);
const y = circleRadius * Math.sin(angle);
const position = Cesium.Cartesian3.add(center, new Cesium.Cartesian3(x, y, 0), new Cesium.Cartesian3());
circlePositions.push(position);
}
viewer.entities.add({
name: `Circle Ring ${i}`,
polyline: {
positions: circlePositions,
width: 1,
material: Cesium.Color.WHITE
}
});
}
// 创建径向线
for (let i = 0; i < numRadials; i++) {
const angle = Cesium.Math.toRadians(360 * i / numRadials);
const endPoint = Cesium.Cartesian3.add(
center,
new Cesium.Cartesian3(radius * Math.cos(angle), radius * Math.sin(angle), 0),
new Cesium.Cartesian3()
);
viewer.entities.add({
name: `Radial ${i}`,
polyline: {
positions: [center, endPoint],
width: 1,
material: Cesium.Color.WHITE
}
});
}矩形空间网格
js
// 定义矩形的中心位置和尺寸
const center = Cesium.Cartesian3.fromDegrees(120, 30);
const width = 200000; // 矩形的宽度，单位为米
const height = 200000; // 矩形的高度，单位为米
// 定义网格参数
const numHorizontalLines = 10; // 水平线数量
const numVerticalLines = 10; // 垂直线数量
// 计算每个网格单元的大小
const horizontalSpacing = width / numHorizontalLines;
const verticalSpacing = height / numVerticalLines;
// 创建水平线
for (let i = 0; i <= numHorizontalLines; i++) {
const yOffset = (i - numHorizontalLines / 2) * horizontalSpacing;
const startPoint = Cesium.Cartesian3.add(
center,
new Cesium.Cartesian3(-width / 2, yOffset, 0),
new Cesium.Cartesian3()
);
const endPoint = Cesium.Cartesian3.add(
center,
new Cesium.Cartesian3(width / 2, yOffset, 0),
new Cesium.Cartesian3()
);
viewer.entities.add({
name: `Horizontal Line ${i}`,
polyline: {
positions: [startPoint, endPoint],
width: 1,
material: Cesium.Color.WHITE
}
});
}
// 创建垂直线
for (let i = 0; i <= numVerticalLines; i++) {
const xOffset = (i - numVerticalLines / 2) * verticalSpacing;
const startPoint = Cesium.Cartesian3.add(
center,
new Cesium.Cartesian3(xOffset, -height / 2, 0),
new Cesium.Cartesian3()
);
const endPoint = Cesium.Cartesian3.add(
center,
new Cesium.Cartesian3(xOffset, height / 2, 0),
new Cesium.Cartesian3()
);
viewer.entities.add({
name: `Vertical Line ${i}`,
polyline: {
positions: [startPoint, endPoint],
width: 1,
material: Cesium.Color.WHITE
}
});
}鹰眼地图
鹰眼地图是指共和主地球同步的辅助查看地球，鹰眼地球是不能进行旋转，拖动和放大等操作的，只能辅助主地球进行查看操作，同步主地球的视角
一般鹰眼地图是需要禁用cesium中所有的小组件和操作的：
js
const viewerEye = new window.Cesium.Viewer('eye', {
infoBox: false,
// 禁用所有小组件
baseLayerPicker: false, // 是否显示图层选择控件
animation: false, // 是否显示动画控件
timeline: false, // 是否显示时间轴控件，和cesuim中的click进行挂接的
fullscreenButton: false, // 是否显示全屏按钮
geocoder: false, // 是否显示搜索按钮
homeButton: false, // 是否显示主页按钮(回到地球初始化的状态)
navigationHelpButton: false, // 是否显示帮助提示按钮
sceneModePicker: false, // 是否显示投影方式按钮
infoBox: false, // 是否显示信息框，显示实体相关的属性信息
});
// 禁用鹰眼地图的操作
const setViewer = (viewer) => {
let control = viewer.scene.screenSpaceCameraController;
control.enableRotate = false;
control.enableTranslate = false;
control.enableZoom = false;
control.enableTilt = false;
control.enableLook = false;
}
setViewer(viewerEye)同时需要设置鹰眼地球和主地球实时的同步：
js
//鹰眼地图与主地图同步
const syncViewer = () =>{
viewerEye.camera.flyTo({
destination: viewerMain.camera.position,
orientation: {
heading: viewerMain.camera.heading,
pitch: viewerMain.camera.pitch,
roll: viewerMain.camera.roll
},
duration: 0.0
});
};
//添加主界面Cesium 视图监听事件
viewerMain.scene.preRender.addEventListener(syncViewer);