1087 lines
31 KiB
HTML
1087 lines
31 KiB
HTML
<!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>
|