qiusj
/
learning_cesium
0
0
Fork 0
Code Issues Issues Pull Requests Packages Projects Releases Wiki Wiki Activity
learning_cesium/Entity实体对象.1.html

1087 lines
31 KiB
HTML
Raw Normal View History

init project
2024-03-19 18:06:25 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Learning Cesium!</title>
<script src="./Build/Cesium/Cesium.js"></script>
<style>
@import url(./Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8';
var viewer = new Cesium.Viewer('cesiumContainer',{
// infoBox:false
});
/**
* 基本几何类型：
*
* Cartesian2：描述表达二维结构的分量（point、padding等）
* { x: number,y: number}
*
* Cartesian2 Array：描述二维点集合
* 【{ x: number,y: number},{ x: number,y: number},...】
*
* Cartesian3：描述三维点。
* {lng: number,lat: number,height: number}
* { x: number, y: number, z: number}
*
* Cartesian3 Array ：描述三维点集合
* [{ lng: number, lat: number, height: number },...,{ lng: number, lat: number, height: number }]
*
* Rectangle：描述矩形
* { west: number, south: number, east: number, north: number }
*
* -------------------------------------------------------------------------------------
*
* 实体实例将多种形式的可视化聚合为一个高级对象。
* 可以手动创建（已知坐标）或是通过CzmlDataSource和GeoJsonDataSource等数据源创建，创建后添加到Viewer对象的entities属性中显示，
*
* new Cesium.Entity(option)
* option列表：
* id：实体id标识，默认是自动生成的一个GUID
* name：实体名称
* show：指定实体是否显示
* position：指定实体位置属性，通常使用Cartesian3三维点指定
* orientation：指定实体方向
*
* billboard BillboardGraphics optional A billboard to associate with this entity.
* box BoxGraphics optional A box to associate with this entity.
* corridor CorridorGraphics optional A corridor to associate with this entity.
* cylinder CylinderGraphics optional A cylinder to associate with this entity.
* ellipse EllipseGraphics optional A ellipse to associate with this entity.
* ellipsoid EllipsoidGraphics optional A ellipsoid to associate with this entity.
* label： LabelGraphics 实体关联的标签
* path PathGraphics optional A path to associate with this entity.
* plane PlaneGraphics optional A plane to associate with this entity.
* point PointGraphics optional A point to associate with this entity.
* polygon PolygonGraphics optional A polygon to associate with this entity.
* polyline PolylineGraphics optional A polyline to associate with this entity.
* properties PropertyBag optional Arbitrary properties to associate with this entity.
* polylineVolume PolylineVolumeGraphics optional A polylineVolume to associate with this entity.
* rectangle RectangleGraphics optional A rectangle to associate with this entity.
* wall WallGraphics optional A wall to associate with this entity.
*
* -------------------------------------------------------------------------------------
* 图形对象（grahpics）:
* BillboardGraphics
BoxGraphics
Cartographic
CartographicGeocoderService
Cesium3DTilesetGraphics
CorridorGraphics
CylinderGraphics
EllipseGraphics
EllipsoidGraphics
GeographicProjection
GeographicTilingScheme
LabelGraphics
ModelGraphics
OrthographicFrustum
OrthographicOffCenterFrustum
PathGraphics
PlaneGraphics
PointGraphics
PolygonGraphics
PolylineGraphics
PolylineVolumeGraphics
RectangleGraphics
WallGraphics
* 所有的形状和体积都有一些共同的属性去控制实体的外型。
* fill：指定几何体是否被填充，默认为true
* outline：指定几何体的外边界
* material：材质属性决定了填充的样子
* shadows：选择阴影模式
*/
var polygonEntity = new Cesium.Entity({
polygon : {
//层次结构,定义多边形及其孔的线性环的层次。洞本身也可能有洞，巢穴内的多边形。
hierarchy : Cesium.Cartesian3.fromDegreesArray([
-109.080842,45.002073,
-105.91517,45.002073,
// -104.058488,44.996596,
// -104.053011,43.002989,
// -104.053011,41.003906,
-105.728954,40.998429,
-107.919731,41.003906,
-109.04798,40.998429,
-111.047063,40.998429,
-111.047063,42.000709,
-111.047063,44.476286,
-111.05254,45.002073]),
height : 0,
material : Cesium.Color.RED.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
var ellipseEntity = new Cesium.Entity({
position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
ellipse : {
semiMinorAxis : 250000.0,
semiMajorAxis : 400000.0,
// material : Cesium.Color.BLUE.withAlpha(0.5)
material : 'starts/100_BK.jpg'
}
});
// var wyoming = viewer.entities.add(polygonEntity);
// viewer.entities.add(ellipseEntity);
// ellipse.material = '/docs/tutorials/creating-entities/images/cats.jpg';
// var ellipse = viewer.entities;
// ellipse.material = '/docs/tutorials/creating-entities/images/cats.jpg';
/**
* BoxGraphics
* 基本属性：
* show：指定实体是否显示
* dimensions（规模大小）：通过一个Cartesian3对象指定box图像的长宽高。
* height： 指定实体位置相对椭球表面的高度
* heightReference： 指定实体的高程基准
* fill： 是否填充
* material： 指定填充的样式，默认白色，
* outline： 是否显示实体的轮廓边界
* outlineColor： 轮廓边界颜色,默认黑色
* outlineWidth: 轮扩边界的宽度，默认1
* shadows： 设置阴影模式，默认Cesium.ShadowMode.DISABLED，可选CAST_ONLY、DISABLED、ENABLED、RECEIVE_ONLY
*/
var blueBox = new Cesium.Entity({
name: "Blue box",
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE,
// shadows:Cesium.ShadowMode.ENABLED
},
});
var redBox = new Cesium.Entity({
name: "Red box with black outline",
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.RED.withAlpha(0.5),
shadows:Cesium.ShadowMode.ENABLED,
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
var outlineOnly = new Cesium.Entity({
name: "Yellow box outline",
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
fill: false,
outline: true,
outlineColor: Cesium.Color.YELLOW,
},
});
// viewer.entities.add(blueBox);
// viewer.entities.add(redBox);
// viewer.entities.add(outlineOnly);
/**
* EllipseGraphics
* 基本属性：
* show：
* semiMajorAxis：长半轴
* semiMinorAxis：短半轴
* height：
* heightReference：
* extrudedHeight：一个数值属性，指定椭圆的挤压面相对于椭球表面的高度。
* extrudedHeightReference：
* rotation：指定椭圆从北逆时针旋转。
* stRotation：指定椭圆纹理从北逆时针旋转。
* granularity：指定椭圆上各点之间的角距离的数值属性。
* classificationType：枚举属性，用于指定此椭圆在地面上是否对地形、3D瓦片或两者进行分类。
* zIndex：
*/
var greenCircle = new Cesium.Entity({
position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0),
name: "Green circle at height with outline",
ellipse: {
semiMinorAxis: 300000.0,
semiMajorAxis: 300000.0,
// height: 200000.0,
material: Cesium.Color.GREEN,
outline: true, // height must be set for outline to display
},
});
var redEllipse = new Cesium.Entity({
position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
name: "Red ellipse on surface",
ellipse: {
semiMinorAxis: 250000.0,
semiMajorAxis: 400000.0,
material: Cesium.Color.RED.withAlpha(0.5),
},
});
var blueEllipse = new Cesium.Entity({
position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
name: "Blue translucent, rotated, and extruded ellipse with outline",
ellipse: {
semiMinorAxis: 150000.0,
semiMajorAxis: 300000.0,
extrudedHeight: 200000.0,
rotation: Cesium.Math.toRadians(45),
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true,
},
});
// viewer.entities.add(greenCircle);
// viewer.entities.add(redEllipse);
// viewer.entities.add(blueEllipse);
/**
* CorridorGraphics
* 它的形状由一条中心线和宽度定义
* 基本属性：
* show:
* position：指定一个Cartesian3数组（点集）定义中心线位置信息
* width：指定宽度
* height:实体位置的高度
* heightReference:
* extrudedHeight：可以理解成实体的高度
* extrudedHeightReference：
* cornerType：角点类型，默认CornerType.ROUNDED，
* 可选Cesium.CornerType.BEVELED 、Cesium.CornerType.MITERED 、Cesium.CornerType.ROUNDED（圆角）
*
*/
var redCorridor = new Cesium.Entity({
name: "Red corridor on surface with rounded corners",
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-100.0,40.0,
-105.0,40.0,
-105.0,35.0,
]),
width: 200000.0,
material: Cesium.Color.RED.withAlpha(0.5),
},
});
var greenCorridor = new Cesium.Entity({
name: "Green corridor at height with mitered corners and outline",
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-90.0,40.0,
-95.0,40.0,
-95.0,35.0,
]),
height: 100000.0,
width: 200000.0,
cornerType: Cesium.CornerType.MITERED,
material: Cesium.Color.GREEN,
// outline: true, // height required for outlines to display
},
});
var blueCorridor = new Cesium.Entity({
name: "Blue extruded corridor with beveled corners and outline",
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-80.0,40.0,
-85.0,40.0,
-85.0,35.0,
]),
height: 200000.0,
extrudedHeight: 100000.0,
width: 200000.0,
cornerType: Cesium.CornerType.BEVELED,
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true, // height or extrudedHeight must be set for outlines to display
outlineColor: Cesium.Color.WHITE,
},
});
// viewer.entities.add(redCorridor);
// viewer.entities.add(greenCorridor);
// viewer.entities.add(blueCorridor);
/**
* CylinderGraphics（圆柱）
* 基本属性：
* show：
* length：指定圆柱的长度
* topRadius：指定圆柱上表面的半径
* bottomRadius：指定圆柱下表面的半径
* heightReference：
* fill：
* material
* outline：
* outlineColor：
* outlineWidth：
* numberOfVerticalLines：指定要沿着轮廓线的周长绘制的垂直线数。
* slices：圆柱体周长周围的边数。
* shadows：
* distanceDisplayCondition：指定在与摄像机的距离上显示此圆柱体。
*/
var greenCylinder = new Cesium.Entity({
name: "Green cylinder with black outline",
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
cylinder: {
length: 400000.0,
topRadius: 200000.0,
bottomRadius: 200000.0,
material: Cesium.Color.GREEN.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.DARK_GREEN,
},
});
var redCone = new Cesium.Entity({
name: "Red cone",
position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
cylinder: {
length: 400000.0,
topRadius: 0.0,
bottomRadius: 200000.0,
material: Cesium.Color.RED,
},
});
// viewer.entities.add(greenCylinder);
// viewer.entities.add(redCone);
/**
* PolygonGraphics面图形
* 基本属性：
* show：
* hierarchy：面图形形状，是一个PolygonHierarchy对象，用于定义面图形的层次结构（面内部可能有线性环，环内也可能"洞"）
* height：实体离椭球表面的距离
* heightReference
* extrudedHeight：实体高度
* extrudedHeightReference
* stRotation：向北的逆时针旋转的角度
* granularity：
* fill
* material
* outline
* outlineColor
* outlineWidth
*
* perPositionHeight：指定是否使用每个位置的高度。
* closeTop：是否关闭上表面
* closeBottom：是否关闭下表面
* arcType：多边形的边必须遵循的线的类型，默认ArcType.GEODESIC（测地线）
* 可选值：
* Cesium.ArcType.GEODESIC 测地线
* Cesium.ArcType.NONE 不符合椭球表面的直线。
* Cesium.ArcType.RHUMB 恒向线,是地球上两点之间与经线处处保持角度相等的曲线
* shadows
* distanceDisplayCondition
* classificationType：指定在椭球表面时候的类型，地形Terrain、3D Tile
* 可选值有
* Cesium.ClassificationType.BOTH
* Cesium.ClassificationType.CESIUM_3D_TILE
* Cesium.ClassificationType.TERRAIN
* zIndex
*
*/
var redPolygon = new Cesium.Entity({
name: "简单的位于椭球表面的面图形",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-115.0,37.0,
-115.0,32.0,
-107.0,33.0,
-102.0,31.0,
-102.0,35.0,
]),
material: Cesium.Color.RED,
},
});
var greenPolygon = new Cesium.Entity({
name: "指定了extrudedHeight属性即实体高度和上下表面不封闭的的多边形体",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-108.0,42.0,
-100.0,42.0,
-104.0,40.0,
]),
extrudedHeight: 500000.0,
material: Cesium.Color.GREEN,
closeTop: false,
closeBottom: false,
},
});
var orangePolygon = new Cesium.Entity({
name: "对于空间不规则的多边形图形，指定perPositionHeight为true，使用每个点的高度。",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
-108.0,25.0,100000,
-100.0,25.0,100000,
-100.0,30.0,100000,
-108.0,30.0,300000,
]),
extrudedHeight: 500000,//可以理解成一个基准面的高度
perPositionHeight: true,
material: Cesium.Color.ORANGE.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
var bluePolygon = new Cesium.Entity({
name: "面图形中有内边界，内边界中又有内边界（多个洞），多个洞嵌套的情况。",
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray([
-99.0,30.0,
-85.0,30.0,
-85.0,40.0,
-99.0,40.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-97.0,31.0,
-97.0,39.0,
-87.0,39.0,
-87.0,31.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-95.0,33.0,
-89.0,33.0,
-89.0,37.0,
-95.0,37.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-93.0,34.0,
-91.0,34.0,
-91.0,36.0,
-93.0,36.0,
]),
},
],
},
],
},
],
},
material: Cesium.Color.BLUE.withAlpha(0.5),
height: 0,
outline: true, // height is required for outline to display
},
});
var cyanPolygon = new Cesium.Entity({
name: "使用每个点的高度，绘制垂直的三角形",
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 purplePolygonUsingRhumbLines = new Cesium.Entity({
name: "Purple polygon using rhumb lines with outline",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-120.0,45.0,
-80.0,45.0,
-80.0,55.0,
-120.0,55.0,
]),
extrudedHeight: 50000,
material: Cesium.Color.PURPLE,
outline: true,
outlineColor: Cesium.Color.MAGENTA,
arcType: Cesium.ArcType.RHUMB,
},
});
// viewer.entities.add(redPolygon);
// viewer.entities.add(greenPolygon);
// viewer.entities.add(orangePolygon);
// viewer.entities.add(bluePolygon);
// viewer.entities.add(cyanPolygon);
// viewer.entities.add(purplePolygonUsingRhumbLines);
/**
* PolylineGraphics线图形
* 基本属性：
* show
* positions：一个Cartesian3数组，定义线图形的形状
* width
* granularity：指定每个纬度和经度之间的角度距离
* material
* depthFailMaterial：指定在地形以下绘制折线时使用的材质。
* arcType：线形，测地线、直线、斜驶曲线
* clampToGround：图形是否贴在椭球面上
* shadows
* distanceDisplayCondition
* classificationType
* zIndex
*/
var redLine = new Cesium.Entity({
name: "贴着椭球表面",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
width: 5,
material: Cesium.Color.RED,
clampToGround: true,
},
});
var greenRhumbLine = new Cesium.Entity({
name: "恒向线rhumb line",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
width: 5,
arcType: Cesium.ArcType.RHUMB,
material: Cesium.Color.GREEN,
},
});
var glowingLine = new Cesium.Entity({
name: "灼热线特效",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]),
width: 10,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.2,//灼热光的强度,默认0.25
taperPower: 0.5,//逐渐减少的效果强度,默认为1
color: Cesium.Color.CORNFLOWERBLUE,//指定灼热光的颜色
}),
},
});
var orangeOutlined = new Cesium.Entity({
name:
"指定两点的高度，使实体悬浮于椭球表面",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,39,250000,
-125,39,250000,
]),
width: 5,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.ORANGE,
outlineWidth: 2,
outlineColor: Cesium.Color.BLACK,
}),
},
});
var purpleArrow = new Cesium.Entity({
name: "端点特效",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,43,500000,
-125,43,500000,
]),
width: 10,
arcType: Cesium.ArcType.NONE,//直线
material: new Cesium.PolylineArrowMaterialProperty(
Cesium.Color.PURPLE
),
},
});
var dashedLine = new Cesium.Entity({
name: "虚线特效",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,45,500000,
-125,45,500000,
]),
width: 4,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.CYAN, //线的颜色
gapColor:Cesium.Color.TRANSPARENT,//端点的颜色
dashLength:16, //虚线长度
dashPattern:25 //指定虚线中交替出现的短划线和空白区域的长度。
}),
},
});
viewer.entities.add(redLine);
viewer.entities.add(greenRhumbLine);
viewer.entities.add(glowingLine);
viewer.entities.add(orangeOutlined);
viewer.entities.add(purpleArrow);
viewer.entities.add(dashedLine);
/**
* PolylineVolumeGraphics管道图形
* 跟线图形类似，可以理解成将线做了buffer效果，
* 基本属性
* show
* positions：Cartesian3数组，指定管道中心线的轨迹
* shape：二维的Cartesian2数组，指定管道截面的形状
* cornerType：指定管道拐点的连接类型，默认Cesium.CornerType.ROUNDED（圆角）
* 可选：
* Cesium.CornerType.ROUNDED（圆角）
* Cesium.CornerType.BEVELED（斜面，截断）
* Cesium.CornerType.MITERED（斜接，直角）
* granularity
* fill
* material
* outline
* outlineColor
* outlineWidth
* shadows
* distanceDisplayCondition
*/
function computeCircle(radius) {
var positions = [];
for (var i = 0; i < 360; i++) {
var radians = Cesium.Math.toRadians(i);
positions.push(
new Cesium.Cartesian2(
radius * Math.cos(radians),
radius * Math.sin(radians)
)
);
}
return positions;
}
function computeStar(arms, rOuter, rInner) {
var angle = Math.PI / arms;
var length = 2 * arms;
var positions = new Array(length);
for (var i = 0; i < length; i++) {
var r = i % 2 === 0 ? rOuter : rInner;
positions[i] = new Cesium.Cartesian2(
Math.cos(i * angle) * r,
Math.sin(i * angle) * r
);
}
return positions;
}
var redTube = new Cesium.Entity({
name: "截面为圆形，拐点为圆角的管道",
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArray([
-85.0,32.0,
-85.0,36.0,
-89.0,36.0,
]),
shape: computeCircle(60000.0),
material: Cesium.Color.RED,
},
});
var greenBox = new Cesium.Entity({
name: "截面为方形，拐点为截面的管道",
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-90.0,32.0,0.0,
-90.0,36.0,100000.0,
-94.0,36.0,0.0,
]),
shape: [
new Cesium.Cartesian2(-50000, -50000),
new Cesium.Cartesian2(50000, -50000),
new Cesium.Cartesian2(50000, 50000),
new Cesium.Cartesian2(-50000, 50000),
],
cornerType: Cesium.CornerType.BEVELED,
material: Cesium.Color.GREEN.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
var blueStar = new Cesium.Entity({
name: "Blue star with mitered corners and outline",
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-95.0,32.0,0.0,
-95.0,36.0,100000.0,
-99.0,36.0,200000.0,
]),
shape: computeStar(7, 70000, 50000),
cornerType: Cesium.CornerType.MITERED,
material: Cesium.Color.BLUE,
},
});
// viewer.entities.add(redTube);
// viewer.entities.add(greenBox);
// viewer.entities.add(blueStar);
/**
* RectangleGraphics矩形图形
* 基本属性：
* show:
* coordinates:是一个Rectangle对象，用于指定当前矩形图形的形状,new Cesium.Rectangle(west, south, east, north)
* height:
* heightReference:
* extrudedHeight
* extrudedHeightReference
* rotation：是整个矩形在旋转
* stRotation：矩形里面的东西在旋转
* granularity
* fill
* material
* outline
* outlineColor
* outlineWidth
* shadows
* distanceDisplayCondition
* classificationType
* zIndex
*/
var redRectangle = new Cesium.Entity({
name: "普通红色半透明的矩形",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-110.0,20.0,
-80.0,25.0
),
material: Cesium.Color.RED.withAlpha(0.5),
},
});
var greenRectangle = new Cesium.Entity({
name:
"绿色、半透明、旋转45度、离椭球表面300000米、高度100000米、有轮廓线的矩形图形",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-110.0,30.0,
-100.0,40.0
),
material: Cesium.Color.GREEN.withAlpha(0.5),
rotation: Cesium.Math.toRadians(45),
extrudedHeight: 300000.0,
height: 100000.0,
outline: true, // height must be set for outline to display
outlineColor: Cesium.Color.BLACK,
},
});
var rotation = Cesium.Math.toRadians(30);
function getRotationValue() {
rotation += 0.005;
return rotation;
}
var retationRectangle = new Cesium.Entity({
name: "Rotating rectangle with rotating texture coordinate",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(-92.0, 30.0, -76.0, 40.0),
// material: 'starts/100_BK.jpg',
material: 'Build/Cesium/Assets/Images/cesium_credit.png',
rotation: new Cesium.CallbackProperty(getRotationValue, false),
stRotation: new Cesium.CallbackProperty(getRotationValue, false),
classificationType: Cesium.ClassificationType.TERRAIN,
},
});
// viewer.entities.add(redRectangle);
// viewer.entities.add(greenRectangle);
// viewer.entities.add(retationRectangle);
/**
* EllipsoidGraphics椭球体图形
*
*
*/
var blueEllipsoid = new Cesium.Entity({
name: "Blue ellipsoid",
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
material: Cesium.Color.BLUE,
},
});
var redSphere =new Cesium.Entity({
name: "Red sphere with black outline",
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
var outlineOnly = new Cesium.Entity({
name: "Yellow ellipsoid outline",
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
fill: false,
outline: true,
outlineColor: Cesium.Color.YELLOW,
slicePartitions: 24,
stackPartitions: 36,
},
});
// viewer.entities.add(blueEllipsoid);
// viewer.entities.add(redSphere);
// viewer.entities.add(outlineOnly);
/**
* WallGraphics墙图形
*
*
*/
var redWall = viewer.entities.add({
name: "Red wall at height",
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-115.0,44.0,200000.0,
-90.0,44.0,200000.0,
]),
minimumHeights: [100000.0, 100000.0],
material: Cesium.Color.RED,
},
});
var greenWall = viewer.entities.add({
name: "Green wall from surface with outline",
description:'\
<img\
width="50%"\
style="float:left; margin: 0 1em 1em 0;"\
src="//cesium.com/docs/tutorials/creating-entities/Flag_of_Wyoming.svg"/>\
<p>\
Wyoming is a state in the mountain region of the Western \
United States.\
</p>\
<p>\
Wyoming is the 10th most extensive, but the least populous \
and the second least densely populated of the 50 United \
States. The western two thirds of the state is covered mostly \
with the mountain ranges and rangelands in the foothills of \
the eastern Rocky Mountains, while the eastern third of the \
state is high elevation prairie known as the High Plains. \
Cheyenne is the capital and the most populous city in Wyoming, \
with a population estimate of 63,624 in 2017.\
</p>\
<p>\
Source: \
<a style="color: WHITE"\
target="_blank"\
href="http://en.wikipedia.org/wiki/Wyoming">Wikpedia</a>\
</p>',
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-107.0,43.0,100000.0,
-97.0,43.0,100000.0,
-97.0,40.0,100000.0,
-107.0,40.0,100000.0,
-107.0,43.0,100000.0,
]),
material: Cesium.Color.GREEN,
outline: true,
},
});
var blueWall = viewer.entities.add({
name: "Blue wall with sawtooth heights and outline",
wall: {
positions: Cesium.Cartesian3.fromDegreesArray([
-115.0,50.0,
-112.5,50.0,
-110.0,50.0,
-107.5,50.0,
-105.0,50.0,
-102.5,50.0,
-100.0,50.0,
-97.5,50.0,
-95.0,50.0,
-92.5,50.0,
-90.0,50.0,
]),
maximumHeights: [
100000,
200000,
100000,
200000,
100000,
200000,
100000,
200000,
100000,
200000,
100000,
],
minimumHeights: [
0,
100000,
0,
100000,
0,
100000,
0,
100000,
0,
100000,
0,
],
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
// var citizensBankPark = viewer.entities.add({
// name : 'Citizens Bank Park',
// position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
// point : {
// pixelSize : 5,
// color : Cesium.Color.RED,
// outlineColor : Cesium.Color.WHITE,
// outlineWidth : 2
// },
// 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, -9)
// }
// });
var citizensBankPark = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
billboard : {
image : 'starts/100_BK.jpg',
width : 64,
height : 64
},
label : {
text : 'Citizens Bank Park',
font : '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.TOP,
pixelOffset : new Cesium.Cartesian2(0, 32)
}
});
/**
* 加载3D模型
*
* 基于glTF的三维模型，模型的位置和方向由包含的实体决定。
* Cesium 包括对glTF geometry、材质 materials、动画 animations 和皮肤 skinning 的支持。目前不支持 Cameras和灯光 ligts。
*
* 主要属性：
* uri：
*
*/
var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
model : {
uri : 'SampleData/models/GroundVehicle/GroundVehicle.glb'
}
});
// viewer.trackedEntity = entity;
viewer.zoomTo(entity)
/**
*
* Entity 修改材质的三种方式
*
*
*/
// 创建一个有洞的多边形，并填充蓝色材质
var polygon12 = viewer.entities.add({
name: "Blue polygon with holes",
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray([
-99.0, 30.0,
-85.0, 30.0,
-85.0, 40.0,
-99.0, 40.0,
]),
holes: [{
positions: Cesium.Cartesian3.fromDegreesArray([
-97.0, 31.0,
-97.0, 39.0,
-87.0, 39.0,
-87.0, 31.0,
])
}]
},
material: Cesium.Color.RED.withAlpha(0.5),
height: 0,
outline: true
}
});
// 改变材质
// // 方式一：通过类型创建材质
// polygon12.material = Cesium.Material.fromType('Color');
// polygon12.material.uniforms.color = new Cesium.Color(1.0, 0.0, 0.0, 1.0);
// 方式二：创建一个默认材质
polygon12.material = new Cesium.ColorMaterialProperty(new Cesium.Color(1.0, 1.0, 0.0, 1.0))
// // 方式三：通过Fabric方式
// polygon12.material = new Cesium.Material({
// fabric : {
// type : 'Color',
// uniforms : {
// color : new Cesium.Color(1.0, 1.0, 0.0, 1.0)
// }
// }
// });
</script>
</body>
</html>