Clipping Regions【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Clipping%20Regions.html&label=All

效果如下视频所示：

示例代码如下：

<style>
  @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>数据加载中...</h1></div>
<div id="toolbar">
  <table class="infoPanel">
    <tbody>
      <tr>
        <td>左键单击添加顶点。</td>
      </tr>
      <tr>
        <td>右键点击将多边形添加到裁剪集合中。</td>
      </tr>
    </tbody>
  </table>
</div>

const viewer = new Cesium.Viewer("cesiumContainer", {
  timeline: false,
  animation: false,
  sceneModePicker: false,
  baseLayerPicker: false,
  geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
});
const scene = viewer.scene;

// 启用渲染天空
scene.skyAtmosphere.show = true;

// 隐藏球体本身，仅显示世界地形数据
let worldTerrain;
try {
  worldTerrain = await Cesium.createWorldTerrainAsync();
  scene.terrainProvider = worldTerrain;
  scene.globe.show = false;
} catch (error) {
  window.alert(`创建世界地形时出错。${error}`);
}

let worldTileset;
try {
  /**
   * 只有 Google Geocoder 才能与 Google Photorealistic 3D Tiles 配合使用。
   * 需要将上述创建Viewer对象的“geocode”属性设置为 IonGeocodeProviderType.GOOGLE。
   */
  worldTileset = await Cesium.createGooglePhotorealistic3DTileset({
    onlyUsingWithGoogleGeocoder: true,
  });
  scene.primitives.add(worldTileset);
} catch (error) {
  console.log(`Error loading Photorealistic 3D Tiles tileset.
    ${error}`);
}

// 添加建筑物瓦片集：本数据在个人ion上并没有
let buildingTileset;
try {
  buildingTileset = await Cesium.Cesium3DTileset.fromIonAssetId(1670818);
  scene.primitives.add(buildingTileset);
} catch (error) {
  console.log(`建筑物瓦片集加载出错。${error}`);
}

// 缩放至建筑所在位置
const cameraOffset = new Cesium.HeadingPitchRange(
  Cesium.Math.toRadians(95.0),
  Cesium.Math.toRadians(-18.0),
  600.0
);
viewer.zoomTo(buildingTileset, cameraOffset);

// 添加一个覆盖整个地块的剪切区域
const polygons = [
  new Cesium.ClippingPolygon({
    positions: Cesium.Cartesian3.fromDegreesArray(
      [
        [-105.0077102972673, 39.75198671798765],
        [-105.0095858062031, 39.75049417970743],
        [-105.00969000114443, 39.75035082687128],
        [-105.00972838875393, 39.75013579705808],
        [-105.00971742086537, 39.74997136204101],
        [-105.00962967775735, 39.749768979944236],
        [-105.00932806082336, 39.74928832007956],
        [-105.00887837739427, 39.749444324087904],
        [-105.00854934073887, 39.749663572365904],
        [-105.00822578802776, 39.749967145754084],
        [-105.00715641889735, 39.751312128419926],
        [-105.00715641889735, 39.75135429046085],
        [-105.0077102972673, 39.75198671798765],
      ].flat(2)
    ),
  }),
];

scene.globe.clippingPolygons = new Cesium.ClippingPolygonCollection({
  polygons: polygons,
});
worldTileset.clippingPolygons = new Cesium.ClippingPolygonCollection({
  polygons: polygons,
});

// 在地球地形和全球 3D 瓦片集数据之间切换显示
Sandcastle.addToolbarMenu([
  {
    text: "3D Tiles",
    onselect: () => {
      scene.globe.show = false;
      worldTileset.show = true;
    },
  },
  {
    text: "Terrain(地形)",
    onselect: () => {
      scene.globe.show = true;
      worldTileset.show = false;
    },
  },
]);

/**
 * 切换建筑内嵌(inset)可见性。
 * 建筑物内嵌：适用于描述建筑物模型嵌入地形或场景的情况，强调模型与环境的融合。
 */
Sandcastle.addToggleButton("显示建筑物", true, function (checked) {
  buildingTileset.show = checked;
});

// 切换裁剪多边形的激活状态
Sandcastle.addToggleButton("激活裁剪", true, function (checked) {
  worldTileset.clippingPolygons.enabled = checked;
  scene.globe.clippingPolygons.enabled = checked;
});

// 在默认裁剪和反向裁剪之间切换
Sandcastle.addToggleButton("反向裁剪", false, function (checked) {
  worldTileset.clippingPolygons.inverse = checked;
  scene.globe.clippingPolygons.inverse = checked;
});

Sandcastle.addToolbarButton("移除最后的多边形", () => {
  if (worldTileset.clippingPolygons.length > 0) {
    worldTileset.clippingPolygons.remove(
      worldTileset.clippingPolygons.get(
        worldTileset.clippingPolygons.length - 1
      )
    );
  }

  if (scene.globe.clippingPolygons.length > 0) {
    scene.globe.clippingPolygons.remove(
      scene.globe.clippingPolygons.get(scene.globe.clippingPolygons.length - 1)
    );
  }
});

// 移除鼠标左键双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
  Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);

// 绘制一个点实体
function createPoint(worldPosition) {
  const point = viewer.entities.add({
    position: worldPosition,
    point: {
      color: Cesium.Color.WHITE,
      pixelSize: 5,
    },
  });
  return point;
}

// 绘制一个多边形实体
function drawShape(positionData) {
  return viewer.entities.add({
    polygon: {
      hierarchy: positionData,
      material: new Cesium.ColorMaterialProperty(
        Cesium.Color.WHITE.withAlpha(0.7)
      ),
    },
  });
}
let activeShapePoints = [];
let activeShape;
let floatingPoint;
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
  /**
   * 我们在这里使用“viewer.scene.globe.pick”而不是“viewer.camera.pickEllipsoid”，
   * 这样当鼠标悬停在地形上时我们就能得到正确的点。
   */
  const ray = viewer.camera.getPickRay(event.position);
  const earthPosition = scene.globe.show
    ? scene.globe.pick(ray, scene)
    : scene.pickPosition(event.position);

  // 如果鼠标未悬停在地球上，`earthPosition` 将为 undefined。
  if (Cesium.defined(earthPosition)) {
    if (activeShapePoints.length === 0) {
      floatingPoint = createPoint(earthPosition);
      activeShapePoints.push(earthPosition);
      const dynamicPositions = new Cesium.CallbackProperty(function () {
        return new Cesium.PolygonHierarchy(activeShapePoints);
      }, false);
      activeShape = drawShape(dynamicPositions);
    }
    activeShapePoints.push(earthPosition);
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

handler.setInputAction(function (event) {
  if (Cesium.defined(floatingPoint)) {
    const ray = viewer.camera.getPickRay(event.endPosition);
    const newPosition = scene.globe.show
      ? scene.globe.pick(ray, scene)
      : viewer.scene.pickPosition(event.endPosition);
    if (Cesium.defined(newPosition)) {
      floatingPoint.position.setValue(newPosition);
      activeShapePoints.pop();
      activeShapePoints.push(newPosition);
    }
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

function createClippingPolygon(positions) {
  if (positions.length < 3) {
    return;
  }

  worldTileset.clippingPolygons.add(
    new Cesium.ClippingPolygon({
      positions: positions,
    })
  );

  scene.globe.clippingPolygons.add(
    new Cesium.ClippingPolygon({
      positions: positions,
    })
  );
}

function terminateShape() {
  activeShapePoints.pop();
  createClippingPolygon(activeShapePoints);
  viewer.entities.remove(floatingPoint);
  viewer.entities.remove(activeShape);
  floatingPoint = undefined;
  activeShape = undefined;
  activeShapePoints = [];
}
handler.setInputAction(function (event) {
  terminateShape();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);