Cesium專欄-地形開挖2-任意多邊形開挖（附源碼下載）

時間 2019-11-06

原文原文鏈接

「任意多邊形地形開挖」是「地形開挖」的補充篇，在這節裏，咱們介紹關於如何使用任意多邊形對地形進行開挖，同時，因爲有很多小夥伴也諮詢了關於「地形開挖」篇後序內容中的填充地形的效果，以前沒放出來，是想讓小夥伴有個思考的過程，如今放出來，也是提供一種解決方法。ui

效果圖
spa

直接上代碼說明方法插件

一、使用鼠標交互事件，採集須要開挖的範圍code

注：這裏要特別注意一點，爲了下面的計算 ClippingPlane 方便，採集點順序最好是逆時針，若是點集的組織是順時針，須要首先逆序成逆時針，關於若是判斷一個點集是不是順時針或者是逆時針，能夠用向量法求多邊形面積的方式，若是爲正，則爲順時針，否者爲逆時針。或者使用JS插件計算，好比turf.js。
orm

var points = [
new Cesium.Cartesian3(-1715292.6999753984, 4993153.157628936, 3566663.752912529),
new Cesium.Cartesian3(-1715285.8150713604, 4993167.072601330,3566647.6921528564),
new Cesium.Cartesian3(-1715286.5985765400, 4993181.309761941, 3566627.519787549),
new Cesium.Cartesian3(-1715299.0249209427, 4993191.177501195, 3566607.861264360),
new Cesium.Cartesian3(-1715349.5762367432, 4993176.675656664, 3566603.878289345),
new Cesium.Cartesian3(-1715375.5538853381, 4993159.990032478, 3566614.671147202),
new Cesium.Cartesian3(-1715370.1945772346, 4993141.041835706, 3566643.580587877),
new Cesium.Cartesian3(-1715359.7019716015, 4993131.063945592, 3566662.468046927),
new Cesium.Cartesian3(-1715321.9141253997, 4993137.762602262, 3566671.205164391)
];

二、根據點集計算 ClippingPlane （這個計算方式來源於官網示例）blog

var pointsLength = points.length;
var clippingPlanes = []; // 存儲ClippingPlane集合
for (var i = 0; i < pointsLength; ++i) {
var nextIndex = (i + 1) % pointsLength;
var midpoint = Cesium.Cartesian3.add(points[i], points[nextIndex], new Cesium.Cartesian3());
midpoint = Cesium.Cartesian3.multiplyByScalar(midpoint, 0.5, midpoint);
var up = Cesium.Cartesian3.normalize(midpoint, new Cesium.Cartesian3());
var right = Cesium.Cartesian3.subtract(points[nextIndex], midpoint, new Cesium.Cartesian3());
right = Cesium.Cartesian3.normalize(right, right);
var normal = Cesium.Cartesian3.cross(right, up, new Cesium.Cartesian3());
normal = Cesium.Cartesian3.normalize(normal, normal);
var originCenteredPlane = new Cesium.Plane(normal, 0.0);
var distance = Cesium.Plane.getPointDistance(originCenteredPlane, midpoint);
clippingPlanes.push(new Cesium.ClippingPlane(normal, distance));
}