Cesium小知识

最新推荐文章于 2025-06-17 10:55:52 发布

木氏土司茶

最新推荐文章于 2025-06-17 10:55:52 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Cesium

本文链接：https://blog.csdn.net/u012248603/article/details/83269403

Cesium 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了Cesium平台的各种高级功能，包括动态加载GIF图、应用视频纹理、绘制贴地线、实现渐变纹理、显示帧速、调整3D模型位置、设置HomeButton初始位置、使用MIME类型、截屏技巧、控制三维球体显示等，为GIS开发者提供了实用指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Cesium加载Gif图

//加载gif动图 start

var htmlOverlay = document.getElementById('#sillygif');

var scratch = new Cesium.Cartesian2();

viewer.scene.preRender.addEventListener(function() {

var position = Cesium.Cartesian3.fromDegrees(113.8055628136,22.44247382348, 50.0);

var canvasPosition = viewer.scene.cartesianToCanvasCoordinates(position, scratch);

if (Cesium.defined(canvasPosition)) {

htmlOverlay.style.top = canvasPosition.y + 'px';

htmlOverlay.style.left = canvasPosition.x + 'px';

}

});

//加载gif动图 end

2、Cesium视频纹理

<video id="trailer" style="display: none;" autoplay loop crossorigin controls>
            <source src="tt.mp4" type="video/mp4">
        Your browser does not support the <code>video</code> element.
</video>

var videoElement = document.getElementById('trailer');
var sphere = viewer.entities.add({
    id: "a",
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
        material: videoElement
    }
});

3、Cesium绘制贴地线四种方法

///////////////////1、

将上面代码的 “polyline” 改成“corridor”,这么改实际上是构建了一个corridor面对象，但是可以看到线段的所有位置都是在地表的，

////////////////////2、

viewer.dataSources.add(Cesium.GeoJsonDataSource.load('http://localhost:1234/lesson07/pwt1/line.json', {

clampToGround: true

}));

///////////////////////3、

var rectanglePrimitive = viewer.scene.primitives.add(new Cesium.GroundPrimitive({

geometryInstances: new Cesium.GeometryInstance({

geometry: new Cesium.CorridorGeometry({

vertexFormat: Cesium.VertexFormat.POSITION_ONLY,

positions: Cesium.Cartesian3.fromDegreesArray([112.82536, 23.071506, 112.82742, 23.067512, 112.828878, 23.064659, 112.830799, 23.060947, 112.832166, 23.058329]),

width: 40

}),

attributes: {

color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 1.0, 0.0, 0.5))

}

}),

classificationType: Cesium.ClassificationType.TERRAIN

}));

/////////////////////////////4、

var rectanglePrimitive = viewer.scene.primitives.add(new Cesium.GroundPrimitive({

geometryInstances: new Cesium.GeometryInstance({

geometry: new Cesium.CorridorGeometry({

vertexFormat: Cesium.VertexFormat.POSITION_ONLY,

positions: Cesium.Cartesian3.fromDegreesArray([112.82536, 23.071506, 112.82742, 23.067512, 112.828878, 23.064659, 112.830799, 23.060947, 112.832166, 23.058329]),

width: 40

}),

attributes: {

color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 1.0, 0.0, 0.5))

}

}),

classificationType: Cesium.ClassificationType.TERRAIN

}));

5、Cesium渐变纹理

var redWall = viewer.entities.add({
    name: 'Red wall at height',
    wall: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            121.444409, 31.247417, 200.0,
            121.533521, 31.235685, 200.0,
            121.563273, 31.190347, 200.0,
            121.546744, 31.194054, 200.0,
            121.516705, 31.191459, 200.0,
            121.502188, 31.203074, 200.0
        ]),
        minimumHeights: [3000.0, 2000.0, 2000, 2000, 2000, 3000],
        material: getColorRamp([0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0],true)
    }
});

6、Cesium 显示帧速

viewer.scene.debugShowFramesPerSecond = true;

7、调整b3dm模型位置

//创建平移矩阵方法一
// m = Cesium.Matrix4.fromArray([
// 1.0, 0.0, 0.0, 0.0,
// 0.0, 1.0, 0.0, 0.0,
// 0.0, 0.0, 1.0, 0.0,
// x, y, z, 1.0
// ]);

//创建平移矩阵方法二
var translation=Cesium.Cartesian3.fromArray([x, y, z]);
m= Cesium.Matrix4.fromTranslation(translation);

//生效
tileset._modelMatrix = m;

//旋转

var m = tileset.modelMatrix; //RotateX为旋转角度，转为弧度再参与运算 var m1 = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(RotateX)); //矩阵计算 Cesium.Matrix4.multiplyByMatrix3(m,m1,m); //赋值 tileset.modelMatrix = m;

8、判断是否有某个属性

entity.properties.propertyNames 是所有属性名列表，可以判断是否有某个属性

9、HomeButton按钮初始位置设置

//初始位置中国

Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(73.66, 3.86, 135.05, 53.55);

10、常用MIME类型

11、Ceisum截屏

库: html2canvas

captureViewport:function()
    {
        html2canvas(document.getElementById('cesiumContainer'), {
            onrendered: function (canvas) {
                document.body.appendChild(canvas);
                viewer.render();
                //var image = canvas.toDataURL("image/png");
                var image = viewer.canvas.toDataURL();
                console.log(image);
                var pHtml = "<img src=" + image + " />";
                $('#imageCamera').html(pHtml);
            },
            // width: 300,
            // height: 300
        });
    }

******************************************************************************

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>html2canvas example</title> <script type="text/javascript" src="html2canvas.js"></script> </head> <script type="text/javascript"> function takeScreenshot() { console.log('test'); html2canvas(document.getElementById('view'), { onrendered: function(canvas) { document.body.appendChild(canvas); }, }); } </script> <body> <div id="view" style="background:url(test.jpg) 50%; width: 700px; height: 500px;"> <input type="button" value="截图" onclick="takeScreenshot()"> </div> </body> </html>

12、 Ceseium三维球体显示隐藏

var show = !viewer.scene.globe.show

viewer.scene.globe.show = show;

viewer.scene.skyAtmosphere.show = show;

viewer.scene.skyBox.show = show;