Polyline Dash【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Polyline%20Dash.html&label=Geometries

示例代码如下：

const viewer = new Cesium.Viewer("cesiumContainer");

const redLine = viewer.entities.add({
  name: "红色虚线",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75, 38, 250000, -125, 38, 250000,
    ]),
    width: 5,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.RED,
    }),
  },
});

const blueLine = viewer.entities.add({
  name: "宽的蓝黄相间的虚线",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75, 40, 250000, -125, 40, 250000,
    ]),
    width: 30,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.BLUE,
      gapColor: Cesium.Color.YELLOW,
    }),
  },
});

const orangeLine = viewer.entities.add({
  name: "橙色的虚线，且设置了虚线的短划线长度",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75, 42, 250000, -125, 42, 250000,
    ]),
    width: 5,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.ORANGE,
      dashLength: 8.0,
    }),
  },
});

const cyanLine = viewer.entities.add({
  name: "带有虚线图案的青色虚线",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75, 44, 250000, -125, 44, 250000,
    ]),
    width: 10,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.CYAN,
      /**
       * dashPattern: 默认值为255.0，它是一个指定 16 位虚线模式的数字属性，显然parseInt的第二个参数表示是个二进制。
       * 前两位：11（连续绘制 2 个单位的线段）,中间六位：000000（连续 6 个单位的空白/间隙）,
       * 最后四位：1111（连续绘制 4 个单位的线段）。
       */
      dashPattern: parseInt("110000001111", 2),
    }),
  },
});

const yellowLine = viewer.entities.add({
  name: "带有虚线图案的黄色虚线",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75, 46, 250000, -125, 46, 250000,
    ]),
    width: 10,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.YELLOW,
      /**
       * "1010101010101010" 表示一个交替的模式：1（绘制）、0（空白）、1（绘制）、0（空白）……，重复 8 次。
       */
      dashPattern: parseInt("1010101010101010", 2),
    }),
  },
});

viewer.zoomTo(viewer.entities);