Cesium 绘制对象Entity
2020-10-20 本文已影响0人
MaJiT
<!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, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>添加点，线，圆，多边形，飞机，广告牌，方盒，球体，圆柱，圆柱，管道，围墙等以及模型的添加，删除</title>
<script src="Cesium/Cesium.js"></script>
<link rel="stylesheet" href="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;
}
.btnDiv{
position: absolute;
top: 0;
}
.btnDiv2{
position: absolute;
top: 50px;
}
.btnAddClass,.btnClass{
width: 100px;
height: 40px;
float: left;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div class="btnDiv">
<button id="add-point" class="btnAddClass">添加点</button>
<button id="add-lines" class="btnAddClass">添加线</button>
<button id="add-polygon" class="btnAddClass">添加面</button>
<button id="add-imgaes" class="btnAddClass">添加圆</button>
<button id="add-Models" class="btnAddClass">添加模型</button>
<button id="add-boxs" class="btnAddClass">添加物体</button>
</div>
<div class="btnDiv2">
<button id="remove-point" class="btnClass">删除点</button>
<button id="remove-lines" class="btnClass">删除线</button>
<button id="remove-polygon" class="btnClass">删除面</button>
<button id="remove-imgaes" class="btnClass">删除圆</button>
<button id="remove-Models" class="btnClass">删除模型</button>
<button id="remove-boxs" class="btnClass">删除物体</button>
</div>
</body>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer'
})
});
//去掉版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";
//point-dataSources
var pointLayer = new Cesium.CustomDataSource("pointLayer");
//lines-dataSources
var linesLayer = new Cesium.CustomDataSource("linesLayer");
//polygon-dataSources
var polygonLayer = new Cesium.CustomDataSource("polygonLayer");
//imgaes-dataSources
var imgaesLayer = new Cesium.CustomDataSource("imgaesLayer");
//Models-dataSources
var ModelsLayer = new Cesium.CustomDataSource("ModelsLayer");
//boxs-dataSources 方盒，圆柱，圆锥，围墙，管道等
var boxLayer = new Cesium.CustomDataSource("boxLayer");
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(118, 30, 6000000),
orientation: {
heading: 0.010152402293521767,
pitch: -1.5705337480193866,
roll: 0.00003681052934645379
},
})
// 点
pointLayer.entities.add({
id:'点',
name:'蓝点',
show: true, //显示.
position: Cesium.Cartesian3.fromDegrees(118, 30, 0.0),
point: {
color: Cesium.Color.BLUE, //颜色
pixelSize: 5,//点大小
}
});
// 线
var linePoint = [118, 30, 119, 32];
linesLayer.entities.add({
id: 'line',
show: true, //显示
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray(linePoint),
width: 1, //线条粗细
followSurface: false, //取消弯曲
material: Cesium.Color.YELLOW, //线条材质
clampToGround: true
},
label: {
text: '超完美线条', //文本
show: true, // 默认显示
font: '12pt Source Han Sans CN', //字体样式
fillColor: Cesium.Color.GOLD, //字体颜色
backgroundColor: Cesium.Color.AQUA, //背景颜色
//showBackground:true, //是否显示背景颜色
style: Cesium.LabelStyle.FILL, //label样式
outlineWidth: 1,
verticalOrigin: Cesium.VerticalOrigin.CENTER,//垂直位置
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
pixelOffset: new Cesium.Cartesian2(5, 0) //偏移
}
});
//圆-图片
var imgaes = 'data/circle.png'
imgaesLayer.entities.add({
description: "椭圆", //描述
position: Cesium.Cartesian3.fromDegrees(118, 30, 0),
show: true,
ellipse: {
semiMinorAxis: 100000,
semiMajorAxis: 100000,
height: 10,
//rotation : Cesium.Math.toRadians(45),//旋转角
material: new Cesium.ImageMaterialProperty({
image: imgaes,
//指定图像在每个方向上重复的次数,默认为Cesium.Cartesian2(1.0, 1.0),{Cartesian2}类型
repeat: Cesium.Cartesian2(1.0, 1.0),
// 默认为false，当图像具有透明性时设置为true（例如，当png具有透明部分时）
transparent: true,
color: Cesium.Color.WHITE.withAlpha(0.5), //透明度0.5
})
}
});
//圆-绘制
imgaesLayer.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: 20000.0,
material: Cesium.Color.GREEN
}
});
//椭圆-绘制
imgaesLayer.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 list = [118, 30, 119, 32,116,32];
polygonLayer.entities.add({
name: '多边形',
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray(list),
outline: false,
perPositionHeight: true, //允许三角形使用点的高度
material: Cesium.Color.RED.withAlpha(0.4),
}
});
//矩形
polygonLayer.entities.add({
name: 'Red translucent rectangle with outline',
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(80.0, 20.0, 110.0, 25.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.RED
}
});
//多边形坐标
var list2 = [118, 30, 119, 32,116,32,116,30];
polygonLayer.entities.add({
name: '多边形2',
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray(list2),
outline: false,
perPositionHeight: true, //允许三角形使用点的高度
material: Cesium.Color.RED.withAlpha(0.4),
}
});
//通道面
polygonLayer.entities.add({
name: 'Red corridor on surface with rounded corners and outline',
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),
outline: true,
outlineColor: Cesium.Color.RED
}
});
//方盒
boxLayer.entities.add({
name: 'Blue box',
position: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE
}
});
//圆柱
boxLayer.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.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.DARK_GREEN
}
});
//圆锥
boxLayer.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
}
});
//管道折线体
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;
}
boxLayer.entities.add({
name: 'Red tube with rounded corners',
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
}
});
//球体
boxLayer.entities.add({
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
}
});
//椭球体
boxLayer.entities.add({
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
}
});
//墙体
boxLayer.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
}
});
// 飞机模型
var url = 'data/Cesium_Air.gltf';
var heading = Cesium.Math.toRadians(60); //60度航向
var pitch = 0;
var roll = 0;
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var positions = Cesium.Cartesian3.fromDegrees(118, 30, 5000);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(positions, hpr);
ModelsLayer.entities.add({
name: '飞机', // 名称
show: true, //显示
id: '飞机', //id唯一
position: positions, // 飞机位置
orientation: orientation, //飞机航向
model: {
uri: url,
minimumPixelSize: 30, //模型最小
maximumScale: 5000, //模型最大
color: Cesium.Color.ORANGE, // 模型颜色
scale: 500, //当前比例
}
});
//广告牌
ModelsLayer.entities.add({
show: true,
id: '广告',
position: Cesium.Cartesian3.fromDegrees(118, 30, 50),
billboard: {
image: 'data/wall.png',
scale: 0.08, //比例
color: Cesium.Color.WHITE.withAlpha(0.8)
}
});
$('.btnClass').on("click",function(e){
switch (e.target.id){
case 'remove-point':
viewer.dataSources.remove(pointLayer);
break;
case 'remove-lines':
viewer.dataSources.remove(linesLayer);
break;
case 'remove-polygon':
viewer.dataSources.remove(polygonLayer);
break;
case 'remove-imgaes':
viewer.dataSources.remove(imgaesLayer);
break;
case 'remove-Models':
viewer.dataSources.remove(ModelsLayer);
break;
case 'remove-boxs':
viewer.dataSources.remove(boxLayer);
break;
default:
break;
}
})
$('.btnAddClass').on("click",function(e){
switch (e.target.id){
case 'add-point':
viewer.dataSources.add(pointLayer);
break;
case 'add-lines':
viewer.dataSources.add(linesLayer);
break;
case 'add-polygon':
viewer.dataSources.add(polygonLayer);
break;
case 'add-imgaes':
viewer.dataSources.add(imgaesLayer);
break;
case 'add-Models':
viewer.dataSources.add(ModelsLayer);
break;
case 'add-boxs':
viewer.dataSources.add(boxLayer);
break;
default:
break;
}
})
</script>
</html>
