diff --git "a/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/2_Cesium Entity\345\256\236\344\275\223/14_\347\273\230\345\210\266polyline\346\212\230\347\272\277.md" "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/2_Cesium Entity\345\256\236\344\275\223/14_\347\273\230\345\210\266polyline\346\212\230\347\272\277.md" index d8443462..e7ef7738 100644 --- "a/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/2_Cesium Entity\345\256\236\344\275\223/14_\347\273\230\345\210\266polyline\346\212\230\347\272\277.md" +++ "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/2_Cesium Entity\345\256\236\344\275\223/14_\347\273\230\345\210\266polyline\346\212\230\347\272\277.md" @@ -51,101 +51,6 @@ viewer.zoomTo(viewer.entities); | classificationType | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| [ClassificationType](https://staven630.github.io/cesium-doc-zh/global.html#ClassificationType) | <可选> | ClassificationType.BOTH | 指定此折线在地面上时是否对地形、3D 瓷砖或两者进行分类。 | | zIndex | [Property](https://staven630.github.io/cesium-doc-zh/Property.html) \| number | <可选> | 0 | 指定用于排序地面几何图形的 zIndex 的属性。仅当 `clampToGround` 为 true 并且支持地形上的折线时才有效。 | -## [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, - }), - }, -}); -``` - -![PolylineGlowMaterialProperty](../img/PolylineGlowMaterialProperty.png) - -## [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), - }, -}); -``` - -![PolylineArrowMaterialProperty](../img/PolylineArrowMaterialProperty.png) - -## [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, - }), - }, -}); -``` - -![PolylineOutlineMaterialProperty](../img/PolylineOutlineMaterialProperty.png) - -## [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 位模式 | - -![PolylineDashMaterialProperty](../img/PolylineDashMaterialProperty.png) - ## 示例 - [Cesium Sandcastle Polyline Demo](https://sandcastle.cesium.com/index.html?src=Polyline.html) diff --git "a/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/10_\346\235\220\350\264\250-Fabric.md" "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/10_\346\235\220\350\264\250-Fabric.md" new file mode 100644 index 00000000..83e3f8ea --- /dev/null +++ "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/10_\346\235\220\350\264\250-Fabric.md" @@ -0,0 +1 @@ +[Fabric](https://github.com/CesiumGS/cesium/wiki/Fabric) diff --git "a/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/5_\347\275\221\346\240\274\346\235\220\350\264\250GridMaterialProperty.md" "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/5_\347\275\221\346\240\274\346\235\220\350\264\250GridMaterialProperty.md" new file mode 100644 index 00000000..67e9937d --- /dev/null +++ "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/5_\347\275\221\346\240\274\346\235\220\350\264\250GridMaterialProperty.md" @@ -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) | 可选 | 指定的起始偏移的沿每个轴网格线。 | diff --git "a/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/6_\345\217\221\345\205\211\346\235\220\350\264\250PolylineGlowMaterialProperty.md" "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/6_\345\217\221\345\205\211\346\235\220\350\264\250PolylineGlowMaterialProperty.md" new file mode 100644 index 00000000..2bc4c0f3 --- /dev/null +++ "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/6_\345\217\221\345\205\211\346\235\220\350\264\250PolylineGlowMaterialProperty.md" @@ -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, + }), + }, +}); +``` + +![PolylineGlowMaterialProperty](../img/PolylineGlowMaterialProperty.png) diff --git "a/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/7_\350\275\256\345\273\223\347\272\277\346\235\220\350\264\250PolylineOutlineMaterialProperty.md" "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/7_\350\275\256\345\273\223\347\272\277\346\235\220\350\264\250PolylineOutlineMaterialProperty.md" new file mode 100644 index 00000000..76a9085f --- /dev/null +++ "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/7_\350\275\256\345\273\223\347\272\277\346\235\220\350\264\250PolylineOutlineMaterialProperty.md" @@ -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, + }), + }, +}); +``` + +![PolylineOutlineMaterialProperty](../img/PolylineOutlineMaterialProperty.png) diff --git "a/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/8_\347\256\255\345\244\264\346\235\220\350\264\250PolylineArrowMaterialProperty.md" "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/8_\347\256\255\345\244\264\346\235\220\350\264\250PolylineArrowMaterialProperty.md" new file mode 100644 index 00000000..c4de165b --- /dev/null +++ "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/8_\347\256\255\345\244\264\346\235\220\350\264\250PolylineArrowMaterialProperty.md" @@ -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), + }, +}); +``` + +![PolylineArrowMaterialProperty](../img/PolylineArrowMaterialProperty.png) diff --git "a/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/9_\350\231\232\347\272\277\346\235\220\350\264\250PolylineDashMaterialProperty.md" "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/9_\350\231\232\347\272\277\346\235\220\350\264\250PolylineDashMaterialProperty.md" new file mode 100644 index 00000000..091f3c18 --- /dev/null +++ "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/3_Cesium\346\235\220\350\264\250/9_\350\231\232\347\272\277\346\235\220\350\264\250PolylineDashMaterialProperty.md" @@ -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 位模式 | + +![PolylineDashMaterialProperty](../img/PolylineDashMaterialProperty.png) diff --git "a/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/\346\225\210\346\236\234/Cesium\345\234\260\347\220\203\350\207\252\350\275\254.md" "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/\346\225\210\346\236\234/Cesium\345\234\260\347\220\203\350\207\252\350\275\254.md" new file mode 100644 index 00000000..5b8c2be5 --- /dev/null +++ "b/md/\345\211\215\347\253\257\345\217\257\350\247\206\345\214\226/Cesium/\346\225\210\346\236\234/Cesium\345\234\260\347\220\203\350\207\252\350\275\254.md" @@ -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); +}; +```