cesium/Cesium-Examples
1
0
Fork 0
mirror of https://github.com/jiawanlong/Cesium-Examples.git synced 2025-07-04 15:17:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

更新打赏人，增加Material和MaterialProperty

Browse Source
This commit is contained in:
jiawanlong 2025-06-01 19:30:00 +08:00
parent a21162e879
commit 961fb0867c
18 changed files with 21908 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -74,6 +74,7 @@
| Ataraxia | 50 | 2025.05.04 |
| ytm | 20 | 2025.05.29 |
| INY | 20 | 2025.05.29 |
| 佚名（学生） | 6 | 2025.06.04 |
### 关于打赏
- 您的每一笔打赏，我都会原封不动以**您的名义**捐赠到腾讯公益。

BIN
donate/159861999120250604ETB8A7J1GI.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 383 KiB

1
donate/index.html
View File

@ -31,6 +31,7 @@
<img src="./159297686120250506EVCD8G5Z4W.jpg">
<img src="./159861999120250529EUI7XGCWRO.jpg">
<img src="./159309998120250529EWCAHGU9C8.jpg">
<img src="./159861999120250604ETB8A7J1GI.jpg">
</body>
</html>

BIN
donate/list1.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 294 KiB

After

Width:  |  Height:  |  Size: 293 KiB

7
examples/cesiumEx/2.3.8、Primitive.html
View File

@ -24,6 +24,13 @@
requestVertexNormals: true// 请求地形照明数据
});
// Primitive
// 1、GeometryInstance
// 2、Apperance
// 3、modelMatrix
// 开启帧率
viewer.scene.debugShowFramesPerSecond = true;

21
examples/cesiumEx/4.3.2、视频投射.html
View File

@ -10,6 +10,7 @@
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
<script src="./video.js"></script>
<script src="./turf.min.js"></script>
<script src="./hls.js"></script>
<script src="./lodash.min.js"></script>
<style>
#menu {
@ -35,8 +36,6 @@
<div id="menu">
</div>
<video id="video_dom" preload="auto" autoPlay loop>
<source src="./video.mp4" type="video/mp4" />
Your browser does not support the <code>video</code> element.
</video>
<!-- ./video.mp4 -->
<script type="text/javascript">
@ -50,21 +49,29 @@
viewer.scene.debugShowFramesPerSecond = true;
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(85.788705, 45.163394, 2000),
destination: Cesium.Cartesian3.fromDegrees(112.681287, 33.248737, 1300),
orientation: {
heading: Cesium.Math.toRadians(269.4), // 方向
pitch: Cesium.Math.toRadians(-29.0), // 俯仰角
roll: Cesium.Math.toRadians(0.0) // 翻滚角
}
});
var videoSrc = 'https://sqhls2.ys7.com:7989/v3/openlive/FX4619647_2_1.m3u8?expire=1778830562&id=844961679353290752&t=c843557c001d3a833dfb4f5ab347d319f3847d85b63fb1642bf52e754517a28a&ev=100&u=4bcf089e4d424b9583ac48430a7ef177';
var options = {
horizontalViewAngle: 60,
verticalViewAngle: 40,
video: "video_dom",
viewPosition: Cesium.Cartesian3.fromDegrees(85.788705, 45.161394, 900),
viewPositionEnd: Cesium.Cartesian3.fromDegrees(85.788705, 45.167394, 500),
viewPosition: Cesium.Cartesian3.fromDegrees(112.66669, 33.248659, 515),
viewPositionEnd: Cesium.Cartesian3.fromDegrees(112.659078,33.249035, 270),
};
v = new video(viewer, options);
v.drawVideo();
// 播放
video_dom.play();
switchSP();
// 暂停
// video_dom.pause();
@ -86,10 +93,12 @@
// 切换视频源
function switchSP() {
var videoSrc = '';
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video_dom);
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video_dom.play(); // 当解析完毕后开始播放
});
}
</script>

92
examples/cesiumEx/7.0.0、Material和MaterialProperty.html Normal file
View File

@ -0,0 +1,92 @@
<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
</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.eyJqdGkiOiIyNDMxOTA2NS1lY2Q3LTQ0YmUtOTE1Mi1iNWE2OGYwZjc0MjkiLCJpZCI6MjM1NjMwLCJpYXQiOjE3MzA3MjQzMTJ9.Xhu-9FyVEyqBKWEr0V9Sybt-elTCWHt9peL9-mNh-4E'
const viewer = new Cesium.Viewer('map', {});
// Entity -> MaterialProperty
// Primitive -> appearance(Material)
// 1、Material类专为Appearance类而生，用于修改Primitive的几何对象材质。
// 2、MaterialProperty类专为Entity类而生，用于修改Entity的几何对象材质。
// -------------------------------------------------------------------Material----------------------------------------------------------------------
// 使用Fabric JSON定义材质
const material = new Cesium.Material({
fabric: {
type: "Color", // 内置材质类型
uniforms: {
color: new Cesium.Color(1.0, 1.0, 0.0, 1.0) // 黄色
}
}
});
// 或使用内置简写
// const material = Cesium.Material.fromType("Color", {
// color: Cesium.Color.RED
// });
const primitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance(
{
id: 'polygon',
geometry: new Cesium.PolygonGeometry({
polygonHierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([
-115.0, 37.0,
-115.0, 32.0,
-102.0, 31.0,
-102.0, 35.0
])
),
})
}
),
appearance: new Cesium.MaterialAppearance({
material: material
})
});
viewer.scene.primitives.add(primitive);
// -------------------------------------------------------------------Material----------------------------------------------------------------------
// -------------------------------------------------------------------MaterialProperty----------------------------------------------------------------------
let entity = viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-108.0,
42.0,
-100.0,
42.0,
-104.0,
40.0,
]),
}
});
entity.polygon.material = new Cesium.ImageMaterialProperty({
image: './icon.png',
repeat: new Cesium.Cartesian2(10, 5),
transparent: true
});
// -------------------------------------------------------------------MaterialProperty----------------------------------------------------------------------
</script>
</body>
</html>

77
examples/cesiumEx/7.3.1、polygon.html Normal file
View File

@ -0,0 +1,77 @@
<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
</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.eyJqdGkiOiIyNDMxOTA2NS1lY2Q3LTQ0YmUtOTE1Mi1iNWE2OGYwZjc0MjkiLCJpZCI6MjM1NjMwLCJpYXQiOjE3MzA3MjQzMTJ9.Xhu-9FyVEyqBKWEr0V9Sybt-elTCWHt9peL9-mNh-4E'
const viewer = new Cesium.Viewer('map', {});
let entity = viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-115.0,
37.0,
-115.0,
32.0,
-102.0,
31.0,
-102.0,
35.0,
]),
}
});
let polygon = entity.polygon;
// 1、ColorMaterialProperty --颜色材质
// polygon.material = Cesium.Color.RED;
// 2、ImageMaterialProperty --图片材质
// polygon.material = new Cesium.ImageMaterialProperty({
// image: './icon.png',
// repeat: new Cesium.Cartesian2(10,5),
// transparent: true
// });
// 3、GridMaterialProperty --网格材质
// polygon.material = new Cesium.GridMaterialProperty({
// color: Cesium.Color.BLUE,
// cellAlpha: 0.1,
// lineCount: new Cesium.Cartesian2(8, 8),
// lineThickness: new Cesium.Cartesian2(1.0, 1.0),
// lineOffset: new Cesium.Cartesian2(0.0, 0.0),
// })
// 4、StripeMaterialProperty --条纹材质
// polygon.material = new Cesium.StripeMaterialProperty({
// evenColor: Cesium.Color.WHITE,
// oddColor: Cesium.Color.RED,
// repeat: 32,
// offset: 20,
// orientation: Cesium.StripeOrientation.VERTICAL,
// });
// 5、CheckerboardMaterialProperty --棋盘格材质
// polygon.material = new Cesium.CheckerboardMaterialProperty({
// evenColor: Cesium.Color.WHITE,
// oddColor: Cesium.Color.BLUE,
// repeat: new Cesium.Cartesian2(10, 10),
// });
</script>
</body>
</html>

57
examples/cesiumEx/7.3.2、polyline.html Normal file
View File

@ -0,0 +1,57 @@
<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
</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.eyJqdGkiOiIyNDMxOTA2NS1lY2Q3LTQ0YmUtOTE1Mi1iNWE2OGYwZjc0MjkiLCJpZCI6MjM1NjMwLCJpYXQiOjE3MzA3MjQzMTJ9.Xhu-9FyVEyqBKWEr0V9Sybt-elTCWHt9peL9-mNh-4E'
const viewer = new Cesium.Viewer('map', {});
// 贴地
var entity = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-77, 35, -80, 35, -90, 45]),
width: 3,
clampToGround: true,//贴地画线
}
});
let polyline = entity.polyline;
// 1、PolylineDashMaterialProperty --虚线材质
// polyline.material = new Cesium.PolylineDashMaterialProperty({
// color: Cesium.Color.CYAN,
// });
// 2、 // PolylineGlowMaterialProperty --发光材质
// polyline.material = new Cesium.PolylineGlowMaterialProperty({
// glowPower: 0.8,
// taperPower: 0.5,
// color: Cesium.Color.CYAN,
// });
// 3、PolylineOutlineMaterialProperty --描边材质
polyline.material = new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.CYAN,
outlineColor: Cesium.Color.RED,
outlineWidth: 2
});
// 4、PolylineArrowMaterialProperty --箭头材质
// polyline.material = new Cesium.PolylineArrowMaterialProperty(Cesium.Color.CYAN);
</script>
</body>
</html>

64
examples/cesiumEx/7.4.1、polygon.html Normal file
View File

@ -0,0 +1,64 @@
<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
</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.eyJqdGkiOiIyNDMxOTA2NS1lY2Q3LTQ0YmUtOTE1Mi1iNWE2OGYwZjc0MjkiLCJpZCI6MjM1NjMwLCJpYXQiOjE3MzA3MjQzMTJ9.Xhu-9FyVEyqBKWEr0V9Sybt-elTCWHt9peL9-mNh-4E'
const viewer = new Cesium.Viewer('map', {});
// -------------------------------------------------------------------Material----------------------------------------------------------------------
// 使用Fabric JSON定义材质
const material = new Cesium.Material({
fabric: {
type: "Color", // 内置材质类型
uniforms: {
color: new Cesium.Color(1.0, 1.0, 0.0, 1.0) // 黄色
}
}
});
// 或使用内置简写
// const material = Cesium.Material.fromType("Color", {
// color: Cesium.Color.RED
// });
const primitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance(
{
id: 'polygon',
geometry: new Cesium.PolygonGeometry({
polygonHierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([
-115.0, 37.0,
-115.0, 32.0,
-102.0, 31.0,
-102.0, 35.0
])
),
})
}
),
appearance: new Cesium.MaterialAppearance({
material: material
})
});
viewer.scene.primitives.add(primitive);
// -------------------------------------------------------------------Material----------------------------------------------------------------------
</script>
</body>
</html>

46
examples/cesiumEx/config.js
View File

@ -841,8 +841,8 @@ var exampleConfig = {
fileName: "4.3.1、视频纹理"
},
{
name: "4.3.2、视频投射",
name_en: "4.3.2、视频投射",
name: "4.3.2、视频投射(直播流)",
name_en: "4.3.2、视频投射(直播流)",
thumbnail: "4.3.2、视频投射.jpg",
fileName: "4.3.2、视频投射"
},
@ -1108,6 +1108,18 @@ var exampleConfig = {
name: "7、材质",
name_en: "7、材质",
content: {
"map12211787831": {
name: "7.0、必读",
name_en: "7.0、必读",
content: [
{
name: "7.0.0、Material和MaterialProperty",
name_en: "7.0.0、Material和MaterialProperty",
thumbnail: "7.0.0、Material和MaterialProperty.jpg",
fileName: "7.0.0、Material和MaterialProperty",
},
]
},
"map1322345511": {
name: "7.1、材质",
name_en: "7.1、材质",
@ -1192,6 +1204,36 @@ var exampleConfig = {
},
]
},
"map132233232333231": {
name: "7.3、MaterialProperty类",
name_en: "7.3、MaterialProperty类",
content: [
{
name: "7.3.1、polygon",
name_en: "7.3.1、polygon",
thumbnail: "7.3.1、polygon.jpg",
fileName: "7.3.1、polygon"
},
{
name: "7.3.2、polyline",
name_en: "7.3.、polyline",
thumbnail: "7.3.2、polyline.jpg",
fileName: "7.3.2、polyline"
},
]
},
"map132878787831": {
name: "7.4、Material类",
name_en: "7.4、Material类",
content: [
{
name: "7.4.1、polygon",
name_en: "7.4.1、polygon",
thumbnail: "7.4.1、polygon.jpg",
fileName: "7.4.1、polygon"
},
]
},
}
},
"viz": {

21550
examples/cesiumEx/hls.js Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
examples/cesiumEx/img/4.3.2、视频投射.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
examples/cesiumEx/img/5.3.3、移动的视锥体.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
examples/cesiumEx/img/7.0.0、Material和MaterialProperty.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
examples/cesiumEx/img/7.3.1、polygon.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
examples/cesiumEx/img/7.3.2、polyline.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
examples/cesiumEx/img/7.4.1、polygon.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB