forked from staven630/blog
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
206 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| [Fabric](https://github.com/CesiumGS/cesium/wiki/Fabric) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| ## 网格材质[GridMaterialProperty](https://staven630.github.io/cesium-doc-zh/GridMaterialProperty.html) | ||
|
|
||
| | 名称 | 类型 | 默认值 | 是否可选 | 描述 | | ||
| | :------------ | :--------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------- | :------- | -------------------------------- | | ||
| | color | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| [Color](https://staven630.github.io/cesium-doc-zh/Color.html) | Color.WHITE | 可选 | 指定网格的 Color 属性。 | | ||
| | cellAlpha | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| Number | 0.1 | 可选 | 指定单元格 alpha 值得数字属性 | | ||
| | lineCount | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| [Cartesian2](https://staven630.github.io/cesium-doc-zh/Cartesian2.html) | new Cartesian(8, 8) | 可选 | 指定沿每个轴网格线的数量。 | | ||
| | lineThickness | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| [Cartesian2](https://staven630.github.io/cesium-doc-zh/Cartesian2.html) | new Cartesian(1.0, 1.0) | 可选 | 指定沿每个轴网格线的厚度。 | | ||
| | lineOffset | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| [Cartesian2](https://staven630.github.io/cesium-doc-zh/Cartesian2.html) | new Cartesian(0.0, 0.0) | 可选 | 指定的起始偏移的沿每个轴网格线。 | |
24 changes: 24 additions & 0 deletions
24
md/前端可视化/Cesium/3_Cesium材质/6_发光材质PolylineGlowMaterialProperty.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| ## 发光折线材质[PolylineGlowMaterialProperty](https://staven630.github.io/cesium-doc-zh/PolylineGlowMaterialProperty.html) | ||
|
|
||
| | 名称 | 类型 | 是否必填 | 默认值 | 描述 | | ||
| | :--------- | :----------------------------------------------------------------------------------------------------------------------------------- | :------- | :---------- | :-------------------------------------------------------------------------------- | | ||
| | color | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| [Color](https://staven630.github.io/cesium-doc-zh/Color.html) | 可选 | Color.WHITE | 用于线的 Color 属性。 | | ||
| | glowPower | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| Number | 可选 | 0.25 | 指定发光强度，作为总线宽的百分比 | | ||
| | taperPower | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| Number | 可选 | 1.0 | 指定锥形效果的强度，以总线条长度的百分比表示。如果 1.0 或更高，则不使用锥形效果。 | | ||
|
|
||
| ```js | ||
| const glowingLine = viewer.entities.add({ | ||
| name: "GlowingLine", | ||
| polyline: { | ||
| positions: Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]), | ||
| width: 10, | ||
| material: new Cesium.PolylineGlowMaterialProperty({ | ||
| glowPower: 0.2, | ||
| taperPower: 0.5, | ||
| color: Cesium.Color.CORNFLOWERBLUE, | ||
| }), | ||
| }, | ||
| }); | ||
| ``` | ||
|
|
||
|  |
31 changes: 31 additions & 0 deletions
31
md/前端可视化/Cesium/3_Cesium材质/7_轮廓线材质PolylineOutlineMaterialProperty.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| ## 轮廓线材质[PolylineOutlineMaterialProperty](https://staven630.github.io/cesium-doc-zh/PolylineOutlineMaterialProperty.html) | ||
|
|
||
| | 名称 | 类型 | 是否必填 | 默认值 | 描述 | | ||
| | :----------- | :----------------------------------------------------------------------------------------------------------------------------------- | :------- | :---------- | :----------------------------- | | ||
| | color | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| [Color](https://staven630.github.io/cesium-doc-zh/Color.html) | 可选 | Color.WHITE | 用于线的 Color 属性。 | | ||
| | outlineColor | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| [Color](https://staven630.github.io/cesium-doc-zh/Color.html) | 可选 | 1.0 | 指定轮廓的 color 属性 | | ||
| | outlineWidth | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| Number | 可选 | 1.0 | 指定轮廓的宽度（以像素为单位） | | ||
|
|
||
| ```js | ||
| const orangeOutlined = viewer.entities.add({ | ||
| name: "OrangeLine", | ||
| polyline: { | ||
| positions: Cesium.Cartesian3.fromDegreesArrayHeights([ | ||
| -75, | ||
| 39, | ||
| 250000, | ||
| -125, | ||
| 39, | ||
| 250000, | ||
| ]), | ||
| width: 5, | ||
| material: new Cesium.PolylineOutlineMaterialProperty({ | ||
| color: Cesium.Color.ORANGE, | ||
| outlineWidth: 2, | ||
| outlineColor: Cesium.Color.BLACK, | ||
| }), | ||
| }, | ||
| }); | ||
| ``` | ||
|
|
||
|  |
26 changes: 26 additions & 0 deletions
26
md/前端可视化/Cesium/3_Cesium材质/8_箭头材质PolylineArrowMaterialProperty.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| ## 箭头材质[PolylineArrowMaterialProperty](https://staven630.github.io/cesium-doc-zh/PolylineArrowMaterialProperty.html) | ||
|
|
||
| | 名称 | 类型 | 是否必填 | 默认值 | 描述 | | ||
| | :---- | :----------------------------------------------------------------------------------------------------------------------------------- | :------- | :---------- | :-------------------- | | ||
| | color | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| [Color](https://staven630.github.io/cesium-doc-zh/Color.html) | 可选 | Color.WHITE | 用于线的 Color 属性。 | | ||
|
|
||
| ```js | ||
| const purpleArrow = viewer.entities.add({ | ||
| name: "PurpleArrow", | ||
| polyline: { | ||
| positions: Cesium.Cartesian3.fromDegreesArrayHeights([ | ||
| -75, | ||
| 43, | ||
| 500000, | ||
| -125, | ||
| 43, | ||
| 500000, | ||
| ]), | ||
| width: 10, | ||
| arcType: Cesium.ArcType.NONE, | ||
| material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE), | ||
| }, | ||
| }); | ||
| ``` | ||
|
|
||
|  |
10 changes: 10 additions & 0 deletions
10
md/前端可视化/Cesium/3_Cesium材质/9_虚线材质PolylineDashMaterialProperty.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| ## 虚线材质：[PolylineDashMaterialProperty](https://staven630.github.io/cesium-doc-zh/PolylineDashMaterialProperty.html) | ||
|
|
||
| | 名称 | 类型 | 是否必填 | 默认值 | 描述 | | ||
| | :---------- | :----------------------------------------------------------------------------------------------------------------------------------- | :------- | :---------- | :--------------------------------------- | | ||
| | color | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| [Color](https://staven630.github.io/cesium-doc-zh/Color.html) | 可选 | Color.WHITE | 用于线的 Color 属性。 | | ||
| | gapColor | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| [Color](https://staven630.github.io/cesium-doc-zh/Color.html) | 可选 | 1.0 | 指定间隙的颜色 | | ||
| | dashLength | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| Number | 可选 | 16.0 | 以像素为单位指定虚线图案长度的数字属性。 | | ||
| | dashPattern | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| Number | 可选 | 255.0 | 用于指定破折号的 16 位模式 | | ||
|
|
||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| > autoRotation.js | ||
| ```js | ||
| import * as Cesium from "cesium"; | ||
|
|
||
| export const generateAutoRotationCallback = (viewer, prev) => () => { | ||
| const { camera, clock, scene } = viewer; | ||
| if (!viewer || !clock.shouldAnimate) { | ||
| return; | ||
| } | ||
| prev = prev || clock.currentTime; | ||
| const { currentTime } = clock; | ||
| // 算出前后两次的时间间隔 | ||
| if (scene.mode === Cesium.SceneMode.SCENE2D) { | ||
| // 获取相机高度 | ||
| const { height } = scene.globe.ellipsoid.cartesianToCartographic( | ||
| camera.position | ||
| ); | ||
| // 根据高度、地球半径等参数，计算出每秒钟相机需要平移的值 | ||
| const a = (465.2 / (6371 * 1000)) * (height + 6371 * 1000); | ||
| const interval = | ||
| Cesium.JulianDate.toDate(currentTime) - Cesium.JulianDate.toDate(prev); | ||
| // 调用api平移镜头 | ||
| camera.moveLeft((interval * a) / 1000); | ||
| } else if (scene.mode === Cesium.SceneMode.SCENE3D) { | ||
| const interval = | ||
| Cesium.JulianDate.toDate(currentTime) - Cesium.JulianDate.toDate(prev); | ||
| camera.rotate( | ||
| Cesium.Cartesian3.UNIT_Z, | ||
| (Math.PI / (24 * 60 * 60)) * (interval / 1000) | ||
| ); | ||
| } | ||
| prev = currentTime; | ||
| }; | ||
|
|
||
| export const generate2DAutoRotationCallback = (viewer, prev) => () => { | ||
| const { camera, clock, scene } = viewer; | ||
|
|
||
| if ( | ||
| !viewer || | ||
| scene.mode !== Cesium.SceneMode.SCENE2D || | ||
| !clock.shouldAnimate | ||
| ) { | ||
| return; | ||
| } | ||
|
|
||
| prev = prev || clock.currentTime; | ||
|
|
||
| // 获取相机高度 | ||
| const { height } = scene.globe.ellipsoid.cartesianToCartographic( | ||
| camera.position | ||
| ); | ||
| // 根据高度、地球半径等参数，计算出每秒钟相机需要平移的值 | ||
| const a = (465.2 / (6371 * 1000)) * (height + 6371 * 1000); | ||
| const { currentTime } = clock; | ||
| // 算出前后两次的时间间隔 | ||
| const interval = | ||
| Cesium.JulianDate.toDate(currentTime) - Cesium.JulianDate.toDate(prev); | ||
| prev = currentTime; | ||
| // 调用api平移镜头 | ||
| camera.moveLeft((interval * a) / 1000); | ||
| prev = clock.currentTime; | ||
| }; | ||
|
|
||
| export const generate3DAutoRotationCallback = (viewer, prev) => () => { | ||
| const { camera, clock, scene } = viewer; | ||
|
|
||
| if ( | ||
| !viewer || | ||
| scene.mode !== Cesium.SceneMode.SCENE3D || | ||
| !clock.shouldAnimate | ||
| ) { | ||
| return; | ||
| } | ||
|
|
||
| prev = prev || clock.currentTime; | ||
| const { currentTime } = clock; | ||
| const interval = | ||
| Cesium.JulianDate.toDate(currentTime) - Cesium.JulianDate.toDate(prev); | ||
| prev = currentTime; | ||
|
|
||
| camera.rotate( | ||
| Cesium.Cartesian3.UNIT_Z, | ||
| (Math.PI / (24 * 60 * 60)) * (interval / 1000) | ||
| ); | ||
| prev = clock.currentTime; | ||
| }; | ||
|
|
||
| // options可以设置时钟的一些参数，比如自转开始的时间，自转的速度等 | ||
| export const startAutoRotation = (viewer, cb, options = { multiplier: 1 }) => { | ||
| stopAutoRotation(viewer, cb); | ||
| viewer.scene.postUpdate.addEventListener(cb); | ||
| if (viewer.clock) { | ||
| const keys = Object.keys(options); | ||
| for (const k of keys) { | ||
| viewer.clock[k] = options[k]; | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| export const stopAutoRotation = function(viewer, cb) { | ||
| if (!viewer) return; | ||
| viewer.scene.postUpdate.removeEventListener(cb); | ||
| }; | ||
| ``` |