CesiumJs学习笔记4
此为课程Three.js可视化企业实战WEBGL课的CesiumJs
篇学习笔记
加载 GEOJSON 数据
json数据 在阿里云 下载
- 加载初始化
// 加载geojson数据
let dataGeo = Cesium.GeoJsonDataSource.load(
"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
);
// 可以直接add这个promise
// viewer.dataSources.add(dataGeo);
dataGeo.then((dataSources) => {
console.log(dataSources);
viewer.dataSources.add(dataSources);
});
- 设置边框和内填充色
// 加载geojson数据
let dataGeo = Cesium.GeoJsonDataSource.load(
"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
{
stroke: Cesium.Color.RED,
fill: Cesium.Color.SKYBLUE.withAlpha(0.5),
strokeWidth: 3
}
);
dataGeo.then((dataSources) => {
viewer.dataSources.add(dataSources);
});
- 获取实体并且改变样式
// 加载geojson数据
let dataGeo = Cesium.GeoJsonDataSource.load(
"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
{
stroke: Cesium.Color.RED,
fill: Cesium.Color.SKYBLUE.withAlpha(0.5),
strokeWidth: 3
}
);
dataGeo.then((dataSources) => {
viewer.dataSources.add(dataSources);
let entities = dataSources.entities.values;
entities.forEach((entity, i) => {
entity.polygon.material = new Cesium.ColorMaterialProperty(
Cesium.Color.fromRandom({
alpha: 0.9,
})
);
entity.polygon.outline = false;
let randomNum = parseInt(Math.random() * 5);
entity.polygon.extrudedHeight = 100000 * randomNum;
});
});
加载 kml 数据
KML 是为与Google Earth一起使用而开发的, 用于在二维地图和三维地球浏览器中表达地理注释和可视化。
// 加载kml数据
let kmlUrl = "./Assets/facilities1.kml";
let kmlDataPromise = Cesium.KmlDataSource.load(kmlUrl, {
camera: viewer.scene.camera,
canvas: viewer.scene.canvas,
screenOverlayContainer: viewer.container,
});
kmlDataPromise.then(function (dataSource) {
viewer.dataSources.add(dataSource);
});
加载czml数据
const czml = [
{
id: "document",
name: "CZML Point - Time Dynamic",
version: "1.0",
},
{
id: "point",
// 物体在什么时间范围可用
availability: "2012-08-04T16:00:00Z/2012-08-04T16:05:00Z",
position: {
// 设置物体的起始时间
epoch: "2012-08-04T16:00:00Z",
// 设置了四个维度,1维是时间,2维是经度,3维是纬度,4维是高度
cartographicDegrees: [
0, -70, 20, 150000, 100, -80, 44, 150000, 200, -90, 18, 150000, 300,
-98, 52, 150000,
],
},
point: {
color: {
rgba: [255, 255, 255, 128],
},
outlineColor: {
rgba: [255, 0, 0, 128],
},
outlineWidth: 3,
pixelSize: 15,
},
},
];
// 加载czml数据
let promiseData = Cesium.CzmlDataSource.load(czml);
promiseData.then((dataSource) => {
console.log(dataSource);
viewer.dataSources.add(dataSource);
// viewer.flyTo(dataSource);
});
追踪飞机跨洋飞行
完整代码
var viewer = new Cesium.Viewer("cesiumContainer", {
// 是否显示信息窗口
infoBox: false,
terrainProvider: Cesium.createWorldTerrain({
requestWaterMask: true,
requestVertexNormals: true,
}),
shouldAnimate: true,
});
// 隐藏logo
viewer.cesiumWidget.creditContainer.style.display = "none";
// 添加3D建筑
let tiles3d = new Cesium.createOsmBuildings();
const osmBuildings = viewer.scene.primitives.add(tiles3d);
const positionProperty = new Cesium.SampledPositionProperty();
// 时间间隔 30秒
const timeStepInSeconds = 30;
// 整个飞行花费的时间
const totalSeconds = (planeData.length - 1) * timeStepInSeconds;
// 设置起点时间
const time = new Date("2022-03-09T23:10:00Z");
// cesium,默认使用的是儒略日的时间
// 所以需要起点时间转换成儒略日的时间
const startJulianDate = Cesium.JulianDate.fromDate(time);
// 设置终点时间
const stopJulianDate = Cesium.JulianDate.addSeconds(
startJulianDate,
totalSeconds,
new Cesium.JulianDate()
);
// 将查看器的时间调整到起点和结束点的范围
viewer.clock.startTime = startJulianDate.clone();
viewer.clock.stopTime = stopJulianDate.clone();
viewer.clock.currentTime = startJulianDate.clone();
// console.log(planeData);
viewer.timeline.zoomTo(startJulianDate, stopJulianDate);
planeData.forEach((dataPoint, i) => {
// 当前点的时间
const time = Cesium.JulianDate.addSeconds(
startJulianDate,
i * timeStepInSeconds,
new Cesium.JulianDate()
);
// 设置当前点的位置
const position = Cesium.Cartesian3.fromDegrees(
dataPoint.longitude,
dataPoint.latitude,
dataPoint.height
);
// 添加轨迹采样点
positionProperty.addSample(time, position);
// 添加点
viewer.entities.add({
position: position,
point: {
pixelSize: 10,
color: Cesium.Color.RED,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 2,
},
});
});
// 创建飞机
const planeEntity = viewer.entities.add({
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: startJulianDate,
stop: stopJulianDate,
}),
]),
name: "飞机",
// 设置飞机的可用
position: positionProperty,
// VelocityOrientationProperty会自动根据采样点,计算出飞机的速度和方向
orientation: new Cesium.VelocityOrientationProperty(positionProperty),
model: {
uri: "./model/Air.glb",
minimumPixelSize: 128,
maximumScale: 20000,
},
// 绘制轨迹线
path: new Cesium.PathGraphics({
width: 5,
}),
});
// 相机追踪运动的问题
viewer.trackedEntity = planeEntity;
// 设置时间速率
viewer.clock.multiplier = 60;