1.学习目的
作为网页显示，我只要实现了cesium网页显示，就可以到时候通过qt的webview显示html界面，来显示地图，js对于学过c++的人而言，没啥难度，不过是换一种语法，而且cesium的教程相对于osgearth多了太多太多，学过qt的人都知道，页面都是通过底层opengl渲染的，只不过一个显示在网页，一个显示在桌面端，原理都大差不差。
本着有最新的技术就学习最新的技术的理念，我开始了学习cesium之旅。
ps:实在是osgearth我找不到学习资料。
都是一个团队开发的东西，能学最新的就学最新的。
2.基本配置
在配置好了node.js环境，从github上面下载并编译好了cesium文件，搭建好了nginx服务器，端口改为了127.0.0.1:8881,
在网页打开显示
文件目录：
Cesium是编译好的js文件，scripts存放js文件，styles存放css文件，index.html是主界面的显示。
index.html的内容为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/index.css">
<style>
@import url(./Cesium/Widgets/widgets.css);
</style>
<title>Cesium三维地球可视化</title>
<script src="./Cesium/Cesium.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
</body>
<script src="./scripts/index.js"></script>
</html>取的都是相对路径。
index.js
var viewer = new Cesium.Viewer("cesiumContainer");index.css
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}配置好这些，就可以在网页显示一个球。
注意：修改
3.cesium的一些基本操作
通过修改index.js的代码，
3.1 影藏界面中一些基本的组件
效果如下图所示：
修改index代码：
点击ctrl+f5执行跟新：
Cesium.Ion.defaultAccessToken = '你的密钥';
//var viewer = new Cesium.Viewer("cesiumContainer");
var viewer = new Cesium.Viewer('cesiumContainer', {
homeButton: false,
sceneModePicker: false,
baseLayerPicker: false, // 影像切换
animation: false, // 是否显示动画控件
timeline: false, // 是否显示时间线控件，和animation是一组
infoBox: false, // 是否显示点击要素之后显示的信息
selectionIndicator: false, // 要素选中框
geocoder: false, // 是否显示地名查找控件
fullscreenButton: false,
shouldAnimate: false,
navigationHelpButton: false, // 是否显示帮助信息控件
});
viewer.scene.debugShowFramesPerSecond = true;3.2 绘制矩形
3.2.1 绘制矩形的第一种方式
效果
js代码：
//绘制矩形
//绘制矩形的第一种方式
var viewer = new Cesium.Viewer('cesiumContainer');
var redBox = viewer.entities.add({
name : 'Red box with black outline',
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
box : {
dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material : Cesium.Color.RED.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
viewer.zoomTo(viewer.entities);3.2.2 绘制矩形的第二种方式
效果：
js代码：
//绘制矩形的第二种方式
var czml = [{
"id" : "document",
"name" : "box",
"version" : "1.0"
},{
"id" : "shape2",
"name" : "Red box with black outline",
"position" : {
"cartographicDegrees" : [-107.0, 40.0, 3000.0]
},
"box" : {
"dimensions" : {
"cartesian": [400000.0, 300000.0, 500000.0]
},
"material" : {
"solidColor" : {
"color" : {
"rgba" : [220, 0, 250, 127]
}
}
},
"outline" : true,
"outlineColor" : {
"rgba" : [0, 0, 0, 255]
}
}
}];
var viewer = new Cesium.Viewer('cesiumContainer');
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise); 3.3 绘制轨迹线
效果：
js代码：
//轨迹线
var viewer = new Cesium.Viewer('cesiumContainer');
// 定义轨迹点的位置（经度、纬度、高度）
var positions = [
-107.0, 40.0, 3000.0,
-106.8, 40.2, 3500.0,
-106.6, 40.6, 3200.0,
-106.5, 40.9, 4000.0,
-106.2, 41.1, 3800.0,
-105.8, 41.3, 4200.0,
-105.4, 41.7, 3900.0,
-105.0, 42.0, 4500.0
];
// 添加轨迹线
viewer.entities.add({
name: 'Trajectory Line',
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
width: 3, // 线宽
material: Cesium.Color.YELLOW // 线颜色
}
});
// 在每个点添加一个红色的标记
for (let i = 0; i < positions.length; i += 3) {
viewer.entities.add({
name: 'Point Marker',
position: Cesium.Cartesian3.fromDegrees(positions[i], positions[i + 1], positions[i + 2]),
point: {
pixelSize: 10, // 标记点的大小
color: Cesium.Color.RED, // 标记点的颜色
outlineColor: Cesium.Color.BLACK, // 外边框颜色
outlineWidth: 2 // 外边框宽度
}
});
}
// 将视图调整到包含所有实体的范围
viewer.zoomTo(viewer.entities);3.4 绘制多边形
效果：
js代码：
//绘制多边形
var viewer = new Cesium.Viewer('cesiumContainer');
// 定义多边形的点（经度、纬度、高度）
var positions = [
Cesium.Cartesian3.fromDegrees(-107.0, 40.0),
Cesium.Cartesian3.fromDegrees(-108.0, 40.0),
Cesium.Cartesian3.fromDegrees(-108.5, 39.5), // 新增点
Cesium.Cartesian3.fromDegrees(-108.0, 39.0),
Cesium.Cartesian3.fromDegrees(-107.0, 39.0),
Cesium.Cartesian3.fromDegrees(-106.5, 39.5) // 新增点
];
// 添加一个多边形实体
var polygon = viewer.entities.add({
name: 'Polygon with multiple points',
polygon: {
hierarchy: new Cesium.PolygonHierarchy(positions), // 多边形的点
material: Cesium.Color.BLUE.withAlpha(0.5), // 半透明蓝色
outline: true, // 是否显示边界
outlineColor: Cesium.Color.BLACK // 边界颜色
}
});
viewer.zoomTo(viewer.entities);3.5 绘制轨迹点以及轨迹点标签
效果：
js代码：
// 创建 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');
// 添加一个轨迹点，带有标签
var pointWithLabel = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0), // 点的经纬度
point: {
pixelSize: 10, // 点的大小（像素）
color: Cesium.Color.RED, // 点的颜色
outlineColor: Cesium.Color.WHITE, // 外边框颜色
outlineWidth: 2 // 外边框宽度
},
label: {
text: "轨迹点 1", // 标签文本
font: "14pt sans-serif", // 字体样式
fillColor: Cesium.Color.YELLOW, // 字体颜色
outlineColor: Cesium.Color.BLACK, // 字体外边框颜色
outlineWidth: 2, // 字体外边框宽度
style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 标签样式
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直对齐方式
pixelOffset: new Cesium.Cartesian2(0, -15) // 标签的偏移
}
});
// 将视角缩放到轨迹点
viewer.zoomTo(viewer.entities);3.6 绘制圆锥
效果：
js代码：
// 创建 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');
// 定义圆锥的位置
var position = Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0); // 经度, 纬度, 高度
// 添加一个圆锥实体
var cone = viewer.entities.add({
name: "Cone",
position: position,
cylinder: {
length: 500000.0, // 圆锥的高度
topRadius: 0.0, // 圆锥的顶部半径
bottomRadius: 100000.0, // 圆锥的底部半径
material: Cesium.Color.RED.withAlpha(0.5), // 圆锥的颜色和透明度
outline: true, // 是否显示边框
outlineColor: Cesium.Color.BLACK // 边框颜色
}
});
// 将视角缩放到圆锥
