1 遇到地图无法加载的问题
可能是 JavaScript 代码中没有授权，去 Cesium 上面申请一个 token 即可
// 加上授权
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NicCI6IkpXVCJ9.eyJqdGkiOiIyMjEwMWY4Ny1hODQwLTQwMjDNlOS04YzdkOTQ5MDc4YWEiLCJpZCI6MTI3MjMyLCJpYXQi2ODYxMDI4NDN9.TxhLjxdDlMjAxtf35vIgOMr9RTIwHEH3efARZUlvYaQ';
2 将 shp 转换为 GeoJson 文件并且加载的全部代码
2.1 Shp2GeoJson 转换先使用下面的网址转换即可
后期或许需要使用 Java 后端进行自动的数据转换；
2.2 加载使用 JavaScript 代码正常加载即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Cesium</title>
<script src="./Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js"></script>
<script src="https://cesium.com/downloads/extensions/cesium-timebar/cesium-timebar.js"></script>
<link href="https://cesium.com/downloads/extensions/cesium-timebar/cesium-timebar.css" rel="stylesheet">
<style>
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="cesiumContainer" style="height: 100%;"></div>
<script>
// 在这里写入您的Cesium和TimeBar相关的代码
// 加上授权
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMjEwMWY4Ny1hODQwLTQwMjAtODNlOS04YzdkOTQ5MDc4YWEiLCJpZCI6MTI3MjMyLCJpYXQiOjE2ODYxMDI4NDN9.TxhLjxdDlMjAxtf35vIgOMr9RTIwHEH3efARZUlvYaQ';
var viewer = new Cesium.Viewer("cesiumContainer");
// 将视角跳转到设置的经纬度上面
viewer.camera.flyTo({
// 经度、纬度、视角高度
destination : Cesium.Cartesian3.fromDegrees(0, 0, 10000000)
});
// 定义 GeoJSON 数据的 URL
// 这里添加的是 geojson 数据的相对路径，也就是在项目中的文件相对路径
var geoJsonUrl = 'testdata/GeoJson/simplestyles.geojson';
// 加载 GeoJSON 数据
var dataSource = Cesium.GeoJsonDataSource.load(geoJsonUrl);
var geoJsonUrlroad = 'testdata/GeoJson/daolu.geojson';
// 加载 GeoJSON 数据
var dataSource = Cesium.GeoJsonDataSource.load(geoJsonUrlroad);
// 将数据源添加到 Cesium Viewer
viewer.dataSources.add(dataSource).then(function() {
// 缩放到加载的数据范围
viewer.zoomTo(dataSource);
}).otherwise(function(error) {
console.error(error);
});
</script>
</body>
</html>
因为加载的是道路数据，并且将视角设置到了经纬度都是 0 的样子，所以刚开始可能不能直接到达实际的数据所在的北京的位置
3 前端开发注意 f12 的控制台输出的使用
4 问题？
4.1 怎么把二维的矢量进行一个三维的展示？
在 Cesium 中，将二维的 GeoJSON 数据转换为三维的主要步骤是将其投影到地球表面并设置高度值。这可以通过使用 Cesium 的实体（Entity）和属性（Property）来实现。
以下是将二维 GeoJSON 数据转换为三维的基本示例：
{
"type" : "FeatureCollection",
"features" : [{
"type" : "Feature",
"geometry" : {
"type" : "Point",
"coordinates" : [102.0, 0.5]
},
"properties" : {
"prop0" : "value0"
}
}, {
"type" : "Feature",
"geometry" : {
"type" : "LineString",
"coordinates" : [[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]]
},
"properties" : {
"prop0" : "value0",
"prop1" : 0.0
}
]}
}
// 创建 GeoJsonDataSource 对象
var dataSource = new Cesium.GeoJsonDataSource();
// 加载 GeoJSON 数据
dataSource.loadUrl('path/to/your/geojson_file.geojson')
.then(function() {
// 获取 GeoJSON 数据源的实体集合
var entities = dataSource.entities.values;
// 遍历实体集合，将二维数据转换为三维
entities.forEach(function(entity) {
// 获取实体的几何属性
var geometry = entity.geometry;
// 将几何属性投影到地球表面
var surfaceGeometry = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(geometry);
// 设置实体的位置属性为投影后的几何属性
entity.position = surfaceGeometry;
// 设置实体的高度属性
entity.addProperty('height', 0); // 设置默认高度为0，可以根据需求设置具体高度值
});
})
.otherwise(function(error) {
console.error('加载 GeoJSON 数据时出现错误:', error);
});
// 将数据源添加到 Viewer 中显示
viewer.dataSources.add(dataSource);
首先创建一个 GeoJsonDataSource 对象，并通过 loadUrl 方法加载 GeoJSON 数据。然后，我们获取数据源的实体集合，并遍历每个实体。
在遍历过程中，我们将每个实体的几何属性投影到地球表面，使用 Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface() 方法实现。接着，我们将投影后的几何属性设置为实体的位置属性，并使用 addProperty() 方法添加一个名为 "height" 的属性，并设置默认的高度值。
最后，将数据源添加到 Viewer 中显示。
请注意，上述示例仅提供了基本的转换方法，实际应用中可能需要根据具体需求进行更复杂的转换和处理操作。
