在绘制线和面在Ceisum中GitHub中以有轮子(drawhelper),该轮子仅能绘制在2D层次,在Terrain上则不能绘制。在Terrain上绘制线和面,是进行淹没分析和剖面分析的第一步,在这里在展示如何在Terrain上绘制线和面(主要来源于官方demo)
效果:
demo示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>地形上画线和面</title>
<style>
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#menu {
position: absolute;
top: 80px;
left: 10px;
z-index: 999;
}
</style>
<link href="../script/Cesium-1.56.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
<script src="../script/Cesium-1.56.1/Build/Cesium/Cesium.js"></script>
<script src="../../Scripts/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="menu">
<p>
<button id="drawline">画线</button>
<button id="drawplygon">画面</button>
</p>
</div>
<script>
//创建地形图层
var rectangle = new Cesium.Rectangle(Cesium.Math.toRadians(5.9993076), Cesium.Math.toRadians(-0.00025749207),
Cesium.Math.toRadians(7.00078), Cesium.Math.toRadians(1.001215));
var terrainLayer = new Cesium.CesiumTerrainProvider({
url: 'http://localhost:9002/api/wmts/terrain/671bf0e4425e421a8fbe701e2b4db959',
requestWaterMask: true,
credit: 'http://www.bjxbsj.cn',
});
//创建容器
var viewer = new Cesium.Viewer('cesiumContainer', {
selectionIndicator: false,
infoBox: false,
terrainProvider: terrainLayer
});
//定位到目标地形
viewer.scene.camera.flyTo({ destination: rectangle });
//取消左键双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//淹没分析entity
var entity=null;
function createPoint(worldPosition) {
var point = viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.WHITE,
pixelSize: 5,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
});
return point;
}
var drawingMode = 'line';
function drawShape(positionData) {
var shape;
if (drawingMode === 'line') {
shape = viewer.entities.add({
polyline: {
positions: positionData,
clampToGround: true,
material: new Cesium.ColorMaterialProperty(Cesium.Color.GOLD.withAlpha(0.7)),
width: 3
}
});
}
else if (drawingMode === 'polygon') {
shape = viewer.entities.add({
polygon: {
hierarchy: positionData,
material: new Cesium.ColorMaterialProperty(Cesium.Color.CHARTREUSE.withAlpha(0.7))
}
});
}
console.log(shape);
return shape;
}
var activeShapePoints = [];
var activeShape;
var floatingPoint;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
console.log('This browser does not support polylines on terrain.');
return;
}
// 使用viewer.scene.pickPosition` 来代替`viewer.camera.pickEllipsoid` 这样当鼠标掠过terrain能得到正确的坐标
var earthPosition = viewer.scene.pickPosition(event.position);
// `earthPosition` will be undefined if our mouse is not over the globe.
if (Cesium.defined(earthPosition)) {
if (activeShapePoints.length === 0) {
floatingPoint = createPoint(earthPosition);
activeShapePoints.push(earthPosition);
var dynamicPositions = new Cesium.CallbackProperty(function () {
return activeShapePoints;
}, false);
activeShape = drawShape(dynamicPositions);
}
activeShapePoints.push(earthPosition);
createPoint(earthPosition);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (event) {
if (Cesium.defined(floatingPoint)) {
var newPosition = viewer.scene.pickPosition(event.endPosition);
if (Cesium.defined(newPosition)) {
floatingPoint.position.setValue(newPosition);
activeShapePoints.pop();
activeShapePoints.push(newPosition);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// Redraw the shape so it's not dynamic and remove the dynamic shape.
function terminateShape() {
activeShapePoints.pop();
entity=drawShape(activeShapePoints);
viewer.entities.remove(floatingPoint);
viewer.entities.remove(activeShape);
floatingPoint = undefined;
activeShape = undefined;
activeShapePoints = [];
}
handler.setInputAction(function (event) {
terminateShape();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
$("#drawline").click(function () {
terminateShape();
drawingMode = 'line';
});
$("#drawplygon").click(function () {
terminateShape();
drawingMode = 'polygon';
});
</script>
</body>
</html>