CesiumJS进阶攻略之使用ellipse设置材料

一.给ellipse添加图片

使用ImageMaterialProperty将图片映射到图像当中，我们使用new Cesium.ImageMaterialProperty来创建需要添加的配置项
image属性的值，可以是Url，Canvas，Video
color设置颜色之后会在图片上覆盖一层设置的颜色
repeat向X，Y方向重复的次数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./Cesium-1.75/Build/Cesium/Cesium.js"></script>
    <script src="./Cesium-1.75/Apps/Sandcastle/Sandcastle-header.js"></script>
    <link rel="stylesheet" type="text/css" href="./Cesium-1.75/Build/Cesium/Widgets/widgets.css" /> 
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        #container{
            width: 100%;
            height: 800px;
        }
        #toolbar{
            position: fixed;
            left: 20px;
            top:20px;
        }
        .cesium-viewer-bottom{
            display: none;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        var viewer = new Cesium.Viewer('container');
        var entity = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
            ellipse : {
            semiMinorAxis : 500000.0,
            semiMajorAxis : 500000.0,
            material : Cesium.Color.YELLOW.withAlpha(0.5)
        }
        });
        viewer.zoomTo(viewer.entities);
        var ellipse = entity.ellipse; 
        ellipse.material = new Cesium.ImageMaterialProperty({  //映射到图像 
            image:'../tp.jpg',  //资源地址
            color: Cesium.Color.LIGHTCYAN, //背景颜色
            repeat : new Cesium.Cartesian2(4, 4)  //想x,y方向重复的次数
        })
    </script>
</body>
</html>

呈现：
在这里插入图片描述

二.给ellipse添加棋盘纹理

使用CheckerboardMaterialProperty来映射棋盘纹理，我们使用new Cesium.CheckerboardMaterialProperty来创建需要添加的配置项
evenColor默认白色，棋盘第一个颜色
oddColor默认黑色，棋盘第二个颜色
repeat向X，Y方向重复的次数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./Cesium-1.75/Build/Cesium/Cesium.js"></script>
    <script src="./Cesium-1.75/Apps/Sandcastle/Sandcastle-header.js"></script>
    <link rel="stylesheet" type="text/css" href="./Cesium-1.75/Build/Cesium/Widgets/widgets.css" /> 
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        #container{
            width: 100%;
            height: 800px;
        }
        #toolbar{
            position: fixed;
            left: 20px;
            top:20px;
        }
        .cesium-viewer-bottom{
            display: none;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
         var viewer = new Cesium.Viewer('container');
         var entity=viewer.entities.add({
             position:Cesium.Cartesian3.fromDegrees(-103.0,40.0),
             ellipse:{
                 semiMinorAxis:250000.0,
                 semiMajorAxis:400000.0,
                 material:Cesium.Color.BLUE.withAlpha(0.5),
             }
         });
         var ellipse=entity.ellipse;
         ellipse.material=new Cesium.CheckerboardMaterialProperty({  //映射到棋盘
             evenColor:Cesium.Color.WHITE, //默认白色，棋盘第一个颜色
             oddColor:Cesium.Color.BLACK,  //默认黑色，棋盘第二个颜色
             repeat:new Cesium.Cartesian2(4,4) //x，y方向重复次数
         })
    </script>    
</body>
</html>

呈现：
在这里插入图片描述

三.给ellipse添加条纹纹理

使用StripeMaterialProperty来映射条纹纹理，我们使用new Cesium.StripeMaterialProperty来创建需要添加的配置项
evenColor默认白色，棋盘第一个颜色
oddColor/默认黑色，棋盘第二个颜色
repeat条纹重复次数(一共)
offset:20偏移量
orientation定义了条纹的方向,水平或者垂直，默认水平

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./Cesium-1.75/Build/Cesium/Cesium.js"></script>
    <script src="./Cesium-1.75/Apps/Sandcastle/Sandcastle-header.js"></script>
    <link rel="stylesheet" type="text/css" href="./Cesium-1.75/Build/Cesium/Widgets/widgets.css" /> 
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        #container{
            width: 100%;
            height: 800px;
        }
        #toolbar{
            position: fixed;
            left: 20px;
            top:20px;
        }
        .cesium-viewer-bottom{
            display: none;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
         var viewer = new Cesium.Viewer('container');
         var entity=viewer.entities.add({
             position:Cesium.Cartesian3.fromDegrees(-103.0,40.0),
             ellipse:{
                 semiMinorAxis:250000.0,
                 semiMajorAxis:400000.0,
                 material:Cesium.Color.BLUE.withAlpha(0.5),
             }
         });
         var ellipse=entity.ellipse;
         ellipse.material=new Cesium.StripeMaterialProperty({
             evenColor:Cesium.Color.WHITE, //默认白色，棋盘第一个颜色
             oddColor:Cesium.Color.BLACK,  //默认黑色，棋盘第二个颜色
             repeat:32, //条纹重复次数(一共)
             offset:20,  //偏移量
             orientation:Cesium.StripeOrientation.HORIZONTAL  //定义了条纹的方向,水平或者垂直，默认水平  。HORIZONTAL	Number	水平方向。 VERTICAL	Number	垂直方向。
         })
    </script>    
</body>
</html>

呈现：
在这里插入图片描述

四.给ellipse添加网格

使用GridMaterialProperty来映射网格，我们使用new Cesium.GridMaterialProperty来创建需要添加的配置项
color网格颜色
cellAlpha单元格透明度
lineCount:行列个数
lineThickness线粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./Cesium-1.75/Build/Cesium/Cesium.js"></script>
    <script src="./Cesium-1.75/Apps/Sandcastle/Sandcastle-header.js"></script>
    <link rel="stylesheet" type="text/css" href="./Cesium-1.75/Build/Cesium/Widgets/widgets.css" /> 
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        #container{
            width: 100%;
            height: 800px;
        }
        #toolbar{
            position: fixed;
            left: 20px;
            top:20px;
        }
        .cesium-viewer-bottom{
            display: none;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
         var viewer = new Cesium.Viewer('container');
         var entity=viewer.entities.add({
             position:Cesium.Cartesian3.fromDegrees(-103.0,40.0),
             ellipse:{
                 semiMinorAxis:250000.0,
                 semiMajorAxis:400000.0,
                 material:Cesium.Color.BLUE.withAlpha(0.5),
             }
         });
         var ellipse=entity.ellipse;
         ellipse.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),  //线粗细
         })
    </script>    
</body>
</html>

呈现：
在这里插入图片描述
下面两个纹理需要用到PolyLine，先来添加一个PolyLine

var entity = viewer.entities.add({
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,-77.1, 35]),
    width : 5,
    material : Cesium.Color.RED
}});
viewer.zoomTo(viewer.entities)

创建一条发光的线：

PolylineGlowMaterialProperty
glowPower发光的长度，值为线宽的百分比（0~1.0）
color发光的颜色（中心颜色为白色）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./Cesium-1.75/Build/Cesium/Cesium.js"></script>
    <script src="./Cesium-1.75/Apps/Sandcastle/Sandcastle-header.js"></script>
    <link rel="stylesheet" type="text/css" href="./Cesium-1.75/Build/Cesium/Widgets/widgets.css" /> 
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        #container{
            width: 100%;
            height: 800px;
        }
        #toolbar{
            position: fixed;
            left: 20px;
            top:20px;
        }
        .cesium-viewer-bottom{
            display: none;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        var viewer = new Cesium.Viewer('container');
        var entity=viewer.entities.add({
            polyline:{
                positions:Cesium.Cartesian3.fromDegreesArray([-77,35,-78,35]),
                width:5,
                material:Cesium.Color.RED
            }
        })
        viewer.zoomTo(viewer.entities);
        var polyline=entity.polyline;
        polyline.material=new Cesium.PolylineGlowMaterialProperty({
            glowPower:0.5,  //发光的长度，值为线宽的百分比（0~1.0）
            color:Cesium.Color.BLUE  //发光的颜色（中心颜色为白色）
        });
    </script>
    
</body>
</html>

呈现：
在这里插入图片描述

PolylineOutlineMaterialProperty
color线的颜色
outlineWidth线纹理的宽度
outlineColor线纹理的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./Cesium-1.75/Build/Cesium/Cesium.js"></script>
    <script src="./Cesium-1.75/Apps/Sandcastle/Sandcastle-header.js"></script>
    <link rel="stylesheet" type="text/css" href="./Cesium-1.75/Build/Cesium/Widgets/widgets.css" /> 
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        #container{
            width: 100%;
            height: 800px;
        }
        #toolbar{
            position: fixed;
            left: 20px;
            top:20px;
        }
        .cesium-viewer-bottom{
            display: none;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        var viewer = new Cesium.Viewer('container');

        var entity=viewer.entities.add({
            polyline:{
                positions:Cesium.Cartesian3.fromDegreesArray([-77,35,-78,35]),
                width:5,
                material:Cesium.Color.RED
            }
        })
        viewer.zoomTo(viewer.entities);
        var polyline=entity.polyline;
        polyline.material=new Cesium.PolylineOutlineMaterialProperty({
           color:Cesium.Color.ORANGE, //线的颜色
           outlineWidth:3,  //线纹理的宽度
           outlineColor:Cesium.Color.BLACK  //线纹理的颜色
        });
    </script>
    
</body>
</html>

呈现：
在这里插入图片描述

原文链接：https://blog.csdn.net/zm17671443092/article/details/109536016