diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 1af69458..3bf907c7 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -8,22 +8,22 @@ _2024-02-29_ - Added formatting functions to the `vc-measurements` component for measurement results. `distanceFormatter`, `areaFormatter`, `angleFormatter`. - Adapt for compatibility with dc-sdk version 3.x. +- Added custom material `VcLineTrail`. #### Bug fixes - Fixed the issue that parameter configuration of areaMeasurementOpts in the vc-measurements component, setting both showAngleLabel and showDistanceLabel to false, results in an error.[#518](https://github.com/zouyaoji/vue-cesium/issues/518) - Fixed the issue that Cesium.VERSION being undefined, causing an error. - ### 3.2.5 _2023-12-27_ #### Bug fixes - - The browser crash issue occurs when using `ref` or `reactive` to wrap the `hierarchy` prop in the `vc-graphics-polygon` component. - - In native Cesium, there is an error when loading SuperMap iServer map services using `vc-provider-imagery-supermap`. - - Fixed the issue of consecutive mouse clicks not taking effect in the `vc-navigation-sm` component. **[Removed the functionality of double-clicking the outer dial to realign with the north direction]** +- The browser crash issue occurs when using `ref` or `reactive` to wrap the `hierarchy` prop in the `vc-graphics-polygon` component. +- In native Cesium, there is an error when loading SuperMap iServer map services using `vc-provider-imagery-supermap`. +- Fixed the issue of consecutive mouse clicks not taking effect in the `vc-navigation-sm` component. **[Removed the functionality of double-clicking the outer dial to realign with the north direction]** ### 3.2.4 @@ -31,7 +31,7 @@ _2023-10-23_ #### Bug fixes - - The npm release for version 3.2.3 has an error. +- The npm release for version 3.2.3 has an error. ### 3.2.3 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index c3714207..fc7f6ef6 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -8,6 +8,7 @@ _2024-02-29_ - `vc-measurements` 组件为量算结果添加格式化函数。`distanceFormatter`、`areaFormatter`、`angleFormatter`。 - 适配 `dc-sdk` 3.x 版本。 +- 添加 `VcLineTrail` 自定义材质。 #### Bug 修复 diff --git a/packages/shared/extends/materials/MaterialExtend.ts b/packages/shared/extends/materials/MaterialExtend.ts index 828c4067..ec54d2b4 100644 --- a/packages/shared/extends/materials/MaterialExtend.ts +++ b/packages/shared/extends/materials/MaterialExtend.ts @@ -3,11 +3,11 @@ * @Date: 2023-08-18 00:56:13 * @Description: Do not edit * @LastEditors: zouyaoji 370681295@qq.com - * @LastEditTime: 2023-12-06 15:54:24 + * @LastEditTime: 2024-02-29 00:41:04 * @FilePath: \vue-cesium\packages\shared\extends\materials\MaterialExtend.ts */ -import { VcCircleWaveMaterial, VcLineFlowMaterial } from '@vue-cesium/shared/shaders/materials' +import { VcCircleWaveMaterial, VcLineFlowMaterial, VcLineTrailMaterial } from '@vue-cesium/shared/shaders/materials' let isExtended = false export default class MaterialExtend { @@ -19,12 +19,14 @@ export default class MaterialExtend { const { Material, Color, Cartesian2 } = Cesium const webgl2 = viewer.scene.context?.webgl2 - let shaderSourceTextVcLine = VcLineFlowMaterial + let shaderSourceTextVcLineFlow = VcLineFlowMaterial let shaderSourceTextVcCircle = VcCircleWaveMaterial + let shaderSourceTextVcLineTrail = VcLineTrailMaterial if (!webgl2) { - shaderSourceTextVcLine = shaderSourceTextVcLine.replace(/texture\(/g, 'texture2D(') + shaderSourceTextVcLineFlow = shaderSourceTextVcLineFlow.replace(/texture\(/g, 'texture2D(') shaderSourceTextVcCircle = shaderSourceTextVcCircle.replace(/texture\(/g, 'texture2D(') + shaderSourceTextVcLineTrail = shaderSourceTextVcLineTrail.replace(/texture\(/g, 'texture2D(') } /** @@ -71,7 +73,30 @@ export default class MaterialExtend { color2: new Color(1, 1, 1), globalAlpha: 1 }, - source: shaderSourceTextVcLine + source: shaderSourceTextVcLineFlow + }, + translucent() { + return true + } + }) + + /** + * Gets the name of the VcLineTrail material. + * @type {string} + * @readonly + */ + Material['VcLineTrail'] = 'VcLineTrail' + Cesium.Material['_materialCache'].addMaterial(Material['VcLineTrail'], { + fabric: { + type: Material['VcLineTrail'], + uniforms: { + image: Material.DefaultImageId, + color: new Color(1, 0, 0, 1), + repeat: new Cartesian2(1, 1), + time: 0, + axisY: false + }, + source: shaderSourceTextVcLineTrail }, translucent() { return true diff --git a/packages/shared/extends/materials/VcLineTrailMaterialProperty.ts b/packages/shared/extends/materials/VcLineTrailMaterialProperty.ts new file mode 100644 index 00000000..9e793441 --- /dev/null +++ b/packages/shared/extends/materials/VcLineTrailMaterialProperty.ts @@ -0,0 +1,68 @@ +/* + * @Author: zouyaoji@https://github.com/zouyaoji + * @Date: 2023-08-17 23:55:24 + * @Description: Do not edit + * @LastEditors: zouyaoji 370681295@qq.com + * @LastEditTime: 2024-02-29 00:43:57 + * @FilePath: \vue-cesium\packages\shared\extends\materials\VcLineTrailMaterialProperty.ts + */ +import { getCesiumColor, getCesiumValue } from '@vue-cesium/utils/util' +import VcBaseMaterialProperty from './VcBaseMaterialProperty' + +export default class VcLineTrailMaterialProperty extends VcBaseMaterialProperty { + image: string + color: Cesium.Color + axisY: boolean + time: number + duration: number + repeat: Cesium.Cartesian2 + loop: boolean + lastTime: number + _time: number + + constructor(options: any = {}) { + super(options) + const { Color, Cartesian2, defined } = Cesium + this.image = options.image ?? options.url + this.color = options.color ?? new Color(1, 0, 0, 1) + this.axisY = options.axisY ?? false + this.time = options.time ?? 0 + this.repeat = options.repeat ?? new Cartesian2(1, 1) + this.loop = options.loop ?? true + this.duration = options.duration ?? 3 + this._time = (new Date()).getTime() + } + + getType(value) { + return 'VcLineTrail' + } + + getValue(time: Cesium.JulianDate, result?): VcLineTrailMaterialProperty { + const { Color, Cartesian2, defined } = Cesium + !defined(result) && (result = {}) + + if (this.lastTime >= 0.99 && !this.loop) { + return result + } + + result.image = this.image + result.color = getCesiumColor(this.color, new Color(1, 1, 1, 0), time) + result.repeat = getCesiumValue(this.repeat, Cartesian2, time) + result.axisY = this.axisY + result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration + this.lastTime = result.time + return result as VcLineTrailMaterialProperty + } + + equals(other: VcLineTrailMaterialProperty) { + const reData = + this === other || + (other instanceof VcLineTrailMaterialProperty && + Cesium.Property['equals'](this.color, other.color) && + Cesium.Property['equals'](this.repeat, other.repeat) && + this.image === other.image && + this.axisY === other.axisY && + this.duration === other.duration) + return reData + } +} diff --git a/packages/shared/extends/materials/index.ts b/packages/shared/extends/materials/index.ts index 588f5a08..86ee86f0 100644 --- a/packages/shared/extends/materials/index.ts +++ b/packages/shared/extends/materials/index.ts @@ -9,5 +9,6 @@ import MaterialExtend from './MaterialExtend' import VcCircleWaveMaterialProperty from './VcCircleWaveMaterialProperty' import VcLineFlowMaterialProperty from './VcLineFlowMaterialProperty' +import VcLineTrailMaterialProperty from './VcLineTrailMaterialProperty' -export { MaterialExtend, VcCircleWaveMaterialProperty, VcLineFlowMaterialProperty } +export { MaterialExtend, VcCircleWaveMaterialProperty, VcLineFlowMaterialProperty, VcLineTrailMaterialProperty } diff --git a/packages/shared/shaders/materials/VcLineTrailMaterial.ts b/packages/shared/shaders/materials/VcLineTrailMaterial.ts new file mode 100644 index 00000000..0adb18de --- /dev/null +++ b/packages/shared/shaders/materials/VcLineTrailMaterial.ts @@ -0,0 +1,19 @@ +/* + * @Author: zouyaoji@https://github.com/zouyaoji + * @Date: 2023-08-17 00:10:56 + * @Description: Do not edit + * @LastEditors: zouyaoji 370681295@qq.com + * @LastEditTime: 2024-02-29 00:35:07 + * @FilePath: \vue-cesium\packages\shared\shaders\materials\VcLineTrailMaterial.ts + */ +export default ` +czm_material czm_getMaterial(czm_materialInput materialInput) +{ + czm_material material = czm_getDefaultMaterial(materialInput); + vec2 st = materialInput.st; + vec4 colorImage = texture(image, vec2(fract(st.s - time), st.t)); + material.alpha = colorImage.a * color.a; + material.diffuse = (colorImage.rgb+color.rgb)/2.0; + return material; +} +` diff --git a/packages/shared/shaders/materials/index.ts b/packages/shared/shaders/materials/index.ts index 080d239b..2b6b8e79 100644 --- a/packages/shared/shaders/materials/index.ts +++ b/packages/shared/shaders/materials/index.ts @@ -1,4 +1,5 @@ import VcCircleWaveMaterial from './VcCircleWaveMaterial' import VcLineFlowMaterial from './VcLineFlowMaterial' +import VcLineTrailMaterial from './VcLineTrailMaterial' -export { VcCircleWaveMaterial, VcLineFlowMaterial } +export { VcCircleWaveMaterial, VcLineFlowMaterial, VcLineTrailMaterial } diff --git a/packages/utils/cesium-helpers.ts b/packages/utils/cesium-helpers.ts index a8c8da67..273b9da5 100644 --- a/packages/utils/cesium-helpers.ts +++ b/packages/utils/cesium-helpers.ts @@ -50,7 +50,7 @@ import type { } from './types' import { compare, CompareOperator } from 'compare-versions' import { hasOwn, isFunction, isArray, isString, isPlainObject, isEmptyObj, getObjClassName, isUndefined } from './util' -import { VcCircleWaveMaterialProperty, VcLineFlowMaterialProperty } from '@vue-cesium/shared/extends/materials' +import { VcCircleWaveMaterialProperty, VcLineFlowMaterialProperty, VcLineTrailMaterialProperty } from '@vue-cesium/shared/extends/materials' import { cloneDeep } from 'lodash' /** @@ -446,7 +446,8 @@ export function makeMaterialProperty(val: VcMaterialProperty, isConstant = false val instanceof PolylineOutlineMaterialProperty || val instanceof StripeMaterialProperty || val instanceof VcCircleWaveMaterialProperty || - val instanceof VcLineFlowMaterialProperty + val instanceof VcLineFlowMaterialProperty || + val instanceof VcLineTrailMaterialProperty // getObjClassName(val as any).indexOf('MaterialProperty') !== -1 ) { return val as CesiumMaterialProperty @@ -543,6 +544,16 @@ export function makeMaterialProperty(val: VcMaterialProperty, isConstant = false time: defaultValue(value.fabric.uniforms.time, -1) }) } + case 'VcLineTrail': { + return new VcLineTrailMaterialProperty({ + image: defaultValue(value.fabric.uniforms.image, Material.DefaultImageId), + color: makeColor(defaultValue(value.fabric.uniforms.color, new Color(1, 0, 0, 1))), + repeat: makeCartesian2(defaultValue(value.fabric.uniforms.repeat, new Cartesian2(1, 1))), + axisY: defaultValue(value.fabric.uniforms.axisY, false), + duration: defaultValue(value.fabric.uniforms.duration, 3000), + loop: defaultValue(value.fabric.uniforms.loop, true) + }) + } } } diff --git a/packages/utils/types.ts b/packages/utils/types.ts index 738ad222..297a4916 100644 --- a/packages/utils/types.ts +++ b/packages/utils/types.ts @@ -87,6 +87,7 @@ interface MaterialOption { mixt?: boolean speed?: number time?: number + loop?: boolean } } strict?: boolean diff --git a/website/docs/zh-CN/analyses/vc-measurements.md b/website/docs/zh-CN/analyses/vc-measurements.md index 0038aecb..f2193ddc 100644 --- a/website/docs/zh-CN/analyses/vc-measurements.md +++ b/website/docs/zh-CN/analyses/vc-measurements.md @@ -160,8 +160,8 @@ ctrl + 右键取消绘制。 [108.95499, 34.21761] ] ], - showAngleLabel: false, - showDistanceLabel: false, + // showAngleLabel: false, + // showDistanceLabel: false, areaFormatter: (value, defaultUnits, defaultLocale, defaultDecimals) => { return `${(value * 0.0015).toFixed(4)} 亩` } diff --git a/website/docs/zh-CN/graphics/vc-graphics-wall.md b/website/docs/zh-CN/graphics/vc-graphics-wall.md index ec78ebde..bc62bcd0 100644 --- a/website/docs/zh-CN/graphics/vc-graphics-wall.md +++ b/website/docs/zh-CN/graphics/vc-graphics-wall.md @@ -38,8 +38,8 @@ :positions="[[-115,50],[-112,50],[-107.5,50],[-105,50],[-102.5,50],[-100,50],[-97.5,50],[-95,50],[-92.5,50],[-90,50]]" :material="{ fabric: { - type: 'VcLineFlow', - uniforms: { image: 'https://zouyaoji.top/vue-cesium/images/textures/arrow.png', color: 'yellow', repeat: { x: 30, y: 1 }, speed: 10 } + type: 'VcLineTrail', + uniforms: { image: 'https://zouyaoji.top/vue-cesium/images/textures/colors.png', } } }" outlineColor="black" diff --git a/website/public/images/textures/colors.png b/website/public/images/textures/colors.png new file mode 100644 index 00000000..b3b2d53b Binary files /dev/null and b/website/public/images/textures/colors.png differ diff --git a/website/public/images/textures/colors1.png b/website/public/images/textures/colors1.png new file mode 100644 index 00000000..495c3eab Binary files /dev/null and b/website/public/images/textures/colors1.png differ