Cesium Sandcastle 官网示例,包括实体、3dtiles等的裁切
熟悉cesium 的api
- ClippingPlaneCollection
- ClippingPlane
- Plane
- Cesium3DTileset
- CallbackProperty
ClippingPlane 可以控制裁切方向,值不同,裁切方向也不同
水平裁切
垂直裁切
下面是3dtiles裁切的代码逻辑,仅供参考
mapReady(){ // 地图加载完成
this.initMouseEvt(); // 添加鼠标事件
}
点击裁切按钮 执行
tileset = new Cesium.Cesium3DTileset({
url: config.serverUrl + "/osgbresult/tileset.json",
skipLevelOfDetail: true,
preferLeaves: true,
maximumMemoryUsage: 1024
});
viewer.scene.primitives.add(tileset);
this.loadTileset(tileset)
loadTileset(tileset) {
const { viewer, Cesium } = window.$cesiumInstance;
clippingPlanes = new Cesium.ClippingPlaneCollection({
planes: [
new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), 0.0) //裁切方向
],
edgeWidth: 1.0
});
tileset.clippingPlanes = clippingPlanes
let _this = this;
const boundingSphere = tileset.boundingSphere;
const radius = boundingSphere.radius;
viewer.zoomTo(
tileset,
new Cesium.HeadingPitchRange(0.5, -0.2, radius * 4.0)
);
if (
!Cesium.Matrix4.equals(
tileset.root.transform,
Cesium.Matrix4.IDENTITY
)
) {
// The clipping plane is initially positioned at the tileset's root transform.
// Apply an additional matrix to center the clipping plane on the bounding sphere center.
const transformCenter = Cesium.Matrix4.getTranslation(
tileset.root.transform,
new Cesium.Cartesian3()
);
const transformCartographic = Cesium.Cartographic.fromCartesian(
transformCenter
);
const boundingSphereCartographic = Cesium.Cartographic.fromCartesian(
tileset.boundingSphere.center
);
const height =
boundingSphereCartographic.height - transformCartographic.height;
clippingPlanes.modelMatrix = Cesium.Matrix4.fromTranslation(
new Cesium.Cartesian3(0.0, 0.0, height)
);
}
for (let i = 0; i < clippingPlanes.length; ++i) {
const plane = clippingPlanes.get(i);
const planeEntity = viewer.entities.add({
position: boundingSphere.center,
plane: {
dimensions: new Cesium.Cartesian2(radius * 2.5, radius * 2.5),
material: Cesium.Color.WHITE.withAlpha(0.1),
plane: new Cesium.CallbackProperty(
_this.createPlaneUpdateFunction(plane),
false
),
outline: true,
outlineColor: Cesium.Color.WHITE
}
});
planeEntities.push(planeEntity);
}
},
initMouseEvt() {
var selectedPlane;
let _this = this;
const { viewer, Cesium } = window.$cesiumInstance;
var ellipsoid = viewer.scene.globe.ellipsoid;
var scene = viewer.scene
// 注册鼠标事件
var downHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); //鼠标点击事件
downHandler.setInputAction(function(movement) {
const pickedObject = scene.pick(movement.position);
if (
Cesium.defined(pickedObject) &&
Cesium.defined(pickedObject.id) &&
Cesium.defined(pickedObject.id.plane)
) {
selectedPlane = pickedObject.id.plane;
selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.05);
selectedPlane.outlineColor = Cesium.Color.WHITE;
scene.screenSpaceCameraController.enableInputs = false;
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
// 注册鼠标松开事件
var upHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); //鼠标点击向上事件
upHandler.setInputAction(function() {
if (Cesium.defined(selectedPlane)) {
//如果存在这个对象
selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.6); // 恢复选中的切面颜色
selectedPlane.outlineColor = Cesium.Color.blue; //
selectedPlane = undefined;
}
viewer.scene.screenSpaceCameraController.enableInputs = true; // 恢复默认的鼠标一切输入事件
}, Cesium.ScreenSpaceEventType.LEFT_UP);
// 注册鼠标移动事件,
var moveHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); //鼠标点击移动事件
moveHandler.setInputAction(function(movement) {
//通过指定的椭球或者地图对应的坐标系,将鼠标的二维坐标转换为对应椭球体三维坐标
if (Cesium.defined(selectedPlane)) {
const deltaY = movement.startPosition.x - movement.endPosition.x;
targetY += deltaY;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
},