mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-11-03 16:54:16 +00:00
238 lines
6.4 KiB
HTML
238 lines
6.4 KiB
HTML
<!--********************************************************************
|
||
* by jiawanlong
|
||
*********************************************************************-->
|
||
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css" />
|
||
<script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body style="
|
||
margin: 0;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
">
|
||
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
|
||
<script type="text/javascript">
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M";
|
||
const viewer = new Cesium.Viewer("map", {});
|
||
viewer.scene.debugShowFramesPerSecond = true;
|
||
|
||
// 单点
|
||
viewer.entities.add({
|
||
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
|
||
point: {
|
||
pixelSize: 10,
|
||
color: Cesium.Color.YELLOW
|
||
}
|
||
});
|
||
|
||
// polyline - 线
|
||
viewer.entities.add({
|
||
name: 'Red line on the surface',
|
||
polyline: {
|
||
positions: Cesium.Cartesian3.fromDegreesArray([
|
||
75, 35,
|
||
125, 35
|
||
]),
|
||
width: 5,
|
||
material: Cesium.Color.RED
|
||
}
|
||
});
|
||
|
||
// polylineVolume - 折线
|
||
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;
|
||
}
|
||
viewer.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
|
||
}
|
||
});
|
||
|
||
// Polygon - 面
|
||
viewer.entities.add({
|
||
name: 'Red polygon on surface',
|
||
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
|
||
}
|
||
});
|
||
|
||
// Circle - 圆
|
||
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, // 单色
|
||
// material: Cesium.Color.RED.withAlpha(0.5), // 透明色
|
||
// material: "./sampledata/images/globe.jpg", // 图片
|
||
fill: true,
|
||
outline: true, // 必须设置height，否则ouline无法显示
|
||
outlineColor: Cesium.Color.BLUE.withAlpha(0.5),
|
||
outlineWidth: 10.0 // 不能设置，固定为1
|
||
}
|
||
});
|
||
|
||
// box - 盒子
|
||
viewer.entities.add({
|
||
name: 'Blue box',
|
||
position: Cesium.Cartesian3.fromDegrees(homePOsition[0], homePOsition[1], 0),
|
||
box: {
|
||
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
|
||
material: Cesium.Color.BLUE
|
||
}
|
||
});
|
||
|
||
// Ellipse - 椭圆
|
||
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
|
||
}
|
||
});
|
||
|
||
// Corridor - 走廊
|
||
viewer.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
|
||
}
|
||
});
|
||
|
||
// Cylinder - 圆柱
|
||
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.withAlpha(0.5),
|
||
outline: true,
|
||
outlineColor: Cesium.Color.DARK_GREEN
|
||
}
|
||
});
|
||
|
||
// Cone - 圆锥
|
||
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
|
||
}
|
||
});
|
||
|
||
// rectangle - 矩形
|
||
viewer.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
|
||
}
|
||
});
|
||
|
||
// Sphere - 球体
|
||
viewer.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
|
||
}
|
||
});
|
||
|
||
// ellipsoid - 椭球体
|
||
viewer.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
|
||
}
|
||
});
|
||
|
||
// wall - 墙
|
||
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
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |