PolylineDashMaterialProperty

PolylineDashMaterialProperty（折线虚线材质）是用于呈现CesiumJS中折线虚线样式的材质属性。它采用了链式化API的设计风格。

语法

new Cesium.PolylineDashMaterialProperty(options)

参数

• options：Object类型，可选。描述材质属性的配置选项。以下是该参数的可用属性：

  • color：Color类型或String类型。折线的颜色。默认值为Cesium.Color.WHITE。如果传入字符串，则会尝试将其解析为Cesium.Color对象。该参数是可选的。

  • gapColor：Color类型或String类型。折线虚线之间的间隙的颜色。默认值为Cesium.Color.TRANSPARENT。与color属性相同，该属性可以接受一个字符串。该参数是可选的。

  • dashLength：Property类型或Number类型。折线虚线的长度。该属性可以为一个数字（代表像素数）或一个Property对象。如果为Property对象，则可以使用函数、字符串、数字、对象等其他类型来动态计算值。默认值为15。

  • dashPattern：Property类型或String类型。描述折线虚线的模式。模式由一系列的数字字符串表示，代表每一个短划线和空隙的长度，例如"10 5"表示长度为10的短划线后面跟着长度为5的空隙，然后重复该模式。该属性可以为一个字符串或一个Property对象。如果为Property对象，则可以使用函数、字符串、数字、对象等其他类型来动态计算值。默认值为"20 10"。

示例

1. 使用默认值创建折线虚线材质

// 创建一个折线实例
var polyline = viewer.entities.add({
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([
            -100.0, 32.0,
            -90.0, 32.0
        ]),
        width : 2,
        material : new Cesium.PolylineDashMaterialProperty()
    }
});

2.指定虚线材质的颜色、长度和模式

// 创建一个折线实例，其中虚线的颜色为红色，长度为10像素，模式为"15 10"
var polyline = viewer.entities.add({
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([
            -100.0, 32.0,
            -90.0, 32.0
        ]),
        width : 2,
        material : new Cesium.PolylineDashMaterialProperty({
            color : Cesium.Color.RED,
            dashLength : 10,
            dashPattern : "15 10"
        })
    }
});

3.基于时间动态修改折线的虚线模式

// 创建一个折线实例，包含动态虚线模式
var polyline = viewer.entities.add({
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([
            -100.0, 32.0,
            -90.0, 32.0
        ]),
        width : 2,
        material : new Cesium.PolylineDashMaterialProperty({
            color : Cesium.Color.CYAN,
            dashLength : 15,
            dashPattern : function(time) {
                // 在每一秒钟内切换虚线模式
                return (Math.floor(time.secondsOfDay * 2) % 2 === 0) ? "10 5" : "20 15";
            }
        })
    }
});

参考

• Cesium.PolylineDashMaterialProperty API documentation - https://cesium.com/docs/cesiumjs-ref-doc/PolylineDashMaterialProperty.html
• Cesium Material System - https://cesium.com/docs/tutorials/materials/
• Cesium JS - https://cesium.com/cesiumjs/