Geometry and Apperance【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Geometry%20and%20Appearances.html

本文我们直接在官方编辑器进行代码演示：首先把无用组件做隐藏，代码如下：

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: false,
  navigationInstructionsInitiallyVisible: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  timeline: false,
  animation: false,
  shouldAnimate: true,
  infoBox: false,
});

viewer.cesiumWidget.creditContainer.style.display = "none";

const entities = viewer.entities;

1. 首先我们绘制一个蓝白相间条纹材质的矩形：

注：

• stRotation: 指定矩形纹理从北方向逆时针旋转的角度，默认值为0。这里的45表示将贴纸逆时针旋转45度然后贴到矩形上面。
• st意思是st坐标系，即纹理坐标系，S=0表示贴纸的最左边，S=1表示贴纸的最右边；同理，T=0表示贴纸的底部，T=1表示贴纸的顶部。
• 而rotation属性则是旋转矩形本身，它表示指定矩形从北方向顺时针旋转的数值，默认值为0。

//strip是条纹的意思，这里定义一个蓝白相间的半透明条纹，重复5次
const stripeMaterial = new Cesium.StripeMaterialProperty({
  evenColor: Cesium.Color.WHITE.withAlpha(0.5),
  oddColor: Cesium.Color.BLUE.withAlpha(0.5),
  repeat: 5.0,
});

entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-92.0, 20.0, -86.0, 27.0),
    height: 1.0,
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    stRotation: Cesium.Math.toRadians(45),//将条纹从北向逆时针旋转45度
    material: stripeMaterial,
  },
});

viewer.zoomTo(viewer.entities);

function setRectangleView(rectangle) {
  const cartographicCenter = Cesium.Rectangle.center(rectangle);
  const cartesian3Center = Cesium.Cartesian3.fromRadians(
    cartographicCenter.longitude,
    cartographicCenter.latitude,
    1500000
  );
  viewer.camera.setView({
    destination: cartesian3Center,
    orientation: {
      heading: 0,
      pitch: Cesium.Math.toRadians(-90),
      roll: 0,
    },
  });
}

效果如下：

我们修改stripeMaterial的repeat属性为6，并将stRotation设置为0，则效果如下图：

这里我们若不设置height属性，则控制台会有如下提示：因此这里我们设置了1.0的高度，否则不会显示外轮廓。

2. 接下来，绘制一个使用上述材质的多边形几何：

entities.add({
  polygon: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -107.0, 27.0, -107.0, 22.0, -102.0, 23.0, -97.0, 21.0, -97.0, 25.0,
      ]),
    ),
    height: 1.0,
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    material: stripeMaterial,
  },
});

效果如下：

3. 绘制一个椭圆：

entities.add({
  position: Cesium.Cartesian3.fromDegrees(-80.0, 25.0),
  ellipse: {
    semiMinorAxis: 300000.0,//椭圆短半轴长度
    semiMajorAxis: 500000.0,//椭圆长半轴长度
    rotation: Cesium.Math.toRadians(-40.0),//将椭圆从正北方向顺时针旋转40度
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    stRotation: Cesium.Math.toRadians(22),//将条纹材质从正北方向逆时针旋转22度
    material: stripeMaterial,
    height: 1.0,
  },
});

效果如下：

为了将视角调整为正对着多边形，即将heading和roll调整为0，pitch调整为-90°，我们采用下面的setCenterView方法来调正视角，如下图：红色边框则为不设置rotation和stRotation属性的效果，绿色边框为仅设置stRatotion属性的效果，而黄色边框为两个属性都设置后的结果，我们将三次结果叠加到一起，这样能对比出效果，得出如下结论：

1. 由绿色框和黄色框对比得出，rotation属性是旋转矩形本身的，stRtotation是旋转条纹材质的；
2. rotation属性和stRotation属性互不影响，因为黄色框是两个属性都设置的结果，条纹和绿色框中的条纹是平行的；
3. rotation设置的-40°，此时椭圆顺时针旋转了40°，则对rotation属性来说，负值表示顺时针旋转，正值表示逆时针旋转；
4. stRotation设置的22°，此时条纹材质顺时针旋转了22°，则对stRotation属性来说，正值表示顺时针旋转，负值表示逆时针旋转；

entities.add({
  position: Cesium.Cartesian3.fromDegrees(-80.0, 25.0),
  ellipse: {
    semiMinorAxis: 300000.0,//椭圆短半轴长度
    semiMajorAxis: 500000.0,//椭圆长半轴长度
    rotation: Cesium.Math.toRadians(-40.0),//将椭圆从正北方向顺时针旋转40度
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    stRotation: Cesium.Math.toRadians(22),//将条纹材质从正北方向顺时针旋转22度
    material: stripeMaterial,
    height: 1.0,
  },
});

setCenterView([-80.0, 25.0]);

function setCenterView(center) {
  const cartesian3Center = Cesium.Cartesian3.fromDegrees(
    ...center,
    1500000
  );
  viewer.camera.setView({
    destination: cartesian3Center,
    orientation: {
      heading: 0,
      pitch: Cesium.Math.toRadians(-90),
      roll: 0,
    },
  });
}

此时针对旋转的属性我们就彻底搞清楚了，但是不对呀，stRotation属性和api文档解释的不一样哎，是不是官方文档也没说清楚正值和负值表示旋转的方向呢？这个目前暂时不确定，存疑。

剩余内容这里不再赘述，不再一一展示了：

entities.add({
  position: Cesium.Cartesian3.fromDegrees(-72.0, 25.0),
  ellipse: {
    semiMinorAxis: 250000.0,
    semiMajorAxis: 250000.0,
    rotation: Cesium.Math.toRadians(-40.0),
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    stRotation: Cesium.Math.toRadians(90),
    material: stripeMaterial,
  },
});

entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-118.0, 38.0, -116.0, 40.0),
    extrudedHeight: 500000.0,
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    stRotation: Cesium.Math.toRadians(45),
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

entities.add({
  position: Cesium.Cartesian3.fromDegrees(-117.0, 35.0),
  ellipse: {
    semiMinorAxis: 100000.0,
    semiMajorAxis: 200000.0,
    height: 100000.0,
    extrudedHeight: 200000.0,
    rotation: Cesium.Math.toRadians(90.0),
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

entities.add({
  polygon: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -118.0, 30.0, -115.0, 30.0, -117.1, 31.1, -118.0, 33.0,
      ]),
    ),
    height: 300000.0,
    extrudedHeight: 700000.0,
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

entities.add({
  position: Cesium.Cartesian3.fromDegrees(-70.0, 45.0, 100000.0),
  cylinder: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -118.0, 30.0, -115.0, 30.0, -117.1, 31.1, -118.0, 33.0,
      ]),
    ),
    length: 200000.0,
    topRadius: 150000.0,
    bottomRadius: 150000.0,
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

for (i = 0; i < 5; ++i) {
  height = 100000.0 + 200000.0 * i;
  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height),
    box: {
      dimensions: new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
      outline: true,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });

  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-102.0, 45.0, height),
    ellipsoid: {
      radii: new Cesium.Cartesian3(45000.0, 45000.0, 90000.0),
      outline: true,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });

  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-98.0, 45.0, height),
    ellipsoid: {
      radii: new Cesium.Cartesian3(67500.0, 67500.0, 67500.0),
      outline: true,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });
}

entities.add({
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -95.0, 50.0, -85.0, 50.0, -75.0, 50.0,
    ]),
    maximumHeights: [500000, 1000000, 500000],
    minimumHeights: [0, 500000, 0],
    outline: true,
    outlineColor: Cesium.Color.LIGHTGRAY,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 0.7 }),
  },
});

entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-92.0, 30.0, -85.0, 40.0),
    material: stripeMaterial,
  },
});

entities.add({
  polygon: {
    hierarchy: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        -109.0, 30.0, -95.0, 30.0, -95.0, 40.0, -109.0, 40.0,
      ]),
      holes: [
        {
          positions: Cesium.Cartesian3.fromDegreesArray([
            -107.0, 31.0, -107.0, 39.0, -97.0, 39.0, -97.0, 31.0,
          ]),
          holes: [
            {
              positions: Cesium.Cartesian3.fromDegreesArray([
                -105.0, 33.0, -99.0, 33.0, -99.0, 37.0, -105.0, 37.0,
              ]),
              holes: [
                {
                  positions: Cesium.Cartesian3.fromDegreesArray([
                    -103.0, 34.0, -101.0, 34.0, -101.0, 36.0, -103.0, 36.0,
                  ]),
                },
              ],
            },
          ],
        },
      ],
    },
    material: stripeMaterial,
  },
});

entities.add({
  position: Cesium.Cartesian3.fromDegrees(-80.0, 35.0),
  ellipse: {
    semiMinorAxis: 200000.0,
    semiMajorAxis: 500000.0,
    rotation: Cesium.Math.toRadians(30.0),
    material: stripeMaterial,
  },
});

entities.add({
  position: Cesium.Cartesian3.fromDegrees(-72.0, 35.0),
  ellipse: {
    semiMinorAxis: 200000.0,
    semiMajorAxis: 200000.0,
    rotation: Cesium.Math.toRadians(30.0),
    material: stripeMaterial,
  },
});

entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-110.0, 38.0, -107.0, 40.0),
    height: 700000.0,
    extrudedHeight: 1000000.0,
    rotation: Cesium.Math.toRadians(45),
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

entities.add({
  position: Cesium.Cartesian3.fromDegrees(-110.0, 35.0),
  ellipse: {
    semiMinorAxis: 100000.0,
    semiMajorAxis: 200000.0,
    height: 300000.0,
    extrudedHeight: 700000.0,
    rotation: Cesium.Math.toRadians(-40.0),
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

entities.add({
  polygon: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -113.0, 30.0, -110.0, 30.0, -110.0, 33.0, -111.5, 31.0, -113.0, 33.0,
      ]),
    ),
    extrudedHeight: 300000.0,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

entities.add({
  position: Cesium.Cartesian3.fromDegrees(-70.0, 40.0, 200000.0),
  cylinder: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -118.0, 30.0, -115.0, 30.0, -117.1, 31.1, -118.0, 33.0,
      ]),
    ),
    length: 400000.0,
    topRadius: 0.0,
    bottomRadius: 200000.0,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

for (i = 0; i < 5; ++i) {
  height = 200000.0 * i;

  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-65.0, 35.0),
    ellipse: {
      semiMinorAxis: 200000.0,
      semiMajorAxis: 200000.0,
      height: height,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });

  entities.add({
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(-67.0, 27.0, -63.0, 32.0),
      height: height,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });
}

for (i = 0; i < 5; ++i) {
  height = 100000.0 + 200000.0 * i;
  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-108.0, 45.0, height),
    box: {
      dimensions: new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
      material: Cesium.Color.fromRandom({ alpha: 1.0 }),
    },
  });

  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-104.0, 45.0, height),
    ellipsoid: {
      radii: new Cesium.Cartesian3(45000.0, 45000.0, 90000.0),
      material: Cesium.Color.fromRandom({ alpha: 1.0 }),
    },
  });

  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-100.0, 45.0, height),
    ellipsoid: {
      radii: new Cesium.Cartesian3(67500.0, 67500.0, 67500.0),
      material: Cesium.Color.fromRandom({ alpha: 1.0 }),
    },
  });
}

positions = [];
for (i = 0; i < 40; ++i) {
  positions.push(Cesium.Cartesian3.fromDegrees(-100.0 + i, 15.0));
}

entities.add({
  polyline: {
    positions: positions,
    width: 10.0,
    material: new Cesium.PolylineGlowMaterialProperty({
      color: Cesium.Color.DEEPSKYBLUE,
      glowPower: 0.25,
    }),
  },
});

positions = [];
for (i = 0; i < 40; ++i) {
  positions.push(Cesium.Cartesian3.fromDegrees(-100.0 + i, 9.0));
}

entities.add({
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -90.0, 43.0, 100000.0, -87.5, 45.0, 100000.0, -85.0, 43.0, 100000.0, -87.5,
      41.0, 100000.0, -90.0, 43.0, 100000.0,
    ]),
    material: new Cesium.CheckerboardMaterialProperty({
      repeat: new Cesium.Cartesian2(20.0, 6.0),
    }),
  },
});

entities.add({
  corridor: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -120.0, 45.0, -125.0, 50.0, -125.0, 55.0,
    ]),
    width: 100000,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

entities.add({
  corridor: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -120.0, 45.0, -125.0, 50.0, -125.0, 55.0,
    ]),
    width: 100000,
    height: 300000,
    extrudedHeight: 400000,
    material: Cesium.Color.fromRandom({ alpha: 0.7 }),
  },
});

entities.add({
  corridor: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -120.0, 45.0, -125.0, 50.0, -125.0, 55.0,
    ]),
    width: 100000,
    height: 700000,
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 0.7 }),
  },
});

function starPositions(arms, rOuter, rInner) {
  const angle = Math.PI / arms;
  const pos = [];
  for (let i = 0; i < 2 * arms; i++) {
    const r = i % 2 === 0 ? rOuter : rInner;
    const p = new Cesium.Cartesian2(
      Math.cos(i * angle) * r,
      Math.sin(i * angle) * r,
    );
    pos.push(p);
  }
  return pos;
}

entities.add({
  polylineVolume: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -102.0, 15.0, 100000.0, -105.0, 20.0, 200000.0, -110.0, 20.0, 100000.0,
    ]),
    shape: starPositions(7, 30000.0, 20000.0),
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 1,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

entities.add({
  polylineVolume: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -102.0, 15.0, -105.0, 20.0, -110.0, 20.0,
    ]),
    shape: starPositions(7, 30000.0, 20000.0),
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

function computeCircle(radius) {
  const positions = [];
  for (let i = 0; i < 360; i++) {
    const radians = Cesium.Math.toRadians(i);
    positions.push(
      new Cesium.Cartesian2(
        radius * Math.cos(radians),
        radius * Math.sin(radians),
      ),
    );
  }
  return positions;
}

entities.add({
  polylineVolume: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -104.0, 13.0, -107.0, 18.0, -112.0, 18.0,
    ]),
    shape: computeCircle(40000.0),
    material: Cesium.Color.WHITE,
  },
});