500 lines
17 KiB
HTML
500 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Use correct character set. -->
|
||
<meta charset="utf-8" />
|
||
<!-- Tell IE to use the latest, best version. -->
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
||
/>
|
||
<title>Learning Cesium!</title>
|
||
<script src="./Build/Cesium/Cesium.js"></script>
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
html,
|
||
body,
|
||
#app,
|
||
#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#geologyClipPlanDiv td {
|
||
padding: 4px 2px;
|
||
}
|
||
.closerGeologyClipPlan {
|
||
text-decoration: none;
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 10px;
|
||
z-index: 20;
|
||
}
|
||
.closerGeologyClipPlan:after {
|
||
content: "\e60b";
|
||
font-family: "iconfont";
|
||
font-size: 22px;
|
||
color: rgba(gray, 0.8);
|
||
}
|
||
#geologyClipPlanDiv {
|
||
position: absolute;
|
||
top: 10px;
|
||
color: rgba(29, 164, 220, 0.9);
|
||
background: rgba(34, 69, 91, 0.7);
|
||
border-radius: 6px;
|
||
padding: 10px;
|
||
}
|
||
#geologyClipPlanDiv .closerGeologyClipPlan {
|
||
top: 1vh;
|
||
right: 0.6vw;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
<!-- 引入样式 -->
|
||
<link rel="stylesheet" href="./js/elementui/index.css" />
|
||
<!-- import Vue before Element -->
|
||
<script src="./js/vue2710.js"></script>
|
||
<!-- import JavaScript -->
|
||
<script src="./js/elementui/index.js"></script>
|
||
<script src="./js/turf.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div id="cesiumContainer"></div>
|
||
<div id="geologyClipPlanDiv" v-if="geologyClipPlanIsShow">
|
||
<table style="text-align: right">
|
||
<tr>
|
||
<td colspan="2" style="text-align: left">
|
||
<span style="font-size: 18px; font-weight: 600"
|
||
>模型裁剪分析</span
|
||
>
|
||
<div
|
||
class="closerGeologyClipPlan"
|
||
@click="handCloserGeologyClipPlan"
|
||
></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="2">
|
||
<div
|
||
style="
|
||
height: 4px;
|
||
background-color: rgba(29, 164, 220, 0.6);
|
||
margin: 4px;
|
||
"
|
||
></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>裁剪类型：</td>
|
||
<td>
|
||
<el-radio v-model="modelType" label="0">外部裁剪</el-radio>
|
||
<el-radio v-model="modelType" label="1">内部裁剪</el-radio>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="2">
|
||
<el-button
|
||
size="mini"
|
||
:disabled="isDrawGeologyClipPlan"
|
||
@click="drawGeologyClipPlan"
|
||
>绘制裁剪范围</el-button
|
||
>
|
||
<el-button size="mini" @click="clearGeologyClipPlan"
|
||
>清除</el-button
|
||
>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
||
|
||
var geologyClipPlanObj = null;
|
||
var handlerGeologyClipPlan = null;
|
||
var floatingPointList = [];
|
||
var activeShapePoints = [];
|
||
|
||
var floatingPoint = undefined;
|
||
var activeShape = undefined;
|
||
|
||
var my3dtiles;
|
||
var drawList = [];
|
||
var inverseTransform = undefined;
|
||
|
||
var TilesetsList = [];
|
||
new Vue({
|
||
el: "#app",
|
||
data: {
|
||
geologyClipPlanIsShow: true,
|
||
isDrawGeologyClipPlan: false,
|
||
modelType: "0", // 开挖深度
|
||
},
|
||
methods: {
|
||
initViewer() {
|
||
var viewer = new Cesium.Viewer("cesiumContainer", {
|
||
geocoder: false, //位置查找
|
||
homeButton: false, //视图返回初始位置
|
||
sceneModePicker: false, //视角选择器
|
||
// baseLayerPicker:false,//底图选择器
|
||
navigationHelpButton: false, //导航帮助按钮
|
||
animation: false, //动画控制器
|
||
// creditContainer:"credit",//版权显示
|
||
timeline: false, //时间线
|
||
fullscreenButton: false, //全屏控件
|
||
vrButton: false,
|
||
infoBox: false,
|
||
selectionIndicator: false,
|
||
});
|
||
window.viewer = viewer;
|
||
this.addTiles();
|
||
},
|
||
addTiles() {
|
||
var tileset = new Cesium.Cesium3DTileset({
|
||
url: "./SampleData/cesiumlab/tileset.json",
|
||
dynamicScreenSpaceError: true,
|
||
dynamicScreenSpaceErrorDensity: 0.00278,
|
||
dynamicScreenSpaceErrorFactor: 4.0,
|
||
dynamicScreenSpaceErrorHeightFalloff: 0.25,
|
||
});
|
||
viewer.scene.primitives.add(tileset);
|
||
viewer.zoomTo(tileset);
|
||
tileset.readyPromise.then((palaceTileset) => {
|
||
this.my3dtiles = palaceTileset;
|
||
this.setTilesetHeightAndOffset(palaceTileset, -40);
|
||
});
|
||
},
|
||
setTilesetHeightAndOffset(tileset, height, x, y) {
|
||
x = x ? x : 0;
|
||
y = y ? y : 0;
|
||
let center;
|
||
if (tileset.boundingSphere) {
|
||
// 3dtiles
|
||
center = tileset.boundingSphere.center;
|
||
} else if (
|
||
tileset._boundingSpheres &&
|
||
tileset._boundingSpheres.length > 0
|
||
) {
|
||
// Primitive
|
||
center = tileset._boundingSpheres[0].center;
|
||
}
|
||
const cartographic = Cesium.Cartographic.fromCartesian(center);
|
||
const surface = Cesium.Cartesian3.fromRadians(
|
||
cartographic.longitude,
|
||
cartographic.latitude,
|
||
0.0
|
||
);
|
||
const offset = Cesium.Cartesian3.fromRadians(
|
||
cartographic.longitude + x,
|
||
cartographic.latitude + y,
|
||
height
|
||
);
|
||
const translation = Cesium.Cartesian3.subtract(
|
||
offset,
|
||
surface,
|
||
new Cesium.Cartesian3()
|
||
);
|
||
const modelMaxtrix = Cesium.Matrix4.fromTranslation(translation);
|
||
tileset.modelMatrix = modelMaxtrix;
|
||
},
|
||
|
||
handCloserGeologyClipPlan() {
|
||
this.geologyClipPlanIsShow = false;
|
||
this.clearGeologyClipPlan();
|
||
},
|
||
|
||
drawGeologyClipPlan() {
|
||
this.clearGeologyClipPlan();
|
||
this.isDrawGeologyClipPlan = true;
|
||
|
||
inverseTransform = this.getInverseTransform(this.my3dtiles);
|
||
|
||
window.viewer._container.style.cursor = "pointer";
|
||
|
||
// 取消双击事件-追踪该位置
|
||
window.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
|
||
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
|
||
);
|
||
|
||
handlerGeologyClipPlan = new Cesium.ScreenSpaceEventHandler(
|
||
window.viewer.scene.canvas
|
||
);
|
||
handlerGeologyClipPlan.setInputAction((event) => {
|
||
if (
|
||
!this.my3dtiles.clippingPlanes ||
|
||
!this.my3dtiles.clippingPlanes._planes.length
|
||
) {
|
||
const pick = window.viewer.scene.pickPosition(event.position);
|
||
const pickWGS = this.cart3ToWGS(pick);
|
||
const pickModel = window.viewer.scene.pick(event.position);
|
||
if (pickModel) {
|
||
drawList.push(pickWGS);
|
||
|
||
if (activeShapePoints.length === 0) {
|
||
floatingPoint = this.createPoint(pick);
|
||
floatingPointList.push(floatingPoint);
|
||
activeShapePoints.push(pick);
|
||
var dynamicPositions = new Cesium.CallbackProperty(
|
||
function () {
|
||
return new Cesium.PolygonHierarchy(activeShapePoints);
|
||
},
|
||
false
|
||
);
|
||
activeShape = this.drawShape(dynamicPositions);
|
||
}
|
||
activeShapePoints.push(pick);
|
||
floatingPointList.push(this.createPoint(pick));
|
||
}
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
|
||
handlerGeologyClipPlan.setInputAction((event) => {
|
||
if (Cesium.defined(floatingPoint)) {
|
||
var newPosition = window.viewer.scene.pickPosition(
|
||
event.endPosition
|
||
);
|
||
if (Cesium.defined(newPosition)) {
|
||
floatingPoint.position.setValue(newPosition);
|
||
activeShapePoints.pop();
|
||
activeShapePoints.push(newPosition);
|
||
}
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||
|
||
handlerGeologyClipPlan.setInputAction((event) => {
|
||
if (
|
||
!this.my3dtiles.clippingPlanes ||
|
||
!this.my3dtiles.clippingPlanes._planes.length
|
||
) {
|
||
if (drawList.length < 3) {
|
||
this.$message({
|
||
message: "提示：需要绘制三个以上点, 请继续绘制！",
|
||
type: "warning",
|
||
});
|
||
} else {
|
||
this.terminateShape();
|
||
const unionClippingRegions =
|
||
this.modelType === "0" ? true : false;
|
||
drawList = this.isDirRes(drawList, unionClippingRegions);
|
||
const Planes = [];
|
||
for (let i = 0; i < drawList.length; i++) {
|
||
if (i === drawList.length - 1) {
|
||
Planes.push(
|
||
this.createPlane(
|
||
drawList[i],
|
||
drawList[0],
|
||
inverseTransform
|
||
)
|
||
);
|
||
} else {
|
||
Planes.push(
|
||
this.createPlane(
|
||
drawList[i],
|
||
drawList[i + 1],
|
||
inverseTransform
|
||
)
|
||
);
|
||
}
|
||
}
|
||
console.log(Planes);
|
||
const PlaneCollection = new Cesium.ClippingPlaneCollection({
|
||
planes: Planes,
|
||
unionClippingRegions, // 再做优化
|
||
});
|
||
this.my3dtiles.clippingPlanes = PlaneCollection;
|
||
}
|
||
|
||
handlerGeologyClipPlan.removeInputAction(
|
||
Cesium.ScreenSpaceEventType.LEFT_CLICK
|
||
);
|
||
handlerGeologyClipPlan.removeInputAction(
|
||
Cesium.ScreenSpaceEventType.RIGHT_CLICK
|
||
);
|
||
handlerGeologyClipPlan.removeInputAction(
|
||
Cesium.ScreenSpaceEventType.MOUSE_MOVE
|
||
);
|
||
handlerGeologyClipPlan = null;
|
||
this.isDrawGeologyClipPlan = false;
|
||
window.viewer._container.style.cursor = "default";
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
||
},
|
||
getInverseTransform(tileSet) {
|
||
let transform;
|
||
const tmp = tileSet.root.transform;
|
||
if ((tmp && tmp.equals(Cesium.Matrix4.IDENTITY)) || !tmp) {
|
||
transform = Cesium.Transforms.eastNorthUpToFixedFrame(
|
||
tileSet.boundingSphere.center
|
||
);
|
||
} else {
|
||
transform = Cesium.Matrix4.fromArray(tileSet.root.transform);
|
||
}
|
||
return Cesium.Matrix4.inverseTransformation(
|
||
transform,
|
||
new Cesium.Matrix4()
|
||
);
|
||
},
|
||
|
||
cart3ToWGS(cart3) {
|
||
return {
|
||
lat: Cesium.Math.toDegrees(
|
||
Cesium.Cartographic.fromCartesian(cart3).latitude
|
||
),
|
||
lng: Cesium.Math.toDegrees(
|
||
Cesium.Cartographic.fromCartesian(cart3).longitude
|
||
),
|
||
};
|
||
},
|
||
|
||
createPlane(p1, p2, inverseTransform) {
|
||
// 将仅包含经纬度信息的p1,p2，转换为相应坐标系的cartesian3对象
|
||
const p1C3 = this.getOriginCoordinateSystemPoint(
|
||
p1,
|
||
inverseTransform
|
||
);
|
||
const p2C3 = this.getOriginCoordinateSystemPoint(
|
||
p2,
|
||
inverseTransform
|
||
);
|
||
|
||
// 定义一个垂直向上的向量up
|
||
const up = new Cesium.Cartesian3(0, 0, 10);
|
||
// right 实际上就是由p1指向p2的向量
|
||
const right = Cesium.Cartesian3.subtract(
|
||
p2C3,
|
||
p1C3,
|
||
new Cesium.Cartesian3()
|
||
);
|
||
|
||
// 计算normal， right叉乘up，得到平面法向量，这个法向量指向right的右侧
|
||
let normal = Cesium.Cartesian3.cross(
|
||
right,
|
||
up,
|
||
new Cesium.Cartesian3()
|
||
);
|
||
normal = Cesium.Cartesian3.normalize(normal, normal);
|
||
|
||
// 由于已经获得了法向量和过平面的一点，因此可以直接构造Plane,并进一步构造ClippingPlane
|
||
const planeTmp = Cesium.Plane.fromPointNormal(p1C3, normal);
|
||
return Cesium.ClippingPlane.fromPlane(planeTmp);
|
||
},
|
||
|
||
getOriginCoordinateSystemPoint(point, inverseTransform) {
|
||
const val = Cesium.Cartesian3.fromDegrees(point.lng, point.lat);
|
||
return Cesium.Matrix4.multiplyByPoint(
|
||
inverseTransform,
|
||
val,
|
||
new Cesium.Cartesian3(0, 0, 0)
|
||
);
|
||
},
|
||
clearGeologyClipPlan() {
|
||
floatingPointList = [];
|
||
activeShapePoints = [];
|
||
if (geologyClipPlanObj) {
|
||
geologyClipPlanObj.clear();
|
||
geologyClipPlanObj = null;
|
||
}
|
||
this.isDrawGeologyClipPlan = false;
|
||
if (window.TilesetsList.length > 0) {
|
||
let tilestObj = window.TilesetsList[0].tileset;
|
||
tilestObj.clippingPlanes
|
||
? (tilestObj.clippingPlanes.removeAll(),
|
||
(tilestObj.clippingPlanes = undefined))
|
||
: "";
|
||
}
|
||
|
||
my3dtiles = undefined;
|
||
drawList = [];
|
||
},
|
||
|
||
isDirRes(polygon, isClockwise) {
|
||
debugger;
|
||
var lineStringList = [];
|
||
polygon.forEach((p) => {
|
||
lineStringList.push([p.lng, p.lat]);
|
||
});
|
||
// lineStringList.push([polygon[0]['lng'],polygon[0]['lat']]);
|
||
|
||
var clockwiseRing = turf.lineString(lineStringList);
|
||
let isR = turf.booleanClockwise(clockwiseRing);
|
||
|
||
var points = [];
|
||
if (isClockwise) {
|
||
if (!isR) {
|
||
points = polygon;
|
||
} else {
|
||
var count = 0;
|
||
for (var ii = polygon.length - 1; ii >= 0; ii--) {
|
||
points[count] = polygon[ii];
|
||
count++;
|
||
}
|
||
}
|
||
} else {
|
||
if (isR) {
|
||
points = polygon;
|
||
} else {
|
||
var count = 0;
|
||
for (var ii = polygon.length - 1; ii >= 0; ii--) {
|
||
points[count] = polygon[ii];
|
||
count++;
|
||
}
|
||
}
|
||
}
|
||
return points;
|
||
},
|
||
|
||
drawShape(positionData) {
|
||
var shape = window.viewer.entities.add({
|
||
polygon: {
|
||
hierarchy: positionData,
|
||
material: new Cesium.ColorMaterialProperty(
|
||
Cesium.Color.BLUE.withAlpha(0.2)
|
||
),
|
||
},
|
||
});
|
||
return shape;
|
||
},
|
||
|
||
createPoint(worldPosition) {
|
||
var point = window.viewer.entities.add({
|
||
position: worldPosition,
|
||
point: {
|
||
color: Cesium.Color.RED,
|
||
pixelSize: 5,
|
||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
},
|
||
});
|
||
return point;
|
||
},
|
||
|
||
terminateShape() {
|
||
activeShapePoints.pop();
|
||
var pol = this.drawShape(activeShapePoints);
|
||
floatingPointList.forEach((p) => {
|
||
window.viewer.entities.remove(p);
|
||
});
|
||
window.viewer.entities.remove(floatingPoint);
|
||
window.viewer.entities.remove(activeShape);
|
||
window.viewer.entities.remove(pol);
|
||
floatingPoint = undefined;
|
||
activeShape = undefined;
|
||
|
||
activeShapePoints = [];
|
||
},
|
||
},
|
||
mounted() {
|
||
this.initViewer();
|
||
},
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|