动态绘制面
let addPolygon = [];
function draw() {
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
let movePosition = [];
let moveEntity = null;
let positions = [];
let polygonEntity = null;
let pointEntities = [];
handler.setInputAction(event => {
moveEntity && viewer.entities.remove(moveEntity);
movePosition = [];
movePosition.push(changeToThree(event.endPosition));
viewer.entities.add({
position: movePosition[0],
point: {
pixelSize: 8,
color: Cesium.Color.fromCssColorString('blue').withAlpha(0.7),
},
});
moveEntity = viewer.entities.values.slice(-1)[0];
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(event => {
positions.push(changeToThree(event.position));
if (positions.length === 1) {
polygonEntity = viewer.entities.add({
polygon: {
hierarchy: new Cesium.CallbackProperty(function() {
return new Cesium.PolygonHierarchy(positions.concat(movePosition));
}, false),
material: Cesium.Color.fromCssColorString('blue').withAlpha(0.1),
},
polyline: {
positions: new Cesium.CallbackProperty(function() {
return positions.concat(movePosition).concat([positions[0]]);
}, false),
material: Cesium.Color.fromCssColorString('blue').withAlpha(0.5),
clampToGround: true,
width: 3,
},
});
}
viewer.entities.add({
position: changeToThree(event.position),
point: {
pixelSize: 8,
color: Cesium.Color.fromCssColorString('blue').withAlpha(0.7),
},
});
pointEntities.push(viewer.entities.values.slice(-1)[0]);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(() => {
pointEntities.forEach(item => {
viewer.entities.remove(item);
});
if (positions.length >= 3) {
addPolygon.push(polygonEntity);
polygonEntity.polygon.hierarchy = positions;
const polygon = turf.polygon([changeToLnglgt(positions.concat(positions[0]))]);
const S = turf.area(polygon);
const lineString = turf.lineString(changeToLnglgt(positions.concat(positions[0])));
const C = turf.length(lineString);
console.log(`该面实体的面积为${ S / 1000000 }km^2, 该面实体的周长为${ C }km`)
} else {
viewer.entities.remove(polygonEntity);
};
addPolygon.push(polygonEntity);
movePosition = [];
viewer.entities.remove(moveEntity);
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
};
function clearAll() {
addPolygon.forEach(item => {
viewer.entities.remove(item);
});
};
function changeToThree(position) {
if (!position) return [];
return viewer.scene.globe.pick(viewer.camera.getPickRay(position), viewer.scene);
};