当前位置：网站首页>Cesium-1.72 learning (add points, lines, cubes, etc.)
Cesium-1.72 learning (add points, lines, cubes, etc.)
2022-06-30 16:17:00 【Eternal wolf tooth】
1、 spot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Add points cesium ( Custom icon )</title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D and Columbus View (CV) Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button imageryProvider:new Cesium.UrlTemplateImageryProvider({
url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg', credit : ' Analytical Graphics, Inc.', tilingScheme : new Cesium.GeographicTilingScheme(), maximumLevel : 5 }), }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source // Add points // Static methods , Call directly , return ->new Cesium.Cartesian3 ( x , y , z ) //Cesium.Cartesian3.fromDegrees (longitude, latitude, height , ellipsoid , result ) // The first three parameters are longitude and latitude height viewer.entities.add({
position:Cesium.Cartesian3.fromDegrees( 75.59, 40, 0), billboard:{
image:'/Cesium-1.72/Apps/Sandcastle/images/facility.gif' }, id:'MyCesium', name:'Cesium-Station', label : {
text : 'Citizens Bank Park', font : '14pt monospace', style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth : 2, verticalOrigin : Cesium.VerticalOrigin.BOTTOM, pixelOffset : new Cesium.Cartesian2(0, -10), fillColor:Cesium.Color.GREEN }, description:' Custom added points ' }) </script>
2、 Line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Add line cesium </title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D and Columbus View (CV) Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button imageryProvider:new Cesium.UrlTemplateImageryProvider({
url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg', credit : ' Analytical Graphics, Inc.', tilingScheme : new Cesium.GeographicTilingScheme(), maximumLevel : 5 }), }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source // Add line for(var p = 0 ; p <2;p++){
var data = new Array(); for(var i = 0 ; i< 360;i++){
data.push(i); data.push(0); data.push(p*1000000); } viewer.entities.add({
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights(data), width : 5, material : new Cesium.PolylineOutlineMaterialProperty({
color : Cesium.Color.ORANGE, outlineWidth : 2, outlineColor : Cesium.Color.BLACK }) } }) } </script>
3、 Cube
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> increase box cesium </title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D and Columbus View (CV) Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button imageryProvider:new Cesium.UrlTemplateImageryProvider({
url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg', credit : ' Analytical Graphics, Inc.', tilingScheme : new Cesium.GeographicTilingScheme(), maximumLevel : 5 }), }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source // add to 3Dbox viewer.entities.add({
name:'red 3D BOX', position: Cesium.Cartesian3.fromDegrees(-107.0,42.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); </script>
4、 Camera positioning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cesium Camera control </title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
<script src="/Cesium-1.72/Apps/Sandcastle/Sandcastle-header.js"></script>
<link rel="stylesheet" href="/Cesium-1.72/Apps/Sandcastle/templates/bucket.css">
</head>
<body style="background-color: #fff;">
<div style="width:1500px;height:700px;">
<div id="toolbar" style="z-index: 999;"></div>
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', // Native map service fileExtension : "png", }), geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D and Columbus View (CV) Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source Sandcastle.addDefaultToolbarButton(' Camera positioning ', function() {
// Camera positioning viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 150000.0), }); }); function flyInACity(){
// Camera positioning viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(116.2, 39.4, 550000.0), }); } Sandcastle.addToolbarMenu([ {
text: "Camera Options", }, {
text: "Fly in a Beijing", onselect: function () {
flyInACity(); Sandcastle.highlight(flyInACity); }, } ]); </script>
5、 Flat rectangle fill
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Flat rectangle fill </title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', // Native map service fileExtension : "png", }), geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D and Columbus View (CV) Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source // Add rectangle viewer.entities.add({
name : 'Yellow plane outline', position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 0), plane : {
plane : new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),// The normal of the plane dimensions : new Cesium.Cartesian2(400000.0, 300000.0), fill : true, //material:Cesium.Color.RED.withAlpha(0.5), transparency material:new Cesium.GridMaterialProperty({
color : Cesium.Color.YELLOW, cellAlpha : 0.2, lineCount : new Cesium.Cartesian2(8, 8), lineThickness : new Cesium.Cartesian2(2.0, 2.0) }), outline : true, outlineColor : Cesium.Color.RED } }) var stripeMaterial = new Cesium.StripeMaterialProperty({
evenColor: Cesium.Color.WHITE.withAlpha(0.5), oddColor: Cesium.Color.BLUE.withAlpha(0.5), repeat: 5.0, }); viewer.entities.add({
polygon: {
hierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray([ -107.0, 27.0, -107.0, 22.0, -102.0, 23.0, -97.0, 21.0, -97.0, 25.0, -99.0, 26.0, ]) ), outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, material: stripeMaterial, }, }); </script>
6、 Simulate aircraft dynamic operation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Add line cesium </title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', // Native map service fileExtension : "png", }), geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D and Columbus View (CV) Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button shouldAnimate: true, clock:new Cesium.Clock({
currentTime:Cesium.JulianDate.fromDate(new Date()) }) }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source var arr = new Array(); viewer.entities.add({
id:'star1_t', name : 'Orange line with black outline at height and following the surface', description:'Orange Line',// describe polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights(arr), width : 5, material : new Cesium.PolylineOutlineMaterialProperty({
color : new Cesium.Color ( 1 , 1 , 0 , 0.5 ), outlineWidth : 2, outlineColor : Cesium.Color.BLACK }) } }) // Add rectangle viewer.entities.add({
id:'star1_s1_p', name: "Red polygon on surface", polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([ -115.0, 37.0, -115.0, 32.0, -107.0, 33.0, -102.0, 31.0, ]), material: new Cesium.GridMaterialProperty({
color : Cesium.Color.YELLOW, cellAlpha : 0.2, }) }, }); // Add line viewer.entities.add({
name: "Purple straight arrow at height", polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([ -75, 43, 500000, -75, 43, 0, ]), width: 10, arcType: Cesium.ArcType.NONE, material: new Cesium.PolylineArrowMaterialProperty( Cesium.Color.PURPLE ), }, }); // Add satellite model ent = new Cesium.Entity({
id:'star1', name:'star', description:' satellite ', position:Cesium.Cartesian3.fromDegrees( 10,0,4000000), model:{
uri: '/Cesium-1.72/Apps/SampleData/models/CesiumAir/Cesium_Air.glb', minimumPixelSize : 128, maximumScale : 40000 } }); viewer.entities.add(ent); // Add triangle viewer.entities.add({
id:'lines', name: "Cyan vertical polygon with per-position heights and outline", polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([ -90.0, 41.0, 0.0, -85.0, 41.0, 500000.0, -80.0, 41.0, 0.0, ]), perPositionHeight: true, material: Cesium.Color.CYAN.withAlpha(0.5), outline: true, outlineColor: Cesium.Color.BLACK, }, }); var x =0; setInterval(function() {
var data = new Array(); data.push(x+1); data.push(10); data.push(x-5); data.push(10); data.push(x-5); data.push(-10); data.push(x+1); data.push(-10); // Change the time viewer.clock=new Cesium.Clock({
currentTime:Cesium.JulianDate.fromDate(new Date()) }) // Image changes 1 var position = Cesium.Cartesian3.fromDegrees(x,0,4000000) viewer.entities.getById('star1').position=position; arr.push(x); arr.push(0); arr.push(4000000); viewer.entities.getById('star1_t').polyline.positions = Cesium.Cartesian3.fromDegreesArrayHeights(arr); viewer.entities.getById('star1_s1_p').polygon.hierarchy=Cesium.Cartesian3.fromDegreesArray(data); x += 10; },1000); /* var x = 0; var ent = null; setInterval(function() { if(ent != null){ viewer.entities.remove(ent); } // Add satellite model ent = new Cesium.Entity({ name:'star', description:' satellite ', position:Cesium.Cartesian3.fromDegrees( x,0,4000000), model:{ uri: '/Cesium-1.72/Apps/SampleData/models/CesiumAir/Cesium_Air.glb', minimumPixelSize : 128, maximumScale : 40000 } }); viewer.entities.add(ent); x+=1; if(x == 360){ x = 0 ; } },1000);*/ </script>
7、 official czml Satellite operation cases
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Quick start cesium</title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg', credit : ' Analytical Graphics, Inc.', tilingScheme : new Cesium.GeographicTilingScheme(), maximumLevel : 5 }), geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D and Columbus View (CV) Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button shouldAnimate: true }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source viewer.dataSources.add( Cesium.CzmlDataSource.load("/Cesium-1.72/Apps/SampleData/simple.czml") ) </script>
8、 Simulated satellite scanning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Satellite scanning </title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', // Native map service fileExtension : "png", }), }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source var data = []; data = [{
longitude: 116.405419, dimension: 39.918034, height: 700000, time: 0 }, {
longitude: 115.2821, dimension: 39.918145, height: 700000, time: 40 }, {
longitude: 114.497402, dimension: 39.344641, height: 700000, time: 100 }, {
longitude: 107.942392, dimension: 35.559967, height: 700000, time: 280 }, {
longitude: 106.549265, dimension: 34.559967, height: 700000, time: 360 }, {
longitude: 95.2821, dimension: 32.918145, height: 700000, time: 400 }, {
longitude: 94.497402, dimension: 30.344641, height: 700000, time: 450 }, {
longitude: 87.942392, dimension: 25.559967, height: 700000, time: 550 }, {
longitude: 66.549265, dimension: 24.559967, height: 700000, time: 600 }]; // Starting time var start = Cesium.JulianDate.fromDate(new Date(2020, 7, 11)); // End time var stop = Cesium.JulianDate.addSeconds(start, 600, new Cesium.JulianDate()); // Set the start time of the start clock viewer.clock.startTime = start.clone(); // Set the current time of the clock viewer.clock.currentTime = start.clone(); // Set the always stop time viewer.clock.stopTime = stop.clone(); // Time rate , The larger the number, the faster time passes viewer.clock.multiplier = 10; // time axis viewer.timeline.zoomTo(start, stop); // Loop execution viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; var property = computeFlight(data); // Add model var planeModel = viewer.entities.add({
// Associated with the timeline availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start, stop: stop })]), position: property, // Calculate the point according to the speed provided orientation: new Cesium.VelocityOrientationProperty(property), // model data model: {
uri: '/Cesium-1.72/Apps/SampleData/models/CesiumAir/Cesium_Air.glb', minimumPixelSize: 128 }, path: {
resolution: 1, material: new Cesium.PolylineGlowMaterialProperty({
glowPower: .1, color: Cesium.Color.YELLOW }), width: 10 } }); planeModel.position.setInterpolationOptions({
// Interpolation algorithm for setting position interpolationDegree: 5, interpolationAlgorithm: Cesium.LagrangePolynomialApproximation }); var property2 = computeFlight2(data); var entity_ty = viewer.entities.add({
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start, stop: stop })]), position: property2, orientation: new Cesium.VelocityOrientationProperty(property2), cylinder: {
HeightReference: Cesium.HeightReference.CLAMP_TO_GROUND, length: 700000, topRadius: 0, bottomRadius: 700000 / 4, material: Cesium.Color.RED.withAlpha(.4), outline: !0, numberOfVerticalLines: 0, outlineColor: Cesium.Color.RED.withAlpha(.8) }, }); entity_ty.position.setInterpolationOptions({
interpolationDegree: 5, interpolationAlgorithm: Cesium.LagrangePolynomialApproximation }); function computeFlight(source) {
var property = new Cesium.SampledPositionProperty(); for (var i = 0; i < source.length; i++) {
var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate); var position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height); // Add location , Corresponding to time property.addSample(time, position); } return property; } function computeFlight2(source) {
var property = new Cesium.SampledPositionProperty(); for (var i = 0; i < source.length; i++) {
var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate); var position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height / 2); // Add location , Corresponding to time property.addSample(time, position); } return property; } </script>
9、 The clock
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clock The clock </title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
<script src="/Cesium-1.72/Apps/Sandcastle/Sandcastle-header.js"></script>
<link rel="stylesheet" href="/Cesium-1.72/Apps/Sandcastle/templates/bucket.css">
</head>
<body style="background-color: #fff;">
<div style="width:1500px;height:700px;">
<div id="toolbar" style="z-index: 999;"></div>
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', // Native map service fileExtension : "png", }), }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source // Create a clock that loops on Christmas day 2013 and runs in 4000x real time. var clock = new Cesium.Clock({
startTime: Cesium.JulianDate.fromIso8601("2013-12-25"), currentTime: Cesium.JulianDate.fromIso8601("2013-12-25"), stopTime: Cesium.JulianDate.fromIso8601("2013-12-26"), clockRange: Cesium.ClockRange.LOOP_STOP, // loop when we hit the end time clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER, multiplier: 4000, // how much time to advance each tick shouldAnimate: true, // Animation on by default }); viewer.clockViewModel = clock; viewer.scene.globe.enableLighting = true; Sandcastle.addToolbarButton("Reset Current Time", function () {
var resetTime = viewer.clockViewModel.startTime; viewer.clockViewModel.currentTime = resetTime; viewer.timeline.updateFromClock(); }); Sandcastle.addToolbarButton("Slow Down Clock", function () {
viewer.clockViewModel.multiplier /= 2; }); Sandcastle.addToolbarButton("Speed Up Clock", function () {
viewer.clockViewModel.multiplier *= 2; }); </script>
Case code ：https://github.com/zhangxuhui1992/cesium
边栏推荐
- Advanced C language - pointer 3 - knowledge points sorting
- Mysql事务/锁/日志总结
- ASP. Net core signalr series hub tutorial
- Container common commands
- 《你的灯亮着吗》开始解决问题前，得先知道“真问题”是什么
- Openresty built in variable
- mysql主从配置
- Simulation of two-color ball system to judge the winning situation
- Implementation of Devops in the core field of qunar, the Internet R & D Efficiency
- Under the pressure of technology, you can quickly get started with eth smart contract development, which will take you into the ETH world
猜你喜欢
Practical cases of data visualization (timeline rotation diagram, streamlit control year metabase visualization tutorial) 2.0
'＆lt;', Hexadecimal value 0x3c, is an invalid problem solving
【算法篇】四种链表总结完毕，顺手刷了两道面试题
Two methods for MySQL to open remote connection permission
Arcmap操作系列:80平面转经纬度84
Which direction should college students choose to find jobs after graduation?
几百行代码实现一个 JSON 解析器
Policy Center-Permissions and APIs that Access Sensitive Information
Hundreds of lines of code to implement a JSON parser
Finally understand science! 200 pictures to appreciate the peak of human wisdom
随机推荐
Mysql8 error: error 1410 (42000): you are not allowed to create a user with grant solution
Deep understanding Net (2) kernel mode 1 Kernel mode construct event event
Summary of gradient descent optimizer (rmsprop, momentum, Adam)
Is your light on? Before you start to solve a problem, you need to know what the "real problem" is
Advanced C language - pointer 3 - knowledge points sorting
What is the difference between real-time rendering and pre rendering
Go-Micro安装
如何得到股票开户的优惠活动？在线开户安全么？
Build cloud native observability capability suitable for organizations
Reptile (1) - Introduction to basic reptile theory
Unsupported major.minor version 52.0
剑指 Offer II 080. 含有 k 个元素的组合 回溯
从第三次技术革命看企业应用三大开发趋势
In depth analysis of the core code of the gadgetinspector
KDD 2022 | how far are we from the general pre training recommendation model? Universal sequence representation learning model unisrec for recommender system
19:00 p.m. tonight, knowledge empowerment phase 2 live broadcast - control panel interface design of openharmony smart home project
互联网研发效能之去哪儿网(Qunar)核心领域DevOps落地实践
婴儿认知学习所带来的启发，也许是下一代无监督机器学习的关键
Does flinkcdc have to be a clustered version if the monitored database is Mongo
终于看懂科学了！200张图领略人类智慧的巅峰