Cesium各类实体的添加

（一）Entity API简介

1.立方体：

var blueBox = viewer.entities.add({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}
});var redBox = viewer.entities.add({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,outline : true, //显示轮廓outlineColor : Cesium.Color.BLACK}
});var outlineOnly = viewer.entities.add({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}
});

2.圆和椭圆

var viewer = new Cesium.Viewer('cesiumContainer');
//浮空的绿色圆形
var greenCircle = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0),name : 'Green circle at height',ellipse : {semiMinorAxis : 300000.0,semiMajorAxis : 300000.0,height: 200000.0, //浮空material : Cesium.Color.GREEN}
});
//红色椭圆形，位于地表，带轮廓
var redEllipse = viewer.entities.add({//不带高度position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),name : 'Red ellipse on surface with outline',ellipse : {semiMinorAxis : 250000.0,semiMajorAxis : 400000.0,material : Cesium.Color.RED.withAlpha(0.5),outline : true,outlineColor : Cesium.Color.RED}
});
//蓝色椭圆柱，旋转了角度
var blueEllipse = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),name : 'Blue translucent, rotated, and extruded ellipse',ellipse : {semiMinorAxis : 150000.0,semiMajorAxis : 300000.0,extrudedHeight : 200000.0,  //拉伸rotation : Cesium.Math.toRadians(45), //旋转material : Cesium.Color.BLUE.withAlpha(0.7),outline : true}
});viewer.zoomTo(viewer.entities);

3.圆柱和圆锥(Cylinder Cones)

var greenCylinder = viewer.entities.add({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,outline : true,outlineColor : Cesium.Color.DARK_GREEN}
});var redCone = viewer.entities.add({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}
});

4.墙

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',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,outlineColor : Cesium.Color.BLACK}
});

5.点、图标和标签

var viewer = new Cesium.Viewer( 'cesiumContainer' );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 )   //偏移量}billboard : { //图标image : '.png',width : 64,height : 64},
} );

6.3D模型

var viewer = new Cesium.Viewer('cesiumContainer');
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706); //位置
var heading = Cesium.Math.toRadians(45.0);//绕垂直于地心的轴旋转
var pitch = Cesium.Math.toRadians(15.0);  //绕纬度线旋转
var roll = Cesium.Math.toRadians(0.0);    //绕经度线旋转
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);var entity = viewer.entities.add({position : position,orientation : orientation,model : {uri : '支持gltf模型'}
});
viewer.trackedEntity = entity;

7.根据经纬度贴图片

Viewer.entities.add({Rectangle:{Coordinates:Cesium.Rectangle.fromDegrees(),Material: new Cesium.ImageMaterialProperty({Image:'./png',})}
});

（二）Primitive API

1.绘制矩形

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;scene.primitives.add(new Cesium.RectanglePrimitive({//绘制矩形rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),material : Cesium.Material.fromType('Dot')  //设置材质
}));

2.绘制多线段

var primitive = new Cesium.Primitive({geometryInstances : new Cesium.GeometryInstance({geometry : new Cesium.PolylineGeometry({positions : Cesium.Cartesian3.fromDegreesArrayHeights([0.0, 0.0,10005.0, 0.0,5000]),width : 10.0,vertexFormat : Cesium.PolylineColorAppearance.VERTEX_FORMAT}),attributes : {color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 1.0, 1.0))}}),appearance : new Cesium.PolylineColorAppearance({translucent : false})});
viewer.scene.primitives.add(primitive);

3.绘制添加点

var points = scene.primitives.add(new Cesium.PointPrimitiveCollection());points.add({color:Cesium.Color.RED,pixelSize:size,position: new Cesium.Cartesian3.fromDegrees(log,lat,height),
})

Cesium各类实体的添加相关推荐

第六章 Cesium学习入门之添加Geojson数据（dataSource）
从0开始的Cesium 第一章 Cesium学习入门之搭建Vite+Vue3+Cesium开发环境第二章 Cesium学习入门之搭建Cesium界面预览和小控件隐藏第三章 Cesium学习入门之地 ...
cesium实现向卫星添加传感器并跟随卫星移动
cesium实现向卫星添加传感器并跟随卫星移动 import * as Cesium from 'cesium' import "./CesiumSensors.js";/* es ...
使用MybatisPlus在实体中添加数据库表中不存在的字段
例如:age属性在表中不存在,在实体中添加age属性,需要在字段上加注解 @TableField(exist = false) @TableField(exist = false)private In ...
cad二次开发-C#-VS-镜像-判断用户当前是否已选择实体-将实体对象添加到模型空间-添加实体到块表记录-将块定义插入到模型空间
创建新图层 public static void CreateLayer(string LayerName){Document acDoc = Application.DocumentManager. ...
Cesium设置实体初始偏移量
Cesium设置实体初始偏移量业务场景: 点击实体,视角切换到实体,但视角距离实体太近了,所以需设置视角偏移量. 修改前(跳转到实体): 修改后(跳转到实体): export default fun ...
cesium 隐藏entity_cesium entity创建各类实体
html> 创建实体 @import url(../Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width ...
Cesium 中两种添加 model 方法的区别
概述 Cesium 中包含两种添加 model 的方法,分别为: 通过 viewer.entities.add() 函数添加通过 viewer.scene.primitives.add() 函数添加 ...
Cesium三维地球上添加点、线、面、文字、图标（图片）、模型等标绘
添加标绘之前要明白一点:Cesium Entity是可以与样式化图形表示配对并定位在空间和时间上的数据对象,或者说Cesium 提供 Entity API 来绘制控件数据.所以我们添加的所有标绘都是e ...
TreeMap类型通过实体类添加数据并排序
实体类Student代码如下所示: package com.test.Test11;public class Student implements Comparable<Student>{ ...

Cesium各类实体的添加

（一）Entity API简介

1.立方体：

2.圆和椭圆

3.圆柱和圆锥(Cylinder Cones)

4.墙

5.点、图标和标签

6.3D模型

7.根据经纬度贴图片

（二）Primitive API

1.绘制矩形

2.绘制多线段

3.绘制添加点

Cesium各类实体的添加相关推荐

最新文章

热门文章