mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-07-04 15:17:36 +00:00
更新打赏人，增加Material和MaterialProperty
This commit is contained in:
jiawanlong
parent
a21162e879
commit
961fb0867c
@ -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
BIN
donate/159861999120250604ETB8A7J1GI.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 383 KiB |
@ -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
BIN
donate/list1.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 294 KiB After Width: | Height: | Size: 293 KiB |
@ -24,6 +24,13 @@
|
||||
requestVertexNormals: true// 请求地形照明数据
|
||||
});
|
||||
|
||||
|
||||
// Primitive
|
||||
// 1、GeometryInstance
|
||||
// 2、Apperance
|
||||
// 3、modelMatrix
|
||||
|
||||
|
||||
// 开启帧率
|
||||
viewer.scene.debugShowFramesPerSecond = true;
|
||||
|
||||
|
||||
@ -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
92
examples/cesiumEx/7.0.0、Material和MaterialProperty.html
Normal 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
77
examples/cesiumEx/7.3.1、polygon.html
Normal 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
57
examples/cesiumEx/7.3.2、polyline.html
Normal 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
64
examples/cesiumEx/7.4.1、polygon.html
Normal 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>
|
||||
@ -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
21550
examples/cesiumEx/hls.js
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 11 KiB |
BIN
examples/cesiumEx/img/5.3.3、移动的视锥体.jpg
Normal file
BIN
examples/cesiumEx/img/5.3.3、移动的视锥体.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
examples/cesiumEx/img/7.0.0、Material和MaterialProperty.jpg
Normal file
BIN
examples/cesiumEx/img/7.0.0、Material和MaterialProperty.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
examples/cesiumEx/img/7.3.1、polygon.jpg
Normal file
BIN
examples/cesiumEx/img/7.3.1、polygon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
examples/cesiumEx/img/7.3.2、polyline.jpg
Normal file
BIN
examples/cesiumEx/img/7.3.2、polyline.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
examples/cesiumEx/img/7.4.1、polygon.jpg
Normal file
BIN
examples/cesiumEx/img/7.4.1、polygon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Loading…
Reference in New Issue
Block a user