代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绘制实体_Entity方式</title>
<script src="./Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="./Build/Cesium//Widgets/widgets.css">
<!-- <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> -->
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.toolbar {
position: absolute;
top: 10px;
left: 20px;
background-color: rgb(0, 0, 0, 0);
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
<div id="menu" class="toolbar">
<select id="dropdown" onchange="addEntity()">
<option value="null">null</option>
<option value="addPoint">添加点</option>
<option value="addLines">添加线</option>
<option value="addPolygon">添加面</option>
<option value="addRectangle">添加矩形</option>
<option value="addEllipse">添加椭圆</option>
<option value="addCylinder">添加圆柱体</option>
<option value="addCorridor">添加走廊</option>
<option value="addWall">添加墙</option>
<option value="addBox">添加方盒</option>
<option value="addEllipsoid">添加球体</option>
<option value="addModel">添加模型</option>
<option value="addBillboard">添加广告牌</option>
</select>
<select id="dropdown2" onchange="removeEntity()">
<option value="null">null</option>
<option value="removePoint">删除点</option>
<option value="removeLines">删除线</option>
<option value="removePolygon">删除面</option>
<option value="removeRectangle">删除矩形</option>
<option value="removeEllipse">删除椭圆</option>
<option value="removeCylinder">删除圆柱体</option>
<option value="removeCorridor">删除走廊</option>
<option value="removeWall">删除墙</option>
<option value="removeBox">删除方盒</option>
<option value="removeEllipsoid">删除球体</option>
<option value="removeModel">删除模型</option>
<option value="removeBillboard">删除广告牌</option>
</select>
</div>
<script>
Cesium.Ion.defaultAccessToken =
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NGM4MDcxOS05Zjk3LTQ2YmMtYjAxYi0zYTczNWFkYzFlN2EiLCJpZCI6NzY0NTcsImlhdCI6MTYzOTQ2ODI2NH0.Zsp28WnnCpj4wlAIQwIwcSob228zSaz510QE3zKQN58';
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, //是否显示动画工具
timeline: false, //是否显示时间轴工具
fullscreenButton: false, //是否显示全屏按钮工具
});
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(118, 32, 6000000),
orientation: {
heading: 0.010152402293521767, // 表示头部朝向的角度，通常用于表示航向。
pitch: -1.5705337480193866, // 表示前后倾斜的角度，通常用于表示俯仰角。
roll: 0.00003681052934645379 // 表示左右旋转的角度，通常用于表示偏航角。
},
})
// 点
var addPoint = {
id: 'point',
name: '点',
show: true, //显示.
position: Cesium.Cartesian3.fromDegrees(118, 32, 0.0),
point: {
color: Cesium.Color.BLUE, //颜色
pixelSize: 5, //点大小
}
}
// 线
var addLine = {
id: 'line',
name: '线',
show: true, //显示
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([118, 30, 119, 32, 116, 35]),
width: 1, //线条粗细
material: Cesium.Color.RED, //线条材质
//clampToGround: true
}
}
//面
var addPolygon = {
id: 'polygon',
name: '面',
show: true,
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([118, 30, 119, 32, 116, 32, 116, 30]),
//outline: false,
material: Cesium.Color.RED.withAlpha(0.4),
}
}
//矩形
var addRectangle = {
id: 'rectangle',
name: '矩形',
show: true,
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(80.0, 30.0, 100.0, 35.0),
material: Cesium.Color.BLUE.withAlpha(0.5),
/* height:0,
outline: true,
outlineWidth:10,
outlineColor: Cesium.Color.BLUE */
}
}
//椭圆
var addEllipse = {
id: 'ellipse',
name: '椭圆',
show: true,
position: Cesium.Cartesian3.fromDegrees(103.0, 40.0),
ellipse: {
semiMinorAxis: 250000.0, //短半轴
semiMajorAxis: 400000.0, //长半轴
material: Cesium.Color.RED.withAlpha(0.5),
/* height:0,
outline: true,
outlineColor: Cesium.Color.RED */
}
}
//圆柱体
var addCylinder = {
id: 'cylinder',
name: '圆柱体',
show: true,
//圆柱体柱心所在的位置
position: Cesium.Cartesian3.fromDegrees(100.0, 40.0, 200000.0),
cylinder: {
length: 400000.0, //圆柱长度400000 这样柱心的高度刚好为 200000.0，能够保证圆柱体刚好贴地
topRadius: 200000.0, //顶面半径
bottomRadius: 200000.0, //底面半径
material: Cesium.Color.GREEN.withAlpha(0.6),
outline: false, // 圆柱体绘制外轮廓线
outlineColor: Cesium.Color.DARK_GREEN
}
}
//走廊 （建筑物或火车内的）通道，过道
var addCorridor = {
id: 'corridor',
name: '走廊',
show: true,
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
100.0, 40.0,
105.0, 40.0,
105.0, 35.0
]),
width: 100000.0, // 用于指定道路边缘之间的距离
material: Cesium.Color.YELLOW.withAlpha(0.5),
/* height:0,
outline: true, //外轮廓线
outlineColor: Cesium.Color.RED */
}
}
//墙
var addWall = {
id: 'wall',
name: '墙',
show: true,
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([ // 每两组坐标点位置可直接绘制成墙，故5个点可以产生四堵墙
107.0, 43.0, 200000.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
}
}
//方盒
var addBox = {
id: 'box',
name: '方盒',
show: true,
position: Cesium.Cartesian3.fromDegrees(110, 35, 200000.0), // 指定方盒中心点位置
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 400000.0), //指定框的长度，宽度和高度
material: Cesium.Color.BLUE
}
}
//球体
var addEllipsoid = {
id: 'ellipsoid',
name: '椭球体',
show: true,
position: Cesium.Cartesian3.fromDegrees(107.0, 40.0, 300000.0), // 椭球体中心点的位置
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0), //椭球的半径 X 轴半径、Y 轴半径、Z 轴半径
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true, // 用于指定是否勾勒出椭球体的外轮廓线
outlineColor: Cesium.Color.WHITE
}
}
// 模型
var heading = Cesium.Math.toRadians(60); //60度航向 0度是正东
var pitch = 0; //俯仰角
var roll = 0; //翻滚角
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var addModel = {
id: 'model', //id唯一
name: '小车模型', // 名称
show: true, //显示
position: Cesium.Cartesian3.fromDegrees(118, 30, 5000), // 小车位置
/**
* orientation，用于指定实体的方向，值是是四元数（Quaternion）类型的一组四维坐标
*
* 根据参考系计算四元数，其中参考系具有根据航向-俯仰-横滚角计算的轴以提供的原点为中心。
* 航向是从当地北部来的旋转正角向东增加的方向。俯仰是从本地东西向平面的旋转。正俯仰角在飞机上方。
* 负俯仰角在平面下方。横摇是绕局部东轴应用的第一次旋转
*
* Cesium.Cartesian3.fromDegrees(118, 30, 5000)是模型位置中心点
*/
orientation: Cesium.Transforms.headingPitchRollQuaternion(Cesium.Cartesian3.fromDegrees(118, 30, 5000),hpr), //小车方向
model: { // model 对象，用于描述模型
uri: './3D格式数据/glTF/CesiumMilkTruck.gltf',
minimumPixelSize: 300, //模型最小像素大小
maximumScale: 50000, //模型最大比例尺大小
//color: Cesium.Color.ORANGE, // 模型颜色
scale: 30000, //指定模型按照该比例进行加载
}
}
//广告牌
var addBillboard = {
id: 'billboard',
name: '广告牌',
show: true,
position: Cesium.Cartesian3.fromDegrees(108, 30, 50),
billboard: {
image: './RasterImage/图片/single.jpg',
scale: 0.1, //比例
}
}
var dropdown = document.getElementById('dropdown');
var dropdown2 = document.getElementById('dropdown2');
function addEntity() {
switch (dropdown.value) {
case 'addPoint':
viewer.entities.add(addPoint);
break;
case 'addLines':
viewer.entities.add(addLine);
break;
case 'addPolygon':
viewer.entities.add(addPolygon);
break;
case 'addRectangle':
viewer.entities.add(addRectangle);
break;
case 'addEllipse':
viewer.entities.add(addEllipse);
break;
case 'addCylinder':
viewer.entities.add(addCylinder);
break;
case 'addCorridor':
viewer.entities.add(addCorridor);
break;
case 'addWall':
viewer.entities.add(addWall);
break;
case 'addBox':
viewer.entities.add(addBox);
break;
case 'addEllipsoid':
viewer.entities.add(addEllipsoid);
break;
case 'addModel':
viewer.entities.add(addModel);
break;
case 'addBillboard':
viewer.entities.add(addBillboard);
break;
default:
break;
}
}
function removeEntity() {
switch (dropdown2.value) {
case 'removePoint':
viewer.entities.removeById("point");
break;
case 'removeLines':
viewer.entities.removeById("line");
break;
case 'removePolygon':
viewer.entities.removeById("polygon");
break;
case 'removeRectangle':
viewer.entities.removeById("rectangle");
break;
case 'removeEllipse':
viewer.entities.removeById("ellipse");
break;
case 'removeCylinder':
viewer.entities.removeById("cylinder");
break;
case 'removeCorridor':
viewer.entities.removeById("corridor");
break;
case 'removeWall':
viewer.entities.removeById("wall");
break;
case 'removeBox':
viewer.entities.removeById("box");
break;
case 'removeEllipsoid':
viewer.entities.removeById("ellipsoid");
break;
case 'removeModel':
viewer.entities.removeById("model");
break;
case 'removeBillboard':
viewer.entities.removeById("billboard");
break;
default:
break;
}
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手