<!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>Hello World!</title>
<script src="./node_modules/cesium/Build/Cesium/Cesium.js"></script>
<script src="./js/Sandcastle-header.js"></script>
<link href="./node_modules/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar" style="margin: 5px;padding: 2px 5px;position: absolute;top:50px"></div>
<script>
var activeShapePoints = [];//每个点的X,Y,Z轴的坐标
var activeShape;//绘制图层的容器
var floatingPoint;
//Cesium.Ion.defaultAccessToken = 'your_access_token';
//查看器
var viewer = new Cesium.Viewer('cesiumContainer', {
selectionIndicator: false,//是否显示选取指示器组件 点击时出现的
infoBox: false,//是否显示信息框 点击时右上角出现的
// 注释时相当于使用默认地形,解开注释相当于使用全球地形
terrainProvider: Cesium.createWorldTerrain()//地形图层提供者,仅baseLayerPicker设为false有意义
});
console.log(viewer)
//new Cesium.ScreenSpaceEventHandler(element);处理用户输入的事件,可以添加自定义功能以在用户输入输入时执行
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
//双击鼠标左键清除默认事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//绘制点
function createPoint(worldPosition) {
var point = viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.FIREBRICK,//设置颜色
pixelSize: 7,
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,
width: 3,
material: new Cesium.ColorMaterialProperty(Cesium.Color.FIREBRICK.withAlpha(0.7))
},
});
} else if (drawingMode === 'polygon') {
shape = viewer.entities.add({
polygon: {
hierarchy: positionData,
material: new Cesium.ColorMaterialProperty(Cesium.Color.FIREBRICK.withAlpha(0.7))
}
});
} else if (drawingMode === 'circle') {
//当positionData为数组时绘制最终图,如果为function则绘制动态图
var value = typeof positionData.getValue === 'function' ? positionData.getValue(0) : positionData;
shape = viewer.entities.add({
position: activeShapePoints[0],
name: 'Blue translucent, rotated, and extruded ellipse with outline',
type: 'Selection tool',
ellipse: {
semiMinorAxis: new Cesium.CallbackProperty(function () {
//半径 两点间距离
var r = Math.sqrt(Math.pow(value[0].x - value[value.length - 1].x, 2) + Math
.pow(value[0].y - value[value.length - 1].y, 2));
return r ? r : r + 1;
}, false),
semiMajorAxis: new Cesium.CallbackProperty(function () {
var r = Math.sqrt(Math.pow(value[0].x - value[value.length - 1].x, 2) + Math
.pow(value[0].y - value[value.length - 1].y, 2));
return r ? r : r + 1;
}, false),
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true
}
});
} else if (drawingMode === 'rectangle') {
//当positionData为数组时绘制最终图,如果为function则绘制动态图
var arr = typeof positionData.getValue === 'function' ? positionData.getValue(0) : positionData;
shape = viewer.entities.add({
name: 'Blue translucent, rotated, and extruded ellipse with outline',
rectangle: {
coordinates: new Cesium.CallbackProperty(function () {
var obj = Cesium.Rectangle.fromCartesianArray(arr);
//if(obj.west==obj.east){ obj.east+=0.000001};
//if(obj.south==obj.north){obj.north+=0.000001};
return obj;
}, false),
material: Cesium.Color.RED.withAlpha(0.5)
}
});
}
return shape;
}
//鼠标左键
//设置要在输入事件上执行的功能。
handler.setInputAction(function (event) {
// scene.pickPosition只有在开启地形深度检测,且不使用默认地形时是准确的。
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 () {
if (drawingMode === 'polygon') {
return new Cesium.PolygonHierarchy(activeShapePoints);//new Cesium.PolygonHierarchy;定义多边形
}
return activeShapePoints;//抛出点位信息
}, false);
console.log(activeShapePoints)
activeShape = drawShape(dynamicPositions); //绘制动态图
console.log(activeShape)
}
activeShapePoints.push(earthPosition);
createPoint(earthPosition);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);//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(); //去除最后一个动态点
if (activeShapePoints.length) {
drawShape(activeShapePoints); //如果activeShapePoints中的坐标不为0,绘制最终图
}
//像重置表单一样
viewer.entities.remove(floatingPoint); //去除动态点图形(当前鼠标点)
viewer.entities.remove(activeShape); //去除动态图形
floatingPoint = undefined;
activeShape = undefined;
activeShapePoints = [];
}
//鼠标右键单击事件
handler.setInputAction(function (event) {
viewer.entities.removeAll();//删除所有
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);//表示鼠标右键单击事件。
//鼠标左键双击事件
handler.setInputAction(function(event){
terminateShape();
},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)//表示鼠标左键双击事件。
var options = [{
text: '绘制线',
onselect: function () {
terminateShape();
drawingMode = 'line';
}
}, {
text: '绘制多边形',
onselect: function () {
terminateShape();
drawingMode = 'polygon';
}
}, {
text: '绘制圆形',
onselect: function () {
terminateShape();
drawingMode = 'circle';
}
}, {
text: '绘制矩形',
onselect: function () {
terminateShape();
drawingMode = 'rectangle';
}
}];
Sandcastle.addToolbarMenu(options);
// Cesium.Cartesian3.fromDegrees(经度,纬度,高度(可选),椭圆体(可选),笛卡尔3(可选)).
// new Cesium.Cartesian3(X,Y,Z)
viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(-122.2058, 46.1955, 1000.0), new Cesium.Cartesian3(5000.0,
5000.0, 5000.0));//设置相机(目标,偏移量)
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
viewer.scene.globe.depthTestAgainstTerrain = true;//开启地形深度检测,如果鼠标指针和点不重合,这个选项设置为true试试。
</script>
</body>
</html>
cesium加载线面
最新推荐文章于 2024-06-03 17:33:35 发布