html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="description" content="Draw point on terrain with mouse clicks.">
<meta name="cesium-sandcastle-labels" content="Showcases">
<title>Draw point</title>
<script type="text/javascript" src="Sandcastle-header.js"></script>
<script type="module" src="load-cesium-es6.js"></script>
<script src="./Build/CesiumUnminified/Cesium.js"></script>
<script>window.CESIUM_BASE_URL = "./Build/CesiumUnminified/";</script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(bucket.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table class="infoPanel">
<tbody>
<tr>
<td>左键单击绘制点,右击结束线面绘制。</td>
</tr>
</tbody>
</table>
</div>
<script src="./code.js"> </script>
</body>
</html>
code.js代码
Cesium.Ion.defaultAccessToken='你的Token';
window.startup = async function (Cesium) {
'use strict';
//增加视图区
const viewer = new Cesium.Viewer("cesiumContainer", {
selectionIndicator: false,
infoBox: false,
terrainProvider: Cesium.createWorldTerrain(),
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=你的Token" ,
layer: "vec",
style: "default",
tileMatrixSetID: "w",
format: "tiles",
maximumLevel: 18,
}),
});
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
function createPoint(worldPosition) {
const point = viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.RED,
pixelSize: 5,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
return point;
}
let drawingMode = "line";
function drawShape(positionData) {
let shape;
if (drawingMode === "line") {
shape = viewer.entities.add({
polyline: {
positions: positionData,
clampToGround: true,
material: Cesium.Color.RED,
width: 3,
},
});
} else if (drawingMode === "polygon") {
shape = viewer.entities.add({
polygon: {
hierarchy: positionData,
material: new Cesium.ColorMaterialProperty(
Cesium.Color.RED.withAlpha(0.7)
),
},
});
}
return shape;
}
let activeShapePoints = [];
let activeShape;
let floatingPoint;
//窗口事件句柄
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
const ray = viewer.camera.getPickRay(event.position);//根据鼠标点击坐标和相机坐标构建射线
const earthPosition = viewer.scene.globe.pick(ray, viewer.scene);//射线与球面求交,在地面的交点
// `earthPosition` will be undefined if our mouse is not over the globe.
if (Cesium.defined(earthPosition)) //鼠标点击在地球范围内
{
if(drawingMode === "point"){
createPoint(earthPosition);
}
else{
if (activeShapePoints.length === 0) {
floatingPoint = createPoint(earthPosition);
activeShapePoints.push(earthPosition);
const dynamicPositions = new Cesium.CallbackProperty(function () {
if (drawingMode === "polygon") {
return new Cesium.PolygonHierarchy(activeShapePoints);
}
return activeShapePoints;
}, false);//回调函数
activeShape = drawShape(dynamicPositions);
}
activeShapePoints.push(earthPosition);
createPoint(earthPosition);
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);//鼠标左键
handler.setInputAction(function (event) {
if (Cesium.defined(floatingPoint)) {
const ray = viewer.camera.getPickRay(event.endPosition);
const newPosition = viewer.scene.globe.pick(ray, viewer.scene);
if (Cesium.defined(newPosition)) {
floatingPoint.position.setValue(newPosition);
activeShapePoints.pop();
activeShapePoints.push(newPosition);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);//鼠标移动
//移除临时绘制图像.
function terminateShape() {
activeShapePoints.pop();
drawShape(activeShapePoints);
viewer.entities.remove(floatingPoint);
viewer.entities.remove(activeShape);
floatingPoint = undefined;
activeShape = undefined;
activeShapePoints = [];
}
handler.setInputAction(function (event) {
terminateShape();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);//鼠标右键
const options = [
{
text: "绘制线",
onselect: function () {
if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
window.alert(
"This browser does not support polylines on terrain."
);
}
terminateShape();
drawingMode = "line";
},
},
{
text: "绘制面",
onselect: function () {
terminateShape();
drawingMode = "polygon";
},
},
{
text: "绘制点",
onselect: function () {
terminateShape();
drawingMode = "point";
},
},
];
Sandcastle.addToolbarMenu(options);
//缩放至点
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);
//Sandcastle_End
Sandcastle.finishedLoading();
};
if (typeof Cesium !== 'undefined') {
window.startupCalled = true;
window.startup(Cesium).catch((error) => {
"use strict";
console.error(error);
});
}
效果:
评论(0)
您还未登录,请登录后发表或查看评论